# Settings Pages: Improve & Visual Overhaul

## Summary
Improve and visually overhaul the 5 existing Settings tabs, add a 6th Logging tab, expose backend fields missing from the frontend, and align styling with the app's design system (typography variables, blue gradient headers, card patterns, dark mode).

## Files to Modify

| File | Action |
|------|--------|
| `frontend/src/components/Settings/settings.ts` | Add 5 missing fields to interface + defaults |
| `frontend/src/components/Settings/Settings.svelte` | Overhaul template + styles (details below) |
| `frontend/src/app.css` | Add shared color CSS variables to `:root` |
| `frontend/src/App.svelte` | Add Logging sidebar tab, add `textarea` dark mode rule |

## Step-by-Step

### 1. `settings.ts` - Add missing backend fields
Add to `Settings` interface and `defaultSettings`:
- `showEmptyStates: boolean` (default `true`) - Display tab
- `requireAssignmentForProgress: boolean` (default `true`) - Workflow tab
- `slaWarningThresholdMinutes: number` (default `30`) - Workflow tab
- `requirePasswordChangeDays: number` (default `90`) - Security tab
- `ipWhitelist: string[]` (default `[]`) - Security tab

### 2. `app.css` - Add global color variables
Move from Settings.svelte scoped `:global` into `:root`:
```
--color-primary: #2563eb
--color-primary-hover: #1d4ed8
--color-danger: #d32f2f
--color-success: #2e7d32
--color-border: #e0e0e0
--color-text-primary: #1a1a1a
--color-text-secondary: #666
--color-bg-light: #fafbfc
```

### 3. `Settings.svelte` - Template improvements

**Header:** Remove local `.header` overrides - let global blue gradient apply. Restyle action buttons as white/transparent variants for visibility on blue background.

**Each tab section:** Upgrade `.setting-section` from flat dividers to mini-cards (subtle background, rounded corners, border). Add icons to `<h3>` headings.

**New content per tab:**
- **Display:** Add `showEmptyStates` checkbox
- **Workflow:** Add `requireAssignmentForProgress` checkbox, add SLA Configuration section with `slaWarningThresholdMinutes`
- **Security:** Add Password Policy section (`requirePasswordChangeDays`), add IP whitelist textarea (visible when `ipWhitelistEnabled` is true)
- **Logging (new tab):** Activity Logging toggle, Log Retention days, API Tracking toggle (all fields already in store but unexposed)

### 4. `Settings.svelte` - Style overhaul

**Typography:** Replace all hardcoded px font sizes with CSS variables:
- `28px` h1 -> remove (global `.header h1` handles it)
- `22px` h2 -> `var(--font-size-section-title)`
- `16px` h3 -> `var(--font-size-card-title)`
- `14px` labels/body -> `var(--font-size-body)` / `var(--font-size-label)`
- `13px` help text -> `var(--font-size-caption)`

**Colors:** Replace hardcoded colors with CSS variables from step 2.

**Setting sections:** Card-like sub-sections:
```css
.setting-section {
  background: var(--color-bg-light);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid var(--color-border);
}
```

**Remove** the `:global { ... }` block defining local CSS vars (moved to app.css).

### 5. `App.svelte` - Sidebar + dark mode

Add to `settingsTabs` array:
```js
{ id: 'logging', label: 'Logging', icon: '📝' }
```

Add `textarea` to existing dark mode input rules (line ~773).

Add rendering for logging tab in the settings view section.

## Verification
```bash
cd frontend && npm run build
```
Build should complete with no new errors. Visually: all settings tabs should render with blue gradient header, card-style sections, correct typography, and proper dark mode support.