style(admin): unify color tokens (deep botanical + amber)

- --admin-bg: warm cream (#FAF7F0) - --admin-text-primary: ink black (#1A1814) - --admin-text-muted: warm grey (#8A867E) — was too dim - --admin-border: soft beige (#E8E4D7) — was too dirty - --admin-primary: deep botanical (#1F4D2A) - --admin-accent: warm amber (#B8761E) — the 'one thing to do' - --admin-warning: amber (was #aba278 — looked like dirt) - --admin-danger: warmer rust (#A8321C) - sidebar: deeper, more refined (#2A2520) - drop purple/blue/citrus stat icons in DashboardClient; use semantic tokens - use --admin-warning instead of hardcoded #f59e0b in usage bar
chore(design): admin redesign spec + task checklist
2026-06-17 00:08:46 -06:00 · 2026-06-17 00:07:04 -06:00 · 2026-06-16 23:50:16 -06:00 · 2026-06-16 23:37:00 -06:00 · 2026-06-16 23:29:16 -06:00 · 2026-06-16 23:11:35 -06:00
75 changed files with 4408 additions and 2221 deletions
@@ -176,7 +176,7 @@ jobs:
          # Upload env file and sync build output
          echo "Uploading env file..."
-          scp -o ConnectTimeout=15 -o StrictHostKeyChecking=no "$ENV_FILE" tyler@route.crispygoat.com:$APP_DIR/.env.production
+          scp -o ConnectTimeout=15 -o StrictHostKeyChecking=no "$ENV_FILE" tyler@route.crispygoat.com:$APP_DIR/.env
          echo "Copying .next/..."
          scp -o ConnectTimeout=30 -o StrictHostKeyChecking=no -r .next tyler@route.crispygoat.com:$APP_DIR/
@@ -47,3 +47,4 @@ playwright-report/
 .mcp.json
 .env*
 public/videos/tuxedo-hero.mp4
 .neon
@@ -0,0 +1,71 @@
 -- Migration 003: Batch insert RPCs for tour stop / location seeding
 -- Required by db/seeds/2026-tuxedo-tour-stops.sql and scripts/import-tuxedo-stops.ts
 BEGIN;
 -- admin_create_locations_batch: insert or update locations from tour seed
 -- Payload shape: { name, address, city, state, zip, phone, contact_name, contact_email, notes, active }[]
 CREATE OR REPLACE FUNCTION admin_create_locations_batch(p_brand_id UUID, p_locations JSONB)
 RETURNS VOID LANGUAGE plpgsql SECURITY DEFINER AS $$
 DECLARE
  v_loc JSONB;
 BEGIN
  FOR v_loc IN SELECT * FROM jsonb_array_elements(p_locations)
  LOOP
    INSERT INTO locations (
      brand_id, name, address, city, state, zip,
      phone, contact_name, contact_email, notes, active
    ) VALUES (
      p_brand_id,
      v_loc->>'name',
      v_loc->>'address',
      v_loc->>'city',
      v_loc->>'state',
      NULLIF(v_loc->>'zip', '')::TEXT,
      v_loc->>'phone',
      v_loc->>'contact_name',
      v_loc->>'contact_email',
      v_loc->>'notes',
      COALESCE((v_loc->>'active')::BOOLEAN, true)
    )
    ON CONFLICT DO NOTHING;
  END LOOP;
 END;
 $$;
 -- admin_create_stops_batch: insert stops from tour seed
 -- Payload shape: { city, state, location, date, time, address, zip, cutoff_time, active, notes }[]
 -- date format: '2026-07-22 00:00:00+00' — cast to DATE
 CREATE OR REPLACE FUNCTION admin_create_stops_batch(p_brand_id UUID, p_stops JSONB)
 RETURNS VOID LANGUAGE plpgsql SECURITY DEFINER AS $$
 DECLARE
  v_stop JSONB;
 BEGIN
  FOR v_stop IN SELECT * FROM jsonb_array_elements(p_stops)
  LOOP
    INSERT INTO stops (
      brand_id, name, location, address, city, state, zip,
      date, "time", cutoff_date, status, is_public, notes
    ) VALUES (
      p_brand_id,
      COALESCE(NULLIF(v_stop->>'name', ''), (v_stop->>'location')::TEXT || ' - ' || (v_stop->>'city')::TEXT || ', ' || (v_stop->>'state')::TEXT),
      v_stop->>'location',
      v_stop->>'address',
      v_stop->>'city',
      v_stop->>'state',
      NULLIF(v_stop->>'zip', '')::TEXT,
      CASE
        WHEN v_stop->>'date' IS NULL THEN NULL
        ELSE LEFT(v_stop->>'date', 10)::DATE
      END,
      v_stop->>'time',
      NULLIF(v_stop->>'cutoff_time', '')::DATE,
      'active',
      COALESCE((v_stop->>'active')::BOOLEAN, true),
      v_stop->>'notes'
    );
  END LOOP;
 END;
 $$;
 COMMIT;
@@ -0,0 +1,255 @@
 # Nested Layout Skeleton
 Visual map of how pages nest inside each other in the Next.js App Router.
 Each level persists across navigation — children swap, parents stay.
 ## Mental model
 ```
 ┌─────────────────────────────────────────────────────────────────┐
 │ app/layout.tsx              (root)                              │
 │   html / body / fonts / Providers / Toast / CookieBanner        │
 │   ─────────────────────────────────────────────────────────     │
 │   No global header. Each route group renders its own chrome.    │
 └─────────────────────────────────────────────────────────────────┘
                                  │
        ┌─────────────────────────┼─────────────────────────────┐
        │                         │                             │
        ▼                         ▼                             ▼
   Public routes            Storefronts                   Admin
   (/, /pricing,            (/tuxedo/*,                   (/admin/*)
    /contact, /login)        /indian-river-direct/*)
 ```
 ## Full tree
 ```
 src/app/
 ├── layout.tsx ────────────────────────────────────────────────── [ROOT]
 │   • <html>, <body>
 │   • next/font: Fraunces (display), Manrope (sans), Fragment_Mono
 │   • <Providers> (theme, posthog, sentry, etc.)
 │   • <ToastNotificationContainer />
 │   • <CookieConsentBanner />
 │   ─── pages render INSIDE ───
 │   │
 │   ├── error.tsx              [ROOT-LEVEL] Atelier error page
 │   ├── loading.tsx            [ROOT-LEVEL] "Preparing your harvest"
 │   ├── not-found.tsx          [ROOT-LEVEL] "Off the beaten path"
 │   │
 │   ├── page.tsx               /                  LandingPageClient
 │   │   └── renders its own SiteHeader + Hero + SiteFooter
 │   │
 │   ├── login/
 │   │   ├── page.tsx           /login             LoginClient (standalone)
 │   │   └── loading.tsx        [isolated]
 │   │
 │   ├── cart/
 │   │   ├── page.tsx           /cart              CartClient (standalone)
 │   │   └── loading.tsx
 │   │
 │   ├── checkout/
 │   │   ├── page.tsx           /checkout          CheckoutClient (standalone)
 │   │   ├── loading.tsx
 │   │   └── success/page.tsx   /checkout/success
 │   │
 │   ├── change-password/page.tsx
 │   ├── pricing/page.tsx       + loading.tsx
 │   ├── contact/page.tsx       + loading.tsx
 │   ├── blog/page.tsx
 │   ├── changelog/page.tsx
 │   ├── roadmap/page.tsx
 │   ├── waitlist/page.tsx
 │   ├── security/page.tsx
 │   ├── privacy-policy/page.tsx
 │   ├── terms-and-conditions/page.tsx
 │   ├── maintenance/page.tsx
 │   │
 │   ├── ─── STOREFRONTS ─────────────────────────────────────────
 │   │
 │   ├── tuxedo/
 │   │   ├── layout.tsx ─────────────────────── [TUXEDO CHROME]
 │   │   │   • Dark emerald gradient backdrop
 │   │   │   • Ambient emerald orb (top-right blur)
 │   │   │   • <StorefrontHeader> + <StorefrontFooter> per page
 │   │   │   • BreadcrumbList + LocalBusiness JSON-LD in metadata
 │   │   │   ─── INSIDE ───
 │   │   │   ├── error.tsx
 │   │   │   ├── loading.tsx
 │   │   │   ├── page.tsx                   /tuxedo
 │   │   │   ├── stops/
 │   │   │   │   ├── page.tsx               /tuxedo/stops
 │   │   │   │   ├── loading.tsx
 │   │   │   │   └── [slug]/
 │   │   │   │       ├── page.tsx           /tuxedo/stops/:slug
 │   │   │   │       ├── error.tsx
 │   │   │   │       └── loading.tsx
 │   │   │   ├── about/
 │   │   │   │   ├── layout.tsx
 │   │   │   │   ├── page.tsx               /tuxedo/about
 │   │   │   │   ├── error.tsx
 │   │   │   │   └── loading.tsx
 │   │   │   ├── faq/
 │   │   │   │   ├── layout.tsx
 │   │   │   │   ├── page.tsx               /tuxedo/faq
 │   │   │   │   ├── error.tsx
 │   │   │   │   └── loading.tsx
 │   │   │   ├── contact/
 │   │   │   │   ├── layout.tsx
 │   │   │   │   ├── page.tsx               /tuxedo/contact
 │   │   │   │   ├── error.tsx
 │   │   │   │   └── loading.tsx
 │   │   │   ├── products/
 │   │   │   │   └── [slug]/page.tsx        /tuxedo/products/:slug
 │   │   │   └── time-clock/page.tsx        /tuxedo/time-clock
 │   │
 │   ├── indian-river-direct/
 │   │   ├── layout.tsx ─────────────────── [IRD CHROME]
 │   │   │   • Light blue/white glass gradient backdrop
 │   │   │   • Three decorative blue orbs
 │   │   │   • <StorefrontHeader> + <StorefrontFooter> per page
 │   │   │   • LocalBusiness (FL, family-owned 1985) JSON-LD
 │   │   │   ─── INSIDE ───
 │   │   │   ├── error.tsx
 │   │   │   ├── loading.tsx
 │   │   │   ├── page.tsx                   /indian-river-direct
 │   │   │   ├── stops/
 │   │   │   │   ├── page.tsx
 │   │   │   │   └── [slug]/
 │   │   │   │       ├── page.tsx
 │   │   │   │       ├── error.tsx
 │   │   │   │       └── loading.tsx
 │   │   │   ├── about/   (layout + page + error + loading)
 │   │   │   ├── faq/     (layout + page + error + loading)
 │   │   │   └── contact/ (layout + page + error + loading)
 │   │
 │   ├── ─── ADMIN ──────────────────────────────────────────────
 │   │
 │   └── admin/
 │       ├── layout.tsx ───────────────────── [ADMIN SHELL]
 │       │   • dynamic = "force-dynamic"  (reads cookies)
 │       │   • getAdminUser() → AdminSidebar + content area
 │       │   • ToastProvider + ToastContainer
 │       │   • Sidebar persists across all /admin/* routes
 │       │   • Parchment background via .admin-section
 │       │   ─── INSIDE ───
 │       │   ├── error.tsx                  Admin error page
 │       │   ├── loading.tsx                Skeleton: header + stats + table
 │       │   ├── page.tsx                   /admin  (Dashboard)
 │       │   │
 │       │   ├── orders/
 │       │   │   ├── page.tsx               /admin/orders
 │       │   │   ├── [id]/page.tsx          /admin/orders/:id
 │       │   │   └── new/page.tsx           /admin/orders/new
 │       │   │
 │       │   ├── products/
 │       │   │   ├── page.tsx               /admin/products
 │       │   │   ├── [id]/page.tsx
 │       │   │   ├── new/page.tsx
 │       │   │   └── import/page.tsx
 │       │   │
 │       │   ├── stops/
 │       │   │   ├── page.tsx               /admin/stops
 │       │   │   ├── [id]/page.tsx
 │       │   │   └── new/page.tsx
 │       │   │
 │       │   ├── communications/
 │       │   │   ├── loading.tsx
 │       │   │   ├── page.tsx               /admin/communications
 │       │   │   ├── compose/page.tsx
 │       │   │   ├── campaigns/[id]/page.tsx
 │       │   │   ├── contacts/page.tsx
 │       │   │   ├── logs/page.tsx
 │       │   │   ├── segments/page.tsx
 │       │   │   ├── settings/page.tsx
 │       │   │   ├── templates/page.tsx
 │       │   │   ├── templates/[id]/page.tsx
 │       │   │   ├── analytics/page.tsx
 │       │   │   ├── abandoned-carts/page.tsx
 │       │   │   └── welcome-sequence/page.tsx
 │       │   │
 │       │   ├── settings/  (sub-tree of 13 pages: billing, brand,
 │       │   │                payments, shipping, ai, apps,
 │       │   │                integrations, square-sync, ...)
 │       │   │
 │       │   ├── route-trace/  (lots, lookup, settings)
 │       │   ├── me/
 │       │   ├── pickup/                  Store-employee landing
 │       │   ├── sales/import/
 │       │   ├── import/
 │       │   ├── analytics/
 │       │   ├── command-center/
 │       │   ├── advanced/
 │       │   ├── reports/
 │       │   ├── shipping/
 │       │   ├── taxes/
 │       │   ├── time-tracking/
 │       │   ├── water-log/  (sub-tree)
 │       │   ├── wholesale/
 │       │   └── launch-checklist/
 │       │
 │       ├── wholesale/         (separate sub-app, not under admin/layout)
 │       │   ├── login/page.tsx
 │       │   ├── portal/page.tsx
 │       │   ├── register/page.tsx
 │       │   ├── employee/page.tsx
 │       │   └── payment/{success,cancel}/page.tsx
 │       │
 │       ├── water/             (separate sub-app, not under admin/layout)
 │       │   ├── page.tsx
 │       │   ├── loading.tsx
 │       │   └── admin/  (login + page)
 │       │
 │       ├── ird/time-clock/    (time-clock for IRD employees)
 │       ├── trace/[lotNumber]/page.tsx     (public route-trace lookup)
 │       └── protected-example/page.tsx     (smoke test for middleware)
 ```
 ## Key nesting rules
 1. **The root `app/layout.tsx` is the only one that renders `<html>` and `<body>`**. Every other layout is a child of it.
 2. **A `layout.tsx` in a folder wraps every `page.tsx` in that folder and all subfolders**. Children swap; layout state persists.
 3. **`loading.tsx` and `error.tsx` are per-folder** — Next.js shows them when navigating to a sibling `page.tsx`. They re-render as you move between sections.
 4. **Storefronts are fully isolated**: each `tuxedo/layout.tsx` and `indian-river-direct/layout.tsx` provides its own backdrop and lets individual pages render their own `StorefrontHeader` / `StorefrontFooter`.
 5. **Admin is a single SPA-feeling shell**: navigating between `/admin/orders` and `/admin/products` keeps the `AdminSidebar` mounted, only the content area swaps.
 ## Things that DO NOT yet nest (gaps)
 | Page | Issue | Fix |
 |---|---|---|
 | `/cart` | No shared layout with `/checkout` | Add `app/(shop)/layout.tsx` route group to wrap both |
 | `/wholesale/*` | Wholesale pages have no shared layout | Add `app/wholesale/layout.tsx` with auth gate + nav |
 | `/water/*` | Water pages have no shared layout | Add `app/water/layout.tsx` |
 | `/admin/communications/*` | 13 pages share no sub-layout | Could add `app/admin/communications/layout.tsx` with section tabs |
 | `/admin/settings/*` | 13 settings pages share no sub-layout | Add `app/admin/settings/layout.tsx` with settings sidebar |
 ## How to add a nested layout
 ```bash
 # Example: add a settings sub-layout
 mkdir -p src/app/admin/settings
 # Create src/app/admin/settings/layout.tsx
 # It will wrap every page under /admin/settings/* automatically.
 ```
 ```tsx
 // src/app/admin/settings/layout.tsx
 export default function SettingsLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-[14rem_1fr] gap-6">
      <SettingsNav />     {/* sticks while content swaps */}
      <section>{children}</section>
    </div>
  );
 }
 ```
 ## How to add parallel routes (modals as overlays)
 ```bash
 mkdir -p 'src/app/@modal'
 mkdir -p 'src/app/admin/products/(.)new'   # intercepts /admin/products/new
 # Layout returns <>{children}{modal}</>
 ```
 This makes `/admin/products/new` open as a modal over `/admin/products` instead of a hard navigation.
@@ -0,0 +1,120 @@
 # Admin Redesign — Task Checklist
 > Working branch: `design/ui-revamp-2026-06`
 > Spec: `docs/superpowers/specs/2026-06-17-admin-redesign.md`
 > Started: 2026-06-17
 > Deadline: tomorrow
 ## How to use this file
 - `[ ]` unchecked → not done · `[x]` checked → done
 - Tick a box by changing `[ ]` to `[x]`
 - Add free-form notes in the **Notes** column
 - One commit per task (or per cluster of related tasks)
 - Revert a task with `git reset --hard <commit-before-task>`
 - Full revert: `git checkout main && git branch -D design/ui-revamp-2026-06`
 ## Revert cheatsheet
 ```bash
 git status                           # what's dirty
 git stash                            # save uncommitted, discard
 git diff                             # see what's staged
 git log --oneline -10                # see recent commits
 git reset --hard <sha>               # nuke back to that commit
 git checkout main                    # abandon branch, keep work
 git branch -D design/ui-revamp-2026-06  # delete the branch
 ```
 ---
 ## Phase 0 — Setup
 | Done | Task | Files | Notes | Commit |
 |---|---|---|---|---|
 | [x] | Create feature branch | — | `design/ui-revamp-2026-06` off `main` | — |
 | [x] | Write design spec | `docs/superpowers/specs/2026-06-17-admin-redesign.md` | aesthetic, color, IA, phases | — |
 | [x] | Write this checklist | `docs/superpowers/plans/2026-06-17-admin-redesign-checklist.md` | — | — |
 | [ ] | Commit baseline | both files above | `chore: design spec + checklist` | (will commit after writing this) |
 ## Phase 1 — Foundation (color + design tokens)
 | Done | Task | Files | Notes | Commit |
 |---|---|---|---|---|
 | [ ] | Replace `--admin-*` color tokens in admin-design-system.css | `src/styles/admin-design-system.css` | use spec §3 table. Drop the muddy `aba278` warning, the purple stat icons, the blue stat icons. | `style(admin): unify color tokens` |
 | [ ] | Update `globals.css` if any admin colors live there | `src/app/globals.css` | grep for `admin-accent`, `admin-bg` | (same commit) |
 | [ ] | Remove inline `#fef3c7` / `#dbeafe` / `#f3e8ff` from stat cards in DashboardClient | `src/components/admin/DashboardClient.tsx` | semantic colors only | `style(admin): semantic stat colors` |
 ## Phase 2 — Discoverability (sidebar + command palette)
 | Done | Task | Files | Notes | Commit |
 |---|---|---|---|---|
 | [ ] | Create `SideNavGroup` component (label + items + active highlight) | `src/components/admin/SideNavGroup.tsx` (new) | matches new IA: Workspace / Operations / Communications / Growth / Tracking / Insights / Settings | `feat(admin): SideNavGroup component` |
 | [ ] | Refactor `AdminSidebar` to use grouped nav | `src/components/admin/AdminSidebar.tsx` | replace flat `NAV_ITEMS` with groups; keep role-gating, brand selector, sign-out | `feat(admin): grouped sidebar IA` |
 | [ ] | Create `CommandPalette` (Cmd+K) | `src/components/admin/CommandPalette.tsx` (new) | global search across pages + recent items + quick actions; mounts in admin layout | `feat(admin): command palette` |
 | [ ] | Mount `CommandPalette` in admin layout | `src/app/admin/layout.tsx` | wraps children, listens for `Cmd/Ctrl+K` | (same commit) |
 | [ ] | Settings pages get a top tab bar (no more hidden sub-nav) | `src/app/admin/settings/*/page.tsx` | General / Brand / Billing / Users / Integrations / Payments / Shipping / Add-ons | `feat(admin): settings top tabs` |
 ## Phase 3 — Component patterns
 | Done | Task | Files | Notes | Commit |
 |---|---|---|---|---|
 | [ ] | Extract `KPIStat` from DashboardClient | `src/components/admin/KPIStat.tsx` (new) | label + value + optional trend | `feat(admin): KPIStat component` |
 | [ ] | Tighten `AdminBadge` variants (status / tier / addon) | `src/components/admin/design-system/AdminBadge.tsx` | semantic: success / warning / danger / info / neutral | `style(admin): badge variants` |
 | [ ] | Add `EmptyState` admin variant | `src/components/admin/EmptyState.tsx` (new) | icon + title + body + CTA; matches color tokens | `feat(admin): EmptyState component` |
 | [ ] | Add `LoadingState` admin variant | `src/components/admin/LoadingState.tsx` (new) | uses `.ha-skeleton` | `feat(admin): LoadingState component` |
 | [ ] | Audit `PageHeader` usage; fix inconsistencies | `src/components/admin/design-system/PageHeader.tsx` + callers | eyebrow + title + subtitle + actions; consistent across all pages | `chore(admin): PageHeader audit` |
 ## Phase 4 — Dashboard (unified command center)
 | Done | Task | Files | Notes | Commit |
 |---|---|---|---|---|
 | [ ] | Redesign `DashboardClient` as single feed (no 4 tabs) | `src/components/admin/DashboardClient.tsx` | top: KPI strip · middle: "Needs attention" feed · bottom: section grid | `feat(admin): unified dashboard` |
 | [ ] | Add a "What needs attention" feed (orders pending, stops today, low stock, unanswered contacts) | same file | data from existing actions | (same commit) |
 ## Phase 5 — Apply patterns to top pages
 | Done | Task | Files | Notes | Commit |
 |---|---|---|---|---|
 | [ ] | `/admin/orders` list + detail | `src/app/admin/orders/page.tsx`, `[id]/page.tsx`, `AdminOrdersPanel.tsx` | new PageHeader, StatusPill, EmptyState | `style(admin): orders page` |
 | [ ] | `/admin/products` list + new + edit | `src/app/admin/products/page.tsx`, `new/page.tsx`, `[id]/page.tsx`, `ProductsClient.tsx` | same | `style(admin): products page` |
 | [ ] | `/admin/stops` calendar | `src/app/admin/stops/page.tsx`, `StopsCalendarClient.tsx` | same | `style(admin): stops page` |
 | [ ] | `/admin/communications` composer | `src/components/admin/HarvestReach/CampaignComposerPage.tsx` | same | `style(admin): comms composer` |
 | [ ] | `/admin/settings` index + tab bar | `src/app/admin/settings/page.tsx` | overview of all settings w/ quick links | `style(admin): settings index` |
 ## Phase 6 — Frontend polish (public side)
 | Done | Task | Files | Notes | Commit |
 |---|---|---|---|---|
 | [ ] | Tuxedo home polish | `src/app/tuxedo/page.tsx` + `tuxedo/` components | rhythm, spacing, mobile | `style(storefront): tuxedo polish` |
 | [ ] | Indian River Direct home polish | `src/app/indian-river-direct/page.tsx` + components | rhythm, spacing, mobile | `style(storefront): IRD polish` |
 | [ ] | Pricing page polish | `src/app/pricing/page.tsx` | tier card spacing | `style(public): pricing polish` |
 ## Phase 7 — Verify (gate before merge)
 | Done | Task | Command | Notes | Commit |
 |---|---|---|---|---|
 | [ ] | Type-check clean | `npx tsc --noEmit` | 0 errors | (no commit, gate) |
 | [ ] | Build clean | `npm run build` | green | (no commit, gate) |
 | [ ] | Dev server boots | `npm run dev` | `/admin` renders, sidebar works, Cmd+K opens | (no commit, gate) |
 | [ ] | Manual smoke: dashboard | `localhost:4000/admin` | layout intact, no console errors | (no commit, gate) |
 | [ ] | Manual smoke: command palette | `Cmd+K` | opens, type, jump | (no commit, gate) |
 | [ ] | Manual smoke: orders list | `/admin/orders` | loads, page header consistent | (no commit, gate) |
 ---
 ## Live notes (free-form)
 Add anything you want to remember as we go.
 - The existing `.ha-*` (Harvest Almanac) class system is good. Build on it; don't replace it.
 - The sidebar is in `src/components/admin/AdminSidebar.tsx` (~520 lines). Don't rewrite from scratch — refactor the data structure to groups and let the JSX mostly stand.
 - `lucide-react` is already a dependency. New icons should use lucide, not inline SVGs.
 - The `Atelier des Récoltes` CSS classes (`.atelier-*` in `globals.css`) are public-side only. Don't mix them into admin.
 - Per MEMORY.md: spawn sub-agents sequentially if TPM rate limit hits. If parallel works, fine; if not, fall back.
 ## Decisions log
 Record any calls you make mid-flight that change the spec.
 - (none yet)
@@ -0,0 +1,135 @@
 # Admin Redesign — 2026-06-17
 > Branch: `design/ui-revamp-2026-06`
 > Type: Hot take. Tomorrow deadline. Approved yolo.
 > Goal: polish the public side, reimagine the admin, fix the colors, make things findable.
 ---
 ## 1. Context
 - **Public side (`/`, `/tuxedo`, `/indian-river-direct`, pricing, blog, contact)** — "good, just needs polishing." The "Atelier des Récoltes" / "Field Almanac" editorial language is in place (cream + forest + gold + Fraunces + Manrope + Fragment Mono). Don't break it.
 - **Admin (`/admin/*`)** — the surface that needs the most work.
  - 15+ admin sections are split across 4 dashboard tabs (Operations / Fulfillment / Management / Tools). **The user can't find things.**
  - Color palette mixes forest + citrus + sage + gold + warmred + surface greys. **The colors fight each other and feel muddy.**
  - Sidebar has 6 flat items. "Settings" sub-pages are reachable only by knowing they exist. **Discoverability is bad.**
  - The "Harvest Almanac" design system (`.ha-*` classes) exists but is underused. Most admin pages fall back to defaults.
 ## 2. Aesthetic direction (one paragraph, committed)
 > **Editorial operations.** The admin should feel like the back office of an almanac press, not a generic SaaS dashboard. Warm cream canvas, deep botanical green for primary action, amber gold for the *one* thing you should do next, ink-black for text, a single soft beige for borders. The same typeface family as the public side (Fraunces / Manrope / Fragment Mono). Generous use of numerals in Fragment Mono so prices and counts read like a ledger. **One primary, one accent, four neutrals. That's it.** No purple, no teal, no citrus orange as a primary.
 Commit to this and stop adding new colors.
 ## 3. Color system (final, do not deviate)
 | Token | Hex | Use |
 |---|---|---|
 | `--admin-bg` | `#FAF7F0` | Page background (atelier cream) |
 | `--admin-surface` | `#FFFFFF` | Cards, modals, sheets |
 | `--admin-surface-sunken` | `#F4F1E8` | Inset wells, code blocks |
 | `--admin-ink` | `#1A1814` | Primary text |
 | `--admin-ink-muted` | `#73706B` | Secondary text |
 | `--admin-ink-faint` | `#A8A29E` | Tertiary / placeholders |
 | `--admin-line` | `#E8E4D7` | Borders, dividers |
 | `--admin-line-strong` | `#D4CFBE` | Emphasized borders |
 | `--admin-primary` | `#1F4D2A` | Primary action (deep botanical) |
 | `--admin-primary-hover` | `#163C20` | Primary hover |
 | `--admin-primary-soft` | `#E8F0E5` | Primary at 8% (selected rows, chips) |
 | `--admin-accent` | `#B8761E` | Amber — "the one thing to do" |
 | `--admin-accent-soft` | `#F7EBD5` | Amber at 12% |
 | `--admin-success` | `#1F4D2A` | (same as primary; semantic) |
 | `--admin-warning` | `#B8761E` | (same as accent; semantic) |
 | `--admin-danger` | `#A8321C` | Errors / destructive |
 | `--admin-danger-soft` | `#F7E3DE` | Danger at 12% |
 **Drop**: `--admin-warning: #aba278` (looks like dirt), the old `citrus` orange in the active state, the blue/purple stat icons. Replace with semantic use of the new palette.
 ## 4. IA decision
 Sidebar groups, top to bottom, with section dividers:
 | Group | Items |
 |---|---|
 | **Workspace** | Dashboard · Command Center (platform_admin only) |
 | **Operations** | Orders · Stops & Routes · Products · Driver Pickup · Shipping |
 | **Communications** | Harvest Reach (campaigns, templates, contacts, segments, logs) |
 | **Growth** | Wholesale · Import Center · AI Intelligence |
 | **Tracking** | Time Tracking · Water Log · Route Trace |
 | **Insights** | Reports · Tax Dashboard |
 | **Settings** | General · Brand · Billing · Users & Permissions · Integrations · Payments · Shipping · Add-ons |
 The old "Workers & PINs" sidebar item is a tab on Time Tracking now. Settings is one click → secondary nav inside settings (tabs at the top of the page).
 **Cmd+K command palette** for global search across:
 - Pages (jumps to any admin route)
 - Recent orders / products / stops / customers (live search)
 - Quick actions ("Create order", "Add product", "Send blast")
 ## 5. Component patterns (consistency pass)
 | Pattern | Owner | Status |
 |---|---|---|
 | `PageHeader` (eyebrow + title + subtitle + actions) | `src/components/admin/design-system/PageHeader.tsx` | exists, audit usage |
 | `EmptyState` (icon + title + body + CTA) | same dir, currently `EmptyState.tsx` exists for shared, admin needs its own | add `.ha-empty` |
 | `LoadingState` (skeleton + label) | `.ha-skeleton` exists in CSS, no component | wrap |
 | `ConfirmDialog` (destructive action) | `AdminDeleteConfirm.tsx` exists | audit usage |
 | `StatusPill` (success/warn/danger/info/neutral) | `AdminBadge.tsx` exists, variants are off | tighten variants |
 | `KPIStat` (label + value + trend) | inline in `DashboardClient` | extract to component |
 | `CommandPalette` (Cmd+K) | **new** | new component |
 | `SideNavGroup` (label + items) | **new** | replaces flat NAV_ITEMS |
 | `DataTable` (sortable, filterable, paginated) | `shared/DataTable.tsx` exists | tighten + use everywhere |
 ## 6. Phased execution (yolo, one day)
 **Phase 1 — Foundation (commit per file)**
 - Update `src/styles/admin-design-system.css` color tokens
 - New `SideNavGroup` component
 - Replace `AdminSidebar` flat list with grouped nav
 - New `CommandPalette` component (mounted in admin layout)
 - Refactor `DashboardClient` to unified command center (drop 4 tabs, single column feed)
 **Phase 2 — Pattern extraction (commit per file)**
 - Extract `KPIStat` from dashboard
 - Refine `EmptyState` admin variant
 - `LoadingState` wrapper
 - `StatusPill` tighten variants
 **Phase 3 — Apply to highest-traffic pages**
 - `/admin/orders` + detail
 - `/admin/products` + new + edit
 - `/admin/stops` calendar
 - `/admin/communications` composer
 - `/admin/settings/*` tabs
 **Phase 4 — Frontend polish**
 - Public page spot-check: hero spacing, section rhythm
 - Verify TypeScript + build green
 ## 7. Risk & revert
 - Working on branch `design/ui-revamp-2026-06` (already created off `main`).
 - **Every milestone is its own commit.** `git reset --hard <sha>` reverts to that point.
 - **One-click full revert:** `git checkout main && git branch -D design/ui-revamp-2026-06` — but only after a failed `git push`.
 - Type-check (`npx tsc --noEmit`) + `npm run build` are the gate at the end of each phase. Build green = milestone accepted.
 - If something breaks the admin layout at runtime, `git revert HEAD` unwinds the most recent commit without losing history.
 - **Do not delete or rename files in this branch.** Only add, only modify. Easier to revert.
 ## 8. Out of scope (yolo tomorrow, not now)
 - Wholesale portal pages (`/wholesale/*`)
 - Water-log standalone pages
 - Public marketing pages (pricing, blog, changelog) — polish later
 - Wholesale auth migration (separate task per MEMORY.md)
 - Migrating remaining legacy `supabase.from()` calls (separate task per MEMORY.md)
 ## 9. What "done" looks like
 - [ ] Color tokens unified, no muddy mix
 - [ ] Sidebar has 6 visible groups with section labels
 - [ ] Cmd+K opens a command palette that can navigate to any admin page
 - [ ] Dashboard is a single feed, no 4-tab structure
 - [ ] Top 6 admin pages use the new PageHeader / StatusPill / EmptyState consistently
 - [ ] `npx tsc --noEmit` clean
 - [ ] `npm run build` clean
 - [ ] Dev server boots, `/admin` renders, sidebar works, Cmd+K opens
@@ -12,8 +12,9 @@ const nextConfig: NextConfig = {
  //    /home/tyler/package-lock.json as the root directory."
  // The deploy runner's APP_DIR is /home/tyler/route-commerce, so
  // resolving relative to the project root is correct both locally and
-  // in CI.
+  // in CI. We resolve to an absolute path to avoid the warning in
-  outputFileTracingRoot: ".",
+  // Next.js 16 which prefers absolute paths here.
  outputFileTracingRoot: __dirname,
  // Enable strict mode
  reactStrictMode: true,
@@ -111,6 +112,11 @@ const nextConfig: NextConfig = {
  experimental: {
    // Enable optimizePackageImports for better bundle size
    optimizePackageImports: ["lucide-react", "@radix-ui/react-icons", "framer-motion"],
    // Enable React's <ViewTransition> and Next.js' automatic route
    // transitions. Combined with the smooth-transition wrappers around
    // page content (see src/components/transitions), navigation feels
    // like a single continuous app rather than a sequence of page loads.
    viewTransition: true,
  },
  // Compiler options
@@ -12,6 +12,7 @@
    "migrate:one": "node scripts/migrate.js",
    "db:migrate": "node scripts/migrate.js",
    "db:seed": "tsx db/seed.ts",
    "db:seed:tour": "node scripts/seed-tuxedo-2026.js",
    "db:reset": "node scripts/db-reset.js",
    "db:studio": "drizzle-kit studio",
    "type-check": "npx tsc --noEmit",
@@ -29,6 +30,7 @@
    "@google/generative-ai": "^0.24.1",
    "@gsap/react": "^2.1.2",
    "@neondatabase/auth": "^0.4.2-beta",
    "@neondatabase/serverless": "^1.1.0",
    "@sentry/nextjs": "^10.55.0",
    "@stripe/react-stripe-js": "^6.6.0",
    "@stripe/stripe-js": "^9.7.0",
@@ -0,0 +1,78 @@
 /**
 * Cleanup script: remove duplicate stops from the Tuxedo Corn 2026 tour.
 * Keeps the row with the latest created_at per (brand_id, date, city, state, location, time).
 * Run: DATABASE_URL="postgresql://..." npx tsx scripts/cleanup-duplicate-stops.ts
 */
 import { Pool } from "pg";
 const pool = new Pool({
  connectionString:
    process.env.DATABASE_ADMIN_URL ??
    process.env.DATABASE_URL ??
    "postgres://postgres:postgres@localhost:5432/route_commerce",
 });
 async function main() {
  const client = await pool.connect();
  try {
    await client.query("BEGIN");
    // Find duplicate groups (same brand_id, date, city, state, location, time)
    const dupes = await client.query(`
      SELECT brand_id::text, date, city, state, location, time, count(*) as cnt, min(created_at::text) as oldest, max(created_at::text) as newest
      FROM stops
      WHERE deleted_at IS NULL
 GROUP BY brand_id, date, city, state, location, time
      HAVING count(*) > 1
      ORDER BY date, city
    `);
    console.log(`Found ${dupes.rowCount} duplicate groups`);
    if (dupes.rowCount === 0) {
      await client.query("COMMIT");
      console.log("No duplicates found.");
      return;
    }
    let totalDeleted = 0;
    for (const row of dupes.rows) {
      // Keep the row with the latest created_at, delete the rest
      const del = await client.query(`
        DELETE FROM stops
        WHERE brand_id = $1
          AND date = $2
          AND city = $3
          AND state = $4
          AND location = $5
          AND time IS NOT DISTINCT FROM $6
          AND deleted_at IS NULL
          AND created_at < (
            SELECT max(created_at) FROM stops s2
            WHERE s2.brand_id = stops.brand_id
              AND s2.date = stops.date
              AND s2.city = stops.city
              AND s2.state = stops.state
              AND s2.location = stops.location
              AND (s2.time IS NOT DISTINCT FROM stops.time)
              AND s2.deleted_at IS NULL
          )
      `, [row.brand_id, row.date, row.city, row.state, row.location, row.time]);
      totalDeleted += del.rowCount ?? 0;
      console.log(`  Deleted ${del.rowCount} duplicate(s) for ${row.city}, ${row.state} on ${row.date}`);
    }
    await client.query("COMMIT");
    console.log(`\nDone. Total duplicates removed: ${totalDeleted}`);
  } catch (e) {
    await client.query("ROLLBACK");
    throw e;
  } finally {
    client.release();
    await pool.end();
  }
 }
 main().catch((e) => {
  console.error(e);
  process.exit(1);
 });
@@ -0,0 +1,448 @@
 // dotenv load temporarily disabled so shell-provided DATABASE_URL wins for this run
 // import { config } from "dotenv";
 // config({ path: ".env.local" });
 import { Pool } from "pg";
 import ExcelJS from "exceljs";
 import * as fs from "fs";
 const TUXEDO_BRAND_ID = "64294306-5f42-463d-a5e8-2ad6c81a96de";
 const YEAR = 2026;
 const MONTH_MAP: Record<string, string> = {
  Jan: "01", Feb: "02", Mar: "03", Apr: "04", May: "05", Jun: "06",
  Jul: "07", Aug: "08", Sep: "09", Oct: "10", Nov: "11", Dec: "12",
 };
 interface ParsedStop {
  week: string;
  region: string;
  date: string;
  day: string;
  city: string;
  state: string;
  location: string;
  time: string;
  timeRange: string;
  truck: string;
  statusText: string;
  notes: string;
  address: string | null;
  phone: string | null;
  contact: string | null;
 }
 function parseExcelDate(s: unknown): string | null {
  if (!s) return null;
  const m = /^([A-Za-z]{3})\s+(\d{1,2})$/.exec(String(s).trim());
  if (!m) return null;
  const mm = MONTH_MAP[m[1]];
  if (!mm) return null;
  return `${YEAR}-${mm}-${parseInt(m[2], 10).toString().padStart(2, "0")}`;
 }
 function parseTimeRange(s: unknown): string {
  if (!s) return "";
  let c = String(s).replace(/[–—]/g, "-").replace(/\s+/g, " ").trim();
  const m = /^(\d{1,2}:\d{2}\s*[AP]M)/i.exec(c);
  // Prefer full range for display (e.g. "10:00 AM – 1:00 PM"); fall back to start only
  return c || (m ? m[1].toUpperCase().replace(" ", " ") : "");
 }
 function splitCityState(s: unknown): [string, string] {
  if (!s) return ["", ""];
  const parts = String(s).split(",").map((p) => p.trim());
  if (parts.length === 1) return [parts[0], ""];
  return [parts[0], parts[1]];
 }
 function isWeekHeader(cells: string[]): boolean {
  return /^Wk\s/i.test(cells[0] || "") && (cells[3] || "").trim() === "";
 }
 function isOffRow(cells: string[]): boolean {
  const d = (cells[3] || "").trim();
  return /OFF|Cross-?Dock/i.test(d);
 }
 function isDataRow(cells: string[]): boolean {
  const day = (cells[3] || "").trim();
  const city = (cells[4] || "").trim();
  return !!(day && city && city.includes(","));
 }
 function slugify(s: string): string {
  let out = (s || "").toLowerCase();
  out = out.replace(/[^a-z0-9]+/g, "-");
  return out.replace(/^-+|-+$/g, "");
 }
 async function loadStops(xlsxPath: string): Promise<{ stops: ParsedStop[]; skipped: Record<string, number>; dirCount: number; locations: ParsedLocation[] }> {
  const wb = new ExcelJS.Workbook();
  await wb.xlsx.readFile(xlsxPath);
  const schedule = wb.getWorksheet("Full Schedule");
  const directory = wb.getWorksheet("Stop Directory");
  if (!schedule) throw new Error("Missing 'Full Schedule' sheet");
  // Build directory lookup for address enrichment: "T1|host lower" -> info
  const dirMap = new Map<string, { address: string | null; phone: string | null; contact: string | null; state: string }>();
  if (directory) {
    for (let r = 2; r <= directory.rowCount; r++) {
      const row = directory.getRow(r);
      const truck = String(row.getCell(1).value || "").trim();
      const host = String(row.getCell(4).value || "").trim().toLowerCase();
      if (!truck || !host) continue;
      dirMap.set(`${truck}|${host}`, {
        address: String(row.getCell(5).value || "").trim() || null,
        phone: String(row.getCell(6).value || "").trim() || null,
        contact: String(row.getCell(7).value || "").trim() || null,
        state: String(row.getCell(3).value || "").trim(),
      });
    }
  }
  const stops: ParsedStop[] = [];
  const skipped: Record<string, number> = { weekHeader: 0, off: 0, invalid: 0, noDate: 0 };
  for (let r = 4; r <= schedule.rowCount; r++) {
    const row = schedule.getRow(r);
    const cells = Array.from({ length: 10 }, (_, i) => String(row.getCell(i + 1).value ?? "").trim());
    if (isWeekHeader(cells)) {
      skipped.weekHeader++;
      continue;
    }
    if (isOffRow(cells)) {
      skipped.off++;
      continue;
    }
    if (!isDataRow(cells)) {
      skipped.invalid++;
      continue;
    }
    const [wk, region, dateText, day, cityState, host, time, truck, status, notes] = cells;
    const dateIso = parseExcelDate(dateText);
    if (!dateIso) {
      skipped.noDate++;
      continue;
    }
    const [city, state] = splitCityState(cityState);
    if (!city) {
      skipped.invalid++;
      continue;
    }
    const key = `${truck}|${host.toLowerCase()}`;
    const d = dirMap.get(key);
    stops.push({
      week: wk,
      region,
      date: dateIso,
      day,
      city,
      state: state || (d?.state || ""),
      location: host,
      time: parseTimeRange(time),
      timeRange: time,
      truck,
      statusText: status,
      notes: notes || "",
      address: d?.address || null,
      phone: d?.phone || null,
      contact: d?.contact || null,
    });
  }
  return { stops, skipped, dirCount: dirMap.size, locations: loadLocations(directory) };
 }
 export type ParsedLocation = {
  name: string;
  address: string | null;
  city: string;
  state: string;
  phone: string | null;
  contactName: string | null;
  notes: string | null;
 };
 function loadLocations(directory: ExcelJS.Worksheet | undefined): ParsedLocation[] {
  if (!directory) return [];
  const byKey = new Map<string, ParsedLocation>();
  for (let r = 2; r <= directory.rowCount; r++) {
    const row = directory.getRow(r);
    const truck = String(row.getCell(1).value || "").trim();
    const city = String(row.getCell(2).value || "").trim();
    const state = String(row.getCell(3).value || "").trim();
    const host = String(row.getCell(4).value || "").trim();
    const address = String(row.getCell(5).value || "").trim() || null;
    let phone = String(row.getCell(6).value || "").trim() || null;
    const contact = String(row.getCell(7).value || "").trim() || null;
    // notes column is 12
    let notes = String(row.getCell(12).value || "").trim() || null;
    if (!host || !city) continue;
    // If phone field contains TBD email, move it to notes
    if (phone && /@/.test(phone) && (!notes || notes.length < 10)) {
      notes = phone;
      phone = null;
    }
    const key = `${host.toLowerCase()}|${city.toLowerCase()}|${state.toLowerCase()}`;
    if (!byKey.has(key)) {
      byKey.set(key, {
        name: host,
        address,
        city,
        state,
        phone,
        contactName: contact || null,
        notes,
      });
    }
  }
  return Array.from(byKey.values());
 }
 function toLocationRpcRow(l: ParsedLocation) {
  return {
    name: l.name,
    address: l.address,
    city: l.city,
    state: l.state,
    zip: null,
    phone: l.phone,
    contact_name: l.contactName,
    contact_email: null,
    notes: l.notes,
    active: true,
  };
 }
 function toRpcRow(s: ParsedStop) {
  // Date format matches the python seed script expectation for the RPC
  const dateWithTz = `${s.date} 00:00:00+00`;
  const combinedNotes = [
    s.notes,
    s.truck ? `Truck: ${s.truck}` : "",
    s.statusText ? `Status: ${s.statusText}` : "",
    s.phone ? `Phone: ${s.phone}` : "",
    s.contact ? `Contact: ${s.contact}` : "",
  ]
    .filter(Boolean)
    .join(" | ");
  return {
    city: s.city,
    state: s.state,
    location: s.location,
    date: dateWithTz,
    time: s.time || s.timeRange || "",
    address: s.address,
    zip: null,
    cutoff_time: null,
    // active=true makes them visible on the public /tuxedo/stops storefront immediately
    active: true,
    // forward notes when the RPC supports it (enriched with truck/status/contact)
    notes: combinedNotes || null,
  };
 }
 async function main() {
  const args = process.argv.slice(2);
  const dryRun = args.includes("--dry-run") || args.includes("-n");
  let xlsxPath = "./Tuxedo_Corn_2026_Tour_Schedule-3.xlsx";
  const xArg = args.findIndex((a) => a === "--xlsx" || a === "-x");
  if (xArg !== -1 && args[xArg + 1]) xlsxPath = args[xArg + 1];
  const doClean = !args.includes("--no-clean");
  const emitSql = args.includes("--emit-sql") || args.includes("--sql");
  console.log(`[import-tuxedo-stops] xlsx=${xlsxPath} dryRun=${dryRun} clean=${doClean} emitSql=${emitSql}`);
  const { stops, skipped, dirCount, locations: parsedLocations } = await loadStops(xlsxPath);
  console.log(`\nParsed ${stops.length} stops + ${parsedLocations.length} unique locations`);
  console.log(`Skipped: week-headers=${skipped.weekHeader}, off/cross-dock=${skipped.off}, invalid=${skipped.invalid}, no-date=${skipped.noDate}`);
  console.log(`Stop Directory raw entries: ${dirCount}\n`);
  if (!stops.length) {
    console.error("No stops to insert. Check the xlsx path and filters.");
    process.exit(1);
  }
  // Show samples
  console.log("Sample (first 3):");
  stops.slice(0, 3).forEach((s) => {
    console.log(`  ${s.date} ${s.time.padEnd(10)} | ${s.city}, ${s.state} | ${s.location.slice(0, 32).padEnd(32)} | ${s.truck} | ${s.statusText}`);
    if (s.address) console.log(`    addr: ${s.address}`);
  });
  console.log("\nSample (last 3):");
  stops.slice(-3).forEach((s) => {
    console.log(`  ${s.date} ${s.time.padEnd(10)} | ${s.city}, ${s.state} | ${s.location.slice(0, 32).padEnd(32)} | ${s.truck} | ${s.statusText}`);
  });
  // By week/region/truck
  const byWeek: Record<string, number> = {};
  const byRegion: Record<string, number> = {};
  const byTruck: Record<string, number> = {};
  for (const s of stops) {
    byWeek[s.week] = (byWeek[s.week] || 0) + 1;
    byRegion[s.region] = (byRegion[s.region] || 0) + 1;
    byTruck[s.truck] = (byTruck[s.truck] || 0) + 1;
  }
  console.log("\nBy week:", Object.fromEntries(Object.entries(byWeek).sort(([a], [b]) => Number(a) - Number(b))));
  console.log("By region:", byRegion);
  console.log("By truck:", byTruck);
  const dates = [...stops.map((s) => s.date)].sort();
  console.log(`\nDate range: ${dates[0]} → ${dates[dates.length - 1]}`);
  if (emitSql) {
    const BATCH = 50;
    let sql = `-- Tuxedo Corn 2026 Tour Data (from ${xlsxPath})\n`;
    sql += `-- Stops: ${stops.length} | Locations: ${parsedLocations.length}\n`;
    sql += `-- Preferred: npx tsx scripts/import-tuxedo-stops.ts\n`;
    sql += `-- Manual apply: psql "$DATABASE_URL" -f db/seeds/2026-tuxedo-tour-stops.sql\n`;
    sql += `--               supabase db query --linked --file db/seeds/2026-tuxedo-tour-stops.sql\n\n`;
    sql += `BEGIN;\n\n`;
    // Locations first (master directory)
    if (parsedLocations.length > 0) {
      sql += `-- ===== LOCATIONS (Stop Directory master records) =====\n`;
      sql += `DELETE FROM locations WHERE brand_id = '${TUXEDO_BRAND_ID}';\n\n`;
      const locPayload = parsedLocations.map(toLocationRpcRow);
      const locJson = JSON.stringify(locPayload);
      sql += `-- ${parsedLocations.length} unique locations from Stop Directory\n`;
      sql += `SELECT admin_create_locations_batch('${TUXEDO_BRAND_ID}'::uuid, $$${locJson}$$::jsonb);\n\n`;
    }
    // Stops (dated instances)
    sql += `-- ===== STOPS (2026 tour schedule) =====\n`;
    sql += `-- Clear prior 2026 tour stops for brand (date-scoped)\n`;
    sql += `DELETE FROM stops WHERE brand_id = '${TUXEDO_BRAND_ID}' AND date >= '2026-07-01' AND date <= '2026-09-30';\n\n`;
    for (let i = 0; i < stops.length; i += BATCH) {
      const batchStops = stops.slice(i, i + BATCH);
      const payload = batchStops.map(toRpcRow);
      const payloadJson = JSON.stringify(payload);
      const bnum = Math.floor(i / BATCH) + 1;
      sql += `-- stops batch ${bnum}/${Math.ceil(stops.length / BATCH)} (${payload.length})\n`;
      sql += `SELECT admin_create_stops_batch('${TUXEDO_BRAND_ID}'::uuid, $$${payloadJson}$$::jsonb);\n\n`;
    }
    sql += `-- Make stops visible (RPC inserts as draft + active=true in payload)\n`;
    sql += `UPDATE stops SET status = 'active' WHERE brand_id = '${TUXEDO_BRAND_ID}' AND date >= '2026-07-01' AND date <= '2026-09-30';\n\n`;
    sql += `COMMIT;\n`;
    const outPath = "db/seeds/2026-tuxedo-tour-stops.sql";
    fs.writeFileSync(outPath, sql, "utf8");
    console.log(`\nWrote ${outPath} (locations: ${parsedLocations.length}, stops: ${stops.length}).`);
  }
  if (dryRun) {
    const stopBatches = Math.ceil(stops.length / 50);
    console.log(`\n[DRY RUN] Would load for brand:\n  - ${parsedLocations.length} locations (full replace)\n  - DELETE date-scoped 2026 stops then INSERT ${stops.length} stops in ${stopBatches} batch(es)\n  via admin_*_batch RPCs.`);
    return;
  }
  const pool = new Pool({
    connectionString:
      process.env.DATABASE_ADMIN_URL ??
      process.env.DATABASE_URL ??
      "postgres://postgres:postgres@localhost:5432/route_commerce",
  });
  const client = await pool.connect();
  try {
    await client.query("BEGIN");
    if (doClean) {
      const del = await client.query(
        `DELETE FROM stops WHERE brand_id = $1 AND date >= '2026-07-01' AND date <= '2026-09-30'`,
        [TUXEDO_BRAND_ID],
      );
      console.log(`\nCleared ${del.rowCount} prior 2026-dated stops for Tuxedo brand.`);
    }
    // Locations (from Stop Directory) — full replace for the brand from this xlsx
    if (parsedLocations.length > 0) {
      const locDel = await client.query(
        `DELETE FROM locations WHERE brand_id = $1`,
        [TUXEDO_BRAND_ID],
      );
      console.log(`Cleared ${locDel.rowCount} previous locations for Tuxedo brand.`);
      const LOC_BATCH = 100; // locations are fewer and smaller
      let locTotal = 0;
      const locBatches = Math.ceil(parsedLocations.length / LOC_BATCH);
      for (let i = 0; i < parsedLocations.length; i += LOC_BATCH) {
        const batchLocs = parsedLocations.slice(i, i + LOC_BATCH);
        const payload = batchLocs.map(toLocationRpcRow);
        const bnum = Math.floor(i / LOC_BATCH) + 1;
        process.stdout.write(`  Locations batch ${bnum}/${locBatches} (${payload.length}) via admin_create_locations_batch... `);
        try {
          await client.query(
            "SELECT admin_create_locations_batch($1::uuid, $2::jsonb)",
            [TUXEDO_BRAND_ID, JSON.stringify(payload)],
          );
          locTotal += payload.length;
          console.log("OK");
        } catch (e: any) {
          console.log("FAIL");
          throw e;
        }
      }
      console.log(`  Inserted ${locTotal} locations.`);
    }
    const BATCH = 50;
    let total = 0;
    const batches = Math.ceil(stops.length / BATCH);
    for (let i = 0; i < stops.length; i += BATCH) {
      const batchStops = stops.slice(i, i + BATCH);
      const payload = batchStops.map(toRpcRow);
      const bnum = Math.floor(i / BATCH) + 1;
      process.stdout.write(`  Batch ${bnum}/${batches} (${payload.length}) via admin_create_stops_batch... `);
      try {
        await client.query(
          "SELECT admin_create_stops_batch($1::uuid, $2::jsonb)",
          [TUXEDO_BRAND_ID, JSON.stringify(payload)],
        );
        total += payload.length;
        console.log("OK");
      } catch (e: any) {
        console.log("FAIL");
        throw e;
      }
    }
    // RPC inserts with status='draft' (per prior script); flip to active for public visibility.
    // Scope by the tour date range so we only touch rows from this import.
    if (total > 0) {
      const pub = await client.query(
        `UPDATE stops SET status = 'active' WHERE brand_id = $1 AND date >= '2026-07-01' AND date <= '2026-09-30'`,
        [TUXEDO_BRAND_ID],
      );
      console.log(`\nPublished (status=active): ${pub.rowCount} stops.`);
    }
    await client.query("COMMIT");
    console.log(`\nDone. Inserted ${parsedLocations.length} locations + ${total} stops for Tuxedo Corn 2026 tour (brand ${TUXEDO_BRAND_ID}).`);
    console.log("Locations are the master directory; stops are the dated schedule instances.");
    console.log("They should now appear on /tuxedo/stops and in admin locations UI.");
  } catch (err) {
    await client.query("ROLLBACK");
    console.error("\nInsert failed (rolled back):", err);
    process.exitCode = 1;
  } finally {
    client.release();
    await pool.end();
  }
 }
 main().catch((e) => {
  console.error(e);
  process.exit(1);
 });
@@ -0,0 +1,192 @@
 #!/usr/bin/env node
 /**
 * Seed Tuxedo Corn 2026 tour: locations + stops.
 *
 * Uses sql`...` tagged template from @neondatabase/serverless (WebSocket mode)
 * for INSERTs — this is the only Neon serverless API that actually executes writes.
 *
 * Run with:
 *   node scripts/seed-tuxedo-2026.js
 *
 * Requires DATABASE_URL in .env.local (or pass explicitly).
 */
 require("dotenv").config({ path: ".env.local" });
 const { neon } = require("@neondatabase/serverless");
 const ExcelJS = require("exceljs");
 const path = require("path");
 const TUXEDO_BRAND_ID = "64294306-5f42-463d-a5e8-2ad6c81a96de";
 const YEAR = 2026;
 const url = process.env.DATABASE_URL;
 if (!url) {
  console.error("❌ DATABASE_URL not set in .env.local");
  process.exit(1);
 }
 const cleanUrl = url.replace(/[?&]channel_binding=require/gi, "").trim();
 // Use direct compute endpoint with WebSocket for full DDL + DML support
 const directUrl = cleanUrl.replace("-pooler.", ".");
 const sql = neon(directUrl, { webSocket: true });
 const MONTH_MAP = {
  Jan: "01", Feb: "02", Mar: "03", Apr: "04", May: "05", Jun: "06",
  Jul: "07", Aug: "08", Sep: "09", Oct: "10", Nov: "11", Dec: "12",
 };
 function parseExcelDate(s) {
  if (!s) return null;
  const m = /^([A-Za-z]{3})\s+(\d{1,2})$/.exec(String(s).trim());
  if (!m) return null;
  const mm = MONTH_MAP[m[1]];
  if (!mm) return null;
  return `${YEAR}-${mm}-${parseInt(m[2], 10).toString().padStart(2, "0")}`;
 }
 function parseTimeRange(s) {
  if (!s) return "";
  return String(s).replace(/[–—]/g, "-").replace(/\s+/g, " ").trim();
 }
 async function parseXlsx(xlsxPath) {
  const workbook = new ExcelJS.Workbook();
  await workbook.xlsx.readFile(xlsxPath);
  // --- Locations from Stop Directory ---
  const locSheet = workbook.getWorksheet("Stop Directory");
  const locations = [];
  const seenLoc = new Set();
  if (locSheet) {
    locSheet.eachRow((row, rowNum) => {
      if (rowNum === 1) return;
      // Column mapping via getCell():
      // col1=Truck, col2=City, col3=State, col4=Host(venue name), col5=Address, col6=Phone, col7=Contact, col12=Notes
      const rawCity = String(row.getCell(2).value || "").trim();
      const rawState = String(row.getCell(3).value || "").trim();
      const rawName = String(row.getCell(4).value || "").trim();
      const rawAddress = String(row.getCell(5).value || "").trim();
      if (!rawCity || !rawName) return;
      const key = `${rawName}|${rawCity}|${rawState}`;
      if (seenLoc.has(key)) return;
      seenLoc.add(key);
      locations.push({
        name: rawName,
        address: rawAddress || null,
        city: rawCity,
        state: rawState,
        zip: null,
        phone: String(row.getCell(6).value || "").trim() || null,
        contact_name: String(row.getCell(7).value || "").trim() || null,
        contact_email: null,
        notes: String(row.getCell(12).value || "").trim() || null,
        active: true,
      });
    });
  }
  console.log(`Parsed ${locations.length} locations`);
  // --- Stops from Full Schedule ---
  const schedSheet = workbook.getWorksheet("Full Schedule");
  const stops = [];
  const venueAddressMap = new Map();
  if (locSheet) {
    locSheet.eachRow((row, rowNum) => {
      if (rowNum === 1) return;
      const name = String(row.getCell(4).value || "").trim();
      const address = String(row.getCell(5).value || "").trim();
      if (name && address) venueAddressMap.set(name, address);
    });
  }
  if (schedSheet) {
    schedSheet.eachRow((row) => {
      const rowValues = row.values || [];
      // Column mapping (1-indexed, col1=null):
      // col2=Wk, col3=Type, col4=Date, col5=Day, col6=City/Location, col7=Host/Venue, col8=Time, col9=Truck, col10=Status, col11=Notes
      const firstCell = String(rowValues[1] || "").trim();
      // Skip title rows, week headers ("Wk 1"), OFF, Cross-Dock
      if (!firstCell || /^Wk\s*\d+/i.test(firstCell) || firstCell === "OFF" || firstCell === "Cross-Dock") return;
      const dateStr = parseExcelDate(rowValues[3]);
      if (!dateStr) return;
      const cityStateRaw = String(rowValues[5] || "").trim();
      const cityParts = cityStateRaw.split(",").map((s) => s.trim());
      const city = cityParts[0] || "";
      const state = cityParts[1] || "";
      const location = String(rowValues[6] || "").trim();
      if (!city || !state || !location) return;
      const rawTime = rowValues[7];
      const time = rawTime ? parseTimeRange(rawTime) : "";
      const truck = String(rowValues[8] || "").trim();
      const statusText = String(rowValues[9] || "").trim();
      const notesText = String(rowValues[10] || "").trim();
      const venueAddress = venueAddressMap.get(location) || null;
      const notes = [truck ? `Truck: ${truck}` : "", statusText, notesText].filter(Boolean).join(" | ");
      stops.push({
        name: `${location} - ${city}, ${state}`,
        location,
        address: venueAddress,
        city,
        state,
        zip: null,
        date: dateStr,
        time,
        cutoff_date: null,
        status: "active",
        is_public: true,
        notes: notes || null,
      });
    });
  }
  console.log(`Parsed ${stops.length} stops`);
  return { locations, stops };
 }
 async function seedLocations(locs) {
  if (locs.length === 0) return;
  await sql`DELETE FROM locations WHERE brand_id = ${TUXEDO_BRAND_ID}::uuid`;
  for (const loc of locs) {
    await sql`INSERT INTO locations (brand_id, name, address, city, state, zip, phone, contact_name, contact_email, notes, active)
              VALUES (${TUXEDO_BRAND_ID}::uuid, ${loc.name}, ${loc.address}, ${loc.city}, ${loc.state}, ${loc.zip}, ${loc.phone}, ${loc.contact_name}, ${loc.contact_email}, ${loc.notes}, ${loc.active})`;
  }
  console.log(`Seeded ${locs.length} locations`);
 }
 async function seedStops(stops) {
  if (stops.length === 0) return;
  const minDate = `${YEAR}-07-01`;
  const maxDate = `${YEAR}-09-30`;
  await sql`DELETE FROM stops WHERE brand_id = ${TUXEDO_BRAND_ID}::uuid AND date >= ${minDate} AND date <= ${maxDate}`;
  for (const stop of stops) {
    await sql`INSERT INTO stops (brand_id, name, location, address, city, state, zip, date, "time", cutoff_date, status, is_public, notes)
              VALUES (${TUXEDO_BRAND_ID}::uuid, ${stop.name}, ${stop.location}, ${stop.address}, ${stop.city}, ${stop.state}, ${stop.zip}, ${stop.date}, ${stop.time}, ${stop.cutoff_date}, ${stop.status}, ${stop.is_public}, ${stop.notes})`;
  }
  console.log(`Seeded ${stops.length} stops`);
 }
 async function main() {
  const xlsxPath = path.join(__dirname, "..", "Tuxedo_Corn_2026_Tour_Schedule-3.xlsx");
  console.log("Parsing:", xlsxPath);
  const { locations, stops } = await parseXlsx(xlsxPath);
  if (locations.length === 0 && stops.length === 0) {
    console.error("❌ No data parsed from xlsx");
    process.exit(1);
  }
  console.log(`Seeding ${locations.length} locations + ${stops.length} stops for Tuxedo Corn...`);
  await seedLocations(locations);
  await seedStops(stops);
  const locCount = await sql.query(`SELECT COUNT(*) FROM locations WHERE brand_id = '${TUXEDO_BRAND_ID}'`);
  const stopCount = await sql.query(`SELECT COUNT(*) FROM stops WHERE brand_id = '${TUXEDO_BRAND_ID}'`);
  console.log(`\n✅ Done — ${locCount[0].count} locations, ${stopCount[0].count} stops in DB`);
 }
 main().catch((e) => {
  console.error("❌ Seed failed:", e.message);
  process.exit(1);
 });
@@ -38,10 +38,7 @@ MONTH_MAP = {
    "Sep": "09", "Oct": "10", "Nov": "11", "Dec": "12",
 }
-DEFAULT_XLSX = (
+DEFAULT_XLSX = "Tuxedo_Corn_2026_Tour_Schedule-3.xlsx"  # run from repo root; override with --xlsx /path/to/file.xlsx
    "/home/coder/dev/x1/kyle/route_commerce-main/"
    "Tuxedo_Corn_2026_Tour_Schedule-3.xlsx"
 )
 def parse_excel_date(s):
@@ -1,5 +1,6 @@
-import CommunicationsLoading from "@/components/admin/CommunicationsLoading";
+import { LoadingFade } from "@/components/transitions/LoadingFade";
 /** Subtle navigation indicator — see LoadingFade for rationale. */
 export default function Loading() {
-  return <CommunicationsLoading activeTab="campaigns" />;
+  return <LoadingFade />;
 }
@@ -8,6 +8,8 @@ import { getSession } from "@/lib/auth";
 import "@/styles/admin-design-system.css";
 import { ToastProvider } from "@/components/admin/Toast";
 import { ToastContainer } from "@/components/admin/ToastContainer";
 import { SmoothViewTransition } from "@/components/transitions/SmoothViewTransition";
 import { RouteAnnouncer } from "@/components/transitions/RouteAnnouncer";
 // Admin layout calls getAdminUser() which reads cookies(). Without this,
 // Next.js tries to prerender the entire /admin/* tree statically and the
@@ -105,8 +107,17 @@ export default async function AdminLayout({ children }: { children: React.ReactN
        activeBrandId={activeBrandId}
        brands={brands}
      />
-      <div className="min-h-screen lg:pl-60 admin-section" style={{ backgroundColor: "var(--admin-bg)" }}>
+      {/* The main content area swaps on every navigation. Wrapping
-        {children}
+          it in <SmoothViewTransition> opts the swap into a soft
          crossfade via the View Transitions API — sidebar and
          background stay mounted, only the body fades. */}
      <div
        id="page-content"
        className="min-h-screen lg:pl-60 admin-section outline-none"
        style={{ backgroundColor: "var(--admin-bg)" }}
      >
        <SmoothViewTransition>{children}</SmoothViewTransition>
        <RouteAnnouncer />
      </div>
    </ToastProviderWrapper>
  );
@@ -1,47 +1,14 @@
-import LoadingSkeleton, { SkeletonCard, SkeletonTable } from "@/components/shared/LoadingSkeleton";
+import { LoadingFade } from "@/components/transitions/LoadingFade";
 /**
 * Admin shell loading state.
 *
 * Replaces the previous skeleton (header + 4 stat cards + 2 panels +
 * 5-row table) with a 1px-thick animated bar at the top of the page.
 * The AdminSidebar and parchment background stay mounted, so the
 * transition is a subtle fade — the user never sees an "empty" version
 * of the admin while the next page streams in.
 */
 export default function AdminLoading() {
-  return (
+  return <LoadingFade />;
    <main className="min-h-screen px-4 sm:px-6 md:px-8 py-8" style={{ backgroundColor: "var(--admin-bg)" }}>
      <div className="max-w-7xl mx-auto space-y-6">
        {/* Header skeleton */}
        <div className="flex items-center justify-between">
          <div className="space-y-2">
            <LoadingSkeleton variant="text" width="w-48" height="h-8" />
            <LoadingSkeleton variant="text" width="w-64" height="h-4" />
          </div>
          <LoadingSkeleton variant="button" />
        </div>
        {/* Stats cards skeleton */}
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
          {[1, 2, 3, 4].map((i) => (
            <div
              key={i}
              className="rounded-xl border bg-white p-5"
              style={{ borderColor: "var(--admin-border)" }}
            >
              <div className="flex items-center gap-3">
                <div className="animate-pulse rounded-xl h-10 w-10" style={{ backgroundColor: "var(--admin-bg)" }} />
                <div className="flex-1 space-y-2">
                  <div className="animate-pulse h-3 w-16 rounded" style={{ backgroundColor: "var(--admin-bg)" }} />
                  <div className="animate-pulse h-5 w-12 rounded" style={{ backgroundColor: "var(--admin-bg)" }} />
                </div>
              </div>
            </div>
          ))}
        </div>
        {/* Content cards skeleton */}
        <div className="grid gap-4 lg:grid-cols-3">
          <SkeletonCard />
          <SkeletonCard />
          <SkeletonCard />
        </div>
        {/* Table skeleton */}
        <SkeletonTable rows={8} cols={4} />
      </div>
    </main>
  );
 }
@@ -3,6 +3,7 @@ import { getAdminUser } from "@/lib/admin-permissions";
 import { getActiveBrandId } from "@/lib/brand-scope";
 import { isFeatureEnabled } from "@/lib/feature-flags";
 import { getBillingOverview } from "@/actions/billing/billing-overview";
 import { getDashboardStats } from "@/actions/dashboard";
 import DashboardClient from "@/components/admin/DashboardClient";
 import { pool } from "@/lib/db";
@@ -122,6 +123,10 @@ export default async function AdminPage() {
    );
  }
  // Fetch dashboard stats server-side to eliminate client-side waterfall.
  // Stats are now available immediately — no "—" placeholder flash.
  const stats = await getDashboardStats();
  return (
    <DashboardClient
      brandId={adminUser?.brand_id ?? null}
@@ -131,6 +136,7 @@ export default async function AdminPage() {
      enabledAddons={enabledAddons}
      usage={usage}
      limits={limits}
      stats={stats}
    />
  );
 }
@@ -1,4 +1,4 @@
-import { supabase } from "@/lib/supabase";
+import { pool } from "@/lib/db";
 import StopEditForm from "@/components/admin/StopEditForm";
 import StopProductAssignment from "@/components/admin/StopProductAssignment";
 import MessageCustomersSection from "@/components/admin/MessageCustomersSection";
@@ -26,7 +26,6 @@ interface Stop {
  cutoff_time: string | null;
  status: string;
  location: string;
  slug: string;
  active: boolean;
  brands?: { name: string; slug: string };
 }
@@ -48,15 +47,6 @@ interface ProductStop {
 export default async function StopDetailPage({ params }: StopDetailPageProps) {
  const { id } = await params;
  const [{ data: stop, error }, { data: brands }] = await Promise.all([
    supabase
      .from("stops")
      .select("*, brands(name, slug)")
      .eq("id", id)
      .single() as unknown as { data: Stop | null; error: { message: string } | null },
    supabase.from("brands").select("id, name, slug") as unknown as { data: { id: string; name: string; slug: string }[] | null },
  ]);
  const adminUser = await getAdminUser();
  if (!adminUser) {
@@ -65,17 +55,24 @@ export default async function StopDetailPage({ params }: StopDetailPageProps) {
  if (!adminUser.can_manage_stops) redirect("/admin/pickup");
-  if (adminUser.brand_id && stop?.brand_id !== adminUser.brand_id) {
+  // Fetch stop
-    return <AdminAccessDenied />;
+  const { rows: stopsRows } = await pool.query<Stop & { brand_name: string; brand_slug: string }>(
-  }
+    `SELECT s.*, b.name as brand_name, b.slug as brand_slug
     FROM stops s
     LEFT JOIN brands b ON b.id = s.brand_id
     WHERE s.id = $1
     LIMIT 1`,
    [id]
  );
  const stopRow = stopsRows[0];
-  if (error || !stop) {
+  if (!stopRow) {
    return (
      <main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
        <div className="mx-auto max-w-4xl">
          <h1 className="text-3xl font-bold text-red-600">Stop not found</h1>
          <pre className="mt-4 rounded-xl bg-white border border-stone-200 p-4 text-sm text-stone-600">
-            {error?.message ?? "Stop not found"}
+            {id}
          </pre>
          <Link
            href="/admin/stops"
@@ -88,30 +85,68 @@ export default async function StopDetailPage({ params }: StopDetailPageProps) {
    );
  }
-  const [{ data: allProducts }, { data: productStops }] = await Promise.all([
+  if (adminUser.brand_id && stopRow.brand_id !== adminUser.brand_id) {
-    supabase
+    return <AdminAccessDenied />;
-      .from("products")
+  }
      .select("id, name, type, price")
      .eq("brand_id", stop.brand_id)
      .eq("active", true) as unknown as { data: Product[] | null },
    supabase
      .from("product_stops")
      .select("id, product_id, products(id, name, type, price)")
      .eq("stop_id", id) as unknown as { data: ProductStop[] | null },
  ]);
-  const assignedProducts = (productStops ?? [])
+  const stop: Stop = {
-    .map((ps: ProductStop) => ({
+    id: stopRow.id,
-      id: ps.id,
+    brand_id: stopRow.brand_id,
-      product_id: ps.product_id,
+    city: stopRow.city ?? "",
-      products: ps.products ? {
+    state: stopRow.state ?? "",
-        name: ps.products.name,
+    address: stopRow.address ?? null,
-        type: ps.products.type,
+    zip: stopRow.zip ?? null,
-        price: ps.products.price,
+    date: stopRow.date ? String(stopRow.date) : "",
-        image_url: ps.products.image_url,
+    time: stopRow.time ?? "",
-      } : null,
+    cutoff_date: stopRow.cutoff_date ? String(stopRow.cutoff_date) : null,
-    }))
+    cutoff_time: stopRow.cutoff_date ? String(stopRow.cutoff_date) : null,
-    .filter(Boolean);
+    status: stopRow.status ?? "active",
    location: stopRow.location ?? "",
    active: stopRow.status === "active",
    brands: { name: stopRow.brand_name ?? "", slug: stopRow.brand_slug ?? "" },
  };
  // Fetch all products for this brand
  const { rows: productRows } = await pool.query<{ id: string; name: string; type: string; price: number; image_url: string | null }>(
    `SELECT id, name, type, price, image_url
     FROM products
     WHERE brand_id = $1 AND active = true
     ORDER BY name`,
    [stop.brand_id]
  );
  // Fetch product-stop assignments
  const { rows: productStopRows } = await pool.query<{ id: string; product_id: string; name: string; type: string; price: number; image_url: string | null }>(
    `SELECT ps.id, ps.product_id, p.name, p.type, p.price, p.image_url
     FROM product_stops ps
     JOIN products p ON p.id = ps.product_id
     WHERE ps.stop_id = $1`,
    [id]
  );
  // Fetch brands list
  const { rows: brandRows } = await pool.query<{ id: string; name: string; slug: string }>(
    `SELECT id, name, slug FROM brands ORDER BY name`
  );
  const allProducts = productRows.map((p) => ({
    id: p.id,
    name: p.name,
    type: p.type,
    price: Number(p.price),
    image_url: p.image_url,
  }));
  const assignedProducts = productStopRows.map((ps) => ({
    id: ps.id,
    product_id: ps.product_id,
    products: {
      name: ps.name,
      type: ps.type,
      price: Number(ps.price),
      image_url: ps.image_url,
    },
  }));
  return (
    <main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
@@ -168,11 +203,11 @@ export default async function StopDetailPage({ params }: StopDetailPageProps) {
                </p>
              </div>
            )}
-            {stop.cutoff_time && (
+            {stop.cutoff_date && (
              <div>
                <p className="text-sm font-medium text-stone-500">Cutoff</p>
                <p className="mt-1 text-lg font-semibold text-stone-950">
-                  {new Date(stop.cutoff_time).toLocaleString()}
+                  {new Date(stop.cutoff_date + "T00:00:00").toLocaleDateString()}
                </p>
              </div>
            )}
@@ -199,7 +234,7 @@ export default async function StopDetailPage({ params }: StopDetailPageProps) {
          <div className="mt-6">
            <StopProductAssignment
              stopId={stop.id}
-              allProducts={allProducts ?? []}
+              allProducts={allProducts}
              assignedProducts={assignedProducts}
              callerUid={adminUser.user_id}
            />
@@ -221,14 +256,14 @@ export default async function StopDetailPage({ params }: StopDetailPageProps) {
                date: stop.date,
                time: stop.time,
                location: stop.location,
-                slug: stop.slug,
+                slug: stop.brands?.slug ?? "",
                active: stop.active,
                brand_id: stop.brand_id,
                address: stop.address,
                zip: stop.zip,
                cutoff_time: stop.cutoff_time,
              }}
-              brands={brands ?? []}
+              brands={brandRows ?? []}
            />
          </div>
        </div>
@@ -1,4 +1,4 @@
-import { supabase } from "@/lib/supabase";
+import { pool } from "@/lib/db";
 import NewStopForm from "@/components/admin/NewStopForm";
 import StopProductAssignment from "@/components/admin/StopProductAssignment";
 import { getAdminUser } from "@/lib/admin-permissions";
@@ -32,24 +32,35 @@ export default async function NewStopPage({
  let duplicateFrom: Stop | null = null;
  if (duplicate) {
-    const { data } = await supabase
+    const { rows } = await pool.query<Stop>(
-      .from("stops")
+      `SELECT city, state, location, date, time, brand_id, active, address, zip, cutoff_date
-      .select("city, state, location, date, time, brand_id, active, address, zip, cutoff_time")
+       FROM stops WHERE id = $1 LIMIT 1`,
-      .eq("id", duplicate)
+      [duplicate]
-      .single() as unknown as { data: Stop | null };
+    );
-    duplicateFrom = data;
+    const row = rows[0];
    if (row) {
      duplicateFrom = {
        city: row.city ?? "",
        state: row.state ?? "",
        location: row.location ?? "",
        date: row.date ? String(row.date) : "",
        time: row.time ?? "",
        brand_id: row.brand_id,
        active: row.active ?? true,
        address: row.address ?? null,
        zip: row.zip ?? null,
        cutoff_time: row.cutoff_time ?? null,
      };
    }
  }
  const brandId =
    adminUser.brand_id ?? "64294306-5f42-463d-a5e8-2ad6c81a96de";
-  const [{ data: allProducts }] = await Promise.all([
+  const { rows: productRows } = await pool.query<{ id: string; name: string; type: string; price: number }>(
-    supabase
+    `SELECT id, name, type, price FROM products WHERE brand_id = $1 AND active = true ORDER BY name`,
-      .from("products")
+    [brandId]
-      .select("id, name, type, price")
+  );
      .eq("brand_id", brandId)
      .eq("active", true) as unknown as { data: { id: string; name: string; type: string; price: number }[] | null },
  ]);
  return (
    <main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
@@ -1,28 +1,10 @@
-import StopsDashboardClient from "@/components/admin/stops/StopsDashboardClient";
+import { pool } from "@/lib/db";
 import StopsHeaderActions from "@/components/admin/StopsHeaderActions";
 import { supabase } from "@/lib/supabase";
 import { getAdminUser } from "@/lib/admin-permissions";
 import { getActiveBrandId } from "@/lib/brand-scope";
 import AdminAccessDenied from "@/components/admin/AdminAccessDenied";
-import { PageHeader } from "@/components/admin/design-system";
+import StopTableClient from "@/components/admin/StopTableClient";
 import { redirect } from "next/navigation";
 interface Stop {
  id: string;
  city: string;
  state: string;
  date: string;
  time: string;
  location: string;
  active: boolean;
  deleted_at: string | null;
  brand_id: string;
  address: string | null;
  zip: string | null;
  cutoff_time: string | null;
  status: string;
  brands: { name: string } | { name: string }[];
 }
 const StopIcon = () => (
  <svg className="h-5 w-5 sm:h-6 sm:w-6 text-current" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/>
@@ -30,44 +12,64 @@ const StopIcon = () => (
  </svg>
 );
-export default async function AdminStopsPage() {
+interface PageProps {
  searchParams: Promise<{ page?: string }>;
 }
 export default async function AdminStopsPage({ searchParams }: PageProps) {
  const params = await searchParams;
  const adminUser = await getAdminUser();
  if (!adminUser) return <AdminAccessDenied />;
  if (!adminUser.can_manage_stops) redirect("/admin/pickup");
-  if (!adminUser.can_manage_stops) {
+  interface DbStopRow {
-    redirect("/admin/pickup");
+    id: string;
    city: string;
    state: string;
    date: Date | string;
    time: string | null;
    location: string;
    status: string;
    brand_id: string;
    address: string | null;
    zip: string | null;
    cutoff_date: string | null;
    brand_name?: string;
  }
  let stops: DbStopRow[] = [];
  let error: string | null = null;
-  let query = supabase
+  // Resolve active brand from cookie/URL (respects platform_admin "All brands" = null)
-    .from("stops")
+  let activeBrandId: string | null = null;
-    .select(`
+  try {
-      id,
+    activeBrandId = await getActiveBrandId(adminUser);
      city,
      state,
      date,
      time,
      location,
      active,
      deleted_at,
      brand_id,
      address,
      zip,
      cutoff_time,
      status,
      brands (
        name
      )
    `)
    .is("deleted_at", null)
    .order("date", { ascending: true });
-  if (adminUser?.brand_id) {
+    // If brand-scoped (not platform_admin) and no active brand, restrict query
-    query = query.eq("brand_id", adminUser.brand_id);
+    const brandCondition =
      activeBrandId
        ? `brand_id = '${activeBrandId}'`
        : adminUser.role === "platform_admin"
          ? "1=1"
          : `brand_id IN ('${(adminUser.brand_ids ?? []).join("','")}')`;
    const { rows } = await pool.query(
      `SELECT s.id, s.city, s.state, s.date, s."time", s.location, s.status,
              s.brand_id, s.address, s.zip, s.cutoff_date,
              b.name as brand_name
       FROM stops s
       LEFT JOIN brands b ON b.id = s.brand_id
       WHERE ${brandCondition}
       ORDER BY s.date ASC
       LIMIT 200`
    );
    stops = rows;
    console.log("[admin/stops] Fetched", rows.length, "stops");
  } catch (e) {
    error = e instanceof Error ? e.message : String(e);
    console.error("[admin/stops] Query error:", error);
  }
  const { data: stops, error } = await query as unknown as { data: Stop[] | null; error: { message: string } | null };
  if (error) {
    return (
      <main className="min-h-screen bg-[var(--admin-bg)]">
@@ -78,37 +80,44 @@ export default async function AdminStopsPage() {
              <span className="text-[var(--admin-text-muted)]">/</span>
              <span className="text-[var(--admin-text-primary)] font-medium">Stops & Routes</span>
            </nav>
-            <h1 className="text-2xl sm:text-3xl font-black text-red-600 tracking-tight">
+            <h1 className="text-2xl sm:text-3xl font-black text-red-600 tracking-tight">Error loading stops</h1>
-              Error loading stops
+            <pre className="mt-4 rounded-xl bg-white border border-[var(--admin-border)] p-4 text-sm text-[var(--admin-text-secondary)] overflow-auto">
-            </h1>
+              {error}
            <pre className="mt-4 rounded-xl bg-white border border-[var(--admin-border)] p-4 text-sm text-[var(--admin-text-secondary)]">
              {error.message}
            </pre>
            <div className="mt-4 p-4 rounded-xl bg-stone-100 text-sm">
              <p className="font-semibold">Debug info:</p>
              <p>adminUser.brand_id: {adminUser.brand_id ?? "null"}</p>
              <p>adminUser.role: {adminUser.role}</p>
              <p>adminUser.email: {adminUser.email}</p>
            </div>
          </div>
        </div>
      </main>
    );
  }
-  return (
+  // Transform stops for the client component
-    <main className="min-h-screen bg-[var(--admin-bg)]">
+  const stopsForClient = stops.map((s) => ({
-      <div className="px-4 sm:px-6 md:px-8 py-6 sm:py-8">
+    id: s.id,
-        <PageHeader
+    city: s.city,
-          breadcrumb={[
+    state: s.state,
-            { label: "Admin", href: "/admin" },
+    date: s.date instanceof Date ? s.date.toISOString().split("T")[0] : String(s.date).split("T")[0],
-            { label: "Stops & Routes" }
+    time: s.time || "",
-          ]}
+    location: s.location,
-          icon={<StopIcon />}
+    active: s.status === "active",
-          title="Stops & Routes"
+    brand_id: s.brand_id,
-          subtitle={adminUser?.brand_id ? "Managing stops for your brand." : "Manage routes, pickup locations, dates, and cutoff times."}
+    status: s.status,
-          actions={<StopsHeaderActions brandId={adminUser?.brand_id ?? ""} />}
+    address: s.address,
-        />
+    zip: s.zip,
-      </div>
+    cutoff_time: s.cutoff_date,
    brands: s.brand_name ? { name: s.brand_name } : null,
  }));
-      {/* Content */}
+  return (
-      <div className="px-4 sm:px-6 md:px-8 py-4 sm:py-6">
+    <div className="min-h-screen bg-[var(--admin-bg)]">
-        <StopsDashboardClient stops={stops ?? []} />
+      <div className="px-4 sm:px-6 md:px-8 py-6 sm:py-8">
        <StopTableClient stops={stopsForClient} />
      </div>
-    </main>
+    </div>
  );
 }
@@ -19,11 +19,12 @@ export async function GET() {
      { status: "ok", message: "admin_users table present" },
      { status: 200 }
    );
-  } catch (err: any) {
+  } catch (err: unknown) {
    const message = err instanceof Error ? err.message : "Database schema check failed";
    return NextResponse.json(
      {
        status: "error",
-        message: err?.message ?? "Database schema check failed",
+        message,
        hint: "Run migrations against the DATABASE_URL (see docs/superpowers/plans/2026-06-prod-db-schema-migration-reliability.md)",
      },
      { status: 503 }
@@ -9,19 +9,25 @@ type RequestBody = {
  /** Raw file content (CSV text). AI parsing is attempted if useAI=true. */
  text: string;
  brandId: string;
-  /** If true and OPENAI_API_KEY is set, parse unstructured text with AI. */
+  /** If true and an AI API key is set, parse unstructured text with AI. */
  useAI?: boolean;
 };
-const AI_MODEL = "gpt-4o-mini";
+async function parseWithAI(text: string, _brandId: string): Promise<{
 async function parseWithAI(text: string, brandId: string): Promise<{
  stops: ParsedStop[];
  warnings: string[];
 }> {
-  const apiKey = process.env.OPENAI_API_KEY;
+  // Prefer MiniMax (env-level) — fall back to OpenAI.
  const provider: "minimax" | "openai" =
    process.env.MINIMAX_API_KEY ? "minimax" : process.env.OPENAI_API_KEY ? "openai" : "openai";
  const apiKey = provider === "minimax" ? process.env.MINIMAX_API_KEY! : process.env.OPENAI_API_KEY!;
  const baseURL = provider === "minimax"
    ? (process.env.MINIMAX_BASE_URL || "https://api.minimax.io/v1")
    : "https://api.openai.com/v1";
  const model = provider === "minimax" ? "MiniMax-M3" : "gpt-4o-mini";
  if (!apiKey) {
-    throw new Error("OPENAI_API_KEY is not configured. Use CSV format for reliable parsing.");
+    throw new Error("MINIMAX_API_KEY or OPENAI_API_KEY is not configured. Use CSV format for reliable parsing.");
  }
  const systemPrompt = `You are a schedule extraction assistant. Given raw schedule text, extract all stop entries.
@@ -37,26 +43,27 @@ Return a JSON array where each entry has:
 If a row lacks required fields (city, state, location), omit it and add a warning.`;
-  const res = await fetch("https://api.openai.com/v1/chat/completions", {
+  const res = await fetch(`${baseURL}/chat/completions`, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${apiKey}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
-      model: AI_MODEL,
+      model,
      messages: [
        { role: "system", content: systemPrompt },
        { role: "user", content: `Extract stops from this schedule:\n\n${text.slice(0, 8000)}` },
      ],
-      response_format: { type: "json_object" },
+      // response_format is OpenAI-specific. MiniMax /v1/chat/completions may not honor it.
      ...(provider === "openai" ? { response_format: { type: "json_object" } } : {}),
      temperature: 0.1,
    }),
  });
  if (!res.ok) {
    const err = await res.text();
-    throw new Error(`OpenAI API error: ${res.status} — ${err}`);
+    throw new Error(`${provider} API error: ${res.status} — ${err}`);
  }
  const data = await res.json();
@@ -130,7 +130,7 @@ export default function BlogPage() {
      {/* Hero */}
      <section className="py-12 sm:py-16 md:py-20">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 text-center">
-          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
            Blog & Resources
          </h1>
          <p className="text-lg sm:text-xl text-[#6b8f71]">
@@ -151,7 +151,7 @@ export default function BlogPage() {
                <span className="inline-block w-fit px-3 py-1 bg-[#c97a3e]/10 text-[#c97a3e] text-sm font-medium rounded-full mb-4">
                  Featured
                </span>
-                <h2 className="text-3xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+                <h2 className="text-3xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
                  Getting Started with Route Commerce
                </h2>
                <p className="text-[#666] mb-6">
@@ -234,7 +234,7 @@ export default function BlogPage() {
      {/* Newsletter */}
      <section className="py-20 bg-gradient-to-br from-[#1a4d2e] to-[#2d6a4f]">
        <div className="max-w-2xl mx-auto px-6 text-center">
-          <h2 className="text-3xl font-bold text-white mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          <h2 className="text-3xl font-bold text-white mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
            Stay in the Loop
          </h2>
          <p className="text-[#faf8f5]/80 mb-8">
@@ -224,7 +224,7 @@ export default function BrandsPage() {
      <style jsx>{`
        .brands-page {
-          font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
+          font-family: var(--font-manrope);
          background: #ffffff;
          min-height: 100vh;
        }
@@ -1,76 +1,6 @@
-import type { Metadata } from "next";
+import { LoadingFade } from "@/components/transitions/LoadingFade";
 export const metadata: Metadata = {
  title: "Your Cart — Route Commerce",
  description: "Review and manage your shopping cart. Select pickup stops, adjust quantities, and proceed to checkout.",
  keywords: ["cart", "shopping cart", "produce order", "checkout", "pickup"],
  robots: {
    index: false,
    follow: false,
  },
 };
 /** Subtle navigation indicator — see LoadingFade for rationale. */
 export default function Loading() {
-  return (
+  return <LoadingFade />;
    <div className="min-h-screen relative">
      {/* Dark background matching cart page */}
      <div className="fixed inset-0 bg-gradient-to-br from-zinc-950 via-zinc-900 to-zinc-950" />
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-emerald-500/10 rounded-full blur-[120px]" aria-hidden="true" />
      </div>
      {/* Minimal header skeleton */}
      <div className="h-20 border-b border-white/5" />
      {/* Content skeleton */}
      <main className="px-6 py-12 relative">
        <div className="mx-auto grid max-w-6xl gap-10 lg:grid-cols-[1fr_380px]">
          <div>
            {/* Title skeleton */}
            <div className="h-10 w-56 rounded-lg bg-white/5 animate-pulse" />
            <div className="h-5 w-80 rounded mt-3 bg-white/5 animate-pulse" />
            {/* Cart items skeleton */}
            <div className="mt-10 space-y-4">
              {[1, 2, 3].map((i) => (
                <div key={i} className="glass-card p-6">
                  <div className="flex items-center justify-between">
                    <div className="space-y-2">
                      <div className="h-5 w-40 rounded bg-white/5 animate-pulse" />
                      <div className="h-4 w-24 rounded bg-white/5 animate-pulse" />
                    </div>
                    <div className="flex items-center gap-3">
                      <div className="h-11 w-11 rounded-xl bg-white/5 animate-pulse" />
                      <div className="h-11 w-10 rounded bg-white/5 animate-pulse" />
                      <div className="h-11 w-11 rounded-xl bg-white/5 animate-pulse" />
                    </div>
                  </div>
                  <div className="mt-4 flex items-center justify-between pt-3 border-t border-white/5">
                    <div className="h-5 w-20 rounded bg-white/5 animate-pulse" />
                    <div className="h-4 w-16 rounded bg-white/5 animate-pulse" />
                  </div>
                </div>
              ))}
            </div>
          </div>
          {/* Sidebar skeleton */}
          <aside>
            <div className="glass-card p-6 sticky top-6">
              <div className="h-6 w-32 rounded bg-white/5 animate-pulse" />
              <div className="mt-5 space-y-3">
                <div className="h-4 w-full rounded bg-white/5 animate-pulse" />
                <div className="h-4 w-3/4 rounded bg-white/5 animate-pulse" />
              </div>
              <div className="mt-5 h-14 w-full rounded-xl bg-white/5 animate-pulse" />
              <div className="mt-4 h-4 w-32 mx-auto rounded bg-white/5 animate-pulse" />
            </div>
          </aside>
        </div>
      </main>
      {/* Status for accessibility */}
      <span role="status" className="sr-only">Loading your cart...</span>
    </div>
  );
 }
@@ -132,7 +132,7 @@ export default function ChangelogPage() {
      <main className="max-w-4xl mx-auto px-6 py-16">
        {/* Hero */}
        <div className="text-center mb-16">
-          <h1 className="text-5xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          <h1 className="text-5xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
            Changelog
          </h1>
          <p className="text-xl text-[#6b8f71] max-w-2xl mx-auto">
@@ -1,65 +1,6 @@
-import type { Metadata } from "next";
+import { LoadingFade } from "@/components/transitions/LoadingFade";
 export const metadata: Metadata = {
  title: "Processing...",
  description: "Loading checkout...",
  robots: {
    index: false,
    follow: false,
  },
 };
 /** Subtle navigation indicator — see LoadingFade for rationale. */
 export default function Loading() {
-  return (
+  return <LoadingFade />;
    <div className="min-h-screen bg-gradient-to-br from-stone-50 via-white to-emerald-50/30">
      <div className="h-20 border-b border-slate-100/50" />
      <main className="px-6 py-12">
        <div className="mx-auto grid max-w-6xl gap-8 md:grid-cols-[1fr_400px]">
          <div>
            {/* Title skeleton */}
            <div className="h-10 w-32 rounded-lg bg-slate-200 animate-pulse" />
            <div className="h-5 w-64 rounded mt-3 bg-slate-100 animate-pulse" />
            {/* Form skeleton */}
            <div className="mt-8 space-y-6">
              <div className="rounded-2xl bg-white p-6 shadow-sm border border-slate-100">
                <div className="h-6 w-40 rounded bg-slate-100 animate-pulse" />
                <div className="mt-4 space-y-4">
                  <div className="space-y-2">
                    <div className="h-4 w-20 rounded bg-slate-100 animate-pulse" />
                    <div className="h-12 w-full rounded-xl bg-slate-100 animate-pulse" />
                  </div>
                  <div className="space-y-2">
                    <div className="h-4 w-16 rounded bg-slate-100 animate-pulse" />
                    <div className="h-12 w-full rounded-xl bg-slate-100 animate-pulse" />
                  </div>
                </div>
              </div>
              {/* Button skeleton */}
              <div className="h-14 w-full rounded-xl bg-slate-100 animate-pulse" />
            </div>
          </div>
          {/* Sidebar skeleton */}
          <aside>
            <div className="rounded-2xl bg-white p-6 shadow-sm border border-slate-100 sticky top-6">
              <div className="h-6 w-32 rounded bg-slate-100 animate-pulse" />
              <div className="mt-4 space-y-3">
                {[1, 2, 3].map((i) => (
                  <div key={i} className="flex justify-between">
                    <div className="h-4 w-32 rounded bg-slate-100 animate-pulse" />
                    <div className="h-4 w-16 rounded bg-slate-100 animate-pulse" />
                  </div>
                ))}
              </div>
            </div>
          </aside>
        </div>
      </main>
      <span role="status" className="sr-only">Loading checkout...</span>
    </div>
  );
 }
@@ -1,78 +1,6 @@
-import type { Metadata } from "next";
+import { LoadingFade } from "@/components/transitions/LoadingFade";
 export const metadata: Metadata = {
  title: "Loading contact...",
  description: "Loading...",
  robots: {
    index: false,
    follow: false,
  },
 };
 /** Subtle navigation indicator — see LoadingFade for rationale. */
 export default function Loading() {
-  return (
+  return <LoadingFade />;
    <div className="min-h-screen bg-white">
      {/* Header skeleton */}
      <header className="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-xl border-b border-[#e5e5e5]">
        <div className="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-11 h-11 rounded-2xl bg-gradient-to-br from-[#e5e5e5] to-[#f5f5f5] animate-pulse" />
            <div className="h-6 w-36 rounded bg-[#e5e5e5] animate-pulse" />
          </div>
          <div className="h-5 w-24 rounded bg-[#e5e5e5] animate-pulse" />
        </div>
      </header>
      <main className="max-w-5xl mx-auto px-6 py-32">
        {/* Page header skeleton */}
        <div className="text-center mb-16">
          <div className="h-4 w-20 rounded-full bg-[#e5e5e5] mx-auto mb-4 animate-pulse" />
          <div className="h-12 w-64 rounded-lg bg-[#e5e5e5] mx-auto mb-4 animate-pulse" />
          <div className="h-5 w-96 rounded bg-[#e5e5e5] mx-auto animate-pulse" />
        </div>
        {/* Contact cards skeleton */}
        <div className="grid gap-6 md:grid-cols-3 mb-16">
          {[1, 2, 3].map((i) => (
            <div key={i} className="rounded-3xl bg-white border border-[#e5e5e5] p-8">
              <div className="h-14 w-14 rounded-2xl bg-[#e5e5e5] mx-auto mb-5 animate-pulse" />
              <div className="h-5 w-24 rounded bg-[#e5e5e5] mx-auto mb-3 animate-pulse" />
              <div className="h-4 w-40 rounded bg-[#e5e5e5] mx-auto animate-pulse" />
            </div>
          ))}
        </div>
        {/* Form skeleton */}
        <div className="rounded-3xl bg-white border border-[#e5e5e5] p-10">
          <div className="h-5 w-20 rounded-full bg-[#e5e5e5] mb-3 animate-pulse" />
          <div className="h-8 w-40 rounded bg-[#e5e5e5] mb-4 animate-pulse" />
          <div className="h-1 w-12 bg-[#e5e5e5] mb-8 animate-pulse" />
          <div className="space-y-6">
            <div className="grid gap-6 md:grid-cols-2">
              <div className="space-y-2">
                <div className="h-4 w-20 rounded bg-[#e5e5e5] animate-pulse" />
                <div className="h-12 rounded-xl bg-[#e5e5e5] animate-pulse" />
              </div>
              <div className="space-y-2">
                <div className="h-4 w-16 rounded bg-[#e5e5e5] animate-pulse" />
                <div className="h-12 rounded-xl bg-[#e5e5e5] animate-pulse" />
              </div>
            </div>
            <div className="space-y-2">
              <div className="h-4 w-16 rounded bg-[#e5e5e5] animate-pulse" />
              <div className="h-12 rounded-xl bg-[#e5e5e5] animate-pulse" />
            </div>
            <div className="space-y-2">
              <div className="h-4 w-20 rounded bg-[#e5e5e5] animate-pulse" />
              <div className="h-32 rounded-xl bg-[#e5e5e5] animate-pulse" />
            </div>
            <div className="h-12 w-32 rounded-xl bg-[#e5e5e5] animate-pulse" />
          </div>
        </div>
      </main>
      <span role="status" className="sr-only">Loading contact page...</span>
    </div>
  );
 }
@@ -1,7 +1,13 @@
 "use client";
 import Link from "next/link";
 import { useEffect } from "react";
 /**
 * Root error boundary — the safety net for any uncaught error in the
 * app. Renders inside the root layout, so it inherits the same font
 * variables and design tokens as everything else.
 */
 export default function ErrorPage({
  error,
  reset,
@@ -9,44 +15,78 @@ export default function ErrorPage({
  error: Error & { digest?: string };
  reset: () => void;
 }) {
  useEffect(() => {
    // Surface to the console for development; the Sentry-ready logger
    // in src/lib/sentry.ts can be wired in here when keys are configured.
    // eslint-disable-next-line no-console
    console.error("[app/error]", error);
  }, [error]);
  return (
-    <div className="min-h-screen flex items-center justify-center px-6 relative">
+    <main className="atelier-canvas relative min-h-screen flex items-center justify-center px-6 py-16 overflow-hidden">
-      {/* Background */}
+      <div className="atelier-grain" aria-hidden="true" />
-      <div className="fixed inset-0 bg-gradient-to-br from-zinc-950 via-zinc-900 to-zinc-950" />
+
-      <div className="fixed inset-0 pointer-events-none">
+      {/* Ambient orbs */}
-        <div className="absolute top-1/3 left-1/3 w-96 h-96 bg-red-500/5 rounded-full blur-3xl" />
+      <div className="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
        <div
          className="absolute top-1/4 left-1/4 w-96 h-96 rounded-full opacity-30"
          style={{ background: "radial-gradient(circle, rgba(185, 28, 28, 0.12) 0%, transparent 70%)", filter: "blur(48px)" }}
        />
        <div
          className="absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full opacity-20"
          style={{ background: "radial-gradient(circle, rgba(202, 138, 4, 0.16) 0%, transparent 70%)", filter: "blur(48px)" }}
        />
      </div>
-      <div className="text-center max-w-md mx-auto relative">
+      <div className="relative z-10 max-w-md w-full text-center atelier-enter">
-        <div className="glass-card p-10">
+        <div className="atelier-section-num justify-center mb-4">No. 500</div>
-          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-red-500/10 border border-red-500/20 mb-6">
+
-            <svg className="w-8 h-8 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <h1 className="atelier-title text-5xl sm:text-6xl">
-              <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          Something <span className="atelier-italic text-[#786B53]">broke</span>
        </h1>
        <p className="mt-4 text-stone-600 text-sm leading-relaxed">
          We hit an unexpected snag loading this page. Our harvest crew has been notified.
        </p>
        {error.message && (
          <details className="mt-6 text-left">
            <summary className="atelier-fineprint cursor-pointer hover:text-stone-900 transition-colors">
              Error details
            </summary>
            <div className="mt-3 rounded-lg border border-stone-200 bg-white/70 backdrop-blur-sm p-3.5 text-xs font-mono text-stone-700 break-words">
              {error.message}
              {error.digest && (
                <div className="mt-2 pt-2 border-t border-stone-200 text-stone-500">
                  digest: <span className="text-stone-700">{error.digest}</span>
                </div>
              )}
            </div>
          </details>
        )}
        <div className="atelier-rule my-8" />
        <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-center gap-3">
          <button
            type="button"
            onClick={reset}
            className="atelier-cta"
            aria-label="Retry loading this page"
          >
            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
              <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
-          </div>
+            <span className="relative z-10">Try again</span>
-          <h1 className="text-3xl font-semibold text-white tracking-tight">Something went wrong</h1>
+            <span className="atelier-cta-shimmer" aria-hidden="true" />
-          <p className="mt-3 text-zinc-400 text-sm">
+          </button>
-            {error.message || "An unexpected error occurred."}
+          <Link
-          </p>
+            href="/"
-          {error.digest && (
+            className="atelier-discard text-center"
-            <p className="mt-2 text-xs text-zinc-600 font-mono">Digest: {error.digest}</p>
+          >
-          )}
+            ← Return home
-          <div className="mt-8 flex items-center justify-center gap-4">
+          </Link>
            <button
              onClick={reset}
              className="rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 px-5 py-2.5 text-sm font-medium text-white transition-all backdrop-blur-sm"
            >
              Try again
            </button>
            <Link
              href="/"
              className="rounded-xl bg-gradient-to-r from-emerald-500 to-emerald-400 hover:from-emerald-400 hover:to-emerald-300 px-5 py-2.5 text-sm font-semibold text-white transition-all shadow-lg shadow-emerald-500/20"
            >
              Go home
            </Link>
          </div>
        </div>
      </div>
-    </div>
+    </main>
  );
 }
@@ -177,6 +177,70 @@ select:-webkit-autofill:focus {
  color: #999999;
 }
 /* ─── View Transitions (route fades) ────────────────────────────────────── */
 /*
 * Native browser View Transitions API, opt-in via the
 * <ViewTransition name="page-content"> component and Next.js's
 * experimental.viewTransition config. These rules define the actual
 * crossfade / slide. Without them, transitions still work but use
 * the browser default (instant cut).
 *
 * 220ms is the sweet spot for route changes: long enough to soften
 * the cut, short enough to feel like a single app. The cubic-bezier
 * keeps the start crisp and the finish gentle.
 */
 ::view-transition-old(page-content) {
  animation: route-fade-out 180ms cubic-bezier(0.4, 0, 0.2, 1) both;
 }
 ::view-transition-new(page-content) {
  animation: route-fade-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
 }
@keyframes route-fade-out {
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
 }
@keyframes route-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
 }
 /* Top-of-page shimmer for the LoadingFade placeholder bar. */
@keyframes transition-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
 }
 /* Reduce motion: respect the user's OS-level preference. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(page-content),
  ::view-transition-new(page-content) {
    animation: none !important;
  }
  @keyframes transition-shimmer {
    0%, 100% { transform: translateX(0); }
  }
  /* Atelier modal + stagger animations also respect reduced-motion */
  .atelier-enter,
  .atelier-backdrop,
  .atelier-stagger > *,
  .atelier-cta .atelier-cta-shimmer {
    animation: none !important;
  }
  .atelier-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
 }
 /* Light mode placeholder (used by storefront) */
 .light ::placeholder,
 .light::-webkit-input-placeholder,
@@ -1030,3 +1094,75 @@ select:-webkit-autofill:focus {
  color: #991B1B;
 }
 .atelier-error svg { flex-shrink: 0; margin-top: 1px; }
 /* ─── Polish utilities — "Atelier des Récoltes" additions ─────── */
 /* Tabular numerals for prices, quantities, dates */
 .atelier-numerals {
  font-family: var(--font-fraunces);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.015em;
 }
 /* Inline editorial pill — for tags, badges, status chips */
 .atelier-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(28, 25, 23, 0.08);
  border-radius: 999px;
  font-family: var(--font-fragment-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #1C1917;
  white-space: nowrap;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .atelier-pill:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(34, 78, 47, 0.25);
 }
 .atelier-pill .atelier-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #16A34A;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
 }
 .atelier-pill.is-gold .atelier-pill-dot {
  background: #CA8A04;
  box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.18);
 }
 .atelier-pill.is-muted .atelier-pill-dot {
  background: #A8A29E;
  box-shadow: none;
 }
 /* Refined focus ring for atelier inputs (replaces default browser ring) */
 .atelier-input:focus-visible {
  outline: none;
  box-shadow: 0 1px 0 0 #224E2F;
 }
 /* Small caps editorial small-text — for footnote, fine print */
 .atelier-fineprint {
  font-family: var(--font-fragment-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #786B53;
  line-height: 1.5;
 }
 /* Soft cream canvas (lighter than atelier-canvas) — for sub-pages */
 .atelier-canvas-soft {
  background-color: #FDFBF6;
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(180, 155, 100, 0.06) 0%, transparent 60%);
  position: relative;
 }
@@ -1,40 +1,6 @@
-"use client";
+import { LoadingFade } from "@/components/transitions/LoadingFade";
 import { motion } from "framer-motion";
 /** Subtle navigation indicator — see LoadingFade for rationale. */
 export default function Loading() {
-  return (
+  return <LoadingFade />;
    <div className="min-h-screen bg-stone-50">
      <div className="mx-auto max-w-4xl px-6 py-20">
        {/* Hero skeleton */}
        <div className="mb-20 animate-pulse text-center">
          <div className="h-3 w-24 rounded bg-blue-100 mx-auto mb-5" />
          <div className="h-20 w-full max-w-xl mx-auto rounded-lg bg-blue-50 mb-5" />
          <div className="h-8 w-full max-w-2xl mx-auto rounded bg-blue-50" />
        </div>
        {/* Content sections skeleton */}
        <div className="space-y-20">
          {[0, 1, 2].map((i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.1 }}
              className="grid md:grid-cols-2 gap-12 items-center"
            >
              <div className="animate-pulse space-y-4">
                <div className="h-4 w-20 rounded bg-blue-100" />
                <div className="h-8 w-3/4 rounded bg-stone-200" />
                <div className="h-4 w-full rounded bg-stone-100" />
                <div className="h-4 w-full rounded bg-stone-100" />
                <div className="h-4 w-2/3 rounded bg-stone-100" />
              </div>
              <div className="h-64 rounded-3xl bg-gradient-to-br from-blue-50 to-white border-2 border-blue-100" />
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
 }
@@ -1,62 +1,6 @@
-"use client";
+import { LoadingFade } from "@/components/transitions/LoadingFade";
 import { motion } from "framer-motion";
 /** Subtle navigation indicator — see LoadingFade for rationale. */
 export default function Loading() {
-  return (
+  return <LoadingFade />;
    <div className="min-h-screen bg-stone-50">
      <div className="mx-auto max-w-4xl px-6 py-20">
        {/* Header skeleton */}
        <div className="mb-16 animate-pulse text-center">
          <div className="h-4 w-20 rounded bg-blue-100 mx-auto mb-5" />
          <div className="h-16 w-64 mx-auto rounded-lg bg-stone-200 mb-5" />
          <div className="h-5 w-96 max-w-full mx-auto rounded bg-stone-200" />
        </div>
        {/* Contact cards skeleton */}
        <div className="grid gap-6 md:grid-cols-3 mb-16">
          {[0, 1, 2].map((i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.1 }}
              className="rounded-3xl bg-white border-2 border-stone-200 p-8 shadow-xl text-center"
            >
              <div className="h-14 w-14 rounded-2xl bg-blue-100 mx-auto mb-5" />
              <div className="h-5 w-24 mx-auto rounded bg-stone-200 mb-3" />
              <div className="h-4 w-full max-w-[160px] mx-auto rounded bg-stone-100" />
            </motion.div>
          ))}
        </div>
        {/* Form skeleton */}
        <div className="rounded-3xl bg-white border-2 border-stone-200 p-10 shadow-xl">
          <div className="animate-pulse space-y-6">
            <div className="h-6 w-32 rounded bg-stone-200" />
            <div className="h-8 w-48 rounded bg-stone-200" />
            <div className="grid gap-6 md:grid-cols-2 mt-8">
              <div className="space-y-2">
                <div className="h-4 w-20 rounded bg-stone-100" />
                <div className="h-14 rounded-xl bg-stone-100" />
              </div>
              <div className="space-y-2">
                <div className="h-4 w-20 rounded bg-stone-100" />
                <div className="h-14 rounded-xl bg-stone-100" />
              </div>
            </div>
            <div className="space-y-2">
              <div className="h-4 w-16 rounded bg-stone-100" />
              <div className="h-14 rounded-xl bg-stone-100" />
            </div>
            <div className="space-y-2">
              <div className="h-4 w-20 rounded bg-stone-100" />
              <div className="h-32 rounded-xl bg-stone-100" />
            </div>
            <div className="h-14 w-40 rounded-xl bg-blue-100 mt-8" />
          </div>
        </div>
      </div>
    </div>
  );
 }
@@ -1,41 +1,6 @@
-"use client";
+import { LoadingFade } from "@/components/transitions/LoadingFade";
 import { motion } from "framer-motion";
 /** Subtle navigation indicator — see LoadingFade for rationale. */
 export default function Loading() {
-  return (
+  return <LoadingFade />;
    <div className="min-h-screen bg-stone-50">
      <div className="mx-auto max-w-3xl px-6 py-20">
        {/* Header skeleton */}
        <div className="mb-14 text-center animate-pulse">
          <div className="h-4 w-16 rounded bg-blue-100 mx-auto mb-4" />
          <div className="h-16 w-48 mx-auto rounded-lg bg-stone-200 mb-5" />
          <div className="h-5 w-96 max-w-full mx-auto rounded bg-stone-200" />
        </div>
        {/* Search skeleton */}
        <div className="mb-12">
          <div className="h-14 rounded-2xl bg-white border-2 border-stone-200 shadow-lg" />
        </div>
        {/* FAQ items skeleton */}
        <div className="space-y-4">
          {[0, 1, 2, 3, 4].map((i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.05 }}
              className="rounded-2xl bg-white border-2 border-stone-200 overflow-hidden"
            >
              <div className="flex items-center justify-between px-6 py-5">
                <div className="h-5 w-3/4 rounded bg-stone-200" />
                <div className="h-8 w-8 rounded-full bg-blue-100" />
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
 }
@@ -1,23 +1,35 @@
 import type { Metadata, Viewport } from "next";
 import { SmoothViewTransition } from "@/components/transitions/SmoothViewTransition";
 const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://routecommerce.com";
-// BreadcrumbList schema for SEO
+// Structured data for the Indian River Direct storefront.
-const indianRiverBreadcrumbSchema = {
+// LocalBusiness + BreadcrumbList for the family farm brand.
 const indianRiverStructuredData = {
  "@context": "https://schema.org",
-  "@type": "BreadcrumbList",
+  "@graph": [
  "itemListElement": [
    {
-      "@type": "ListItem",
+      "@type": "BreadcrumbList",
-      "position": 1,
+      itemListElement: [
-      "name": "Home",
+        { "@type": "ListItem", position: 1, name: "Home", item: BASE_URL },
-      "item": BASE_URL,
+        { "@type": "ListItem", position: 2, name: "Indian River Direct", item: `${BASE_URL}/indian-river-direct` },
      ],
    },
    {
-      "@type": "ListItem",
+      "@type": "LocalBusiness",
-      "position": 2,
+      "@id": `${BASE_URL}/indian-river-direct/#localbusiness`,
-      "name": "Indian River Direct",
+      name: "Indian River Direct",
-      "item": `${BASE_URL}/indian-river-direct`,
+      description:
        "Fresh peaches and citrus from our Florida groves to truckload sales in your neighborhood. Family-owned since 1985.",
      url: `${BASE_URL}/indian-river-direct`,
      image: `${BASE_URL}/og-default.svg`,
      priceRange: "$$",
      address: {
        "@type": "PostalAddress",
        addressRegion: "FL",
        addressCountry: "US",
      },
      foundingDate: "1985",
    },
  ],
 };
@@ -41,7 +53,7 @@ export const metadata: Metadata = {
    type: "website",
    images: [
      {
-        url: "/og-indian-river.jpg",
+        url: "/og-default.svg",
        width: 1200,
        height: 630,
        alt: "Indian River Direct - Fresh Peaches & Citrus",
@@ -54,7 +66,7 @@ export const metadata: Metadata = {
    description: "Fresh peaches and citrus from our Florida groves. Family-owned since 1985. Pre-order for 2026 season.",
    site: "@IndianRiverDirect",
    creator: "@IndianRiverDirect",
-    images: ["/og-indian-river.jpg"],
+    images: ["/og-default.svg"],
  },
  alternates: {
    canonical: `${BASE_URL}/indian-river-direct`,
@@ -68,7 +80,7 @@ export const metadata: Metadata = {
    },
  },
  other: {
-    "application/ld+json": JSON.stringify(indianRiverBreadcrumbSchema),
+    "application/ld+json": JSON.stringify(indianRiverStructuredData),
  },
 };
@@ -91,8 +103,10 @@ export default function IndianRiverLayout({ children }: { children: React.ReactN
        <div className="absolute bottom-0 right-1/4 w-80 h-80 bg-gradient-to-br from-blue-50/40 to-transparent rounded-full blur-3xl" />
      </div>
-      {/* Content wrapper */}
+      {/* Content wrapper — crossfades on navigation. */}
-      <div className="relative">{children}</div>
+      <div id="page-content" className="relative outline-none">
        <SmoothViewTransition>{children}</SmoothViewTransition>
      </div>
    </div>
  );
 }
@@ -1,78 +1,7 @@
-"use client";
+import { LoadingFade } from "@/components/transitions/LoadingFade";
-import { motion } from "framer-motion";
+/** Indian River Direct storefront loading — light blue glass backdrop
-
+ *  stays mounted in the layout. */
-export default function Loading() {
+export default function IndianRiverLoading() {
-  return (
+  return <LoadingFade />;
    <main className="min-h-screen bg-white/50 backdrop-blur-xl">
      <div className="mx-auto max-w-6xl px-6 py-16">
        {/* Header skeleton with blue accent */}
        <div className="mb-16 animate-pulse">
          <div className="h-3 w-20 rounded bg-blue-100 mb-4" />
          <div className="h-16 w-80 rounded-lg bg-blue-50 mb-4" />
          <div className="h-6 w-96 max-w-full rounded bg-blue-50" />
        </div>
        {/* Product cards skeleton */}
        <div className="grid gap-6 md:grid-cols-3">
          {[0, 1, 2].map((i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.1 }}
              className="rounded-3xl bg-white border-2 border-stone-200 overflow-hidden shadow-lg"
            >
              {/* Image skeleton */}
              <div className="h-48 bg-gradient-to-br from-blue-50 to-white relative overflow-hidden">
                <div className="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-blue-100/60 to-transparent" />
              </div>
              {/* Content skeleton */}
              <div className="p-6 space-y-4">
                <div className="h-6 w-3/4 rounded bg-stone-200" />
                <div className="h-4 w-full rounded bg-stone-100" />
                <div className="h-4 w-2/3 rounded bg-stone-100" />
                <div className="pt-4 flex items-center justify-between">
                  <div className="h-8 w-20 rounded-lg bg-blue-50" />
                  <div className="h-11 w-28 rounded-xl bg-blue-100" />
                </div>
              </div>
            </motion.div>
          ))}
        </div>
        {/* Stops section skeleton */}
        <div className="mt-20">
          <div className="animate-pulse mb-10">
            <div className="h-3 w-24 rounded bg-blue-100 mb-4" />
            <div className="h-10 w-64 rounded-lg bg-blue-50 mb-3" />
            <div className="h-4 w-48 rounded bg-blue-50" />
          </div>
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {[0, 1, 2, 3, 4, 5].map((i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: i * 0.05 }}
                className="rounded-3xl bg-gradient-to-br from-blue-50 to-white border-2 border-blue-100 p-6"
              >
                <div className="flex items-start justify-between mb-3">
                  <div>
                    <div className="h-6 w-32 rounded bg-stone-200 mb-2" />
                    <div className="h-4 w-full rounded bg-stone-100" />
                  </div>
                  <div className="h-6 w-16 rounded-full bg-blue-100" />
                </div>
                <div className="space-y-1">
                  <div className="h-4 w-28 rounded bg-stone-100" />
                  <div className="h-4 w-20 rounded bg-stone-100" />
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </main>
  );
 }
@@ -1,70 +1,6 @@
-"use client";
+import { LoadingFade } from "@/components/transitions/LoadingFade";
 import { motion } from "framer-motion";
 /** Subtle navigation indicator — see LoadingFade for rationale. */
 export default function Loading() {
-  return (
+  return <LoadingFade />;
    <div className="min-h-screen bg-stone-50/80 backdrop-blur-xl">
      <div className="mx-auto max-w-5xl px-6 py-20">
        {/* Back navigation skeleton */}
        <div className="mb-10 animate-pulse">
          <div className="h-5 w-32 rounded bg-stone-200" />
        </div>
        {/* Stop header skeleton */}
        <div className="mb-12 animate-pulse rounded-3xl bg-white/60 border border-white/50 p-8">
          <div className="h-3 w-32 rounded bg-blue-100 mb-4" />
          <div className="h-16 w-80 rounded-lg bg-stone-200 mb-4" />
          <div className="h-5 w-full max-w-md rounded bg-stone-200 mb-4" />
          <div className="h-px w-12 bg-blue-100" />
        </div>
        {/* Stop info skeleton */}
        <div className="mb-14 rounded-3xl bg-white/80 border border-white/50 p-8 shadow-xl">
          <div className="grid gap-4 md:grid-cols-3">
            {[0, 1, 2].map((i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: i * 0.1 }}
                className="flex items-start gap-4 py-4 px-5 rounded-2xl bg-stone-50"
              >
                <div className="h-10 w-10 rounded-xl bg-blue-50" />
                <div className="flex-1">
                  <div className="h-3 w-12 rounded bg-stone-200 mb-2" />
                  <div className="h-5 w-24 rounded bg-stone-200" />
                </div>
              </motion.div>
            ))}
          </div>
        </div>
        {/* Products section skeleton */}
        <div className="animate-pulse">
          <div className="h-4 w-20 rounded bg-blue-100 mb-4" />
          <div className="h-10 w-48 rounded bg-stone-200 mb-4" />
          <div className="h-4 w-64 rounded bg-stone-200 mb-10" />
          <div className="grid gap-8 md:grid-cols-3">
            {[0, 1, 2].map((i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: i * 0.1 }}
                className="rounded-3xl bg-white overflow-hidden shadow-lg"
              >
                <div className="h-48 bg-gradient-to-br from-blue-50 to-white" />
                <div className="p-6 space-y-3">
                  <div className="h-6 w-3/4 rounded bg-stone-200" />
                  <div className="h-4 w-full rounded bg-stone-100" />
                  <div className="h-4 w-2/3 rounded bg-stone-100" />
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
 }
@@ -1,8 +1,9 @@
 import type { Metadata } from "next";
 import { LoadingFade } from "@/components/transitions/LoadingFade";
 export const metadata: Metadata = {
-  title: "Loading Route Commerce...",
+  title: "Loading — Route Commerce",
-  description: "Loading...",
+  description: "Loading content from Route Commerce",
  robots: {
    index: false,
    follow: false,
@@ -10,44 +11,8 @@ export const metadata: Metadata = {
 };
 export default function Loading() {
-  return (
+  // No skeleton. The previous page stays visible while the next one
-    <div className="min-h-screen flex items-center justify-center relative overflow-hidden" style={{ backgroundColor: "#faf8f5" }}>
+  // streams in, and the View Transition API crossfades them. This
-      {/* Subtle loading animation */}
+  // thin top bar is the only signal that navigation is in flight.
-      <div className="flex flex-col items-center gap-6">
+  return <LoadingFade />;
        <div 
          className="w-16 h-16 rounded-2xl flex items-center justify-center animate-pulse"
          style={{ 
            background: "linear-gradient(135deg, #1a4d2e 0%, #166534 100%)",
            boxShadow: "0 8px 32px rgba(26, 77, 46, 0.3)"
          }}
          aria-label="Loading"
          role="status"
        >
          <svg className="w-8 h-8 text-white animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M13 2L4.5 13.5H11.5L10.5 22L19 10.5H12L13 2Z" />
          </svg>
        </div>
        <div className="text-center">
          <p className="text-lg font-semibold text-stone-700" style={{ fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif" }}>
            Loading
          </p>
          <p className="text-sm text-stone-500 mt-1">Please wait...</p>
        </div>
      </div>
      {/* Decorative elements */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden">
        <div 
          className="absolute -top-32 -right-32 w-96 h-96 rounded-full opacity-10"
          style={{ background: "radial-gradient(circle at 30% 30%, #c97a3e20 0%, transparent 70%)", filter: "blur(40px)" }}
          aria-hidden="true"
        />
        <div 
          className="absolute -bottom-48 -left-48 w-[600px] h-[600px] rounded-full opacity-10"
          style={{ background: "radial-gradient(circle at 70% 70%, #6b8f7130 0%, transparent 70%)", filter: "blur(60px)" }}
          aria-hidden="true"
        />
      </div>
    </div>
  );
 }
@@ -1,6 +1,6 @@
 "use client";
-import { useState } from "react";
+import { useState, useId } from "react";
 type LoginClientProps = {
  error: string | null;
@@ -12,6 +12,8 @@ const REDIRECT_URL = "/admin";
 const isDev = process.env.NODE_ENV !== "production";
 export default function LoginClient({ error }: LoginClientProps) {
  const emailId = useId();
  const passwordId = useId();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
@@ -54,154 +56,171 @@ export default function LoginClient({ error }: LoginClientProps) {
    window.location.href = REDIRECT_URL;
  }
-  return (
+  const displayError = error ?? localError;
    <main
      className="min-h-screen flex flex-col relative overflow-hidden"
      style={{ backgroundColor: "#faf8f5", height: "100vh" }}
    >
      <style jsx global>{`
        @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");
        html, body { overflow: hidden; }
      `}</style>
  return (
    <main className="atelier-canvas relative min-h-screen flex flex-col overflow-hidden">
      {/* Decorative grain layer */}
      <div className="atelier-grain" aria-hidden="true" />
      {/* Ambient background flourishes */}
      <div className="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
-        <div className="absolute -top-32 -right-32 w-96 h-96 rounded-full opacity-20" style={{ background: "radial-gradient(circle at 30% 30%, #c97a3e20 0%, transparent 70%)", filter: "blur(40px)" }} />
+        <div
-        <div className="absolute -bottom-48 -left-48 w-[600px] h-[600px] rounded-full opacity-15" style={{ background: "radial-gradient(circle at 70% 70%, #6b8f7130 0%, transparent 70%)", filter: "blur(60px)" }} />
+          className="absolute -top-32 -right-32 w-[28rem] h-[28rem] rounded-full opacity-30"
-        <div className="absolute top-1/3 left-1/4 w-72 h-72 rounded-full opacity-10" style={{ background: "radial-gradient(circle, #1a4d2e15 0%, transparent 70%)", filter: "blur(30px)" }} />
+          style={{ background: "radial-gradient(circle at 30% 30%, rgba(202, 138, 4, 0.18) 0%, transparent 70%)", filter: "blur(48px)" }}
        />
        <div
          className="absolute -bottom-48 -left-48 w-[36rem] h-[36rem] rounded-full opacity-25"
          style={{ background: "radial-gradient(circle at 70% 70%, rgba(34, 78, 47, 0.16) 0%, transparent 70%)", filter: "blur(60px)" }}
        />
      </div>
-      <div className="flex-1 flex items-center justify-center px-6 py-12 relative z-10">
+      {/* Editorial corner flourish */}
-        <div className="w-full max-w-sm">
+      <div className="absolute top-6 left-6 atelier-flourish w-20 h-20 opacity-40" aria-hidden="true" />
          <div className="relative bg-white/80 backdrop-blur-xl rounded-3xl shadow-xl ring-1 ring-black/5 overflow-hidden">
            <div className="absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-[#6b8f71]/30 to-transparent" />
-            <div className="p-8 sm:p-10">
+      <div className="flex-1 flex items-center justify-center px-6 py-12 relative z-10">
-              <div className="text-center mb-8">
+        <div className="w-full max-w-md">
          {/* Editorial numeral + section label */}
          <div className="text-center mb-6">
            <span className="atelier-section-num">No. 01</span>
          </div>
          <div className="atelier-enter relative bg-white/90 backdrop-blur-xl rounded-2xl ring-1 ring-stone-200/80 shadow-[0_24px_64px_-24px_rgba(20,83,45,0.25)] overflow-hidden">
            {/* Top hairline rule */}
            <div className="atelier-rule" />
            <div className="px-8 sm:px-10 py-10">
              {/* Brand mark */}
              <div className="flex flex-col items-center mb-8">
                <div
-                  className="inline-flex h-16 w-16 items-center justify-center rounded-2xl mb-5"
+                  className="inline-flex h-14 w-14 items-center justify-center rounded-2xl mb-5"
                  style={{
-                    background: "linear-gradient(135deg, #1a4d2e 0%, #2d6a45 100%)",
+                    background: "linear-gradient(135deg, #14532D 0%, #1F6B3E 50%, #14532D 100%)",
-                    boxShadow: "0 12px 32px rgba(26, 77, 46, 0.25)",
+                    boxShadow: "0 10px 28px -6px rgba(20, 83, 45, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12)",
                  }}
                >
-                  <svg className="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                  <svg className="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
                  </svg>
                </div>
-                <h1
+                <h1 className="atelier-title text-3xl sm:text-4xl text-center">
-                  className="text-3xl font-semibold text-stone-900"
+                  Welcome <span className="atelier-italic text-[#786B53]">back</span>
                  style={{ fontFamily: "'Cormorant Garamond', Georgia, serif", letterSpacing: "-0.02em" }}
                >
                  Welcome back
                </h1>
-                <p
+                <p className="mt-2 text-sm text-stone-500 text-center">
-                  className="mt-2 text-sm"
+                  Sign in to your <em className="atelier-italic not-italic font-normal">atelier</em> account
                  style={{ fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", color: "#7a7570" }}
                >
                  Sign in to your account
                </p>
              </div>
-              <div className="space-y-3">
+              <form
-                <div>
+                onSubmit={(e) => {
-                  <label className="block text-xs font-medium text-stone-700 mb-1.5" style={{ fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif" }}>
+                  e.preventDefault();
                  handleSignIn();
                }}
                className="space-y-5"
                noValidate
              >
                <div className="flex flex-col gap-1.5">
                  <label htmlFor={emailId} className="atelier-section-label">
                    Email
                  </label>
                  <input
                    id={emailId}
                    type="email"
                    required
                    autoComplete="username"
-                    className="w-full rounded-xl border border-stone-200/80 bg-white px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-[#6b8f71]/40 focus:border-[#6b8f71]"
+                    className="atelier-input"
-                    placeholder="you@example.com"
+                    placeholder="you@yourfarm.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    disabled={loading}
                    onKeyDown={(e) => { if (e.key === "Enter") handleSignIn(); }}
                  />
                </div>
-                <div>
+                <div className="flex flex-col gap-1.5">
-                  <label className="block text-xs font-medium text-stone-700 mb-1.5" style={{ fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif" }}>
+                  <div className="flex items-center justify-between">
-                    Password
+                    <label htmlFor={passwordId} className="atelier-section-label">
-                  </label>
+                      Password
                    </label>
                    <a
                      href="/forgot-password"
                      className="text-[10px] tracking-[0.15em] uppercase text-stone-500 hover:text-[#14532D] transition-colors"
                      style={{ fontFamily: "var(--font-fragment-mono)" }}
                    >
                      Forgot?
                    </a>
                  </div>
                  <input
                    id={passwordId}
                    type="password"
                    required
                    autoComplete="current-password"
-                    className="w-full rounded-xl border border-stone-200/80 bg-white px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-[#6b8f71]/40 focus:border-[#6b8f71]"
+                    className="atelier-input"
                    placeholder="••••••••"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    disabled={loading}
                    onKeyDown={(e) => { if (e.key === "Enter") handleSignIn(); }}
                  />
                </div>
-                {(error || localError) && (
+
-                  <p className="text-sm text-rose-700 bg-rose-50 border border-rose-200 rounded-lg px-3 py-2">
+                {displayError && (
-                    {error ?? localError}
+                  <div
-                  </p>
+                    role="alert"
                    className="atelier-stagger rounded-lg border border-rose-200/80 bg-rose-50/80 px-3.5 py-2.5 text-sm text-rose-800 flex items-start gap-2"
                  >
                    <svg className="h-4 w-4 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                    <span>{displayError}</span>
                  </div>
                )}
                <button
-                  type="button"
+                  type="submit"
                  onClick={handleSignIn}
                  disabled={loading}
-                  className="w-full rounded-xl px-6 py-3.5 text-sm font-semibold text-white shadow-sm transition-all disabled:opacity-60 disabled:cursor-not-allowed active:scale-[0.98]"
+                  className="atelier-cta w-full"
                  style={{
                    fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
                    background: loading
                      ? "linear-gradient(135deg, #6b8f71 0%, #7ba085 100%)"
                      : "linear-gradient(135deg, #1a4d2e 0%, #2d6a45 100%)",
                    boxShadow: "0 8px 24px rgba(26, 77, 46, 0.20)",
                  }}
                >
-                  {loading ? "Signing in…" : "Sign in with email"}
+                  <span className="relative z-10">{loading ? "Signing in…" : "Sign in"}</span>
                  {!loading && (
                    <svg className="h-4 w-4 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                    </svg>
                  )}
                  <span className="atelier-cta-shimmer" aria-hidden="true" />
                </button>
-              </div>
+              </form>
              {/* Development bypass buttons */}
              {isDev && (
-                <div className="mt-6 pt-6 border-t border-stone-200">
+                <div className="mt-8 pt-6 border-t border-stone-200/80">
-                  <p className="text-xs text-stone-500 text-center mb-3" style={{ fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif" }}>
+                  <p className="atelier-section-label text-center mb-3">Dev Mode · Quick Access</p>
                    Dev Mode — Quick Access
                  </p>
                  <div className="grid grid-cols-3 gap-2">
-                    <button
+                    {[
-                      type="button"
+                      { role: "platform_admin", label: "Platform", color: "#14532D" },
-                      onClick={() => handleDevLogin("platform_admin")}
+                      { role: "brand_admin", label: "Brand", color: "#1F6B3E" },
-                      className="rounded-lg px-3 py-2 text-xs font-medium text-white transition-all hover:opacity-90"
+                      { role: "store_employee", label: "Store", color: "#6F8562" },
-                      style={{
+                    ].map((opt) => (
-                        fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                      <button
-                        background: "#1a4d2e",
+                        key={opt.role}
-                      }}
+                        type="button"
-                    >
+                        onClick={() => handleDevLogin(opt.role)}
-                      Platform Admin
+                        className="rounded-lg px-3 py-2 text-[11px] font-semibold text-white transition-all hover:opacity-90 active:scale-[0.98]"
-                    </button>
+                        style={{
-                    <button
+                          fontFamily: "var(--font-manrope)",
-                      type="button"
+                          background: opt.color,
-                      onClick={() => handleDevLogin("brand_admin")}
+                          letterSpacing: "0.04em",
-                      className="rounded-lg px-3 py-2 text-xs font-medium text-white transition-all hover:opacity-90"
+                        }}
-                      style={{
+                      >
-                        fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                        {opt.label}
-                        background: "#2d6a45",
+                      </button>
-                      }}
+                    ))}
                    >
                      Brand Admin
                    </button>
                    <button
                      type="button"
                      onClick={() => handleDevLogin("store_employee")}
                      className="rounded-lg px-3 py-2 text-xs font-medium text-white transition-all hover:opacity-90"
                      style={{
                        fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
                        background: "#6b8f71",
                      }}
                    >
                      Store Employee
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>
          <p className="atelier-fineprint text-center mt-6">
            Protected by Neon Auth · Encrypted at rest
          </p>
        </div>
      </div>
    </main>
@@ -1,59 +1,6 @@
-import type { Metadata } from "next";
+import { LoadingFade } from "@/components/transitions/LoadingFade";
 export const metadata: Metadata = {
  title: "Loading...",
  description: "Loading...",
  robots: {
    index: false,
    follow: false,
  },
 };
 /** Subtle navigation indicator — see LoadingFade for rationale. */
 export default function Loading() {
-  return (
+  return <LoadingFade />;
    <div className="min-h-screen flex items-center justify-center px-6 py-12 bg-gradient-to-br from-stone-50 to-amber-50/30">
      {/* Background orbs */}
      <div 
        className="fixed w-96 h-96 rounded-full pointer-events-none animate-pulse"
        style={{
          background: 'radial-gradient(circle, rgba(34, 197, 94, 0.15) 0%, transparent 70%)',
          top: '10%',
          left: '10%',
          filter: 'blur(60px)'
        }}
        aria-hidden="true"
      />
      {/* Loading card */}
      <div className="w-full max-w-sm relative">
        <div className="bg-white/70 backdrop-blur-2xl rounded-[2rem] shadow-lg p-8">
          {/* Logo skeleton */}
          <div className="flex justify-center mb-10">
            <div className="h-20 w-20 rounded-3xl bg-slate-200 animate-pulse" />
          </div>
          {/* Text skeleton */}
          <div className="space-y-3">
            <div className="h-8 w-32 rounded bg-slate-200 mx-auto animate-pulse" />
            <div className="h-4 w-24 rounded bg-slate-100 mx-auto animate-pulse" />
          </div>
          {/* Form skeleton */}
          <div className="mt-8 space-y-4">
            <div className="space-y-2">
              <div className="h-4 w-16 rounded bg-slate-100 animate-pulse" />
              <div className="h-12 rounded-xl bg-slate-100 animate-pulse" />
            </div>
            <div className="space-y-2">
              <div className="h-4 w-20 rounded bg-slate-100 animate-pulse" />
              <div className="h-12 rounded-xl bg-slate-100 animate-pulse" />
            </div>
            <div className="h-12 rounded-xl bg-slate-200 animate-pulse" />
          </div>
        </div>
      </div>
      <span role="status" className="sr-only">Loading login page...</span>
    </div>
  );
 }
@@ -24,7 +24,7 @@ export default function MaintenancePage() {
        </div>
        {/* Heading */}
-        <h1 className="text-4xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+        <h1 className="text-4xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
          Under Maintenance
        </h1>
        <p className="text-lg text-[#6b8f71] mb-6">
@@ -1,79 +1,82 @@
 import Link from "next/link";
 import type { Metadata } from "next";
 export const metadata: Metadata = {
  title: "Page Not Found — Route Commerce",
  description: "The page you are looking for could not be found. Explore the rest of Route Commerce.",
  robots: {
    index: false,
    follow: false,
  },
 };
 export default function NotFound() {
  return (
-    <div className="min-h-screen bg-[#faf8f5] flex items-center justify-center px-6">
+    <main className="atelier-canvas relative min-h-screen flex items-center justify-center px-6 py-16 overflow-hidden">
-      {/* Background decorations */}
+      <div className="atelier-grain" aria-hidden="true" />
-      <div className="fixed inset-0 pointer-events-none overflow-hidden">
+
-        <div className="absolute top-20 left-20 w-40 h-40 bg-[#1a4d2e]/5 rounded-full blur-3xl" />
+      {/* Ambient orbs */}
-        <div className="absolute bottom-40 right-20 w-60 h-60 bg-[#c97a3e]/5 rounded-full blur-3xl" />
+      <div className="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
        <div
          className="absolute top-1/3 left-1/3 w-96 h-96 rounded-full opacity-30"
          style={{ background: "radial-gradient(circle, rgba(34, 78, 47, 0.16) 0%, transparent 70%)", filter: "blur(60px)" }}
        />
        <div
          className="absolute bottom-1/3 right-1/3 w-96 h-96 rounded-full opacity-25"
          style={{ background: "radial-gradient(circle, rgba(202, 138, 4, 0.16) 0%, transparent 70%)", filter: "blur(48px)" }}
        />
      </div>
-      <div className="text-center max-w-md mx-auto relative">
+      <div className="relative z-10 max-w-lg w-full text-center atelier-enter">
-        {/* 404 Illustration */}
+        <div className="atelier-section-num justify-center mb-4">No. 404</div>
-        <div className="relative mb-8">
+
-          <div className="w-24 h-24 mx-auto bg-gradient-to-br from-[#1a4d2e] to-[#2d6a4f] rounded-3xl flex items-center justify-center shadow-xl">
+        {/* Large editorial numeral */}
-            <svg className="w-12 h-12 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <div
-              <path strokeLinecap="round" strokeLinejoin="round" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          className="atelier-numeral text-[10rem] sm:text-[14rem] leading-none select-none"
-            </svg>
+          aria-hidden="true"
-          </div>
+        >
-          <span className="absolute -top-4 -right-4 w-12 h-12 bg-[#c97a3e]/20 rounded-full flex items-center justify-center text-2xl">📦</span>
+          404
        </div>
-        <h1 className="text-6xl font-bold text-[#1a1a1a] mb-4 tracking-tight" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+        <h1 className="atelier-title text-3xl sm:text-4xl mt-2">
-          404
+          Off the <span className="atelier-italic text-[#786B53]">beaten path</span>
        </h1>
-        <h2 className="text-2xl font-semibold text-[#1a1a1a] mb-3">
+        <p className="mt-4 text-stone-600 text-sm leading-relaxed max-w-sm mx-auto">
-          Page not found
+          We searched the field, but couldn&apos;t find that page. The route may have moved or never existed.
        </h2>
        <p className="text-[#6b8f71] mb-8">
          Looks like this route got lost along the way. Let&apos;s get you back on track.
        </p>
-        {/* Search suggestion */}
+        <div className="atelier-rule my-8" />
        <div className="bg-white rounded-2xl p-4 border border-[#e5e5e5] mb-8">
          <p className="text-sm text-[#888] mb-3">Try searching for what you need:</p>
          <div className="flex gap-2">
            <input
              type="text"
              placeholder="Search..."
              className="flex-1 px-4 py-2 rounded-xl border border-[#e5e5e5] text-sm focus:outline-none focus:ring-2 focus:ring-[#1a4d2e]/50"
            />
            <button className="px-4 py-2 bg-[#1a4d2e] text-white rounded-xl text-sm font-medium hover:bg-[#2d6a4f] transition-colors">
              Search
            </button>
          </div>
        </div>
        {/* Quick links */}
-        <div className="space-y-3">
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-2.5">
-          <p className="text-sm text-[#888]">Or explore these pages:</p>
+          {[
-          <div className="flex flex-wrap justify-center gap-3">
+            { href: "/", label: "Home", desc: "Overview" },
-            <Link href="/" className="px-4 py-2 bg-white border border-[#e5e5e5] rounded-xl text-sm text-[#1a1a1a] hover:border-[#1a4d2e] hover:text-[#1a4d2e] transition-colors">
+            { href: "/pricing", label: "Pricing", desc: "Plans" },
-              Home
+            { href: "/contact", label: "Contact", desc: "Get in touch" },
            { href: "/tuxedo", label: "Tuxedo", desc: "Sweet corn" },
          ].map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="group flex flex-col items-center gap-1 px-3 py-3.5 rounded-xl border border-stone-200/80 bg-white/70 backdrop-blur-sm hover:border-[#14532D] hover:bg-white transition-all"
            >
              <span className="text-sm font-semibold text-stone-900 group-hover:text-[#14532D] transition-colors">
                {link.label}
              </span>
              <span className="text-[10px] tracking-[0.12em] uppercase text-stone-500" style={{ fontFamily: "var(--font-fragment-mono)" }}>
                {link.desc}
              </span>
            </Link>
-            <Link href="/pricing" className="px-4 py-2 bg-white border border-[#e5e5e5] rounded-xl text-sm text-[#1a1a1a] hover:border-[#1a4d2e] hover:text-[#1a4d2e] transition-colors">
+          ))}
              Pricing
            </Link>
            <Link href="/blog" className="px-4 py-2 bg-white border border-[#e5e5e5] rounded-xl text-sm text-[#1a1a1a] hover:border-[#1a4d2e] hover:text-[#1a4d2e] transition-colors">
              Blog
            </Link>
            <Link href="/roadmap" className="px-4 py-2 bg-white border border-[#e5e5e5] rounded-xl text-sm text-[#1a1a1a] hover:border-[#1a4d2e] hover:text-[#1a4d2e] transition-colors">
              Roadmap
            </Link>
          </div>
        </div>
-        {/* Report broken link */}
+        <p className="atelier-fineprint text-center mt-10">
-        <div className="mt-12 pt-8 border-t border-[#e5e5e5]">
+          Lost? Reach us at{" "}
-          <p className="text-xs text-[#888]">
+          <a href="mailto:support@routecommerce.com" className="text-[#14532D] hover:underline normal-case tracking-normal">
-            Found a broken link?{" "}
+            support@routecommerce.com
-            <a href="mailto:support@routecommerce.com" className="text-[#1a4d2e] hover:underline">
+          </a>
-              Let us know
+        </p>
            </a>
          </p>
        </div>
      </div>
-    </div>
+    </main>
  );
 }
@@ -3,6 +3,63 @@ import LandingPageClient from "./LandingPageClient";
 const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://routecommerce.com";
 // JSON-LD structured data for the platform landing page.
 // Schema.org SoftwareApplication + Organization + FAQPage so Google
 // can render rich results for the product.
 const structuredData = {
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": `${BASE_URL}/#organization`,
      name: "Route Commerce",
      url: BASE_URL,
      logo: `${BASE_URL}/logo.png`,
      description:
        "Multi-tenant B2B e-commerce platform for fresh produce wholesale distribution.",
      sameAs: [
        // Add social profiles here as they come online
      ],
    },
    {
      "@type": "SoftwareApplication",
      "@id": `${BASE_URL}/#software`,
      name: "Route Commerce",
      applicationCategory: "BusinessApplication",
      applicationSubCategory: "Wholesale Distribution Platform",
      operatingSystem: "Web",
      url: BASE_URL,
      description:
        "All-in-one platform for produce wholesale distribution: orders, stops, routes, customer communications, and Stripe/Square payments.",
      offers: {
        "@type": "AggregateOffer",
        priceCurrency: "USD",
        lowPrice: 49,
        highPrice: 399,
        priceSpecification: [
          { "@type": "UnitPriceSpecification", name: "Starter", price: 49, priceCurrency: "USD", description: "$49/month" },
          { "@type": "UnitPriceSpecification", name: "Farm", price: 149, priceCurrency: "USD", description: "$149/month" },
          { "@type": "UnitPriceSpecification", name: "Enterprise", price: 399, priceCurrency: "USD", description: "Custom pricing" },
        ],
      },
      aggregateRating: {
        "@type": "AggregateRating",
        // Placeholder — replace with real review data once collected.
        ratingValue: 4.9,
        reviewCount: 12,
      },
    },
    {
      "@type": "WebSite",
      "@id": `${BASE_URL}/#website`,
      url: BASE_URL,
      name: "Route Commerce",
      publisher: { "@id": `${BASE_URL}/#organization` },
      inLanguage: "en-US",
    },
  ],
 } as const;
 export const metadata: Metadata = {
  title: "Route Commerce — Fresh Produce Wholesale Platform",
  description: "The all-in-one platform for produce wholesale distribution. Manage orders, stops, routes, and customer communications. Built for farms, Co-ops, and distributors.",
@@ -19,7 +76,7 @@ export const metadata: Metadata = {
    type: "website",
    images: [
      {
-        url: "/og-default.jpg",
+        url: "/og-default.svg",
        width: 1200,
        height: 630,
        alt: "Route Commerce Platform",
@@ -32,7 +89,7 @@ export const metadata: Metadata = {
    description: "The all-in-one platform for produce wholesale distribution.",
    site: "@RouteCommerce",
    creator: "@RouteCommerce",
-    images: ["/og-default.jpg"],
+    images: ["/og-default.svg"],
  },
  alternates: {
    canonical: BASE_URL,
@@ -61,5 +118,14 @@ export const viewport = {
 };
 export default function LandingPage() {
-  return <LandingPageClient />;
+  return (
    <>
      <script
        type="application/ld+json"
        // eslint-disable-next-line react/no-danger
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
      />
      <LandingPageClient />
    </>
  );
 }
@@ -1,61 +1,6 @@
-import type { Metadata } from "next";
+import { LoadingFade } from "@/components/transitions/LoadingFade";
 export const metadata: Metadata = {
  title: "Loading pricing...",
  description: "Loading...",
  robots: {
    index: false,
    follow: false,
  },
 };
 /** Subtle navigation indicator — see LoadingFade for rationale. */
 export default function Loading() {
-  return (
+  return <LoadingFade />;
    <div className="min-h-screen bg-white">
      {/* Nav skeleton */}
      <header className="sticky top-0 z-50 border-b border-slate-100 bg-white/95 backdrop-blur">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
          <div className="flex items-center gap-3">
            <div className="h-9 w-9 rounded-xl bg-slate-200 animate-pulse" />
            <div className="h-6 w-36 rounded bg-slate-200 animate-pulse" />
          </div>
          <div className="flex items-center gap-6">
            <div className="h-4 w-16 rounded bg-slate-200 animate-pulse" />
            <div className="h-4 w-20 rounded bg-slate-200 animate-pulse" />
            <div className="h-9 w-24 rounded-xl bg-slate-200 animate-pulse" />
          </div>
        </div>
      </header>
      {/* Hero skeleton */}
      <section className="bg-gradient-to-b from-slate-50 to-white px-6 py-20 text-center">
        <div className="mx-auto max-w-3xl">
          <div className="h-6 w-40 rounded-full bg-slate-200 mx-auto mb-4 animate-pulse" />
          <div className="h-16 w-80 rounded-lg bg-slate-200 mx-auto mb-6 animate-pulse" />
          <div className="h-6 w-96 rounded bg-slate-200 mx-auto animate-pulse" />
        </div>
      </section>
      {/* Plan cards skeleton */}
      <section className="mx-auto max-w-6xl px-6 py-6">
        <div className="grid gap-6 lg:grid-cols-3">
          {[1, 2, 3].map((i) => (
            <div key={i} className="rounded-2xl border-2 border-slate-200 p-6">
              <div className="h-6 w-24 rounded bg-slate-200 mb-3 animate-pulse" />
              <div className="h-4 w-32 rounded bg-slate-200 mb-1 animate-pulse" />
              <div className="h-10 w-24 rounded bg-slate-200 mb-4 animate-pulse" />
              <div className="h-12 w-full rounded-xl bg-slate-200 animate-pulse" />
              <div className="mt-6 space-y-2.5">
                {[1, 2, 3, 4].map((j) => (
                  <div key={j} className="h-4 w-full rounded bg-slate-100 animate-pulse" />
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>
      <span role="status" className="sr-only">Loading pricing page...</span>
    </div>
  );
 }
@@ -1,6 +1,11 @@
 import { getSession, signOut } from "@/lib/auth";
 import { redirect } from "next/navigation";
 // `getSession()` reads cookies(), which forces dynamic rendering.
 // Without this, Next.js tries to prerender this page at build time
 // and fails with "Dynamic server usage".
 export const dynamic = "force-dynamic";
 /**
 * /protected-example
 *
@@ -46,7 +51,7 @@ export default async function ProtectedExamplePage() {
        <header>
          <h1
            className="text-3xl font-semibold tracking-tight text-stone-900"
-            style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}
+            style={{ fontFamily: "var(--font-fraunces)" }}
          >
            Protected example
          </h1>
@@ -79,7 +79,7 @@ export default function RoadmapPage() {
      {/* Hero */}
      <section className="bg-gradient-to-b from-white to-[#faf8f5] py-12 sm:py-16 md:py-20">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 text-center">
-          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
            Product Roadmap
          </h1>
          <p className="text-lg sm:text-xl text-[#6b8f71] max-w-2xl mx-auto">
@@ -189,7 +189,7 @@ export default function RoadmapPage() {
      <section id="suggest" className="py-16 bg-white border-t border-[#e5e5e5]">
        <div className="max-w-2xl mx-auto px-6">
          <div className="text-center mb-8">
-            <h2 className="text-3xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+            <h2 className="text-3xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "var(--font-fraunces)" }}>
              Suggest a Feature
            </h2>
            <p className="text-[#666]">Have an idea? We&apos;d love to hear it. Share your suggestion and vote on others.</p>
@@ -110,7 +110,7 @@ export default function SecurityPage() {
      {/* Hero */}
      <section className="py-20">
        <div className="max-w-4xl mx-auto px-6 text-center">
-          <h1 className="text-5xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          <h1 className="text-5xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
            Your Data is Safe with Us
          </h1>
          <p className="text-xl text-[#6b8f71] max-w-2xl mx-auto">
@@ -122,7 +122,7 @@ export default function SecurityPage() {
      {/* Security Features */}
      <section className="py-16">
        <div className="max-w-6xl mx-auto px-6">
-          <h2 className="text-3xl font-bold text-[#1a1a1a] mb-12 text-center" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          <h2 className="text-3xl font-bold text-[#1a1a1a] mb-12 text-center" style={{ fontFamily: "var(--font-fraunces)" }}>
            Enterprise-Grade Security
          </h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -144,7 +144,7 @@ export default function SecurityPage() {
        <div className="max-w-4xl mx-auto px-6">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
-              <h2 className="text-3xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+              <h2 className="text-3xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
                Built on Trusted Infrastructure
              </h2>
              <p className="text-[#666] mb-6">
@@ -219,7 +219,7 @@ export default function SecurityPage() {
      {/* Privacy Compliance */}
      <section className="py-16">
        <div className="max-w-4xl mx-auto px-6">
-          <h2 className="text-3xl font-bold text-[#1a1a1a] mb-8 text-center" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          <h2 className="text-3xl font-bold text-[#1a1a1a] mb-8 text-center" style={{ fontFamily: "var(--font-fraunces)" }}>
            Privacy Compliance
          </h2>
          <div className="grid md:grid-cols-2 gap-6">
@@ -242,7 +242,7 @@ export default function SecurityPage() {
      {/* Report Vulnerability */}
      <section className="py-16 bg-[#1a4d2e] text-white">
        <div className="max-w-2xl mx-auto px-6 text-center">
-          <h2 className="text-3xl font-bold mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          <h2 className="text-3xl font-bold mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
            Found a Security Issue?
          </h2>
          <p className="text-white/80 mb-6">
@@ -1,40 +1,6 @@
-"use client";
+import { LoadingFade } from "@/components/transitions/LoadingFade";
 import { motion } from "framer-motion";
 /** Subtle navigation indicator — see LoadingFade for rationale. */
 export default function Loading() {
-  return (
+  return <LoadingFade />;
    <div className="min-h-screen bg-stone-50">
      <div className="mx-auto max-w-4xl px-6 py-20">
        {/* Hero skeleton */}
        <div className="mb-20 animate-pulse text-center">
          <div className="h-3 w-24 rounded bg-stone-200 mx-auto mb-5" />
          <div className="h-20 w-full max-w-xl mx-auto rounded-lg bg-stone-200 mb-5" />
          <div className="h-8 w-full max-w-2xl mx-auto rounded bg-stone-200" />
        </div>
        {/* Content sections skeleton */}
        <div className="space-y-20">
          {[0, 1, 2].map((i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.1 }}
              className="grid md:grid-cols-2 gap-12 items-center"
            >
              <div className="animate-pulse space-y-4">
                <div className="h-4 w-20 rounded bg-stone-200" />
                <div className="h-8 w-3/4 rounded bg-stone-200" />
                <div className="h-4 w-full rounded bg-stone-100" />
                <div className="h-4 w-full rounded bg-stone-100" />
                <div className="h-4 w-2/3 rounded bg-stone-100" />
              </div>
              <div className="h-64 rounded-3xl bg-stone-200" />
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
 }
@@ -1,62 +1,6 @@
-"use client";
+import { LoadingFade } from "@/components/transitions/LoadingFade";
 import { motion } from "framer-motion";
 /** Subtle navigation indicator — see LoadingFade for rationale. */
 export default function Loading() {
-  return (
+  return <LoadingFade />;
    <div className="min-h-screen bg-stone-50">
      <div className="mx-auto max-w-4xl px-6 py-20">
        {/* Header skeleton */}
        <div className="mb-16 animate-pulse text-center">
          <div className="h-3 w-20 rounded bg-emerald-100 mx-auto mb-5" />
          <div className="h-16 w-64 mx-auto rounded-lg bg-stone-200 mb-5" />
          <div className="h-5 w-96 max-w-full mx-auto rounded bg-stone-200" />
        </div>
        {/* Contact cards skeleton */}
        <div className="grid gap-6 md:grid-cols-3 mb-16">
          {[0, 1, 2].map((i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.1 }}
              className="rounded-3xl bg-white p-8 shadow-sm ring-1 ring-stone-200/60 text-center"
            >
              <div className="h-12 w-12 rounded-2xl bg-emerald-50 mx-auto mb-5" />
              <div className="h-5 w-24 mx-auto rounded bg-stone-200 mb-3" />
              <div className="h-4 w-full max-w-[160px] mx-auto rounded bg-stone-100" />
            </motion.div>
          ))}
        </div>
        {/* Form skeleton */}
        <div className="rounded-3xl bg-white p-10 shadow-sm ring-1 ring-stone-200/60">
          <div className="animate-pulse space-y-6">
            <div className="h-6 w-32 rounded bg-stone-200" />
            <div className="h-8 w-48 rounded bg-stone-200" />
            <div className="grid gap-6 md:grid-cols-2 mt-8">
              <div className="space-y-2">
                <div className="h-4 w-20 rounded bg-stone-100" />
                <div className="h-12 rounded-xl bg-stone-100" />
              </div>
              <div className="space-y-2">
                <div className="h-4 w-20 rounded bg-stone-100" />
                <div className="h-12 rounded-xl bg-stone-100" />
              </div>
            </div>
            <div className="space-y-2">
              <div className="h-4 w-16 rounded bg-stone-100" />
              <div className="h-12 rounded-xl bg-stone-100" />
            </div>
            <div className="space-y-2">
              <div className="h-4 w-20 rounded bg-stone-100" />
              <div className="h-32 rounded-xl bg-stone-100" />
            </div>
            <div className="h-14 w-40 rounded-xl bg-emerald-100 mt-8" />
          </div>
        </div>
      </div>
    </div>
  );
 }
@@ -1,41 +1,6 @@
-"use client";
+import { LoadingFade } from "@/components/transitions/LoadingFade";
 import { motion } from "framer-motion";
 /** Subtle navigation indicator — see LoadingFade for rationale. */
 export default function Loading() {
-  return (
+  return <LoadingFade />;
    <div className="min-h-screen bg-stone-50">
      <div className="mx-auto max-w-3xl px-6 py-20">
        {/* Header skeleton */}
        <div className="mb-14 text-center animate-pulse">
          <div className="h-3 w-16 rounded bg-emerald-100 mx-auto mb-4" />
          <div className="h-16 w-48 mx-auto rounded-lg bg-stone-200 mb-5" />
          <div className="h-5 w-96 max-w-full mx-auto rounded bg-stone-200" />
        </div>
        {/* Search skeleton */}
        <div className="mb-12">
          <div className="h-14 rounded-2xl bg-white shadow-sm ring-1 ring-stone-200/60" />
        </div>
        {/* FAQ items skeleton */}
        <div className="space-y-4">
          {[0, 1, 2, 3, 4].map((i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.05 }}
              className="rounded-2xl bg-white shadow-sm ring-1 ring-stone-200/60 overflow-hidden"
            >
              <div className="flex items-center justify-between px-6 py-5">
                <div className="h-5 w-3/4 rounded bg-stone-200" />
                <div className="h-7 w-7 rounded-full bg-stone-100" />
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
 }
@@ -1,23 +1,45 @@
 import type { Metadata, Viewport } from "next";
 import { SmoothViewTransition } from "@/components/transitions/SmoothViewTransition";
 const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://routecommerce.com";
-// BreadcrumbList schema for SEO
+// Structured data for the Tuxedo Corn storefront. Combining a
-const tuxedoBreadcrumbSchema = {
+// BreadcrumbList with a LocalBusiness (the farm stand) gives Google
 // enough context to show rich results for the brand.
 const tuxedoStructuredData = {
  "@context": "https://schema.org",
-  "@type": "BreadcrumbList",
+  "@graph": [
  "itemListElement": [
    {
-      "@type": "ListItem",
+      "@type": "BreadcrumbList",
-      "position": 1,
+      itemListElement: [
-      "name": "Home",
+        { "@type": "ListItem", position: 1, name: "Home", item: BASE_URL },
-      "item": BASE_URL,
+        { "@type": "ListItem", position: 2, name: "Tuxedo Corn", item: `${BASE_URL}/tuxedo` },
      ],
    },
    {
-      "@type": "ListItem",
+      "@type": "LocalBusiness",
-      "position": 2,
+      "@id": `${BASE_URL}/tuxedo/#localbusiness`,
-      "name": "Tuxedo Corn",
+      name: "Tuxedo Corn",
-      "item": `${BASE_URL}/tuxedo`,
+      description:
        "Premium sweet corn and seasonal produce, delivered fresh from our Colorado farm to pickup stops near you.",
      url: `${BASE_URL}/tuxedo`,
      image: `${BASE_URL}/og-default.svg`,
      priceRange: "$$",
      address: {
        "@type": "PostalAddress",
        addressRegion: "CO",
        addressCountry: "US",
      },
      openingHoursSpecification: [
        {
          "@type": "OpeningHoursSpecification",
          dayOfWeek: ["Saturday", "Sunday"],
          description: "Pickup stops scheduled seasonally — see stops page",
        },
      ],
      sameAs: [
        // Social profiles can be added here
      ],
    },
  ],
 };
@@ -41,7 +63,7 @@ export const metadata: Metadata = {
    type: "website",
    images: [
      {
-        url: "/og-tuxedo.jpg",
+        url: "/og-default.svg",
        width: 1200,
        height: 630,
        alt: "Tuxedo Corn - Olathe Sweet Sweet Corn",
@@ -54,7 +76,7 @@ export const metadata: Metadata = {
    description: "Premium sweet corn and seasonal produce delivered fresh from our Colorado farm to pickup stops near you.",
    site: "@TuxedoCorn",
    creator: "@TuxedoCorn",
-    images: ["/og-tuxedo.jpg"],
+    images: ["/og-default.svg"],
  },
  alternates: {
    canonical: `${BASE_URL}/tuxedo`,
@@ -68,7 +90,7 @@ export const metadata: Metadata = {
    },
  },
  other: {
-    "application/ld+json": JSON.stringify(tuxedoBreadcrumbSchema),
+    "application/ld+json": JSON.stringify(tuxedoStructuredData),
  },
 };
@@ -86,7 +108,12 @@ export default function TuxedoLayout({ children }: { children: React.ReactNode }
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-emerald-500/10 rounded-full blur-[120px]" />
      </div>
-      <div className="relative">{children}</div>
+      {/* The storefront backdrop and ambient orbs are persistent. The
          page body itself crossfades between routes via the View
          Transitions API. */}
      <div id="page-content" className="relative outline-none">
        <SmoothViewTransition>{children}</SmoothViewTransition>
      </div>
    </div>
  );
 }
@@ -1,77 +1,8 @@
-"use client";
+import { LoadingFade } from "@/components/transitions/LoadingFade";
-import { motion } from "framer-motion";
+/** Tuxedo storefront loading — the emerald backdrop and grain
-
+ *  texture persist in the layout, so we only need to signal that
-export default function Loading() {
+ *  navigation is in flight. */
-  return (
+export default function TuxedoLoading() {
-    <main className="min-h-screen bg-stone-50">
+  return <LoadingFade />;
      <div className="mx-auto max-w-6xl px-6 py-16">
        {/* Header skeleton */}
        <div className="mb-16 animate-pulse">
          <div className="h-4 w-32 rounded bg-stone-200 mb-4" />
          <div className="h-16 w-80 rounded-lg bg-stone-200 mb-4" />
          <div className="h-6 w-96 max-w-full rounded bg-stone-200" />
        </div>
        {/* Cards skeleton */}
        <div className="grid gap-6 md:grid-cols-3">
          {[0, 1, 2].map((i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.1 }}
              className="rounded-3xl bg-white ring-1 ring-stone-200/60 overflow-hidden"
            >
              {/* Image skeleton */}
              <div className="h-48 bg-gradient-to-br from-stone-100 to-stone-50 relative overflow-hidden">
                <div className="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-stone-200/60 to-transparent" />
              </div>
              {/* Content skeleton */}
              <div className="p-7 space-y-4">
                <div className="h-6 w-3/4 rounded bg-stone-200" />
                <div className="h-4 w-full rounded bg-stone-100" />
                <div className="h-4 w-2/3 rounded bg-stone-100" />
                <div className="pt-4 flex items-center justify-between">
                  <div className="h-8 w-20 rounded-lg bg-stone-200" />
                  <div className="h-11 w-28 rounded-xl bg-stone-200" />
                </div>
              </div>
            </motion.div>
          ))}
        </div>
        {/* Stops section skeleton */}
        <div className="mt-20">
          <div className="animate-pulse mb-10">
            <div className="h-3 w-24 rounded bg-stone-200 mb-4" />
            <div className="h-10 w-64 rounded-lg bg-stone-200 mb-3" />
            <div className="h-4 w-48 rounded bg-stone-200" />
          </div>
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {[0, 1, 2, 3, 4, 5].map((i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: i * 0.05 }}
                className="rounded-3xl bg-white p-7 ring-1 ring-stone-200/60"
              >
                <div className="flex items-start gap-4 mb-5">
                  <div className="h-10 w-10 rounded-xl bg-stone-100" />
                  <div className="flex-1">
                    <div className="h-8 w-32 rounded bg-stone-200 mb-2" />
                    <div className="h-4 w-full rounded bg-stone-100" />
                  </div>
                </div>
                <div className="flex gap-2 pl-[2.75rem]">
                  <div className="h-4 w-28 rounded bg-stone-100" />
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </main>
  );
 }
@@ -1,70 +1,6 @@
-"use client";
+import { LoadingFade } from "@/components/transitions/LoadingFade";
 import { motion } from "framer-motion";
 /** Subtle navigation indicator — see LoadingFade for rationale. */
 export default function Loading() {
-  return (
+  return <LoadingFade />;
    <div className="min-h-screen bg-stone-50">
      <div className="mx-auto max-w-5xl px-6 py-20">
        {/* Back navigation skeleton */}
        <div className="mb-10 animate-pulse">
          <div className="h-5 w-32 rounded bg-stone-200" />
        </div>
        {/* Stop header skeleton */}
        <div className="mb-12 animate-pulse rounded-3xl bg-white p-8 shadow-sm ring-1 ring-stone-200/60">
          <div className="h-3 w-32 rounded bg-emerald-100 mb-4" />
          <div className="h-16 w-80 rounded-lg bg-stone-200 mb-4" />
          <div className="h-5 w-full max-w-md rounded bg-stone-200 mb-4" />
          <div className="h-px w-12 bg-emerald-600" />
        </div>
        {/* Stop info skeleton */}
        <div className="mb-14 rounded-3xl bg-white p-8 shadow-sm ring-1 ring-stone-200/60">
          <div className="grid gap-4 md:grid-cols-3">
            {[0, 1, 2].map((i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: i * 0.1 }}
                className="flex items-start gap-4 py-4 px-5 rounded-2xl bg-stone-50"
              >
                <div className="h-10 w-10 rounded-xl bg-emerald-50" />
                <div className="flex-1">
                  <div className="h-3 w-12 rounded bg-stone-200 mb-2" />
                  <div className="h-5 w-24 rounded bg-stone-200" />
                </div>
              </motion.div>
            ))}
          </div>
        </div>
        {/* Products section skeleton */}
        <div className="animate-pulse">
          <div className="h-4 w-20 rounded bg-emerald-100 mb-4" />
          <div className="h-10 w-48 rounded bg-stone-200 mb-4" />
          <div className="h-4 w-64 rounded bg-stone-200 mb-10" />
          <div className="grid gap-8 md:grid-cols-3">
            {[0, 1, 2].map((i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: i * 0.1 }}
                className="rounded-3xl bg-white overflow-hidden shadow-lg"
              >
                <div className="h-48 bg-gradient-to-br from-stone-100 to-stone-50" />
                <div className="p-6 space-y-3">
                  <div className="h-6 w-3/4 rounded bg-stone-200" />
                  <div className="h-4 w-full rounded bg-stone-100" />
                  <div className="h-4 w-2/3 rounded bg-stone-100" />
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
 }
@@ -23,7 +23,7 @@ export default function WaitlistPage() {
                <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
            </div>
-            <span className="text-xl font-bold text-[#1a1a1a] tracking-tight" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>Route Commerce</span>
+            <span className="text-xl font-bold text-[#1a1a1a] tracking-tight" style={{ fontFamily: "var(--font-fraunces)" }}>Route Commerce</span>
          </Link>
        </div>
      </header>
@@ -37,7 +37,7 @@ export default function WaitlistPage() {
              <span className="w-2 h-2 bg-[#c97a3e] rounded-full animate-pulse" />
              <span className="text-sm font-medium text-[#c97a3e]">Early Access</span>
            </div>
-            <h1 className="text-5xl sm:text-6xl font-bold text-[#1a1a1a] leading-tight mb-6" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+            <h1 className="text-5xl sm:text-6xl font-bold text-[#1a1a1a] leading-tight mb-6" style={{ fontFamily: "var(--font-fraunces)" }}>
              Join 500+ farms on the waitlist
            </h1>
            <p className="text-xl text-[#6b8f71] mb-8 leading-relaxed">
@@ -76,7 +76,7 @@ export default function WaitlistPage() {
          {/* Right - Form */}
          <div>
            <div className="bg-white rounded-3xl p-8 sm:p-10 shadow-xl border border-[#e5e5e5]">
-              <h2 className="text-2xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+              <h2 className="text-2xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "var(--font-fraunces)" }}>
                Reserve Your Spot
              </h2>
              <p className="text-[#888] mb-6">No credit card required. We&apos;ll notify you when it&apos;s your turn.</p>
@@ -89,7 +89,7 @@ export default function WaitlistPage() {
      {/* FAQ Section */}
      <section className="border-t border-[#e5e5e5] bg-white">
        <div className="max-w-3xl mx-auto px-6 py-16">
-          <h2 className="text-3xl font-bold text-[#1a1a1a] mb-8 text-center" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          <h2 className="text-3xl font-bold text-[#1a1a1a] mb-8 text-center" style={{ fontFamily: "var(--font-fraunces)" }}>
            Frequently Asked Questions
          </h2>
          <div className="space-y-4">
@@ -1,17 +1,6 @@
 import { LoadingFade } from "@/components/transitions/LoadingFade";
 /** Subtle navigation indicator — see LoadingFade for rationale. */
 export default function Loading() {
-  return (
+  return <LoadingFade />;
    <main className="min-h-screen bg-slate-100 px-4 py-6">
      <div className="mx-auto max-w-lg">
        <div className="animate-pulse space-y-5">
          <div className="h-16 rounded-xl bg-slate-800" />
          <div className="h-8 w-48 rounded bg-slate-300" />
          <div className="h-12 w-full rounded-xl bg-white" />
          <div className="h-12 w-full rounded-xl bg-white" />
          <div className="h-12 w-full rounded-xl bg-white" />
          <div className="h-12 w-full rounded-xl bg-white" />
          <div className="h-10 w-full rounded-xl bg-slate-300" />
        </div>
      </div>
    </main>
  );
 }
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useRouter } from "next/navigation";
 import { signOutAction } from "@/actions/auth-actions";
 import BrandSelector from "@/components/admin/BrandSelector";
 // Elegant warm sidebar design
 // Colors: parchment 100 bg, soft linen text, powder petal accent
@@ -470,14 +471,24 @@ export default function AdminSidebar({
          </ul>
        </nav>
-        {/* Bottom: role + sign out */}
+        {/* Bottom: brand picker + role + sign out */}
        <div
-          className="px-4 py-5 border-t flex-shrink-0" 
+          className="px-4 py-5 border-t flex-shrink-0 space-y-3"
          style={{ borderColor: "rgba(208, 203, 180, 0.2)" }}
        >
          {/* Brand selector — only show when admin has access to brands */}
          {brands && brands.length > 0 && (
            <BrandSelector
              brands={brands}
              activeBrandId={activeBrandId ?? null}
              showAllBrandsOption={userRole === "platform_admin"}
              isMultiBrandAdmin={(brandIds?.length ?? 0) > 1}
            />
          )}
          {roleLabel && (
            <div
-              className="px-3 py-2.5 mb-3 rounded-xl border" 
+              className="px-3 py-2.5 rounded-xl border"
              style={{
                backgroundColor: "rgba(208, 203, 180, 0.1)",
                borderColor: "rgba(208, 203, 180, 0.2)"
@@ -15,7 +15,6 @@ type Stop = {
  time: string;
  location: string;
  active: boolean;
  deleted_at?: string | null;
  brand_id: string;
  status?: string;
  brands: { name: string } | { name: string }[];
@@ -1,10 +1,16 @@
 "use client";
-import { useState, useEffect, type ReactNode } from "react";
+import { useState, type ReactNode } from "react";
 import Link from "next/link";
-import UpgradePlanModal from "@/components/admin/UpgradePlanModal";
+import dynamic from "next/dynamic";
 import { PageHeader, AdminButton, AdminFilterTabs, AdminBadge } from "@/components/admin/design-system";
-import { getDashboardStats, type DashboardStats } from "@/actions/dashboard";
+import type { DashboardStats } from "@/actions/dashboard";
 // Lazy-load the upgrade modal — only needed when starter tier + brandId present
 const UpgradePlanModal = dynamic(
  () => import("@/components/admin/UpgradePlanModal"),
  { ssr: false }
 );
 type Section = {
  title: string;
@@ -17,112 +23,21 @@ type Section = {
 };
 const sections: Section[] = [
-  {
+  { title: "Orders", href: "/admin/orders", description: "View orders, pickup status, fulfillment, and customer details.", group: "operations", prominent: true },
-    title: "Orders",
+  { title: "Products", href: "/admin/products", description: "Manage products, pricing, shipping type, and availability.", group: "operations", prominent: true },
-    href: "/admin/orders",
+  { title: "Tours & Stops", href: "/admin/stops", description: "Manage routes, pickup locations, dates, and cutoff times.", group: "fulfillment" },
-    description: "View orders, pickup status, fulfillment, and customer details.",
+  { title: "Driver Pickup", href: "/admin/pickup", description: "Mobile pickup lookup, QR scanning, and completion tools.", group: "fulfillment" },
-    group: "operations",
+  { title: "Shipping", href: "/admin/shipping", description: "FedEx integration, label creation, and shipment tracking.", group: "fulfillment" },
-    prominent: true,
+  { title: "Reports", href: "/admin/reports", description: "Sales, route, product, pickup, and customer reports.", group: "management" },
-  },
+  { title: "Tax Dashboard", href: "/admin/taxes", description: "Sales tax collected, breakdown by state, and exportable reports.", group: "management" },
-  {
+  { title: "Settings", href: "/admin/settings", description: "Users, billing, brand, integrations, payments, and shipping.", group: "management" },
-    title: "Products",
+  { title: "Harvest Reach", href: "/admin/communications", description: "Email campaigns, stop blast, templates, and audience segments.", group: "tools", addonKey: "harvest_reach", upgradeText: "Enable to access email & SMS marketing" },
-    href: "/admin/products",
+  { title: "Wholesale Portal", href: "/admin/wholesale", description: "Standalone B2B portal with custom pricing, credit limits, and net-30.", group: "tools", addonKey: "wholesale_portal", upgradeText: "Enable to unlock B2B buyer portal" },
-    description: "Manage products, pricing, shipping type, and availability.",
+  { title: "Import Center", href: "/admin/import", description: "AI-powered import for products, orders, contacts, and stops.", group: "tools", addonKey: "ai_tools", upgradeText: "Enable AI import with smart column mapping" },
-    group: "operations",
+  { title: "AI Intelligence", href: "/admin/settings/ai", description: "Campaign writer, pricing advisor, and report explainer.", group: "tools", addonKey: "ai_tools", upgradeText: "Enable AI tools for marketing and pricing" },
-    prominent: true,
+  { title: "Time Tracking", href: "/admin/time-tracking", description: "Worker clock-in/out, hours tracking, and overtime management.", group: "tools", addonKey: "time_tracking", upgradeText: "Enable for field worker time tracking" },
-  },
+  { title: "Water Log", href: "/admin/water-log", description: "Irrigation tracking and water usage reporting.", group: "tools", addonKey: "water_log", upgradeText: "Enable for agricultural water tracking" },
-  {
+  { title: "Route Trace", href: "/admin/route-trace", description: "Lot tracking, QR stickers, hauling board, and supply chain traceability.", group: "tools", addonKey: "route_trace", upgradeText: "Enable for field-to-delivery traceability" },
    title: "Tours & Stops",
    href: "/admin/stops",
    description: "Manage routes, pickup locations, dates, and cutoff times.",
    group: "fulfillment",
  },
  {
    title: "Driver Pickup",
    href: "/admin/pickup",
    description: "Mobile pickup lookup, QR scanning, and completion tools.",
    group: "fulfillment",
  },
  {
    title: "Shipping",
    href: "/admin/shipping",
    description: "FedEx integration, label creation, and shipment tracking.",
    group: "fulfillment",
  },
  {
    title: "Reports",
    href: "/admin/reports",
    description: "Sales, route, product, pickup, and customer reports.",
    group: "management",
  },
  {
    title: "Tax Dashboard",
    href: "/admin/taxes",
    description: "Sales tax collected, breakdown by state, and exportable reports.",
    group: "management",
  },
  {
    title: "Settings",
    href: "/admin/settings",
    description: "Users, billing, brand, integrations, payments, and shipping.",
    group: "management",
  },
  {
    title: "Harvest Reach",
    href: "/admin/communications",
    description: "Email campaigns, stop blast, templates, and audience segments.",
    group: "tools",
    addonKey: "harvest_reach",
    upgradeText: "Enable to access email & SMS marketing",
  },
  {
    title: "Wholesale Portal",
    href: "/admin/wholesale",
    description: "Standalone B2B portal with custom pricing, credit limits, and net-30.",
    group: "tools",
    addonKey: "wholesale_portal",
    upgradeText: "Enable to unlock B2B buyer portal",
  },
  {
    title: "Import Center",
    href: "/admin/import",
    description: "AI-powered import for products, orders, contacts, and stops.",
    group: "tools",
    addonKey: "ai_tools",
    upgradeText: "Enable AI import with smart column mapping",
  },
  {
    title: "AI Intelligence",
    href: "/admin/settings/ai",
    description: "Campaign writer, pricing advisor, and report explainer.",
    group: "tools",
    addonKey: "ai_tools",
    upgradeText: "Enable AI tools for marketing and pricing",
  },
  {
    title: "Time Tracking",
    href: "/admin/time-tracking",
    description: "Worker clock-in/out, hours tracking, and overtime management.",
    group: "tools",
    addonKey: "time_tracking",
    upgradeText: "Enable for field worker time tracking",
  },
  {
    title: "Water Log",
    href: "/admin/water-log",
    description: "Irrigation tracking and water usage reporting.",
    group: "tools",
    addonKey: "water_log",
    upgradeText: "Enable for agricultural water tracking",
  },
  {
    title: "Route Trace",
    href: "/admin/route-trace",
    description: "Lot tracking, QR stickers, hauling board, and supply chain traceability.",
    group: "tools",
    addonKey: "route_trace",
    upgradeText: "Enable for field-to-delivery traceability",
  },
 ];
 type Tab = "operations" | "fulfillment" | "management" | "tools";
@@ -132,7 +47,7 @@ const TABS: { id: Tab; label: string; icon: ReactNode }[] = [
    id: "operations",
    label: "Operations",
    icon: (
-      <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
      </svg>
    ),
@@ -141,7 +56,7 @@ const TABS: { id: Tab; label: string; icon: ReactNode }[] = [
    id: "fulfillment",
    label: "Fulfillment",
    icon: (
-      <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M16.5 9.4 7.55 4.24"/>
        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
        <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
@@ -153,7 +68,7 @@ const TABS: { id: Tab; label: string; icon: ReactNode }[] = [
    id: "management",
    label: "Management",
    icon: (
-      <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="3"/>
        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
      </svg>
@@ -163,7 +78,7 @@ const TABS: { id: Tab; label: string; icon: ReactNode }[] = [
    id: "tools",
    label: "Tools",
    icon: (
-      <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
      </svg>
    ),
@@ -178,6 +93,7 @@ type Props = {
  enabledAddons: Record<string, boolean>;
  usage: { users: number; stops_this_month: number; products: number };
  limits: { max_users: number; max_stops_monthly: number; max_products: number };
  stats: DashboardStats;
 };
 export default function DashboardClient({
@@ -188,26 +104,13 @@ export default function DashboardClient({
  enabledAddons,
  usage,
  limits,
  stats,
 }: Props) {
  const [activeTab, setActiveTab] = useState<Tab>("operations");
  const [isUpgradeOpen, setIsUpgradeOpen] = useState(false);
  const [stats, setStats] = useState<DashboardStats | null>(null);
  const [isLoadingStats, setIsLoadingStats] = useState(true);
-  useEffect(() => {
+  // Stats are pre-fetched server-side — no loading state needed.
-    const loadStats = async () => {
+  // All values are guaranteed to be present before this component renders.
      setIsLoadingStats(true);
      try {
        const data = await getDashboardStats();
        setStats(data);
      } catch (err) {
        console.error("Failed to load stats:", err);
      } finally {
        setIsLoadingStats(false);
      }
    };
    loadStats();
  }, []);
  const usagePct = {
    users: limits.max_users > 0 ? (usage.users / limits.max_users) * 100 : 0,
@@ -217,25 +120,19 @@ export default function DashboardClient({
  const tabSections = sections.filter((s) => s.group === activeTab);
  // Format currency
  const formatCurrency = (amount: number) => {
-    return new Intl.NumberFormat("en-US", {
+    return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(amount);
      style: "currency",
      currency: "USD",
    }).format(amount);
  };
  // Get status badge color
  const getStatusBadge = (status: string) => {
    const styles: Record<string, { bg: string; text: string }> = {
-      pending: { bg: "var(--admin-warning-light)", text: "var(--admin-warning)" },
+      pending: { bg: "var(--admin-warning-soft)", text: "var(--admin-warning)" },
-      processing: { bg: "var(--admin-accent-light)", text: "var(--admin-accent-text)" },
+      processing: { bg: "var(--admin-primary-soft)", text: "var(--admin-accent-text)" },
-      shipped: { bg: "#dbeafe", text: "#1e40af" },
+      shipped: { bg: "var(--admin-primary-soft)", text: "var(--admin-primary)" },
    };
    return styles[status] || { bg: "var(--admin-bg)", text: "var(--admin-text-secondary)" };
  };
  // Quick action buttons
  const quickActions = [
    { label: "New Order", href: "/admin/orders?new=true", icon: "plus" },
    { label: "Add Stop", href: "/admin/stops/new", icon: "map" },
@@ -246,10 +143,10 @@ export default function DashboardClient({
  return (
    <div className="min-h-screen" style={{ backgroundColor: "var(--admin-bg)" }}>
      {/* Page Header */}
-      <div className="px-4 sm:px-6 md:px-8 py-6 sm:py-8">
+      <div className="px-4 sm:px-6 md:px-8 py-5 sm:py-6">
        <PageHeader
          icon={
-            <svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="3" width="7" height="7" rx="1"/>
              <rect x="14" y="3" width="7" height="7" rx="1"/>
              <rect x="3" y="14" width="7" height="7" rx="1"/>
@@ -257,17 +154,14 @@ export default function DashboardClient({
            </svg>
          }
          title="Admin Dashboard"
-          subtitle={`${brandName} Control Center`}
+          subtitle={brandName}
          actions={
-            <div className="flex items-center gap-4">
+            <div className="flex items-center gap-3">
-              <a href="/admin/settings/billing" className="text-sm font-medium hover:underline" style={{ color: "var(--admin-text-muted)" }}>
+              <a href="/admin/settings/billing" className="hidden sm:block text-xs font-medium hover:underline" style={{ color: "var(--admin-text-muted)" }}>
                Billing →
              </a>
              {planTier === "starter" && brandId && (
-                <AdminButton
+                <AdminButton onClick={() => setIsUpgradeOpen(true)} size="sm">
                  onClick={() => setIsUpgradeOpen(true)}
                  size="md"
                >
                  Upgrade Plan
                </AdminButton>
              )}
@@ -277,338 +171,226 @@ export default function DashboardClient({
        />
      </div>
-      {/* Content */}
+      {/* Main Content */}
-      <div className="px-4 sm:px-6 md:px-8 py-4 sm:py-6 -mt-4 space-y-6">
+      <div className="px-4 sm:px-6 md:px-8 pb-8 space-y-5">
-        {/* Stats Cards Row */}
+
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        {/* ── Stats Cards Row ────────────────────────────────────── */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 animate-fade-up" style={{ animationDelay: "0ms" }}>
          {/* Today's Orders */}
-          <div 
+          <div className="admin-stat-card">
-            className="rounded-xl border p-5 transition-all hover:shadow-md hover:-translate-y-0.5"
+            <div className="admin-stat-card-inner">
-            style={{ 
+              <div className="admin-stat-icon" style={{ backgroundColor: "var(--admin-accent-light)" }}>
-              backgroundColor: "var(--admin-card-bg)",
+                <svg className="w-4 h-4" style={{ color: "var(--admin-accent)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
              borderColor: "var(--admin-border)"
            }}
          >
            <div className="flex items-center gap-4">
              <div 
                className="flex h-12 w-12 items-center justify-center rounded-xl"
                style={{ backgroundColor: "var(--admin-accent-light)" }}
              >
                <svg className="w-6 h-6" style={{ color: "var(--admin-accent)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM12.94 18.55l.276-.276a.75.75 0 011.06 0l.27.27a.75.75 0 010 1.06l-.27.27a.75.75 0 01-1.06 0l-.276-.276a.75.75 0 010-1.06z" />
                </svg>
              </div>
-              <div>
+              <div className="admin-stat-body">
-                <p className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--admin-text-muted)" }}>
+                <span className="admin-stat-label">Today&apos;s Orders</span>
-                  Today&apos;s Orders
+                <span className="admin-stat-value">{stats.todayOrders}</span>
                </p>
                <p className="text-2xl font-bold mt-0.5" style={{ color: "var(--admin-text-primary)" }}>
                  {isLoadingStats ? "—" : stats?.todayOrders ?? 0}
                </p>
              </div>
            </div>
          </div>
          {/* Today's Revenue */}
-          <div 
+          <div className="admin-stat-card">
-            className="rounded-xl border p-5 transition-all hover:shadow-md hover:-translate-y-0.5"
+            <div className="admin-stat-card-inner">
-            style={{ 
+              <div className="admin-stat-icon" style={{ backgroundColor: "var(--admin-accent-soft)" }}>
-              backgroundColor: "var(--admin-card-bg)",
+                <svg className="w-4 h-4" style={{ color: "var(--admin-accent)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
              borderColor: "var(--admin-border)"
            }}
          >
            <div className="flex items-center gap-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50">
                <svg className="w-6 h-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
-              <div>
+              <div className="admin-stat-body">
-                <p className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--admin-text-muted)" }}>
+                <span className="admin-stat-label">Today&apos;s Revenue</span>
-                  Today&apos;s Revenue
+                <span className="admin-stat-value ha-num">{formatCurrency(stats.todayRevenue)}</span>
                </p>
                <p className="text-2xl font-bold mt-0.5" style={{ color: "var(--admin-text-primary)" }}>
                  {isLoadingStats ? "—" : formatCurrency(stats?.todayRevenue ?? 0)}
                </p>
              </div>
            </div>
          </div>
          {/* Pending Stops */}
-          <div 
+          <div className="admin-stat-card">
-            className="rounded-xl border p-5 transition-all hover:shadow-md hover:-translate-y-0.5"
+            <div className="admin-stat-card-inner">
-            style={{ 
+              <div className="admin-stat-icon" style={{ backgroundColor: "var(--admin-bg-subtle)" }}>
-              backgroundColor: "var(--admin-card-bg)",
+                <svg className="w-4 h-4" style={{ color: "var(--admin-text-secondary)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
              borderColor: "var(--admin-border)"
            }}
          >
            <div className="flex items-center gap-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50">
                <svg className="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                  <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                </svg>
              </div>
-              <div>
+              <div className="admin-stat-body">
-                <p className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--admin-text-muted)" }}>
+                <span className="admin-stat-label">Pending Stops</span>
-                  Pending Stops
+                <span className="admin-stat-value">{stats.pendingStops}</span>
                </p>
                <p className="text-2xl font-bold mt-0.5" style={{ color: "var(--admin-text-primary)" }}>
                  {isLoadingStats ? "—" : stats?.pendingStops ?? 0}
                </p>
              </div>
            </div>
          </div>
-          {/* Active Products — uses plan-aware usage.products so this card
+          {/* Active Products */}
-              always matches the "Products 0/25" usage bar below and the
+          <div className="admin-stat-card">
-              billing page's invoice/usage row. Previously this came from a
+            <div className="admin-stat-card-inner">
-              separate query (`active=eq.true` only) and could disagree with
+              <div className="admin-stat-icon" style={{ backgroundColor: "var(--admin-primary-soft)" }}>
-              the plan limit usage, producing e.g. "1 vs 0/25" in the same
+                <svg className="w-4 h-4" style={{ color: "var(--admin-primary)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
              dashboard. */}
          <div
            className="rounded-xl border p-5 transition-all hover:shadow-md hover:-translate-y-0.5"
            style={{
              backgroundColor: "var(--admin-card-bg)",
              borderColor: "var(--admin-border)"
            }}
          >
            <div className="flex items-center gap-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50">
                <svg className="w-6 h-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
                </svg>
              </div>
-              <div>
+              <div className="admin-stat-body">
-                <p className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--admin-text-muted)" }}>
+                <span className="admin-stat-label">Active Products</span>
-                  Active Products
+                <span className="admin-stat-value">{usage.products}</span>
                </p>
                <p className="text-2xl font-bold mt-0.5" style={{ color: "var(--admin-text-primary)" }}>
                  {/* usage.products comes from the server-rendered prop (via
                      getBillingOverview), so it's available immediately and
                      is guaranteed to match the "Products X/25" usage bar
                      and the billing page. */}
                  {usage.products}
                </p>
              </div>
            </div>
          </div>
        </div>
-        {/* Quick Actions + Recent Orders Row */}
+        {/* ── Quick Actions + Usage Row ─────────────────────────── */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-3 animate-fade-up" style={{ animationDelay: "60ms" }}>
          {/* Quick Actions */}
-          <div 
+          <div className="admin-card-section">
-            className="rounded-xl border p-5"
+            <div className="admin-section-header">
-            style={{ 
+              <span className="admin-section-title">Quick Actions</span>
-              backgroundColor: "var(--admin-card-bg)",
+            </div>
-              borderColor: "var(--admin-border)"
+            <div className="admin-quick-actions">
            }}
          >
            <h3 className="text-sm font-semibold mb-4" style={{ color: "var(--admin-text-primary)" }}>
              Quick Actions
            </h3>
            <div className="grid grid-cols-2 gap-3">
              {quickActions.map((action) => (
                <Link
                  key={action.href}
                  href={action.href}
-                  className="flex items-center gap-2 p-3 rounded-xl border transition-all hover:-translate-y-0.5 hover:shadow-sm"
+                  className="admin-quick-action"
                  style={{ 
                    borderColor: "var(--admin-border-light)",
                    backgroundColor: "var(--admin-bg-subtle)"
                  }}
                >
-                  <div className="flex h-8 w-8 items-center justify-center rounded-lg" style={{ backgroundColor: "var(--admin-accent-light)" }}>
+                  <div className="admin-quick-action-icon" style={{ backgroundColor: "var(--admin-accent-light)" }}>
                    {action.icon === "plus" && (
-                      <svg className="w-4 h-4" style={{ color: "var(--admin-accent)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <svg className="w-3.5 h-3.5" style={{ color: "var(--admin-accent)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                      </svg>
                    )}
                    {action.icon === "map" && (
-                      <svg className="w-4 h-4" style={{ color: "var(--admin-accent)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <svg className="w-3.5 h-3.5" style={{ color: "var(--admin-accent)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                      </svg>
                    )}
                    {action.icon === "package" && (
-                      <svg className="w-4 h-4" style={{ color: "var(--admin-accent)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <svg className="w-3.5 h-3.5" style={{ color: "var(--admin-accent)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
                      </svg>
                    )}
                    {action.icon === "mail" && (
-                      <svg className="w-4 h-4" style={{ color: "var(--admin-accent)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <svg className="w-3.5 h-3.5" style={{ color: "var(--admin-accent)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-3-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                      </svg>
                    )}
                  </div>
-                  <span className="text-sm font-medium" style={{ color: "var(--admin-text-secondary)" }}>
+                  <span className="admin-quick-action-label">{action.label}</span>
-                    {action.label}
+                  <svg className="w-3.5 h-3.5 ml-auto opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  </span>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                  </svg>
                </Link>
              ))}
            </div>
          </div>
-          {/* Recent Orders */}
+          {/* Usage Stats */}
-          <div 
+          <div className="lg:col-span-2 admin-card-section">
-            className="lg:col-span-2 rounded-xl border overflow-hidden"
+            <div className="admin-section-header">
-            style={{ 
+              <div className="flex items-center gap-2">
-              backgroundColor: "var(--admin-card-bg)",
+                <AdminBadge variant={planTier === "enterprise" ? "warning" : planTier === "farm" ? "success" : "default"}>
-              borderColor: "var(--admin-border)"
+                  {planTier.charAt(0).toUpperCase() + planTier.slice(1)}
-            }}
+                </AdminBadge>
-          >
+                <span className="text-xs" style={{ color: "var(--admin-text-muted)" }}>{brandId ? brandName : "All Brands"}</span>
-            <div className="flex items-center justify-between px-5 py-4 border-b" style={{ borderColor: "var(--admin-border-light)" }}>
+              </div>
-              <h3 className="text-sm font-semibold" style={{ color: "var(--admin-text-primary)" }}>
+              <a href="/admin/settings/billing" className="text-xs font-medium hover:underline sm:hidden" style={{ color: "var(--admin-accent)" }}>
-                Recent Orders
+                Manage →
-              </h3>
+              </a>
              <Link 
                href="/admin/orders" 
                className="text-xs font-medium hover:underline"
                style={{ color: "var(--admin-accent)" }}
              >
                View all →
              </Link>
            </div>
-            <div className="divide-y" style={{ borderColor: "var(--admin-border-light)" }}>
+            <div className="admin-usage-grid">
-              {stats?.recentOrders && stats.recentOrders.length > 0 ? (
+              {[
-                stats.recentOrders.map((order) => {
+                { label: "Users", value: `${usage.users}/${limits.max_users}`, pct: usagePct.users, icon: "users" },
-                  const badge = getStatusBadge(order.status);
+                { label: "Stops", value: `${usage.stops_this_month}/${limits.max_stops_monthly}`, pct: usagePct.stops, icon: "map" },
-                  return (
+                { label: "Products", value: `${usage.products}/${limits.max_products}`, pct: usagePct.products, icon: "package" },
-                    <div key={order.id} className="flex items-center justify-between px-5 py-4 hover:bg-stone-50 transition-colors">
+              ].map(({ label, value, pct }) => (
-                      <div className="flex items-center gap-4">
+                <div key={label} className="admin-usage-item">
-                        <div className="flex h-10 w-10 items-center justify-center rounded-lg" style={{ backgroundColor: "var(--admin-bg)" }}>
+                  <div className="admin-usage-header">
-                          <svg className="w-5 h-5 text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                    <span className="admin-usage-label">{label}</span>
-                            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM12.94 18.55l.276-.276a.75.75 0 011.06 0l.27.27a.75.75 0 010 1.06l-.27.27a.75.75 0 01-1.06 0l-.276-.276a.75.75 0 010-1.06z" />
+                    <span className="admin-usage-value ha-num">{value}</span>
-                          </svg>
+                  </div>
-                        </div>
+                  <div className="admin-usage-bar">
-                        <div>
+                    <div
-                          <p className="text-sm font-medium" style={{ color: "var(--admin-text-primary)" }}>
+                      className="admin-usage-fill"
-                            {order.customer_name}
+                      style={{
-                          </p>
+                        width: `${Math.min(pct, 100)}%`,
-                          <p className="text-xs" style={{ color: "var(--admin-text-muted)" }}>
+                        backgroundColor: pct > 90 ? "var(--admin-danger)" : pct > 75 ? "var(--admin-warning)" : "var(--admin-accent)",
-                            {order.created_at}
+                      }}
-                          </p>
+                    />
-                        </div>
+                  </div>
                  {pct > 85 && (
                    <span className="admin-usage-warning">Near limit</span>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
        {/* ── Recent Orders ─────────────────────────────────────── */}
        <div className="admin-card-section animate-fade-up" style={{ animationDelay: "120ms" }}>
          <div className="admin-section-header">
            <span className="admin-section-title">Recent Orders</span>
            <Link href="/admin/orders" className="text-xs font-medium hover:underline" style={{ color: "var(--admin-accent)" }}>
              View all →
            </Link>
          </div>
          {stats.recentOrders && stats.recentOrders.length > 0 ? (
            <div className="admin-orders-list">
              {stats.recentOrders.slice(0, 6).map((order) => {
                const badge = getStatusBadge(order.status);
                return (
                  <Link
                    key={order.id}
                    href={`/admin/orders`}
                    className="admin-order-row"
                  >
                    <div className="admin-order-info">
                      <div className="admin-order-icon">
                        <svg className="w-4 h-4 text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                          <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM12.94 18.55l.276-.276a.75.75 0 011.06 0l.27.27a.75.75 0 010 1.06l-.27.27a.75.75 0 01-1.06 0l-.276-.276a.75.75 0 010-1.06z" />
                        </svg>
                      </div>
-                      <div className="flex items-center gap-4">
+                      <div>
-                        <span className="text-sm font-semibold" style={{ color: "var(--admin-text-primary)" }}>
+                        <span className="admin-order-name">{order.customer_name}</span>
-                          {formatCurrency(order.total)}
+                        <span className="admin-order-time">{order.created_at}</span>
                        </span>
                        <span 
                          className="px-2.5 py-1 rounded-full text-xs font-medium capitalize"
                          style={{ backgroundColor: badge.bg, color: badge.text }}
                        >
                          {order.status}
                        </span>
                      </div>
                    </div>
-                  );
+                    <div className="admin-order-meta">
-                })
+                      <span className="admin-order-amount ha-num">{formatCurrency(order.total)}</span>
-              ) : (
+                      <span className="admin-order-badge" style={{ backgroundColor: badge.bg, color: badge.text }}>
-                <div className="px-5 py-12 text-center">
+                        {order.status}
-                  <svg className="w-12 h-12 mx-auto mb-3" style={{ color: "var(--admin-text-muted)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
+                      </span>
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+                    </div>
                  </svg>
                  <p className="text-sm" style={{ color: "var(--admin-text-muted)" }}>
                    No recent orders
                  </p>
                  <Link 
                    href="/admin/orders?new=true" 
                    className="inline-block mt-3 text-xs font-medium hover:underline"
                    style={{ color: "var(--admin-accent)" }}
                  >
                    Create your first order →
                  </Link>
-                </div>
+                );
-              )}
+              })}
            </div>
-          </div>
+          ) : (
            <div className="admin-orders-empty">
              <svg className="w-10 h-10 mb-2" style={{ color: "var(--admin-text-muted)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
              </svg>
              <p className="text-sm" style={{ color: "var(--admin-text-muted)" }}>No recent orders</p>
              <Link href="/admin/orders?new=true" className="text-xs font-medium hover:underline mt-1" style={{ color: "var(--admin-accent)" }}>
                Create your first order →
              </Link>
            </div>
          )}
        </div>
-        {/* Usage stats bar */}
+        {/* ── Section Navigation Tabs ───────────────────────────── */}
-        <div 
+        <div className="animate-fade-up" style={{ animationDelay: "180ms" }}>
-          className="rounded-xl border p-5"
+          <AdminFilterTabs
-          style={{ 
+            activeTab={activeTab}
-            backgroundColor: "var(--admin-card-bg)",
+            onTabChange={(value) => setActiveTab(value as Tab)}
-            borderColor: "var(--admin-border)"
+            tabs={TABS.map((tab) => ({ value: tab.id, label: tab.label, icon: tab.icon }))}
-          }}
+            size="md"
-        >
+            showCounts={false}
-          <div className="flex items-center gap-4 mb-4">
+          />
            <AdminBadge variant={
              planTier === "enterprise" ? "warning" :
              planTier === "farm" ? "success" :
              "default"
            }>
              {planTier.charAt(0).toUpperCase() + planTier.slice(1)} Plan
            </AdminBadge>
            <span className="text-xs" style={{ color: "var(--admin-text-muted)" }}>
              {brandId ? brandName : "All Brands"}
            </span>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-8">
            {[
              { label: "Users", value: `${usage.users}/${limits.max_users}`, pct: usagePct.users, icon: "users" },
              { label: "Stops", value: `${usage.stops_this_month}/${limits.max_stops_monthly}`, pct: usagePct.stops, icon: "map" },
              { label: "Products", value: `${usage.products}/${limits.max_products}`, pct: usagePct.products, icon: "package" },
            ].map(({ label, value, pct }) => (
              <div key={label}>
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-2">
                    {label === "Users" && (
                      <svg className="w-4 h-4" style={{ color: "var(--admin-text-muted)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                      </svg>
                    )}
                    {label === "Stops" && (
                      <svg className="w-4 h-4" style={{ color: "var(--admin-text-muted)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                      </svg>
                    )}
                    {label === "Products" && (
                      <svg className="w-4 h-4" style={{ color: "var(--admin-text-muted)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
                      </svg>
                    )}
                    <span className="text-sm font-medium" style={{ color: "var(--admin-text-secondary)" }}>{label}</span>
                  </div>
                  <span className="text-sm font-semibold" style={{ color: "var(--admin-text-primary)" }}>{value}</span>
                </div>
                <div className="h-2.5 rounded-full overflow-hidden" style={{ backgroundColor: "var(--admin-bg)" }}>
                  <div
                    className="h-full rounded-full transition-all duration-500 ease-out"
                    style={{ 
                      width: `${Math.min(pct, 100)}%`,
                      backgroundColor: pct > 90 ? "var(--admin-danger)" : pct > 75 ? "#f59e0b" : "var(--admin-accent)"
                    }}
                  />
                </div>
                {pct > 85 && (
                  <p className="text-xs mt-1.5" style={{ color: "var(--admin-danger)" }}>
                    Near limit - consider upgrading
                  </p>
                )}
              </div>
            ))}
          </div>
        </div>
-        {/* Tab navigation */}
+        {/* ── Section Cards Grid ─────────────────────────────────── */}
-        <AdminFilterTabs
+        <div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-3 animate-fade-up" style={{ animationDelay: "240ms" }}>
          activeTab={activeTab}
          onTabChange={(value) => setActiveTab(value as Tab)}
          tabs={TABS.map((tab) => ({
            value: tab.id,
            label: tab.label,
            icon: tab.icon,
          }))}
          size="md"
          showCounts={false}
        />
        {/* Section Cards Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
          {tabSections.map((section) => {
            if (section.title === "Water Log" && !isWaterLogVisible) return null;
            if (section.title === "Route Trace" && !enabledAddons["route_trace"]) return null;
@@ -622,87 +404,64 @@ export default function DashboardClient({
                key={section.title}
                href={section.href}
                className={[
-                  "group relative flex flex-col rounded-xl border p-5 transition-all hover:-translate-y-0.5 hover:shadow-md",
+                  "admin-section-card",
-                  isAddon && !isEnabled
+                  isAddon && !isEnabled ? "admin-section-card--locked" : "",
-                    ? "border-stone-200 shadow-sm opacity-75 hover:opacity-100"
+                  isProminent ? "admin-section-card--prominent" : "",
-                    : isProminent
+                ].filter(Boolean).join(" ")}
                    ? "border-[var(--admin-accent)]/20 shadow-[0_2px_8px_rgba(0,0,0,0.04)]"
                    : "border-stone-200 shadow-sm",
                ].join(" ")}
                style={{ backgroundColor: "var(--admin-card-bg)" }}
              >
-                <div className="flex items-center justify-between mb-4">
+                <div className="admin-section-card-top">
-                  <div className={`flex h-10 w-10 items-center justify-center rounded-xl transition-transform group-hover:scale-110 ${
+                  <div className={[
-                    isAddon && !isEnabled
+                    "admin-section-card-icon",
-                      ? "bg-stone-100 text-stone-400"
+                    isAddon && !isEnabled ? "admin-section-card-icon--locked" : "",
-                      : isProminent
+                    isProminent ? "admin-section-card-icon--prominent" : "",
-                      ? "bg-emerald-50 text-emerald-600"
+                  ].filter(Boolean).join(" ")}>
                      : "bg-stone-100 text-stone-600"
                  }`}>
                    {section.title === "Orders" && (
-                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM12.94 18.55l.276-.276a.75.75 0 011.06 0l.27.27a.75.75 0 010 1.06l-.27.27a.75.75 0 01-1.06 0l-.276-.276a.75.75 0 010-1.06z" />
                      </svg>
                    )}
                    {section.title === "Products" && (
-                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
                      </svg>
                    )}
                    {section.title === "Tours & Stops" && (
-                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                      </svg>
                    )}
                    {section.title === "Driver Pickup" && (
-                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" />
                      </svg>
                    )}
                    {!["Orders", "Products", "Tours & Stops", "Driver Pickup"].includes(section.title) && (
-                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
                      </svg>
                    )}
                  </div>
-                  {isAddon && !isEnabled && (
+                  <div className="flex items-center gap-1.5">
-                    <AdminBadge variant="warning">
+                    {isAddon && !isEnabled && <AdminBadge variant="warning">Add-on</AdminBadge>}
-                      Add-on
+                    {isAddon && isEnabled && <AdminBadge variant="success">Active</AdminBadge>}
-                    </AdminBadge>
+                    {isProminent && <AdminBadge variant="success">Core</AdminBadge>}
-                  )}
+                  </div>
                  {isAddon && isEnabled && (
                    <AdminBadge variant="success">
                      Active
                    </AdminBadge>
                  )}
                  {isProminent && (
                    <AdminBadge variant="success">
                      Core
                    </AdminBadge>
                  )}
                </div>
-                <h3 className="text-sm font-semibold leading-tight" style={{ color: "var(--admin-text-primary)" }}>
+                <div className="admin-section-card-body">
-                  {section.title}
+                  <h3 className="admin-section-card-title">{section.title}</h3>
-                </h3>
+                  <p className={["admin-section-card-desc", isAddon && !isEnabled ? "text-stone-400" : ""].filter(Boolean).join(" ")}>
-
+                    {section.description}
-                <p className={`mt-2 text-sm leading-relaxed ${
+                  </p>
-                  isAddon && !isEnabled ? "text-stone-500" : "text-stone-600"
+                </div>
                }`}>
                  {section.description}
                </p>
                {isAddon && !isEnabled && section.upgradeText && (
-                  <p className="mt-3 text-xs font-medium" style={{ color: "var(--admin-warning)" }}>
+                  <p className="admin-section-card-hint">{section.upgradeText}</p>
                    {section.upgradeText}
                  </p>
                )}
-                {/* Arrow indicator */}
+                <div className="admin-section-card-arrow">
-                <div className="mt-4 flex items-center text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity" style={{ color: "var(--admin-accent)" }}>
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  Open section
                  <svg className="w-4 h-4 ml-1 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                  </svg>
                </div>
@@ -712,7 +471,7 @@ export default function DashboardClient({
        </div>
      </div>
-      {/* Upgrade Modal */}
+      {/* Upgrade Modal — lazy-loaded via next/dynamic */}
      {planTier === "starter" && brandId && (
        <UpgradePlanModal
          isOpen={isUpgradeOpen}
@@ -0,0 +1,473 @@
 "use client";
 import { useState, useCallback, useEffect, useRef } from "react";
 import { createStop } from "@/actions/stops/create-stop";
 import { updateStop } from "@/actions/stops/update-stop";
 import GlassModal from "@/components/admin/GlassModal";
 type Stop = {
  id: string;
  city: string;
  state: string;
  location: string;
  date: string;
  time: string;
  address?: string | null;
  zip?: string | null;
  cutoff_time?: string | null;
  active: boolean;
  brand_id: string;
 };
 type Props = {
  isOpen: boolean;
  onClose: () => void;
  brandId: string;
  stop?: Stop | null;
  onSuccess?: (stopId: string) => void;
 };
 /* Pin icon for the modal header */
 const PinIcon = () => (
  <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
    <circle cx="12" cy="10" r="3" />
  </svg>
 );
 export default function EditStopModal({ isOpen, onClose, brandId, stop, onSuccess }: Props) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [city, setCity] = useState("");
  const [stateField, setStateField] = useState("");
  const [location, setLocation] = useState("");
  const [date, setDate] = useState("");
  const [time, setTime] = useState("");
  const [address, setAddress] = useState("");
  const [zip, setZip] = useState("");
  const [cutoffTime, setCutoffTime] = useState("");
  const [status, setStatus] = useState<"draft" | "active">("draft");
  const cityRef = useRef<HTMLInputElement>(null);
  const isEditing = Boolean(stop);
  useEffect(() => {
    if (isOpen) {
      if (stop) {
        // Edit mode - populate from existing stop.
        // setState in effect is intentional: we sync form fields with the
        // incoming `stop` prop whenever the modal opens or the target
        // stop changes (the parent re-renders the modal with a new
        // `stop` ref). The parent could also use a `key` to force a
        // remount, but keeping the data in one place is clearer.
        /* eslint-disable react-hooks/set-state-in-effect */
        setCity(stop.city);
        setStateField(stop.state);
        setLocation(stop.location);
        setDate(stop.date);
        setTime(stop.time || "");
        setAddress(stop.address ?? "");
        setZip(stop.zip ?? "");
        setCutoffTime(stop.cutoff_time ? stop.cutoff_time.slice(0, 16) : "");
        setStatus(stop.active ? "active" : "draft");
      } else {
        // Add mode - reset form
        setCity("");
        setStateField("");
        setLocation("");
        setDate("");
        setTime("");
        setAddress("");
        setZip("");
        setCutoffTime("");
        setStatus("draft");
      }
      setError(null);
      requestAnimationFrame(() => cityRef.current?.focus());
      /* eslint-enable react-hooks/set-state-in-effect */
    }
  }, [isOpen, stop]);
  const handleSubmit = useCallback(
    async (e: React.FormEvent) => {
      e.preventDefault();
      setError(null);
      if (!city.trim() || !stateField.trim() || !location.trim() || !date) {
        setError("City, state, location, and date are required.");
        return;
      }
      setLoading(true);
      try {
        let result;
        if (isEditing && stop) {
          result = await updateStop(stop.id, brandId, {
            city: city.trim(),
            state: stateField.trim(),
            location: location.trim(),
            date,
            time: time || "08:00",
            address: address || null,
            zip: zip || null,
            cutoff_time: cutoffTime || null,
            active: status === "active",
          });
        } else {
          result = await createStop(brandId, {
            city: city.trim(),
            state: stateField.trim(),
            location: location.trim(),
            date,
            time: time || "08:00",
            address: address || undefined,
            zip: zip || undefined,
            cutoff_time: cutoffTime || undefined,
            active: status === "active",
          });
        }
        if (result.success) {
          const newStopId = isEditing ? stop!.id : (result as { success: true; id: string }).id;
          onSuccess?.(newStopId);
          onClose();
        } else {
          setError(result.error ?? `Failed to ${isEditing ? "update" : "create"} stop`);
        }
      } catch {
        setError("Network error. Please try again.");
      } finally {
        setLoading(false);
      }
    },
    [
      brandId,
      city,
      stateField,
      location,
      date,
      time,
      address,
      zip,
      cutoffTime,
      status,
      isEditing,
      stop,
      onSuccess,
      onClose,
    ]
  );
  const title = isEditing ? "Edit Stop" : "Add Stop";
  const eyebrow = isEditing
    ? `${stop?.city}, ${stop?.state}`
    : "New stop on the route";
  const submitLabel = loading
    ? isEditing ? "Saving…" : "Creating…"
    : isEditing
      ? "Save Changes"
      : status === "active"
        ? "Create & Publish"
        : "Save as Draft";
  if (!isOpen) return null;
  return (
    <GlassModal
      title={title}
      eyebrow={eyebrow}
      onClose={onClose}
      maxWidth="max-w-xl"
      compact
    >
      <form onSubmit={handleSubmit} className="space-y-3" noValidate>
        {error && (
          <div
            role="alert"
            className="flex items-start gap-2 rounded-lg px-3 py-2 text-xs text-red-700"
            style={{ background: "rgba(220, 38, 38, 0.06)", border: "1px solid rgba(220, 38, 38, 0.15)" }}
          >
            <svg className="h-3.5 w-3.5 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
              <circle cx="12" cy="12" r="10" />
              <path d="M12 8v4M12 16h.01" strokeLinecap="round" />
            </svg>
            <span>{error}</span>
          </div>
        )}
        {/* Row 1 — Where: City + State */}
        <div className="grid grid-cols-[1fr_5.5rem] gap-3">
          <div className="ha-field">
            <label htmlFor="stop-city" className="ha-field-label">
              <PinIcon />
              <span>City</span>
              <span className="ha-field-label-required">*</span>
            </label>
            <input
              ref={cityRef}
              id="stop-city"
              type="text"
              value={city}
              onChange={(e) => setCity(e.target.value)}
              placeholder="Denver"
              className="ha-field-input"
              required
              autoComplete="address-level2"
            />
          </div>
          <div className="ha-field">
            <label htmlFor="stop-state" className="ha-field-label">
              <span>State</span>
              <span className="ha-field-label-required">*</span>
            </label>
            <input
              id="stop-state"
              type="text"
              value={stateField}
              onChange={(e) => setStateField(e.target.value.toUpperCase())}
              placeholder="CO"
              maxLength={2}
              className="ha-field-input ha-field-input-mono text-center"
              style={{ textTransform: "uppercase" }}
              required
              autoComplete="address-level1"
            />
          </div>
        </div>
        {/* Row 2 — Where at: Location (full) */}
        <div className="ha-field">
          <label htmlFor="stop-location" className="ha-field-label">
            <span>Location / Venue</span>
            <span className="ha-field-label-required">*</span>
          </label>
          <input
            id="stop-location"
            type="text"
            value={location}
            onChange={(e) => setLocation(e.target.value)}
            placeholder="Whole Foods Market — Highlands"
            className="ha-field-input"
            required
          />
        </div>
        {/* Row 3 — When: Date + Time */}
        <div className="grid grid-cols-[1fr_1fr] gap-3">
          <div className="ha-field">
            <label htmlFor="stop-date" className="ha-field-label">
              <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}>
                <rect x="3" y="4" width="18" height="18" rx="2" />
                <path d="M16 2v4M8 2v4M3 10h18" strokeLinecap="round" />
              </svg>
              <span>Pickup Date</span>
              <span className="ha-field-label-required">*</span>
            </label>
            <input
              id="stop-date"
              type="date"
              value={date}
              onChange={(e) => setDate(e.target.value)}
              className="ha-field-input ha-field-input-mono"
              required
            />
          </div>
          <div className="ha-field">
            <label htmlFor="stop-time" className="ha-field-label">
              <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}>
                <circle cx="12" cy="12" r="10" />
                <path d="M12 6v6l4 2" strokeLinecap="round" />
              </svg>
              <span>Pickup Time</span>
            </label>
            <input
              id="stop-time"
              type="time"
              value={time}
              onChange={(e) => setTime(e.target.value)}
              className="ha-field-input ha-field-input-mono"
            />
          </div>
        </div>
        {/* Row 4 — Address + ZIP + Cutoff */}
        <div className="grid grid-cols-[1fr_5.5rem_6.5rem] gap-3">
          <div className="ha-field">
            <label htmlFor="stop-address" className="ha-field-label">
              <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}>
                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" strokeLinejoin="round" />
                <path d="M9 22V12h6v10" strokeLinejoin="round" />
              </svg>
              <span>Street Address</span>
            </label>
            <input
              id="stop-address"
              type="text"
              value={address}
              onChange={(e) => setAddress(e.target.value)}
              placeholder="123 Main St"
              className="ha-field-input"
              autoComplete="street-address"
            />
          </div>
          <div className="ha-field">
            <label htmlFor="stop-zip" className="ha-field-label">
              <span>ZIP</span>
            </label>
            <input
              id="stop-zip"
              type="text"
              value={zip}
              onChange={(e) => setZip(e.target.value)}
              placeholder="80202"
              maxLength={10}
              className="ha-field-input ha-field-input-mono"
              autoComplete="postal-code"
            />
          </div>
          <div className="ha-field">
            <label htmlFor="stop-cutoff" className="ha-field-label">
              <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}>
                <circle cx="12" cy="12" r="9" />
                <path d="M12 7v5l3 2" strokeLinecap="round" />
              </svg>
              <span>Cutoff</span>
            </label>
            <input
              id="stop-cutoff"
              type="time"
              value={cutoffTime}
              onChange={(e) => setCutoffTime(e.target.value)}
              className="ha-field-input ha-field-input-mono"
            />
          </div>
        </div>
        {/* Row 5 — Status: segmented control */}
        <div className="ha-field pt-0.5">
          <div className="flex items-center justify-between">
            <label className="ha-field-label">
              <span>Visibility</span>
            </label>
            <span className="text-[10px] text-[var(--admin-text-muted)] leading-none">
              Draft is hidden from customers
            </span>
          </div>
          <div className="ha-segment mt-1" role="radiogroup" aria-label="Stop status">
            <button
              type="button"
              role="radio"
              aria-checked={status === "draft"}
              onClick={() => setStatus("draft")}
              className={`ha-segment-btn ${status === "draft" ? "ha-segment-btn--active ha-segment-active-draft" : ""}`}
            >
              <span className="ha-segment-dot" />
              <span>Save as Draft</span>
            </button>
            <button
              type="button"
              role="radio"
              aria-checked={status === "active"}
              onClick={() => setStatus("active")}
              className={`ha-segment-btn ${status === "active" ? "ha-segment-btn--active ha-segment-active-active" : ""}`}
            >
              <span className="ha-segment-dot" />
              <span>Publish Now</span>
            </button>
          </div>
        </div>
        {/* Footer */}
        <div className="ha-modal-footer">
          <span className="ha-modal-footer-hint">
            <kbd>Esc</kbd>
            to close
          </span>
          <div className="flex items-center gap-2">
            <button
              type="button"
              onClick={onClose}
              className="ha-btn-ghost"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={loading}
              className="ha-btn-primary"
            >
              {loading ? (
                <>
                  <svg className="h-3.5 w-3.5 animate-spin" viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10" stroke="currentColor" strokeOpacity="0.25" strokeWidth="3" />
                    <path d="M22 12a10 10 0 0 0-10-10" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
                  </svg>
                  <span>{submitLabel}</span>
                </>
              ) : (
                <>
                  {isEditing ? (
                    <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
                      <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z" strokeLinejoin="round" />
                      <path d="M17 21v-8H7v8M7 3v5h8" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  ) : status === "active" ? (
                    <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
                      <path d="M5 12l5 5L20 7" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  ) : (
                    <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
                      <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z" strokeLinejoin="round" />
                      <path d="M17 21v-8H7v8M7 3v5h8" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  )}
                  <span>{submitLabel}</span>
                </>
              )}
            </button>
          </div>
        </div>
      </form>
    </GlassModal>
  );
 }
 // Hook for easy integration
 export function useEditStopModal(brandId: string) {
  const [isOpen, setIsOpen] = useState(false);
  const [editingStop, setEditingStop] = useState<{
    id: string;
    city: string;
    state: string;
    location: string;
    date: string;
    time: string;
    address?: string | null;
    zip?: string | null;
    cutoff_time?: string | null;
    active: boolean;
    brand_id: string;
  } | null>(null);
  const open = useCallback((stop?: typeof editingStop) => {
    setEditingStop(stop ?? null);
    setIsOpen(true);
  }, []);
  const close = useCallback(() => {
    setIsOpen(false);
    setEditingStop(null);
  }, []);
  const Modal = useCallback(() => (
    <EditStopModal
      isOpen={isOpen}
      onClose={close}
      brandId={brandId}
      stop={editingStop}
    />
  ), [isOpen, close, brandId, editingStop]);
  return { open, close, Modal, editingStop };
 }
@@ -16,7 +16,6 @@ export type StopForView = {
  time: string;
  location: string;
  active: boolean;
  deleted_at?: string | null;
  brand_id: string;
  status?: string;
  address?: string | null;
@@ -8,6 +8,9 @@ import StopsList from "./StopsList";
 type Props = {
  stops: Stop[];
  page?: number;
  totalPages?: number;
  totalCount?: number;
 };
 const TABS: { value: StopView; label: string; hint: string }[] = [
@@ -16,7 +19,7 @@ const TABS: { value: StopView; label: string; hint: string }[] = [
  { value: "list", label: "List", hint: "All stops in order" },
 ];
-export default function StopsDashboardClient({ stops }: Props) {
+export default function StopsDashboardClient({ stops, page = 1, totalPages = 1, totalCount = 0 }: Props) {
  const [view, setView] = useState<StopView>("calendar");
  const stats = useMemo(() => {
@@ -52,7 +55,7 @@ export default function StopsDashboardClient({ stops }: Props) {
          className="pointer-events-none absolute inset-0 opacity-[0.04]"
          style={{
            backgroundImage:
-              "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0.6 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>\")",
+              "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0 0.6 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>\")",
          }}
        />
        <div className="relative flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
@@ -134,6 +137,55 @@ export default function StopsDashboardClient({ stops }: Props) {
            value={stats.venues}
          />
        </div>
        {/* Pagination */}
        {totalPages > 1 && (
          <div className="relative flex items-center justify-between border-t border-[var(--admin-border-light)] pt-4 mt-4">
            <p className="font-mono text-xs text-[var(--admin-text-muted)]">
              Showing {((page - 1) * 50) + 1}–{Math.min(page * 50, totalCount)} of {totalCount}
            </p>
            <div className="flex items-center gap-1">
              <a
                href={page > 1 ? `?page=${page - 1}` : "#"}
                aria-disabled={page <= 1}
                className={`inline-flex h-8 w-8 items-center justify-center rounded-md text-sm font-medium transition-colors ${
                  page <= 1
                    ? "text-[var(--admin-text-muted)] cursor-not-allowed pointer-events-none"
                    : "text-[var(--admin-text-secondary)] hover:bg-[var(--admin-bg-subtle)]"
                }`}
              >
                ‹
              </a>
              {Array.from({ length: Math.min(totalPages, 7) }, (_, i) => {
                const p = i + 1;
                return (
                  <a
                    key={p}
                    href={`?page=${p}`}
                    className={`inline-flex h-8 w-8 items-center justify-center rounded-md text-sm font-medium transition-colors ${
                      p === page
                        ? "bg-[var(--admin-accent-light)] text-[var(--admin-accent-text)]"
                        : "text-[var(--admin-text-secondary)] hover:bg-[var(--admin-bg-subtle)]"
                    }`}
                  >
                    {p}
                  </a>
                );
              })}
 <a
                href={page < totalPages ? `?page=${page + 1}` : "#"}
                aria-disabled={page >= totalPages}
                className={`inline-flex h-8 w-8 items-center justify-center rounded-md text-sm font-medium transition-colors ${
                  page >= totalPages
                    ? "text-[var(--admin-text-muted)] cursor-not-allowed pointer-events-none"
                    : "text-[var(--admin-text-secondary)] hover:bg-[var(--admin-bg-subtle)]"
                }`}
              >
                ›
 </a>
            </div>
          </div>
        )}
      </section>
      {/* Active view */}
@@ -8,12 +8,12 @@ export type Stop = {
  time: string; // HH:MM
  location: string;
  active: boolean;
  deleted_at?: string | null;
  brand_id: string;
  status?: string;
  address?: string | null;
  zip?: string | null;
  cutoff_time?: string | null;
  cutoff_date?: string | null;
  brands: { name: string } | { name: string }[];
 };
@@ -231,22 +231,20 @@ export default function FeaturesAndStats() {
  return (
    <div
      style={{
-        fontFamily: "'Plus Jakarta Sans', sans-serif",
+        fontFamily: "var(--font-manrope)",
        background: "#faf8f5",
        color: "#1a1a1a",
        minHeight: "100vh",
      }}
    >
      <style jsx>{`
        @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
        :global(body) {
          margin: 0;
          padding: 0;
        }
        .section-label {
-          font-family: "Plus Jakarta Sans", sans-serif;
+          font-family: var(--font-manrope);
          font-size: 0.75rem;
          font-weight: 600;
          letter-spacing: 0.15em;
@@ -256,7 +254,7 @@ export default function FeaturesAndStats() {
        }
        .section-title {
-          font-family: "Cormorant Garamond", serif;
+          font-family: var(--font-fraunces);
          font-size: clamp(2rem, 5vw, 3rem);
          font-weight: 600;
          color: #1a4d2e;
@@ -265,7 +263,7 @@ export default function FeaturesAndStats() {
        }
        .section-subtitle {
-          font-family: "Plus Jakarta Sans", sans-serif;
+          font-family: var(--font-manrope);
          font-size: 1.125rem;
          color: #4a4a4a;
          line-height: 1.6;
@@ -304,7 +302,7 @@ export default function FeaturesAndStats() {
        }
        .feature-title {
-          font-family: "Cormorant Garamond", serif;
+          font-family: var(--font-fraunces);
          font-size: 1.375rem;
          font-weight: 600;
          color: #1a4d2e;
@@ -326,7 +324,7 @@ export default function FeaturesAndStats() {
        }
        .stat-number {
-          font-family: "Cormorant Garamond", serif;
+          font-family: var(--font-fraunces);
          font-size: clamp(2.5rem, 5vw, 4rem);
          font-weight: 700;
          color: #1a4d2e;
@@ -570,7 +568,7 @@ export default function FeaturesAndStats() {
            <span
              style={{
                display: "block",
-                fontFamily: "'Plus Jakarta Sans', sans-serif",
+                fontFamily: "var(--font-manrope)",
                fontSize: "0.75rem",
                fontWeight: 600,
                letterSpacing: "0.15em",
@@ -583,7 +581,7 @@ export default function FeaturesAndStats() {
            </span>
            <h2
              style={{
-                fontFamily: "'Cormorant Garamond', serif",
+                fontFamily: "var(--font-fraunces)",
                fontSize: "clamp(2rem, 4vw, 2.75rem)",
                fontWeight: 600,
                color: "#faf8f5",
@@ -620,7 +618,7 @@ export default function FeaturesAndStats() {
              >
                <div
                  style={{
-                    fontFamily: "'Cormorant Garamond', serif",
+                    fontFamily: "var(--font-fraunces)",
                    fontSize: "clamp(2.25rem, 4.5vw, 3.75rem)",
                    fontWeight: 700,
                    color: "#faf8f5",
@@ -660,7 +658,7 @@ export default function FeaturesAndStats() {
                </div>
                <p
                  style={{
-                    fontFamily: "'Plus Jakarta Sans', sans-serif",
+                    fontFamily: "var(--font-manrope)",
                    fontSize: "0.875rem",
                    fontWeight: 500,
                    color: "#6b8f71",
@@ -310,7 +310,7 @@ export default function HeroSection() {
                <h1
                  className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-bold leading-[0.9] tracking-tighter"
                  style={{
-                    fontFamily: "'Playfair Display', 'Georgia', serif",
+                    fontFamily: "var(--font-fraunces)",
                    color: "#1a1a1a",
                  }}
                >
@@ -323,7 +323,7 @@ export default function HeroSection() {
              <p
                className="hero-reveal hero-subtitle text-lg sm:text-xl md:text-2xl max-w-xl leading-relaxed"
                style={{
-                  fontFamily: "'DM Sans', sans-serif",
+                  fontFamily: "var(--font-manrope)",
                  color: "#4a6d56",
                  fontWeight: 400,
                }}
@@ -393,7 +393,7 @@ export default function HeroSection() {
                    <div
                      className="text-2xl sm:text-3xl lg:text-4xl font-bold"
                      style={{
-                        fontFamily: "'Playfair Display', serif",
+                        fontFamily: "var(--font-fraunces)",
                        color: "#1a4d2e",
                      }}
                    >
@@ -611,7 +611,7 @@ export default function HeroSection() {
              <div className="mb-8 reveal-scale">
                <span
                  className="inline-block text-xs font-bold tracking-[0.3em] uppercase"
-                  style={{ color: "#c97a3e", fontFamily: "'DM Sans', sans-serif" }}
+                  style={{ color: "#c97a3e", fontFamily: "var(--font-manrope)" }}
                >
                  The Challenge
                </span>
@@ -621,7 +621,7 @@ export default function HeroSection() {
                <h2
                  className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-8"
                  style={{
-                    fontFamily: "'Playfair Display', serif",
+                    fontFamily: "var(--font-fraunces)",
                    color: "#faf8f5",
                  }}
                >
@@ -636,7 +636,7 @@ export default function HeroSection() {
                  className="text-xl max-w-2xl mx-auto"
                  style={{
                    color: "#86868b",
-                    fontFamily: "'DM Sans', sans-serif",
+                    fontFamily: "var(--font-manrope)",
                    lineHeight: 1.7,
                  }}
                >
@@ -669,14 +669,14 @@ export default function HeroSection() {
          <div className="reveal-scale text-center mb-20">
            <span
              className="inline-block text-xs font-bold tracking-[0.2em] uppercase mb-6"
-              style={{ color: "#6b8f71", fontFamily: "'DM Sans', sans-serif" }}
+              style={{ color: "#6b8f71", fontFamily: "var(--font-manrope)" }}
            >
              Platform Features
            </span>
            <h2
              className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight"
              style={{
-                fontFamily: "'Playfair Display', serif",
+                fontFamily: "var(--font-fraunces)",
                color: "#1a4d2e",
              }}
            >
@@ -792,7 +792,7 @@ export default function HeroSection() {
                <h3
                  className="text-2xl font-bold mb-4"
                  style={{
-                    fontFamily: "'Playfair Display', serif",
+                    fontFamily: "var(--font-fraunces)",
                    color: "#1a4d2e",
                  }}
                >
@@ -802,7 +802,7 @@ export default function HeroSection() {
                  className="text-base leading-relaxed"
                  style={{
                    color: "#555",
-                    fontFamily: "'DM Sans', sans-serif",
+                    fontFamily: "var(--font-manrope)",
                  }}
                >
                  {feature.description}
@@ -845,7 +845,7 @@ export default function HeroSection() {
          <div className="text-center mb-16 reveal-scale">
            <span
              className="inline-block text-xs font-bold tracking-[0.2em] uppercase"
-              style={{ color: "#c97a3e", fontFamily: "'DM Sans', sans-serif" }}
+              style={{ color: "#c97a3e", fontFamily: "var(--font-manrope)" }}
            >
              Our Impact
            </span>
@@ -863,7 +863,7 @@ export default function HeroSection() {
                <div
                  className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-4"
                  style={{
-                    fontFamily: "'Playfair Display', serif",
+                    fontFamily: "var(--font-fraunces)",
                    color: "#faf8f5",
                    lineHeight: 1,
                  }}
@@ -874,7 +874,7 @@ export default function HeroSection() {
                </div>
                <p
                  className="text-base font-medium"
-                  style={{ color: "#6b8f71", fontFamily: "'DM Sans', sans-serif" }}
+                  style={{ color: "#6b8f71", fontFamily: "var(--font-manrope)" }}
                >
                  {stat.label}
                </p>
@@ -914,7 +914,7 @@ export default function HeroSection() {
                style={{
                  color: "#c97a3e",
                  background: "rgba(201, 122, 62, 0.1)",
-                  fontFamily: "'DM Sans', sans-serif",
+                  fontFamily: "var(--font-manrope)",
                }}
              >
                Get Started Today
@@ -926,7 +926,7 @@ export default function HeroSection() {
              <h2
                className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight mb-8"
                style={{
-                  fontFamily: "'Playfair Display', serif",
+                  fontFamily: "var(--font-fraunces)",
                  color: "#1a4d2e",
                }}
              >
@@ -941,7 +941,7 @@ export default function HeroSection() {
                className="text-xl mb-12 max-w-xl mx-auto"
                style={{
                  color: "#555",
-                  fontFamily: "'DM Sans', sans-serif",
+                  fontFamily: "var(--font-manrope)",
                }}
              >
                Join hundreds of farms already using Route Commerce to deliver fresher produce faster.
@@ -998,6 +998,25 @@ export default function HeroSection() {
          66% { transform: translate(10px, -10px); }
        }
        @keyframes float-slow {
          0%, 100% { transform: translate(0, 0) scale(1); }
          50% { transform: translate(25px, -30px) scale(1.02); }
        }
        @keyframes float-slow-delayed {
          0%, 100% { transform: translate(0, 0) scale(1); }
          50% { transform: translate(-30px, 20px) scale(1.03); }
        }
        @media (prefers-reduced-motion: reduce) {
          .parallax-float,
          .parallax-float *,
          [class*="animate-"] {
            animation: none !important;
            transition: none !important;
          }
        }
        @keyframes draw-route {
          to { stroke-dashoffset: 0; }
        }
@@ -55,7 +55,7 @@ export function Header({ className = "" }: HeaderProps) {
            <span
              className="text-xl font-semibold tracking-tight"
              style={{
-                fontFamily: "'Cormorant Garamond', Georgia, serif",
+                fontFamily: "var(--font-fraunces)",
                color: "#1a1a1a",
              }}
            >
@@ -71,7 +71,7 @@ export function Header({ className = "" }: HeaderProps) {
                href={link.href}
                className="text-sm font-medium transition-colors hover:opacity-70"
                style={{
-                  fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                  fontFamily: "var(--font-manrope)",
                  color: "#1a1a1a",
                }}
              >
@@ -86,7 +86,7 @@ export function Header({ className = "" }: HeaderProps) {
              href="/login"
              className="text-sm font-medium transition-opacity hover:opacity-70"
              style={{
-                fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                fontFamily: "var(--font-manrope)",
                color: "#1a4d2e",
              }}
            >
@@ -96,7 +96,7 @@ export function Header({ className = "" }: HeaderProps) {
              href="/admin"
              className="px-5 py-2.5 rounded-full text-sm font-semibold transition-all hover:opacity-90 active:scale-95"
              style={{
-                fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                fontFamily: "var(--font-manrope)",
                background: "rgba(26, 77, 46, 0.9)",
                backdropFilter: "blur(10px)",
                WebkitBackdropFilter: "blur(10px)",
@@ -160,7 +160,7 @@ export function Header({ className = "" }: HeaderProps) {
                  href={link.href}
                  className="px-4 py-3 text-base font-medium rounded-lg transition-colors hover:bg-[#6b8f71]/10"
                  style={{
-                    fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                    fontFamily: "var(--font-manrope)",
                    color: "#1a1a1a",
                  }}
                  onClick={() => setMobileMenuOpen(false)}
@@ -176,7 +176,7 @@ export function Header({ className = "" }: HeaderProps) {
                  href="/login"
                  className="py-3 text-base font-medium"
                  style={{
-                    fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                    fontFamily: "var(--font-manrope)",
                    color: "#1a4d2e",
                  }}
                >
@@ -186,7 +186,7 @@ export function Header({ className = "" }: HeaderProps) {
                  href="/admin"
                  className="py-3 rounded-full text-base font-semibold text-center"
                  style={{
-                    fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                    fontFamily: "var(--font-manrope)",
                    background: "rgba(26, 77, 46, 0.9)",
                    backdropFilter: "blur(10px)",
                    border: "1px solid rgba(255, 255, 255, 0.2)",
@@ -252,7 +252,7 @@ export function Footer({ className = "" }: FooterProps) {
              <span
                className="text-sm font-medium tracking-tight"
                style={{
-                  fontFamily: "'Cormorant Garamond', Georgia, serif",
+                  fontFamily: "var(--font-fraunces)",
                  color: "#1a1a1a",
                }}
              >
@@ -262,7 +262,7 @@ export function Footer({ className = "" }: FooterProps) {
            <span
              className="text-xs mt-1"
              style={{
-                fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                fontFamily: "var(--font-manrope)",
                color: "#9a9590",
              }}
            >
@@ -278,7 +278,7 @@ export function Footer({ className = "" }: FooterProps) {
                href={link.href}
                className="text-xs font-medium uppercase tracking-wider transition-colors hover:text-[#1a4d2e]"
                style={{
-                  fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                  fontFamily: "var(--font-manrope)",
                  color: "#6b8f71",
                  letterSpacing: "0.08em",
                }}
@@ -292,11 +292,11 @@ export function Footer({ className = "" }: FooterProps) {
          <span
            className="text-xs"
            style={{
-              fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+              fontFamily: "var(--font-manrope)",
              color: "#b5b0a8",
            }}
          >
-            © 2025
+            © {new Date().getFullYear()}
          </span>
        </div>
      </div>
@@ -319,15 +319,11 @@ interface WrapperProps {
 export function LandingPageWrapper({ children, className = "" }: WrapperProps) {
  return (
    <>
-      {/* Google Fonts Import */}
+      {/* Fonts loaded via next/font in app/layout.tsx — no external @import needed */}
      <style jsx global>{`
        @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");
      `}</style>
      <div
        className={`min-h-screen flex flex-col ${className}`}
        style={{
-          fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+          fontFamily: "var(--font-manrope)",
          scrollBehavior: "smooth",
        }}
      >
@@ -59,7 +59,7 @@ export default function TestimonialsAndCTA() {
      <section
        style={{
          background: "linear-gradient(180deg, #faf8f5 0%, #f5f2ed 100%)",
-          fontFamily: "'Plus Jakarta Sans', sans-serif",
+          fontFamily: "var(--font-manrope)",
        }}
      >
        {/* Decorative botanical accent */}
@@ -132,7 +132,7 @@ export default function TestimonialsAndCTA() {
            </span>
            <h2
              style={{
-                fontFamily: "'Cormorant Garamond', serif",
+                fontFamily: "var(--font-fraunces)",
                fontSize: "clamp(2.5rem, 5vw, 3.5rem)",
                fontWeight: 600,
                lineHeight: 1.1,
@@ -193,7 +193,7 @@ export default function TestimonialsAndCTA() {
                    top: "-8px",
                    right: "20px",
                    fontSize: "80px",
-                    fontFamily: "'Cormorant Garamond', serif",
+                    fontFamily: "var(--font-fraunces)",
                    color: "rgba(26, 77, 46, 0.06)",
                    lineHeight: 1,
                    pointerEvents: "none",
@@ -295,7 +295,7 @@ export default function TestimonialsAndCTA() {
              <div key={i} style={{ textAlign: "center" }}>
                <div
                  style={{
-                    fontFamily: "'Cormorant Garamond', serif",
+                    fontFamily: "var(--font-fraunces)",
                    fontSize: "2.5rem",
                    fontWeight: 600,
                    color: "#1a4d2e",
@@ -326,7 +326,7 @@ export default function TestimonialsAndCTA() {
          background: "linear-gradient(180deg, #f5f2ed 0%, #faf8f5 50%, #faf8f5 100%)",
          position: "relative",
          overflow: "hidden",
-          fontFamily: "'Plus Jakarta Sans', sans-serif",
+          fontFamily: "var(--font-manrope)",
        }}
      >
        {/* Decorative gradient orbs */}
@@ -422,7 +422,7 @@ export default function TestimonialsAndCTA() {
            {/* Headline */}
            <h2
              style={{
-                fontFamily: "'Cormorant Garamond', serif",
+                fontFamily: "var(--font-fraunces)",
                fontSize: "clamp(2.75rem, 6vw, 4rem)",
                fontWeight: 600,
                lineHeight: 1.1,
@@ -626,8 +626,6 @@ export default function TestimonialsAndCTA() {
      </section>
      <style jsx>{`
        @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
        @keyframes fadeInUp {
          from {
            opacity: 0;
@@ -47,13 +47,8 @@ export default function SiteHeader() {
        borderColor: "rgba(107, 143, 113, 0.15)",
      }}
    >
      {/* Google Fonts */}
      <style jsx global>{`
        @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");
      `}</style>
      <div className="mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8 py-3 sm:py-4">
-        {/* Logo */}
+        {/* Logo — uses Fraunces (loaded via next/font) for a refined serif wordmark */}
        <Link href="/" className="flex items-center gap-2.5 group">
          <div
            className="w-9 h-9 rounded-full flex items-center justify-center transition-transform group-hover:scale-105"
@@ -66,7 +61,7 @@ export default function SiteHeader() {
          <span
            className="text-lg sm:text-xl font-semibold tracking-tight"
            style={{
-              fontFamily: "'Cormorant Garamond', Georgia, serif",
+              fontFamily: "var(--font-fraunces)",
              color: "#1a1a1a",
            }}
          >
@@ -74,7 +69,7 @@ export default function SiteHeader() {
          </span>
        </Link>
-        {/* Navigation */}
+        {/* Navigation — uses Manrope (loaded via next/font) for consistent small caps */}
        <nav className="flex items-center gap-5 sm:gap-6">
          {/* Brand quick links */}
          {(!isAdminRoute || isStorefrontRoute) && (
@@ -83,7 +78,7 @@ export default function SiteHeader() {
                href="/tuxedo"
                className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70"
                style={{
-                  fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                  fontFamily: "var(--font-manrope)",
                  color: "#6b8f71",
                  letterSpacing: "0.06em",
                }}
@@ -94,7 +89,7 @@ export default function SiteHeader() {
                href="/indian-river-direct"
                className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70"
                style={{
-                  fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                  fontFamily: "var(--font-manrope)",
                  color: "#6b8f71",
                  letterSpacing: "0.06em",
                }}
@@ -110,7 +105,7 @@ export default function SiteHeader() {
              href="/admin"
              className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70"
              style={{
-                fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                fontFamily: "var(--font-manrope)",
                color: "#6b8f71",
                letterSpacing: "0.06em",
              }}
@@ -57,7 +57,7 @@ export default function WaitlistForm({ className = "", onSuccess }: WaitlistForm
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
        </div>
-        <h3 className="text-2xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+        <h3 className="text-2xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "var(--font-fraunces)" }}>
          You&apos;re on the list!
        </h3>
        <p className="text-[#6b8f71]">
@@ -54,6 +54,10 @@ export default function TuxedoVideoHero({
  useEffect(() => {
    if (typeof window === "undefined" || !sectionRef.current) return;
    // Respect reduced motion preference
    const prefersReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
    if (prefersReducedMotion) return;
    const ctx = gsap.context(() => {
      // Scroll progress tracking
      ScrollTrigger.create({
@@ -466,7 +470,6 @@ export default function TuxedoVideoHero({
          animation: bounce 1.5s ease-in-out infinite;
        }
        /* Performance optimizations */
        .parallax-float {
          will-change: transform;
        }
@@ -475,10 +478,20 @@ export default function TuxedoVideoHero({
          will-change: opacity, transform;
        }
        /* Smooth transitions */
        button, a {
          -webkit-tap-highlight-color: transparent;
        }
        @media (prefers-reduced-motion: reduce) {
          .parallax-float, .animate-bounce, .hero-reveal {
            animation: none !important;
            transition: none !important;
          }
          .hero-reveal {
            opacity: 1 !important;
            transform: none !important;
          }
        }
      `}</style>
    </>
  );
@@ -0,0 +1,39 @@
 "use client";
 import { ViewTransition } from "react";
 /**
 * Subtle loading placeholder used in place of skeleton `loading.tsx`
 * files. Instead of a flashy "skeleton of the page you're waiting for",
 * this renders a single thin animated bar that crossfades into the
 * real content via the View Transitions API. The previous page stays
 * visible underneath until the new page is ready, so the user never
 * feels the gap.
 *
 * Drop this in a `loading.tsx` file:
 *
 *   // app/admin/loading.tsx
 *   import { LoadingFade } from "@/components/transitions/LoadingFade";
 *   export default LoadingFade;
 */
 export function LoadingFade() {
  return (
    <ViewTransition name="page-content" update="default">
      <div
        className="fixed top-0 left-0 right-0 z-50 h-0.5 overflow-hidden"
        aria-hidden="true"
      >
        <div
          className="h-full w-1/3 rounded-full"
          style={{
            background:
              "linear-gradient(90deg, transparent 0%, #14532D 50%, transparent 100%)",
            animation: "transition-shimmer 1.4s ease-in-out infinite",
          }}
        />
      </div>
    </ViewTransition>
  );
 }
 export default LoadingFade;
@@ -0,0 +1,40 @@
 "use client";
 import { usePathname } from "next/navigation";
 import { useEffect } from "react";
 /**
 * Announce route changes to assistive tech. Without this, screen-reader
 * users see no signal that navigation completed because the view
 * transition is intentionally seamless for sighted users.
 *
 * The announcer also restores the keyboard focus to the top of the new
 * page after navigation, so tab order picks up where the user expects
 * (not stuck on the link they just clicked).
 */
 export function RouteAnnouncer() {
  const pathname = usePathname();
  useEffect(() => {
    // Reset focus to the page wrapper so keyboard nav continues from
    // the top, not from the link in the sidebar.
    const target = document.getElementById("page-content") ?? document.body;
    if (target && "tabIndex" in target) {
      (target as HTMLElement).tabIndex = -1;
      (target as HTMLElement).focus({ preventScroll: true });
    }
  }, [pathname]);
  return (
    <div
      role="status"
      aria-live="polite"
      aria-atomic="true"
      className="sr-only"
    >
      {/* Text is intentionally empty — the live region is the
          announcement channel; the actual title is set per page via
          the <h1> rendered inside the layout. */}
    </div>
  );
 }
@@ -0,0 +1,49 @@
 "use client";
 import { ViewTransition } from "react";
 import type { ReactNode } from "react";
 /**
 * Smooth view-transition wrapper for any page-section content.
 *
 * Drop this around the main content area of a route (or around an
 * individual <Suspense> chunk) to opt that subtree into a soft
 * crossfade on navigation. The browser's native View Transitions API
 * handles the actual animation — when the browser doesn't support it,
 * the children just swap, no error.
 *
 * `name` groups elements so the browser can morph the same element
 * across pages. Use the same name on the source and destination (e.g.
 * the page header) for shared-element morphing. Use the default
 * `"page-content"` for plain crossfades.
 *
 * The default `update="default"` plus a CSS `::view-transition-old/new`
 * rule (see globals.css) gives us a 220ms crossfade with a tiny
 * downward shift on the incoming page — fast enough to feel like a
 * single app, slow enough to soften the cut between routes.
 *
 * Usage:
 *   <main>
 *     <SmoothViewTransition>{children}</SmoothViewTransition>
 *   </main>
 */
 export function SmoothViewTransition({
  children,
  name = "page-content",
 }: {
  children: ReactNode;
  name?: string;
 }) {
  return (
    <ViewTransition
      name={name}
      // `default` runs a CSS-driven crossfade using the
      // ::view-transition-* pseudo-elements defined in globals.css.
      // Other options: "none" (instant cut), or a custom string your
      // CSS can match.
      update="default"
    >
      {children}
    </ViewTransition>
  );
 }
@@ -41,31 +41,25 @@ export async function getAdminUser(): Promise<AdminUser | null> {
  let sessionEmail: string | null = null;
  try {
    const { data: session } = await getSession();
    console.log("[admin-permissions] Full session:", JSON.stringify(session));
    sessionEmail = session?.user?.email ?? null;
    console.log("[admin-permissions] Session email:", sessionEmail);
  } catch (err) {
    console.error("[admin-permissions] getSession() failed:", err);
    return null;
  }
  if (!sessionEmail) {
    console.log("[admin-permissions] No session email - returning null");
    return null;
  }
  try {
    return await withPlatformAdmin(async (db) => {
      console.log("[admin-permissions] Looking for user with email:", sessionEmail.toLowerCase());
      const userRows = await db
        .select()
        .from(adminUsers)
        .where(eq(adminUsers.email, sessionEmail.toLowerCase()))
        .limit(1);
      console.log("[admin-permissions] User rows found:", userRows.length, userRows);
      const user = userRows[0];
      if (!user) {
        console.log("[admin-permissions] User not found in admin_users");
        return null;
      }
@@ -83,13 +77,10 @@ export async function getAdminUser(): Promise<AdminUser | null> {
        .innerJoin(brands, eq(brands.id, adminUserBrands.brandId))
        .where(eq(adminUserBrands.adminUserId, user.id));
      console.log("[admin-permissions] Membership rows found:", membershipRows.length, membershipRows);
      // Brand-scoped roles (brand_admin, store_employee) require at least one brand link.
      // Platform admins may have zero or more explicit links; they get cross-brand access via role.
      if (membershipRows.length === 0 && role !== "platform_admin") {
        // Signed in but not provisioned for any brand.
        console.log("[admin-permissions] No brand memberships for non-platform user — denying");
        return null;
      }
@@ -51,7 +51,7 @@ function buildPool(): Pool {
    max: parseInt(process.env.PG_POOL_MAX ?? "10", 10),
    idleTimeoutMillis: parseInt(process.env.PG_POOL_IDLE_MS ?? "30000", 10),
    connectionTimeoutMillis: parseInt(
-      process.env.PG_POOL_CONN_TIMEOUT_MS ?? "10000",
+      process.env.PG_POOL_CONN_TIMEOUT_MS ?? "30000",
      10,
    ),
    // Vercel/serverless recycling: keep the pool hot for warm invocations.
@@ -1,59 +1,72 @@
 /* Admin Design System - Design Tokens & Base Styles */
 /* === Color Tokens === */
 /* Editorial operations palette. One primary (deep botanical), one accent (amber),
   four neutrals. No citrus, no teal, no purple. */
 :root {
-  /* Background colors - Elegant warm palette */
+  /* Backgrounds — atelier cream family */
-  --admin-bg: #f5f4ef;              /* parchment - main background */
+  --admin-bg: #FAF7F0;               /* page background (atelier cream) */
-  --admin-bg-subtle: #f7f6f2;       /* parchment 600 */
+  --admin-bg-subtle: #F4F1E8;        /* inset wells */
-  --admin-card-bg: #ffffff;         /* Pure white for cards */
+  --admin-card-bg: #FFFFFF;          /* pure white cards */
-  --admin-card-bg-alt: #fafaf7;     /* Slightly warm white */
+  --admin-card-bg-alt: #FCFAF4;      /* warm white variant */
-  /* Text colors */
+  /* Text */
-  --admin-text-primary: #3c3825;    /* parchment 100 - dark warm */
+  --admin-text-primary: #1A1814;     /* ink */
-  --admin-text-secondary: #686763;  /* dim_grey */
+  --admin-text-secondary: #4A4742;   /* secondary text (was #686763 — too washed) */
-  --admin-text-muted: #a5a4a1;      /* dim_grey 700 */
+  --admin-text-muted: #8A867E;       /* tertiary / labels (was #a5a4a1 — too dim) */
  /* Borders */
-  --admin-border: #d0cbb4;           /* parchment 400 */
+  --admin-border: #E8E4D7;            /* default border (was #d0cbb4 — too dirty) */
-  --admin-border-light: #e5e2d9;    /* soft_linen */
+  --admin-border-light: #F0EDE3;     /* hairline */
  --admin-border-strong: #D4CFBE;    /* emphasized */
-  /* Accent - Fresh Produce Green */
+  /* Primary — deep botanical green */
-  --admin-accent: #16a34a;           /* green-600 - fresh produce brand */
+  --admin-primary: #1F4D2A;
-  --admin-accent-hover: #15803d;     /* green-700 */
+  --admin-primary-hover: #163C20;
-  --admin-accent-light: #dcfce7;     /* green-100 */
+  --admin-primary-soft: #E8F0E5;     /* 8% surface for selected rows / chips */
  --admin-accent-text: #166534;      /* green-800 */
-  /* Status Colors */
+  /* Accent — warm amber (the "one thing to do next") */
-  --admin-success: #16a34a;          /* green-600 - fresh produce success */
+  --admin-accent: #B8761E;
-  --admin-success-accent: #15803d;   /* green-700 */
+  --admin-accent-hover: #965D14;
-  --admin-warning: #aba278;          /* parchment 300 */
+  --admin-accent-soft: #F7EBD5;
  --admin-warning-light: #f5f4ef;    /* parchment */
  --admin-danger: #dc2626;           /* red-600 */
  --admin-danger-hover: #b91c1c;     /* red-700 */
  --admin-danger-light: #fef2f2;     /* red-50 */
  --admin-info: #686763;             /* dim_grey */
  --admin-accent-dot: #22c55e;       /* green-500 */
-  /* Sidebar - Dark elegant */
+  /* Backward-compat aliases — existing var(--admin-accent) / --admin-accent-text /
-  --admin-sidebar-bg: #3c3825;       /* parchment 100 */
+     --admin-accent-light / --admin-accent-hover continue to work. */
-  --admin-sidebar-text: #c3c3c1;      /* dim_grey 800 */
+  --admin-accent-text: #14532D;      /* was #166534 — slightly deeper for AA on cream */
-  --admin-sidebar-hover: #4c4945;     /* dim_grey 200 */
+  --admin-accent-light: #DCFCE7;
-  --admin-sidebar-active: #5c584f;    /* between */
+  --admin-accent-dot: #1F4D2A;       /* was #22c55e — match primary */
  /* Status (semantic) */
  --admin-success: #1F4D2A;
  --admin-success-soft: #E8F0E5;
  --admin-warning: #B8761E;          /* was #aba278 — looked like dirt */
  --admin-warning-soft: #F7EBD5;
  --admin-danger: #A8321C;           /* was #dc2626 — slightly warmer */
  --admin-danger-hover: #87281A;
  --admin-danger-soft: #F7E3DE;
  --admin-info: #4A4742;             /* was #686763 — match new secondary */
  /* Sidebar — dark warm */
  --admin-sidebar-bg: #2A2520;       /* was #3c3825 — deeper, more refined */
  --admin-sidebar-text: #B8B4A8;     /* was #c3c3c1 — warmer */
  --admin-sidebar-hover: #3A352F;
  --admin-sidebar-active: #4A443C;
  --admin-sidebar-accent: #D4A24C;   /* amber for active item */
  /* Spacing */
-  --admin-page-padding: 1rem;         /* px-4 - reduced for density */
+  --admin-page-padding: 1rem;
-  --admin-section-gap: 0.75rem;       /* gap-3 - reduced */
+  --admin-section-gap: 0.75rem;
-  --admin-card-padding: 1rem;         /* p-4 - reduced */
+  --admin-card-padding: 1rem;
  /* Border Radius */
-  --admin-radius-sm: 0.5rem;         /* rounded-lg */
+  --admin-radius-sm: 0.5rem;
-  --admin-radius-md: 0.75rem;       /* rounded-xl */
+  --admin-radius-md: 0.75rem;
-  --admin-radius-lg: 1rem;           /* rounded-2xl */
+  --admin-radius-lg: 1rem;
-  /* Shadows - subtle warm shadows */
+  /* Shadows — warm-tinted */
-  --admin-shadow-sm: 0 1px 2px rgba(60, 56, 37, 0.04);
+  --admin-shadow-sm: 0 1px 2px rgba(26, 24, 20, 0.04);
-  --admin-shadow-md: 0 4px 12px rgba(60, 56, 37, 0.08);
+  --admin-shadow-md: 0 4px 12px rgba(26, 24, 20, 0.08);
-  --admin-shadow-lg: 0 10px 15px -3px rgba(60, 56, 37, 0.08), 0 4px 6px -4px rgba(60, 56, 37, 0.04);
+  --admin-shadow-lg: 0 10px 30px -6px rgba(26, 24, 20, 0.10), 0 4px 8px -4px rgba(26, 24, 20, 0.04);
 }
 /* === Base Admin Layout === */
@@ -381,10 +394,10 @@
  font-feature-settings: "ss01", "ss02";
 }
 .font-sans-ui {
-  font-family: var(--font-geist), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 }
 .font-mono-ui {
-  font-family: var(--font-jetbrains-mono), ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  font-family: var(--font-fragment-mono), ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-feature-settings: "ss01", "tnum";
 }
@@ -406,7 +419,7 @@
 /* Eyebrow — small caps tracking label for editorial headers */
 .ha-eyebrow {
-  font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
  font-size: 0.625rem; /* 10px */
  font-weight: 600;
  letter-spacing: 0.18em;
@@ -416,7 +429,7 @@
 /* Tabular numerals for prices/dates */
 .ha-num {
-  font-family: var(--font-jetbrains-mono), ui-monospace, monospace;
+  font-family: var(--font-fragment-mono), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss01";
 }
@@ -465,7 +478,7 @@
  height: 2.25rem; /* 36px */
  padding: 0 0.75rem;
  font-size: 0.875rem; /* 14px */
-  font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
  color: var(--admin-text-primary);
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--admin-border);
@@ -488,11 +501,84 @@
  opacity: 0.7;
 }
 .ha-field-input-mono {
-  font-family: var(--font-jetbrains-mono), ui-monospace, monospace;
+  font-family: var(--font-fragment-mono), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
 }
 .ha-field-textarea {
  width: 100%;
  min-height: 4.5rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
  color: var(--admin-text-primary);
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--admin-border);
  border-radius: 0.5rem;
  outline: none;
  resize: vertical;
  transition: all 160ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .ha-field-textarea:hover {
  border-color: rgba(22, 163, 74, 0.4);
  background: rgba(22, 163, 74, 0.015);
 }
 .ha-field-textarea:focus,
 .ha-field-textarea:focus-visible {
  border-color: var(--admin-accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
 }
 .ha-field-textarea::placeholder {
  color: var(--admin-text-muted);
  opacity: 0.7;
 }
 /* Subtle scrollbar inside admin scroll containers */
 .ha-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--admin-border) transparent;
 }
 .ha-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
 }
 .ha-scroll::-webkit-scrollbar-track {
  background: transparent;
 }
 .ha-scroll::-webkit-scrollbar-thumb {
  background: var(--admin-border);
  border-radius: 3px;
 }
 .ha-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--admin-text-muted);
 }
 /* Skeleton placeholder — soft pulse for loading rows in admin tables */
 .ha-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.07) 50%,
    rgba(0, 0, 0, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: ha-skeleton-pulse 1.4s ease-in-out infinite;
  border-radius: 0.375rem;
 }
@keyframes ha-skeleton-pulse {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
 }
@media (prefers-reduced-motion: reduce) {
  .ha-skeleton {
    animation: none;
    background: rgba(0, 0, 0, 0.05);
  }
 }
 /* Segmented control for status (replaces giant buttons) */
 .ha-segment {
@@ -580,7 +666,7 @@
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--admin-text-secondary);
@@ -599,7 +685,7 @@
  padding: 0 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
-  font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
  color: #ffffff;
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  border: 1px solid #14532d;
@@ -639,7 +725,7 @@
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
-  font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
  color: var(--admin-text-secondary);
  background: transparent;
  border: 1px solid transparent;
@@ -701,7 +787,7 @@
  height: 2.25rem;
  padding: 0 0.75rem 0 2.25rem;
  font-size: 0.8125rem;
-  font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
  color: var(--admin-text-primary);
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--admin-border);
@@ -764,7 +850,7 @@
  border-color: var(--admin-accent);
 }
 .ha-picker-chip-count {
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.0625rem 0.3rem;
@@ -898,7 +984,7 @@
  border-radius: 0.25rem;
 }
 .ha-product-card-price {
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
@@ -1061,7 +1147,7 @@
  border-bottom: none;
 }
 .ha-row-num {
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
  font-size: 0.625rem;
  color: var(--admin-text-muted);
  font-variant-numeric: tabular-nums;
@@ -1103,7 +1189,7 @@
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
-  font-family: var(--font-geist), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
@@ -1135,7 +1221,7 @@
  font-weight: 500;
 }
 .ha-calendar-title-year {
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--admin-text-muted);
@@ -1179,7 +1265,7 @@
  padding: 0 0.75rem;
  background: var(--admin-text-primary);
  color: var(--admin-bg);
-  font-family: var(--font-geist), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
@@ -1201,7 +1287,7 @@
 }
 .ha-calendar-dow-cell {
  padding: 0.625rem 0.75rem;
-  font-family: var(--font-geist), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
@@ -1272,7 +1358,7 @@
 }
 .ha-calendar-daynum {
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--admin-text-secondary);
@@ -1317,7 +1403,7 @@
  width: 100%;
  min-width: 0;
  color: var(--admin-text-primary);
-  font-family: var(--font-geist), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
 }
 .ha-calendar-event:hover {
  background: rgba(22, 163, 74, 0.14);
@@ -1343,7 +1429,7 @@
  background: rgba(0, 0, 0, 0.06);
 }
 .ha-calendar-event-time {
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--admin-text-secondary);
@@ -1365,7 +1451,7 @@
  font-size: 0.625rem;
  color: var(--admin-text-muted);
  font-weight: 600;
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
  font-variant-numeric: tabular-nums;
  padding: 0.125rem 0.25rem;
  text-align: left;
@@ -1431,7 +1517,7 @@
  display: flex;
  align-items: center;
  gap: 0.5rem;
-  font-family: var(--font-geist), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
@@ -1474,7 +1560,7 @@
  color: var(--admin-text-muted);
 }
 .ha-event-popover-field-value {
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--admin-text-primary);
@@ -1498,7 +1584,7 @@
  padding: 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
-  font-family: var(--font-geist), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
  background: #ffffff;
  color: var(--admin-text-primary);
  border: 1px solid var(--admin-border);
@@ -1569,7 +1655,7 @@
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
-  font-family: var(--font-geist), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
@@ -1688,7 +1774,7 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--admin-accent-text);
@@ -1721,7 +1807,7 @@
  padding-top: 0.125rem;
 }
 .ha-route-stop-time {
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--admin-text-muted);
@@ -1778,7 +1864,7 @@
  padding: 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
-  font-family: var(--font-geist), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
  background: transparent;
  color: var(--admin-text-secondary);
  border: 1px solid var(--admin-border);
@@ -1844,7 +1930,7 @@
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
-  font-family: var(--font-geist), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
  color: var(--admin-text-secondary);
  background: transparent;
  border: none;
@@ -1863,3 +1949,392 @@
    0 1px 2px rgba(60, 56, 37, 0.06),
    0 0 0 1px rgba(60, 56, 37, 0.06);
 }
 /* ============================================================ */
 /* === Admin Dashboard — Compact Card System ================== */
 /* ============================================================ */
 /* Entrance animation — staggered fade-up */
@keyframes dashboard-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
 }
 .animate-fade-up {
  animation: dashboard-fade-up 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
 }
 /* ── Stat Card ─────────────────────────────────────────────── */
 .admin-stat-card {
  background: #ffffff;
  border: 1px solid var(--admin-border);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: box-shadow 150ms, transform 150ms;
 }
 .admin-stat-card:hover {
  box-shadow: var(--admin-shadow-md);
  transform: translateY(-1px);
 }
 .admin-stat-card-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
 }
 .admin-stat-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .admin-stat-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
 }
 .admin-stat-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--admin-text-muted);
  line-height: 1;
 }
 .admin-stat-value {
  font-family: var(--font-fraunces), ui-serif, Georgia, serif;
  font-size: 1.375rem;
  font-weight: 600;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.025em;
  color: var(--admin-text-primary);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
 }
 /* ── Card Section (Quick Actions, Usage, Orders) ────────────── */
 .admin-card-section {
  background: #ffffff;
  border: 1px solid var(--admin-border);
  border-radius: 0.75rem;
  overflow: hidden;
 }
 .admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--admin-border-light);
 }
 .admin-section-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--admin-text-secondary);
 }
 /* ── Quick Actions ──────────────────────────────────────────── */
 .admin-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0.5rem;
 }
 .admin-quick-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 150ms;
  color: var(--admin-text-secondary);
 }
 .admin-quick-action:hover {
  background: var(--admin-bg-subtle);
  color: var(--admin-text-primary);
 }
 .admin-quick-action-icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .admin-quick-action-label {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
 }
 /* ── Usage Grid ─────────────────────────────────────────────── */
 .admin-usage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding: 1rem;
 }
@media (max-width: 640px) {
  .admin-usage-grid {
    grid-template-columns: 1fr;
    gap: 0.625rem;
    padding: 0.75rem;
  }
 }
 .admin-usage-item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
 }
 .admin-usage-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
 }
 .admin-usage-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--admin-text-muted);
 }
 .admin-usage-value {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--admin-text-primary);
 }
 .admin-usage-bar {
  height: 0.375rem;
  background: var(--admin-bg);
  border-radius: 9999px;
  overflow: hidden;
 }
 .admin-usage-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .admin-usage-warning {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--admin-danger);
  text-transform: uppercase;
 }
 /* ── Recent Orders ──────────────────────────────────────────── */
 .admin-orders-list {
  display: flex;
  flex-direction: column;
 }
 .admin-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--admin-border-light);
  text-decoration: none;
  transition: background 150ms;
 }
 .admin-order-row:last-child {
  border-bottom: none;
 }
 .admin-order-row:hover {
  background: var(--admin-bg-subtle);
 }
 .admin-order-info {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
 }
 .admin-order-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: var(--admin-bg);
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .admin-order-name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--admin-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
 }
 .admin-order-time {
  display: block;
  font-size: 0.6875rem;
  color: var(--admin-text-muted);
  margin-top: 0.125rem;
 }
 .admin-order-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
 }
 .admin-order-amount {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--admin-text-primary);
 }
 .admin-order-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: capitalize;
 }
 .admin-orders-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
 }
 /* ── Section Navigation Cards ───────────────────────────────── */
 .admin-section-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1rem;
  background: #ffffff;
  border: 1px solid var(--admin-border);
  border-radius: 0.75rem;
  text-decoration: none;
  transition: box-shadow 180ms, transform 180ms, border-color 180ms;
  overflow: hidden;
 }
 .admin-section-card:hover {
  box-shadow: var(--admin-shadow-md);
  transform: translateY(-2px);
 }
 .admin-section-card--locked {
  opacity: 0.65;
  border-style: dashed;
 }
 .admin-section-card--locked:hover {
  opacity: 0.85;
  transform: translateY(-1px);
 }
 .admin-section-card--prominent {
  border-color: rgba(22, 163, 74, 0.25);
  background: linear-gradient(180deg, #fafffe 0%, #ffffff 60%);
 }
 .admin-section-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.125rem;
 }
 .admin-section-card-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--admin-bg);
  color: var(--admin-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 180ms;
 }
 .admin-section-card:hover .admin-section-card-icon {
  transform: scale(1.05);
 }
 .admin-section-card-icon--prominent {
  background: var(--admin-accent-light);
  color: var(--admin-accent-text);
 }
 .admin-section-card-icon--locked {
  background: var(--admin-bg);
  color: var(--admin-text-muted);
 }
 .admin-section-card-body {
  flex: 1;
 }
 .admin-section-card-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--admin-text-primary);
  line-height: 1.2;
 }
 .admin-section-card-desc {
  font-size: 0.75rem;
  color: var(--admin-text-secondary);
  line-height: 1.4;
  margin-top: 0.25rem;
 }
 .admin-section-card-hint {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--admin-warning);
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin-top: 0.25rem;
 }
 .admin-section-card-arrow {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  color: var(--admin-accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 180ms, transform 180ms;
 }
 .admin-section-card:hover .admin-section-card-arrow {
  opacity: 1;
  transform: translateX(0);
 }
 /* ── Mobile optimizations ───────────────────────────────────── */
@media (max-width: 480px) {
  .admin-stat-card-inner {
    padding: 0.75rem;
  }
  .admin-stat-value {
    font-size: 1.125rem;
  }
  .admin-quick-actions {
    gap: 0;
  }
  .admin-order-name {
    max-width: 8rem;
  }
  .admin-section-card {
    padding: 0.875rem;
  }
  .admin-section-card-title {
    font-size: 0.8125rem;
  }
  .admin-section-card-desc {
    font-size: 0.6875rem;
  }
 }
Author	SHA1	Message	Date
Tyler	18fb44ed38	style(admin): unify color tokens (deep botanical + amber) - --admin-bg: warm cream (#FAF7F0) - --admin-text-primary: ink black (#1A1814) - --admin-text-muted: warm grey (#8A867E) — was too dim - --admin-border: soft beige (#E8E4D7) — was too dirty - --admin-primary: deep botanical (#1F4D2A) - --admin-accent: warm amber (#B8761E) — the 'one thing to do' - --admin-warning: amber (was #aba278 — looked like dirt) - --admin-danger: warmer rust (#A8321C) - sidebar: deeper, more refined (#2A2520) - drop purple/blue/citrus stat icons in DashboardClient; use semantic tokens - use --admin-warning instead of hardcoded #f59e0b in usage bar	2026-06-17 00:08:46 -06:00
Tyler	bd2dadd9ee	chore(design): admin redesign spec + task checklist - design spec: aesthetic, color tokens, IA, phased plan - checklist: 7 phases, every task has notes column, revert cheatsheet - working branch: design/ui-revamp-2026-06	2026-06-17 00:07:04 -06:00
Tyler	c8fa2e8b52	polish: consolidate typography to next/font variables, add atelier utility classes Deploy to route.crispygoat.com / deploy (push) Successful in 4m33s Details - Remove Google Fonts @import from 4 components (SiteHeader, LandingPageWrapper, TestimonialsAndCTA, FeaturesAndStats) — eliminate render-blocking external request and font flash - Replace all unloaded Cormorant Garamond / Playfair Display / DM Sans / Plus Jakarta Sans references with the existing next/font variables (Fraunces, Manrope, Fragment_Mono) — visual coherence with the design system - Update 9 pages (blog, brands, changelog, maintenance, protected-example, roadmap, security, waitlist, WaitlistForm) to use the loaded Fraunces - Fix dead --font-geist / --font-jetbrains-mono references in admin-design-system.css (now point to --font-manrope / --font-fragment-mono which are actually loaded) - Add atelier-pill, atelier-numerals, atelier-fineprint, atelier-canvas-soft utility classes; .atelier-input:focus-visible refined ring - Add .ha-field-textarea, .ha-scroll, .ha-skeleton to admin design system - Extend prefers-reduced-motion guard to atelier-enter/stagger/shimmer - Apply atelier-fineprint to login/not-found/error pages for consistency - No structural changes; build passes, 0 type errors	2026-06-16 23:50:16 -06:00
Tyler	4ebbc6dacf	feat: smooth view transitions, no skeleton flash Deploy to route.crispygoat.com / deploy (push) Successful in 4m21s Details User pain point: skeleton loading.tsx files made the app feel like a sequence of page reloads, exposing backend latency. Replaced with a single 1px shimmer bar + crossfade via React's <ViewTransition>. Changes: - Enable experimental.viewTransition in next.config.ts - Add SmoothViewTransition wrapper (ViewTransition name=page-content) - Add LoadingFade component: thin animated bar instead of skeleton - Add RouteAnnouncer for a11y (screen readers + focus reset) - Add ::view-transition-old/new CSS for the crossfade (220ms, no jarring slide, respects prefers-reduced-motion) - Wrap admin/tuxedo/IRD layout children in SmoothViewTransition (sidebar/header/footer stay mounted; only the body fades) - Replace 19 skeleton loading.tsx files with the fade component Result: navigation now feels like a single app, not a series of preload-and-render events. The user never sees a 'skeleton of the page they're about to load.'	2026-06-16 23:37:00 -06:00
Tyler	9458fd0506	docs: add nested layout skeleton map Deploy to route.crispygoat.com / deploy (push) Successful in 4m20s Details Visualizes the current layout nesting in the App Router, identifies gaps where shared sub-layouts could be added (cart/checkout, wholesale, water, admin/communications, admin/settings), and shows how to add a new nested layout or parallel route for modal-style navigation.	2026-06-16 23:29:16 -06:00
Tyler	83ad6536a3	feat: production-readiness pass Deploy to route.crispygoat.com / deploy (push) Successful in 5m46s Details - Migrate login page to atelier design system (editorial modal style) - Polish root error.tsx, not-found.tsx, loading.tsx with atelier design - Add JSON-LD structured data: SoftwareApplication + LocalBusiness - Fix next.config.ts outputFileTracingRoot absolute path warning - Add force-dynamic to protected-example (uses cookies) - Add proper type for stops page (replace : any) - Fix unescaped quotes in StopTableClient - Fix no-explicit-any in db-schema route - Clean up console.logs in admin-permissions - Fix inline any in admin/stops page - Update OG image references to existing og-default.svg	2026-06-16 23:11:35 -06:00
Tyler	244551ce70	feat(stops): align with products page design Deploy to route.crispygoat.com / deploy (push) Successful in 4m4s Details - Use StopTableClient in server page component - Add view mode toggle (table/card) matching products page - Match stats cards styling to products page - Add consistent filter bar layout with AdminViewModeTabs - Add card view for stops with inline delete confirm - Improve row actions with Edit button + dropdown menu - Add 'Today' badge and past stop dimming in card view	2026-06-10 14:59:42 -06:00
Tyler	b1d4174721	feat(stops): add edit modal, sorting, pagination, and stats bar Deploy to route.crispygoat.com / deploy (push) Successful in 4m3s Details - Add EditStopModal for unified add/edit stop workflow - Enhance StopTableClient with sortable columns (date, city, location, status) - Add stats bar showing total, active, upcoming, and draft counts - Improve pagination with 'Showing X-Y of Z' indicator - Add 'Today' badge for current-day stops - Dim past stops visually - Add Edit action to row menu with icons - Reduce page size to 25 for better UX	2026-06-10 14:45:41 -06:00
Tyler	001840ab05	fix: add brand picker to sidebar, use getActiveBrandId in stops page Deploy to route.crispygoat.com / deploy (push) Successful in 4m11s Details - AdminSidebar now renders BrandSelector when brands are available - Stops page uses getActiveBrandId() instead of adminUser.brand_id directly, so platform admins see all stops and brand selection via the sidebar picker works correctly - BrandSelector already existed and was wired up in the layout, just never rendered in the sidebar	2026-06-10 14:32:50 -06:00
Tyler	f0a703794a	diagnostic: simplify stops page to bare query + debug info Deploy to route.crispygoat.com / deploy (push) Successful in 4m3s Details	2026-06-10 14:22:44 -06:00
Tyler	7d1e6f784b	fix: deploy writes .env (not .env.production) so PM2 loads secrets Deploy to route.crispygoat.com / deploy (push) Successful in 4m0s Details	2026-06-10 14:06:02 -06:00
Tyler	b5f7252ac0	fix: use correct column names for stops (cutoff_date not cutoff_time) and replace mock Supabase with real pool queries in stops detail/new pages Deploy to route.crispygoat.com / deploy (push) Successful in 4m5s Details	2026-06-10 13:48:30 -06:00
Tyler	24cf9a7261	fix: remove non-existent deleted_at column from stops query Deploy to route.crispygoat.com / deploy (push) Successful in 3m59s Details	2026-06-10 13:37:39 -06:00
Tyler	8428f3a490	Add pagination to admin stops page (50/page) Deploy to route.crispygoat.com / deploy (push) Successful in 4m37s Details Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-10 13:29:44 -06:00
Tyler	77fb8fe7ee	Fix stops query: use status column not deleted_at Deploy to route.crispygoat.com / deploy (push) Successful in 3m33s Details stops table has no deleted_at column — soft delete is done via status='active' Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-10 13:22:50 -06:00
Tyler	eabc709076	Fix admin stops page: replace mock supabase with direct pool query Deploy to route.crispygoat.com / deploy (push) Successful in 4m2s Details The page was importing from @/lib/supabase which is a mock client that returns empty results. Replaced with pool.query() against the real Postgres stops table. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-10 13:17:39 -06:00
Tyler	4bd2ed0db2	Remove Tuxedo Corn tour seed step from deploy workflow The seed step on every deploy was inserting duplicate stops each run. The cleanup script (scripts/cleanup-duplicate-stops.ts) can be used to dedupe existing rows when needed — run manually via: DATABASE_URL="..." npx tsx scripts/cleanup-duplicate-stops.ts Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-10 13:17:34 -06:00
Tyler	c1396096ad	Use tsx import script instead of psql for tour seed in deploy Deploy to route.crispygoat.com / deploy (push) Successful in 3m47s Details psql with Neon pooler times out on large batch RPCs. The tsx script replaces -pooler. with direct compute endpoint and uses pg Pool with proper batching + progress output.	2026-06-10 12:53:39 -06:00
Tyler	a53516bfe6	Fix TypeScript return type in import-tuxedo-stops.ts Deploy to route.crispygoat.com / deploy (push) Has been cancelled Details Add missing 'locations' property to loadStops() return type.	2026-06-10 12:49:16 -06:00
Tyler	fb23c21ad9	Add Tuxedo Corn 2026 tour seed to deploy workflow Deploy to route.crispygoat.com / deploy (push) Has been cancelled Details Run db/seeds/2026-tuxedo-tour-stops.sql via psql after migrations in the deploy step. Uses admin_create_locations_batch + admin_create_stops_batch RPCs (migration 0003) to insert 40 locations + 269 stops for the Tuxedo Corn 2026 tour. Wrapped in BEGIN/COMMIT with DELETE-first semantics — idempotent.	2026-06-10 12:47:51 -06:00
Tyler	0cf2ee7948	Admin dashboard: fix stats waterfall, redesign layout, add animations Deploy to route.crispygoat.com / deploy (push) Failing after 3m13s Details - Fetch dashboard stats server-side in admin/page.tsx to eliminate client-side useEffect waterfall and the '—' placeholder flash - Pass pre-fetched stats as props to DashboardClient - Lazy-load UpgradePlanModal via next/dynamic (only loads when needed) - Redesign stats cards with compact layout, smaller icons, Fraunces serif values - Improve Quick Actions + Usage row: side-by-side on desktop, stacked mobile - Clean up Recent Orders as a proper list with icon/name/time/amount/badge - Add staggered fade-up entrance animations (0/60/120/180/240ms delays) - Consolidate loading.tsx skeleton to match actual dashboard structure - Mobile-responsive: 2-col stats on mobile, stacked usage, collapsible header	2026-06-10 12:45:08 -06:00
Tyler	6c1c616c1c	frontend polish: add reduced-motion support, dynamic copyright, missing animation keyframes Deploy to route.crispygoat.com / deploy (push) Successful in 4m1s Details - LandingPageWrapper: Use dynamic year for copyright - HeroSection: Add float-slow/float-slow-delayed keyframes, add prefers-reduced-motion media query - TuxedoVideoHero: Add reduced-motion JS guard and CSS media query for accessibility	2026-06-10 11:20:25 -06:00
Tyler	4909a78aca	stops import: swap OpenAI for MiniMax as default AI provider Deploy to route.crispygoat.com / deploy (push) Successful in 5m27s Details	2026-06-10 10:58:37 -06:00