# ShopProQuote PDF Styling Guidelines

PDFs are generated client-side by `quote-tab-manager.js` → `generateQuotePDF()` using jsPDF (dynamically imported from CDN).

## User's aesthetic preferences

- **Compact and tight** — no wasted whitespace, no large gaps between labels and values
- **Professional** — clean invoice-style with subtle gray background panels, thin separators, no colons on labels
- **Font sizes**: 8-10px range. 8px for labels/section headers, 9px for body text, 10px for bold totals
- **Spacing**: 6-8px between lines, tight but readable
- **Boxes**: subtle `#f8f8f8` fill with `#dcdcdc` border at 0.5px, 2-3px corner radius
- **Separators**: 0.5px `#c8c8c8` (not thick black lines)
- **Labels**: no colons, gray (#646464) for field labels, black for values

## Key rendering sections in `generateQuotePDF()`

### Header box (~line 3765)
- Two-column: SERVICE PROVIDER (left) + CUSTOMER INFORMATION (right)
- Fill is drawn FIRST (`roundedRect` with `'F'` only) before text, so text renders on top
- Border drawn AFTER content (`roundedRect` with `'D'` only) at computed height
- `headerBoxPadding` controls top+bottom padding consistently

### Customer info lines (~line 3841)
- `addInfoLine()` helper — label at `rightColX`, value at `rightColX + 55` (compact, not full-width)
- Labels: Customer, Vehicle, RO #, Mileage, VIN, Date

### Service items (~line 3917)
- Service name: 10px bold at line 3994
- Price: right-aligned, same line
- Customer decision badges (approved/declined) above service name
- Priority, recommendation, explanation, parts notes follow

### Totals box (~line 4172)
- Summary box at 45% width from right margin
- Fill `#f8f8f8`, border `#dcdcdc` at 0.5px
- Line items: 9px, gray labels, black values, 8px row spacing
- TOTAL: 10px bold
- Shop charge note positioned at `boxBottomY + 10` (below box boundary, never overlapping)

## Pitfalls

- **Box covering text**: draw fill-only (`'F'`) BEFORE text; draw border-only (`'D'`) after content height is known
- **Overlapping sections**: use `boxBottomY` from the box calculation, not `yPos + N` magic numbers
- **Invisible borders**: `#fafafa` fill with `#e6e6e6` border at 0.5px is imperceptible — use `#f8f8f8` fill with `#dcdcdc` border for visible contrast
- **Excessive whitespace between label/value**: don't right-align values to `pageWidth - margin` — use a fixed offset from the label instead (`rightColX + 55`)
- **Font size consistency**: keep body text at 9px, labels at 8px, totals at 10px throughout