# S02: Dark Theme + Cyan Accents + Mobile Responsive Fix

**Goal:** App uses a dark theme with cyan accents, all hardcoded colors replaced with CSS custom properties, and no horizontal scroll on mobile viewports.
**Demo:** After this: App uses dark theme with cyan accents, no horizontal scroll on mobile

## Tasks
- [x] **T01: Replaced all 193 hex colors and 24 rgba values in App.css with 77 CSS custom properties, establishing a dark theme with cyan accents** — Replace every hardcoded color in frontend/src/App.css with CSS custom properties. The file has ~1770 lines with ~193 hex color references and ~24 rgba values, zero existing CSS variables.

## Steps

1. Add a `:root` block at the top of App.css (after the reset, before `.app-header`) defining all semantic color tokens. Use the mapping from the research doc:
   - `--color-bg-page: #0f0f14` (near-black page background)
   - `--color-bg-surface: #1a1a24` (card/surface background, replaces #fff in most card contexts)
   - `--color-bg-surface-hover: #22222e` (hover states, replaces #f9fafb, #f3f4f6)
   - `--color-bg-input: #1a1a24` (form input backgrounds, replaces #fff on inputs)
   - `--color-text-primary: #e2e2ea` (primary text, replaces #1a1a2e, #374151)
   - `--color-text-secondary: #8b8b9a` (secondary text, replaces #6b7280)
   - `--color-text-muted: #6b6b7a` (muted text, replaces #9ca3af)
   - `--color-border: #2a2a38` (borders, replaces #e2e2e8, #d1d5db)
   - `--color-accent: #22d3ee` (cyan-400, replaces all #6366f1 indigo)
   - `--color-accent-hover: #67e8f9` (cyan-300, replaces #a5b4fc)
   - `--color-accent-subtle: rgba(34, 211, 238, 0.1)` (replaces rgba(99,102,241,0.1))
   - `--color-accent-focus: rgba(34, 211, 238, 0.15)` (replaces rgba(99,102,241,0.15))
   - `--color-bg-header: #0a0a12` (header background, replaces #1a1a2e on header)
   - `--color-bg-transcript: #12121a` (transcript/code block background, replaces #f9fafb on .detail-transcript)
   - `--color-overlay: rgba(0, 0, 0, 0.6)` (dialog overlay, replaces rgba(0,0,0,0.4))
   - `--color-shadow: rgba(0, 0, 0, 0.2)` (box shadows, replaces rgba(0,0,0,0.04) and similar)
   - `--color-shadow-heavy: rgba(0, 0, 0, 0.4)` (heavier shadow for dialogs)
   - Status badge colors (dark-theme variants preserving semantic meaning):
     - `--color-badge-pending-bg: #422006` / `--color-badge-pending-text: #fcd34d`
     - `--color-badge-approved-bg: #052e16` / `--color-badge-approved-text: #6ee7b7`
     - `--color-badge-edited-bg: #1e1b4b` / `--color-badge-edited-text: #93c5fd`
     - `--color-badge-rejected-bg: #450a0a` / `--color-badge-rejected-text: #fca5a5`
   - Semantic button colors:
     - `--color-btn-approve: #059669` / `--color-btn-approve-hover: #047857`
     - `--color-btn-reject: #dc2626` / `--color-btn-reject-hover: #b91c1c`
   - Mode toggle colors (keep green/amber as-is — they work on dark)
   - Header text: `--color-text-on-header: rgba(255, 255, 255, 0.8)` / `--color-text-on-header-hover: #fff`
   - Active tab/filter: `--color-text-active: #e2e2ea` / `--color-border-active: #22d3ee`
   - Error: `--color-error: #f87171` (replaces #dc2626 for text — needs more contrast on dark)
   - Error bg: `--color-error-bg: #450a0a` / `--color-error-border: #7f1d1d` (replaces #fef2f2/#fecaca)

2. Work through App.css section by section, replacing every hardcoded color with the appropriate `var(--*)` reference:
   - Base: body color and background
   - App header: background, text colors
   - Stats cards: background, border, shadow, label colors, count colors
   - Filter tabs: border, text colors, active state
   - Cards: background, border, shadow, hover border/shadow
   - Queue cards: same as cards plus hover accent
   - Status badges: all four variants
   - Buttons: background, border, text, hover states, approve/reject variants
   - Mode toggle: dot colors, label color, switch colors
   - Pagination: text color
   - Detail page: link colors, field label/value colors, transcript background
   - Form fields: input background, border, text, focus ring
   - Dialogs: overlay, dialog background, shadow, hint text
   - Loading/empty states: text colors
   - Error text
   - PUBLIC PAGES section: all color references for home hero, search, nav cards, technique pages, creators browse, topics browse, creator detail, etc.

3. Handle the `#2d2d4e` color (used 3 times, appears to be a dark variant of header) — map to `--color-bg-header` or a new `--color-bg-header-alt` if distinct.

4. Handle `#555` (used once for `.card p`) — map to `--color-text-secondary`.

5. Handle `.app-header nav a.active` or similar active states — ensure cyan accent is used for active navigation links.

6. Verify the build: `cd frontend && npm run build`. Must succeed with zero errors.

## Must-Haves

- [ ] Every hex color (#xxx) in App.css is replaced with a var(--*) reference
- [ ] Every rgba() color in App.css is replaced with a var(--*) reference
- [ ] :root block defines a complete semantic palette (30+ custom properties)
- [ ] Accent color is cyan (#22d3ee) throughout, replacing all indigo (#6366f1)
- [ ] Status badges use dark-theme variants that remain visually distinct
- [ ] Form input focus rings use cyan accent
- [ ] `npm run build` succeeds in frontend/

## Verification

- `cd frontend && npm run build` exits 0
- `grep -cE '#[0-9a-fA-F]{3,8}' frontend/src/App.css` returns 0 (no remaining hardcoded hex colors)
- `grep -c 'var(--' frontend/src/App.css` returns 190+ (all colors use custom properties)
- `grep -c 'rgba(' frontend/src/App.css` returns 0 outside the :root block (all rgba in var references)

## Inputs

- `frontend/src/App.css` — the single CSS file containing all styling with hardcoded colors

## Expected Output

- `frontend/src/App.css` — fully refactored with :root custom properties and all hardcoded colors replaced
  - Estimate: 1h30m
  - Files: frontend/src/App.css
  - Verify: cd frontend && npm run build && echo 'Build OK' && echo "Remaining hex colors: $(grep -cE '#[0-9a-fA-F]{3,8}' src/App.css)" && echo "CSS var references: $(grep -c 'var(--' src/App.css)"
- [x] **T02: Added overflow-x:hidden to html/body, fixed mobile overflow on mode-toggle and creator-row stats, updated index.html title to "Chrysopedia" with dark theme-color meta tag** — Fix horizontal scroll on mobile viewports and update the HTML document metadata for the dark theme.

## Steps

1. In `frontend/src/App.css`, add to the existing `body` rule (or add a new `html, body` rule):
   - `overflow-x: hidden` — prevents horizontal scroll caused by any element exceeding viewport width
   - Ensure `width: 100%` is NOT set (can cause scrollbar-induced overflow)

2. Fix `.mode-toggle__label` (has `white-space: nowrap` at line ~324) — on very narrow screens the mode toggle text can push the header wider than the viewport. Add `overflow: hidden; text-overflow: ellipsis; max-width: 6rem;` or remove nowrap if the label is short enough.

3. Fix `.creator-row__stats` (has `white-space: nowrap` at line ~1459) — stats text can overflow on mobile. The existing `@media (max-width: 640px)` block already handles `.creator-row` layout but doesn't address the nowrap. Add `white-space: normal` or `flex-wrap: wrap` in the mobile media query for this class.

4. Check `.search-container` and `.search-input--hero` — ensure the search input doesn't exceed viewport width on mobile. The existing mobile query sets `width: 100%` on `.search-input--hero` which should work, but verify `.search-form` doesn't have `min-width` or padding that causes overflow.

5. Ensure `.app-header__right` wraps correctly at 640px — the existing query gives it `width: 100%` and `justify-content: space-between`, but if nav items + mode toggle exceed width, they'll overflow. Add `flex-wrap: wrap` as a safety net.

6. In `frontend/index.html`:
   - Change `<title>Chrysopedia Admin</title>` to `<title>Chrysopedia</title>`
   - Add `<meta name="theme-color" content="#0a0a12">` in the `<head>` — this colors the browser chrome on mobile to match the header background

7. Rebuild and verify: `cd frontend && npm run build`

8. Deploy to ub01 and visually verify at both desktop and mobile viewport widths using the browser tool:
   - Navigate to http://ub01:8096
   - Check at desktop viewport (1280×800): dark backgrounds, cyan accents visible, cards distinct from page
   - Check at mobile viewport (390×844): no horizontal scrollbar, header wraps cleanly, content fits viewport
   - Check key pages: Home, Creators, Topics, a Technique page if available

## Must-Haves

- [ ] `html, body` has `overflow-x: hidden`
- [ ] No element causes horizontal scroll at 390px viewport width
- [ ] `.mode-toggle__label` doesn't push header past viewport on mobile
- [ ] `.creator-row__stats` wraps or truncates on mobile instead of overflowing
- [ ] index.html title is "Chrysopedia" (not "Chrysopedia Admin")
- [ ] index.html has `<meta name="theme-color" content="#0a0a12">`
- [ ] `npm run build` succeeds

## Verification

- `cd frontend && npm run build` exits 0
- `grep -q 'overflow-x' frontend/src/App.css` confirms overflow-x rule exists
- `grep -q '<title>Chrysopedia</title>' frontend/index.html` confirms title update
- `grep -q 'theme-color' frontend/index.html` confirms meta tag added
- Visual verification via browser at desktop (1280×800) and mobile (390×844) viewports confirms dark theme renders correctly and no horizontal scroll exists

## Inputs

- `frontend/src/App.css` — CSS file with theme applied from T01, needing mobile overflow fixes
- `frontend/index.html` — HTML document needing title and meta tag updates

## Expected Output

- `frontend/src/App.css` — with mobile responsive overflow fixes added
- `frontend/index.html` — updated title and theme-color meta tag
  - Estimate: 45m
  - Files: frontend/src/App.css, frontend/index.html
  - Verify: cd frontend && npm run build && grep -q 'overflow-x' src/App.css && grep -q '<title>Chrysopedia</title>' index.html && grep -q 'theme-color' index.html && echo 'All checks pass'
