# Astara / ACE Cockpit — Design System

Single source of truth for the ACE Cockpit dashboard UI (ported from the accepted `ace-cockpit.html` demo via `../product-db-react`). CSS tokens live in `resources/css/app.css`; this file documents their meaning and usage.

## Color tokens

All colors must be used via CSS tokens (`bg-astara-purple`, `text-muted-foreground`, shadcn `--primary`, etc.). **Never hardcode hex values in JSX.**

| Token | Value | Usage |
|---|---|---|
| `astara-purple` | `#1E1932` | Sidebar background, headings/body text |
| `astara-orange` | `#FF5A00` | Primary / CTA, hover `#E65100` |
| `astara-yellow` | `#FAB42D` | Accents: active brand-tag, "REQUIRED" chips |
| `astara-bg` | `#F4F7F9` | App background |

shadcn variable mapping (`:root`): `--primary` = orange, `--foreground`/`--sidebar` = purple, `--background` = `#F4F7F9`, `--ring` = orange, `--radius` = `0.75rem` (8–12px effective). `--accent` = `#FFF3EC` (orange tint used for selected rows/hovers), `--border` = `#ECEAF1`, `--muted-foreground` = `#64748B`. Dark mode values are purple-based tints (see `.dark` block in `app.css`).

## Typography

- Font: **Montserrat** (weights 400–800), loaded via `bunny()` font plugin in `vite.config.ts`.
- Base UI text is small: **10–13px**.
- Section headers: **9–11px, uppercase, `tracking-widest`** (e.g. `text-[10px] font-bold uppercase tracking-widest text-gray-400`).
- Card titles: 11px uppercase; page titles 2xl bold; dashboard greeting xl bold.

## Component patterns (recreate in shadcn components)

- **Sidebar** (`components/layout/cockpit-sidebar.tsx`): purple, 260px expanded / 80px collapsed; active nav item = white pill, dark purple text, orange icon; section labels 9px uppercase, 40% opacity.
- **"Chrome" tabs** (`components/shared/chrome-tabs.tsx`): rounded `12px 12px 0 0`, inactive = slate-200, active = white with raised shadow; count badge turns orange when active.
- **Brand-tag chips** (`components/shared/brand-tags.tsx`): 10px uppercase; active = yellow `#FAB42D` bg + purple text.
- **Brand pills** (`components/shared/brand-pills.tsx`): multi-select pills; selected = red-50 bg + red border.
- **Cards** (`components/shared/section-card.tsx`): white bg, `radius 12px`, border `rgba(30,25,50,0.06)`, subtle shadow `0_2px_8px_rgba(30,25,50,0.04)`, header `#fafafa`.
- **Status badges** (`components/shared/badges.tsx`): published `#E8F5E9`/`#2E7D32`; category chip `#F1F5F9`/`#475569`.
- **Page header** (`components/shared/page-header.tsx`): white bar, 2xl title + uppercase subtitle; CTA buttons = orange pill `bg-astara-orange` with orange shadow on hover.
- **Lang editor cards** (compose / add-document): DE required (yellow border + "REQUIRED" chip), FR/IT optional (gray, 80% opacity body).
- **Custom scrollbars**: use `custom-scroll` utility (4px, thin) on scrollable panels.

## AG Grid

- Single theme: `astaraGridTheme` in `resources/js/lib/ag-grid-theme.ts` — Quartz with Astara params (accent `#FF5A00`, header bg `#FAFAFA`, header text `#64748B`, font Montserrat 12px, row hover `#F8FAFC`, selected row `#FFF3EC`).
- Register `AllCommunityModule` once in that file; do not add other themes.
- Rows: `rowHeight 36–46`, `headerHeight 36–52`; inline cell renderers per column (see inbox/documents views).

## Brands & content

- Brands (fixed list, `BRANDS` in `lib/data.ts`): Abarth, Alfa Romeo, Fiat, Fiat Professional, Hyundai, Jeep, KGM, MAXUS, Nissan (+ "System"). Brand filtering is the global convention on every view.
- Content languages: DE/FR/IT — **DE required**, FR/IT optional (UI labels and chips reflect this).
- UI copy is German (mock data): e.g. "Bitte ... einreichen", "Geschätzte Händler".