# CLAUDE.md — Powder Coating Logix redesign

You are implementing a visual redesign in this ASP.NET Core MVC codebase (`PowderCoating.Web`). A full design brief lives at `design_handoff_pcl_redesign/README.md` — **read it first** before editing anything.

## Hard rules

1. **Do not introduce React, Vue, or SPA frameworks.** The app is Razor + Bootstrap 5 + jQuery. Stay in that stack.
2. **Do not copy the JSX files as-is.** They are design references. Translate layout, tokens, and behavior to `.cshtml` + CSS.
3. **Never edit files under `wwwroot/lib/`.** Those are vendored libraries.
4. **Preserve all existing data bindings, asp-controller/action attributes, permission checks, and TagHelpers.** The redesign is presentational.

## Working order

1. Land design tokens in `wwwroot/css/site.css` (see README § Design Tokens).
2. Build four Razor partials in `Views/Shared/`: `_StatusChip`, `_Metric`, `_SectionHeader`, `_PowderSwatch`.
3. Rewrite `Views/Dashboard/Index.cshtml` hero + KPI sections.
4. Rewrite `Views/Jobs/Index.cshtml` stats + toolbar + table.
5. Rewrite `Views/Jobs/Board.cshtml` columns and cards.
6. Simplify `Views/Shared/_Layout.cshtml` sidebar (drop 11 of 12 gradient themes).
7. Sweep remaining list views (Customers, Invoices, Equipment, Maintenance, Vendors, PurchaseOrders) to use the new partials.

## Things to delete outright

- `.badge-glow-critical` keyframes and any `class="badge-glow-critical"` usage.
- The `[data-sidebar="forest|crimson|midnight|purple|teal|amber|indigo|emerald|rose|navy|slate"]` CSS blocks. Keep only `ocean` (rename to `ink`) and add `paper`.
- Every instance of `.stats-cards-desktop` + `.mobile-stats-compact` pair on list pages — replace with one `_Metric` row.
- Icon-bubble wrappers: `<div class="rounded-circle p-3" style="background:#dbeafe">…</div>` patterns around KPI icons.
- The `Welcome Back!` gradient banner on the dashboard.

## Things to add

- Google Fonts import for `Inter`, `IBM Plex Mono`, `Fraunces` at the top of `_Layout.cshtml` head.
- A `.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-feature-settings: "zero"; }` utility class.
- Mono numerics on every `.table td` that currently holds a count, currency, or ID (job numbers, invoice numbers, customer balance, etc.). Easiest via a CSS rule: `.table td.num, .table th.num { font-family: var(--font-mono); }`.

## Verification checklist

Before marking each screen done, confirm:
- [ ] No element uses `background: linear-gradient(` except the optional ink sidebar.
- [ ] No `rounded-circle` decorative icon bubbles remain on that screen.
- [ ] All status badges use the new `_StatusChip` partial.
- [ ] All numbers render in mono.
- [ ] Keyboard focus ring is visible on every interactive element (2px ember, 2px offset).
- [ ] Page renders correctly at 1280px, 1024px, and 375px.
- [ ] Dark mode (`[data-surface="ink"]`) still reads.
- [ ] Toastr notifications are still styled consistently.

## Don't touch

- `Controllers/`, `Services/`, `Hubs/`, `BackgroundServices/` — logic is unchanged.
- Database models, DTOs, or migrations.
- `Program.cs`, `Startup.cs`, DI registration.

## Dark mode

There is a dedicated brief: `design_handoff_pcl_redesign/DARK_MODE.md`. Read it before touching the token block, `_StatusChip`, `_PowderSwatch`, Toastr styles, or the top-bar theme toggle. It replaces the `[data-surface="ink"]` block in the README with a full-fidelity version, binds `data-bs-theme` so Bootstrap components flip correctly, and adds a persisted theme toggle.

## If in doubt

Open `design_handoff_pcl_redesign/Design Review.html` in a browser. The "after" screens are the source of truth for layout and spacing. The README covers tokens and partials. Everything else is implementation choice — pick the simplest Razor-native expression.
