feat: custom violation types — persist, manage, and use in violation form

Adds a full CRUD system for user-defined violation types stored in a new
violation_types table. Custom types appear in the violation dropdown alongside
hardcoded types, grouped by category, with ✦ marker and a green Custom badge.

- db/database.js: auto-migration adds violation_types table on startup
- server.js: GET/POST/PUT/DELETE /api/violation-types; type_key auto-generated
  as custom_<slug>; DELETE blocked if any violations reference the type
- ViolationTypeModal.jsx: create/edit modal with name, category (datalist
  autocomplete from existing categories), handbook chapter reference,
  description/reference text, fixed vs sliding point toggle, context field
  checkboxes; delete with usage guard
- ViolationForm.jsx: fetches custom types on mount; merges into dropdown via
  mergedGroups memo; resolveViolation() checks hardcoded then custom; '+ Add
  Type' button above dropdown; 'Edit Type' button appears when a custom type is
  selected; newly created type auto-selects; all audit calls flow through
  existing audit() helper

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

AGENTS.md

@@ -0,0 +1,294 @@
+# AGENTS.md — CPAS Violation Tracker
+
+Developer and AI agent guidance for working on this codebase. Read this before making changes.
+
+---
+
+## Project Purpose
+
+CPAS (Corrective & Progressive Accountability System) is an internal HR tool for documenting employee violations, managing disciplinary tier escalation via a rolling 90-day point system, and producing auditable PDF records. It is a single-container Docker app deployed on a trusted internal network.
+
+**This is a compliance tool.** Data integrity, auditability, and reversibility are first-class concerns. Every architectural decision below exists for a reason.
+
+---
+
+## Stack at a Glance
+
+| Layer | Tech |
+|---|---|
+| Frontend | React 18 + Vite (SPA, served statically by Express) |
+| Backend | Node.js + Express (REST API, `server.js`) |
+| Database | SQLite via `better-sqlite3` (synchronous, WAL mode, FK enforcement) |
+| PDF | Puppeteer + system Chromium (Alpine-bundled in Docker) |
+| Styling | Inline React style objects; `client/src/styles/mobile.css` for breakpoints only |
+| Deploy | Docker multi-stage build (Alpine); single container + volume mount at `/data` |
+
+---
+
+## Repository Layout
+
+```
+cpas/
+├── Dockerfile                      # Multi-stage: builder (Node+React) → production (Alpine+Chromium)
+├── server.js                       # All API routes + audit helper; single Express entry point
+├── db/
+│   ├── schema.sql                  # Base table + view definitions (CREATE TABLE IF NOT EXISTS)
+│   └── database.js                 # DB connection, WAL/FK pragmas, auto-migrations on startup
+├── pdf/
+│   ├── generator.js                # Puppeteer launcher; --no-sandbox for Docker
+│   └── template.js                 # HTML template builder; loads logo from disk
+├── demo/                           # Static stakeholder demo page served at /demo
+│   └── index.html                  # Synthetic data, no live API calls; registered before SPA catch-all
+├── client/
+│   ├── vite.config.js
+│   ├── src/
+│   │   ├── App.jsx                 # Root component + AppFooter
+│   │   ├── main.jsx                # React DOM mount
+│   │   ├── data/
+│   │   │   ├── violations.js       # Canonical violation type registry (type key → metadata)
+│   │   │   └── departments.js      # DEPARTMENTS constant; single source of truth
+│   │   ├── hooks/
+│   │   │   └── useEmployeeIntelligence.js  # Score + history fetch hook
+│   │   ├── components/             # One file per component; no barrel index
+│   │   └── styles/
+│   │       └── mobile.css          # Media query overrides only; all other styles are inline
+└── README.md / README_UNRAID_INSTALL.md
+```
+
+---
+
+## Data Model & Compliance Rules
+
+### Tables
+
+| Table | Purpose |
+|---|---|
+| `employees` | id, name, department, supervisor, notes |
+| `violations` | Full incident record; contains immutable scoring fields |
+| `violation_resolutions` | Soft-delete records (resolution type, reason, resolver) |
+| `violation_amendments` | Field-level diff per amendment (old → new, changed_by, timestamp) |
+| `audit_log` | Append-only write action log; never delete from this table |
+| `active_cpas_scores` | VIEW: SUM(points) for negated=0 AND incident_date >= 90 days |
+
+### Immutable Fields (DO NOT allow amendment of these)
+
+The following fields on `violations` are locked after submission. They are the basis for tier calculation and PDF accuracy. **Never expose them to amendment endpoints:**
+
+- `points`
+- `violation_type`
+- `violation_name`
+- `category`
+- `incident_date`
+- `prior_active_points` (snapshot at insert time)
+- `prior_tier_label`
+
+Amendable fields (non-scoring): `location`, `details`, `witness_name`, `acknowledged_by`, `acknowledged_date`
+
+### Soft-Delete Pattern
+
+Violations are **never hard-deleted** in normal workflow. Use the `negated` flag + `violation_resolutions` record. Hard delete is reserved for confirmed data-entry errors and requires explicit user confirmation in the UI.
+
+### Prior-Points Snapshot
+
+Every `INSERT` into `violations` must compute and store `prior_active_points` (the employee's current active score before this violation is added). This snapshot ensures PDFs always reflect the accurate historical tier state regardless of subsequent negate/restore actions.
+
+### Audit Log
+
+Every write action (employee created/edited/merged, violation logged/amended/negated/restored/deleted) must call the `audit()` helper in `server.js`. Never skip audit calls on write routes. The audit log is append-only — no UPDATE or DELETE against `audit_log`.
+
+---
+
+## CPAS Tier System
+
+These thresholds are the authoritative values. Any feature touching tiers must use them.
+
+| Points | Tier | Label |
+|---|---|---|
+| 0–4 | 0-1 | Elite Standing |
+| 5–9 | 1 | Realignment |
+| 10–14 | 2 | Administrative Lockdown |
+| 15–19 | 3 | Verification |
+| 20–24 | 4 | Risk Mitigation |
+| 25–29 | 5 | Final Decision |
+| 30+ | 6 | Separation |
+
+The canonical tier logic lives in `client/src/components/CpasBadge.jsx` (`TIERS` array, `getTier()`, `getNextTier()`). Do not duplicate this logic elsewhere — import from `CpasBadge`.
+
+The 90-day rolling window is computed by the `active_cpas_scores` view. This view is **dropped and recreated** in `database.js` on every startup to ensure it always reflects the correct `negated=0` filter.
+
+---
+
+## Violation Type Registry
+
+All violation types are defined in `client/src/data/violations.js` as `violationData`. Each entry includes:
+
+```js
+{
+  name: string,         // Display name
+  category: string,     // Grouping for UI display
+  minPoints: number,    // Slider minimum
+  maxPoints: number,    // Slider maximum (min === max means fixed, no slider)
+  chapter: string,      // Policy chapter reference
+  fields: string[],     // Which context fields to show ('time', 'minutes', 'amount', 'location', 'description')
+  description: string,  // Plain-language definition shown in UI
+}
+```
+
+To add a new violation type: add an entry to `violationData` with a unique camelCase key. Do not add new categories without confirming with the project owner — categories appear in UI groupings.
+
+---
+
+## Coding Standards
+
+### Backend (`server.js`)
+
+- Use `better-sqlite3` synchronous API. No async DB calls. This is intentional — it simplifies route handlers and matches Express's sync error handling.
+- All prepared statements use positional `?` parameters. Never interpolate user input into SQL strings.
+- Every POST/PUT/PATCH/DELETE route must:
+  1. Validate required inputs and return `400` with a descriptive `{ error: '...' }` body on failure.
+  2. Call `audit()` on success.
+  3. Return `{ error: '...' }` (not HTML) on all error paths.
+- Group routes by resource (Employees, Violations, Dashboard, Audit). Match the existing comment banner style: `// ── Resource Name ───`.
+- Do not add authentication middleware. This runs on a trusted internal network by design.
+
+### Frontend (React)
+
+- **Styling**: Use inline style objects defined as a `const s = { ... }` block at the top of each component file. Do not add CSS classes or CSS modules — except for responsive breakpoints which go in `mobile.css`.
+- **Data constants**: Import violation types from `../data/violations`, departments from `../data/departments`, tier logic from `./CpasBadge`. Do not hardcode these values in components.
+- **Toasts**: Use `useToast()` from `ToastProvider` for all user-facing feedback. Do not use `alert()` or `console.log` for user messages.
+- **HTTP**: Use `axios` (already imported in form/modal components). Do not introduce `fetch` unless there is a compelling reason — keep it consistent.
+- **State**: Prefer local `useState` over lifting state unless data is needed by multiple unrelated components. The only global context is `ToastProvider`.
+- **Mobile**: Test layout at 768px breakpoint. Use the `isMobile` media query pattern already in `Dashboard.jsx` / `DashboardMobile.jsx`. Add breakpoint rules to `mobile.css`, not inline styles.
+- **Component files**: One component per file. Name the file to match the export. No barrel `index.js` files.
+
+### Database Migrations
+
+New columns are added via the auto-migration pattern in `database.js`. Do not modify `schema.sql` for columns that already exist in production. Instead:
+
+```js
+// Example: adding a new column to violations
+const cols = db.prepare('PRAGMA table_info(violations)').all().map(c => c.name);
+if (!cols.includes('new_column')) db.exec("ALTER TABLE violations ADD COLUMN new_column TEXT");
+```
+
+Add a comment describing the feature the column enables. `schema.sql` is only for base tables — use it only for brand-new tables.
+
+---
+
+## Schema Changes: Decision Checklist
+
+Before adding a column or table, answer:
+
+1. **Does it affect scoring?** If yes, it must be immutable after insert and included in `prior_active_points` computation logic.
+2. **Does it need audit trail?** If it tracks a change to an existing record, add a corresponding entry pattern to `violation_amendments` or `audit_log`.
+3. **Is it soft-deletable?** Prefer `negated`/flag patterns over hard deletes for anything HR might need to reverse.
+4. **Does it appear on PDFs?** Update `pdf/template.js` to reflect it. Test PDF output after schema changes.
+5. **Does `active_cpas_scores` view need updating?** If the new column affects point calculations, update the view recreation block in `database.js`.
+
+---
+
+## PDF Generation
+
+- PDFs are generated on-demand via `GET /api/violations/:id/pdf`. No pre-caching.
+- Template is built in `pdf/template.js`. It receives the full violation + employee record. Logo is loaded from disk at startup and embedded as base64.
+- Puppeteer launches with `--no-sandbox --disable-setuid-sandbox` (required for Docker; safe in this deployment context).
+- Acknowledgment rendering: if `acknowledged_by` is set, show name + date in signature block. If not, render blank wet-ink signature lines.
+- After any schema change that adds user-visible fields, update the template to include the new field where appropriate.
+
+---
+
+## Development Workflow
+
+### Local Development (without Docker)
+
+```bash
+# Terminal 1 — backend
+npm install
+node server.js          # Serves API on :3001 and client/dist statically
+
+# Terminal 2 — frontend (hot reload)
+cd client
+npm install
+npm run dev             # Vite dev server on :5173 (proxy to :3001 configured in vite.config.js)
+```
+
+### Build & Deploy
+
+```bash
+# Build Docker image (compiles React inside container)
+docker build -t cpas .
+
+# Run (local)
+docker run -d --name cpas -p 3001:3001 -v cpas-data:/data cpas
+
+# Unraid: build → save → transfer → load → run with --pids-limit 2048
+# See README_UNRAID_INSTALL.md for full Unraid instructions
+```
+
+**Unraid PID limit is critical.** Chromium spawns many child processes for PDF generation. Always include `--pids-limit 2048` on Unraid containers or PDF generation will fail silently.
+
+### Health Check
+
+`GET /api/health` returns `{ status: 'ok', timestamp, version }`. The `version` field is populated by the Dockerfile at build time from git commit SHA. In local dev it returns `{ sha: 'dev' }` — this is expected.
+
+---
+
+## Forward-Thinking Development Guidelines
+
+### Adding New Features
+
+- **Score-affecting logic belongs in SQL**, not JavaScript. The `active_cpas_scores` view is the single source of truth for point totals. If you need a new score variant (e.g., 30-day window, category-filtered), add a new SQL view — don't compute it in a route handler.
+- **New violation fields**: Add to `schema.sql` for fresh installs AND to the migration block in `database.js` for existing databases. Both are required.
+- **Reporting features**: Future aggregate queries should join against `active_cpas_scores` view and `audit_log` rather than re-implementing point logic. Structure new API endpoints under `/api/reports/` namespace.
+- **Notifications/alerts**: Any future alerting feature (email, Slack) should read from `audit_log` or query `active_cpas_scores` — do not add side effects directly into violation insert routes.
+- **Authentication**: If auth is ever added, implement it as Express middleware applied globally before all `/api` routes. Do not add per-route auth checks. Session data (user identity) should flow into `performed_by` fields on audit and amendment records.
+- **Multi-tenant / multi-site**: The schema is single-tenant. If site isolation is ever needed, add a `site_id` foreign key to `employees` and `violations` as a migration column, then scope all queries with a `WHERE site_id = ?` clause.
+
+### What NOT to Do
+
+- Do not compute active CPAS scores in JavaScript by summing violations client-side. Always fetch from the `active_cpas_scores` view.
+- Do not modify `prior_active_points` after a violation is inserted. It is a historical snapshot, not a live value.
+- Do not add columns to `audit_log`. It is append-only with a fixed schema.
+- Do not add a framework or ORM. Raw SQL with prepared statements is intentional — it keeps the query behavior explicit and the dependency surface small.
+- Do not add a build step beyond `vite build`. The backend is plain CommonJS `require()`; do not transpile it.
+- Do not use `alert()`, `console.log` for user messages, or `document.querySelector` inside React components.
+
+---
+
+## Documentation Standards
+
+### Code Comments
+
+- Comment **why**, not **what**. If the reason for a decision is not obvious from the code, explain it.
+- Use the existing banner style for section groupings in `server.js`:
+  ```js
+  // ── Section Name ─────────────────────────────────────────────────────────────
+  ```
+- Mark non-obvious schema columns with inline SQL comments (see `schema.sql` for examples).
+- When adding a migration block, include a comment naming the feature it enables.
+
+### In-App Documentation
+
+The `ReadmeModal.jsx` component renders an admin reference panel accessible via the `? Docs` button. When adding a significant new feature:
+- Add it to the feature map section of the docs modal.
+- Update the tier system table if thresholds change.
+- Move completed roadmap items from the "Proposed" section to the "Completed" section.
+
+### README
+
+Update `README.md` when:
+- A new environment variable is introduced.
+- The Docker run command changes (new volume, port, or flag).
+- A new top-level feature is added that HR administrators need to know about.
+
+Do not add implementation details to README — that belongs in code comments or AGENTS.md.
+
+---
+
+## Constraints & Non-Goals
+
+- **No authentication.** This is intentional. The app runs on a trusted LAN. Do not add auth without explicit direction from the project owner.
+- **No external dependencies beyond what's in `package.json`.** Avoid introducing new npm packages unless they solve a clearly scoped problem. Prefer using existing stack capabilities.
+- **No client-side routing library.** Navigation between Violation Form, Dashboard, and modals is handled via `App.jsx` state (`view` prop). Do not introduce React Router unless the navigation model meaningfully grows beyond 3–4 views.
+- **No test suite currently.** If adding tests, use Vitest for frontend and a lightweight assertion library for backend routes. Do not add a full testing framework without discussion.
+- **SQLite only.** Do not introduce Postgres, Redis, or other datastores. The single-file DB on a Docker volume is the correct solution for this scale.

Dockerfile

@@ -7,6 +7,15 @@ RUN cd client && npm install
 COPY client/ ./client/
 RUN cd client && npm run build
 
+# ── Version metadata ──────────────────────────────────────────────────────────
+# Pass these at build time:
+#   docker build --build-arg GIT_SHA=$(git rev-parse HEAD) \
+#                --build-arg BUILD_TIME=$(date -u +%Y-%m-%dT%H:%M:%SZ) .
+ARG GIT_SHA=dev
+ARG BUILD_TIME=unknown
+RUN echo "{\"sha\":\"${GIT_SHA}\",\"shortSha\":\"${GIT_SHA:0:7}\",\"buildTime\":\"${BUILD_TIME}\"}" \
+    > /build/client/dist/version.json
+
 FROM node:20-alpine AS production
 RUN apk add --no-cache chromium nss freetype harfbuzz ca-certificates ttf-freefont
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
@@ -25,5 +34,6 @@ COPY demo/        ./demo/
 COPY client/public/static ./client/dist/static
 RUN mkdir -p /data
 EXPOSE 3001
-HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3   CMD wget -qO- http://localhost:3001/api/health || exit 1
+HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
+  CMD wget -qO- http://localhost:3001/api/health || exit 1
 CMD ["node", "server.js"]

MOBILE_RESPONSIVE.md

@@ -0,0 +1,314 @@
+# Mobile-Responsive Implementation Guide
+
+## Overview
+
+This document describes the mobile-responsive updates implemented for the CPAS Tracker application. The design targets **standard phones (375px+ width)** with graceful degradation for smaller devices.
+
+## Key Changes
+
+### 1. **Responsive Utility Stylesheet** (`client/src/styles/mobile.css`)
+
+A centralized CSS file providing:
+- Media query breakpoints (768px, 480px)
+- Touch-friendly tap targets (min 44px height)
+- iOS input zoom prevention (16px font size)
+- Utility classes for mobile layouts
+- Card-based layout helpers
+- Horizontal scroll containers
+
+**Utility Classes:**
+- `.hide-mobile` - Hide on screens ≤768px
+- `.hide-tablet` - Hide on screens ≤1024px  
+- `.mobile-full-width` - Full width on mobile
+- `.mobile-stack` - Stack flex items vertically
+- `.mobile-scroll-x` - Enable horizontal scrolling
+- `.mobile-card` - Card layout container
+- `.mobile-sticky-top` - Sticky header positioning
+
+### 2. **App Navigation** (`client/src/App.jsx`)
+
+**Desktop Behavior:**
+- Horizontal navigation bar
+- Logo left, tabs center, docs button right
+- Full tab labels displayed
+
+**Mobile Behavior (768px):**
+- Logo centered with full width
+- Tabs stacked horizontally below logo
+- Docs button positioned absolutely top-right
+- Shortened tab labels ("📊 Dashboard" → "📊")
+- Flexible padding (40px → 16px)
+
+**Features:**
+- `useMediaQuery()` hook for responsive detection
+- Dynamic style injection via `<style>` tag
+- Separate mobile CSS classes for targeted overrides
+
+### 3. **Dashboard Layout** (`client/src/components/Dashboard.jsx`)
+
+**Desktop View:**
+- Traditional HTML table layout
+- 7 columns (Index, Employee, Dept, Supervisor, Tier, Points, Violations)
+- Horizontal scrolling for overflow
+
+**Mobile View (768px):**
+- Switches to card-based layout (DashboardMobile component)
+- Each employee = one card with vertical data rows
+- Touch-optimized tap targets
+- Improved readability with larger fonts
+
+**Mobile Stat Cards:**
+- 2 columns on phones (480px+)
+- 1 column on small phones (<480px)
+- Reduced font sizes (28px → 24px)
+- Compact padding
+
+**Toolbar Adjustments:**
+- Search input: 260px → 100% width
+- Buttons stack vertically
+- Full-width button styling
+
+### 4. **Mobile Dashboard Component** (`client/src/components/DashboardMobile.jsx`)
+
+A dedicated mobile-optimized employee card component:
+
+**Card Structure:**
+```
++--------------------------------+
+| Employee Name [Button]         |
+| [At Risk Badge if applicable]  |
+|--------------------------------|
+| Tier / Standing: [Badge]       |
+| Active Points: [Large #]       |
+| 90-Day Violations: [#]         |
+| Department: [Name]             |
+| Supervisor: [Name]             |
++--------------------------------+
+```
+
+**Visual Features:**
+- At-risk employees: Gold border + dark gold background
+- Touch-friendly employee name buttons
+- Color-coded point displays matching tier colors
+- Compact spacing (12px margins)
+- Subtle shadows for depth
+
+### 5. **Responsive Breakpoints**
+
+| Breakpoint | Target Devices | Layout Changes |
+|------------|----------------|----------------|
+| **1024px** | Tablets & below | Reduced padding, simplified nav |
+| **768px**  | Phones (landscape) | Card layouts, stacked navigation |
+| **480px**  | Small phones | Single-column stats, minimal spacing |
+| **375px**  | iPhone SE/6/7/8 | Optimized for minimum supported width |
+
+### 6. **Touch Optimization**
+
+**Tap Target Sizes:**
+- All buttons: 44px minimum height (iOS/Android guidelines)
+- Form inputs: 44px minimum height
+- Navigation tabs: 44px touch area
+
+**Typography:**
+- Form inputs: 16px font size (prevents iOS zoom-in on focus)
+- Readable body text: 13-14px
+- Headers scale down appropriately
+
+**Scrolling:**
+- `-webkit-overflow-scrolling: touch` for smooth momentum scrolling
+- Horizontal scroll on tables (desktop fallback)
+- Vertical card scrolling on mobile
+
+## Implementation Details
+
+### Media Query Hook
+
+```javascript
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) setMatches(media.matches);
+    const listener = () => setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [matches, query]);
+  return matches;
+}
+```
+
+**Usage:**
+```javascript
+const isMobile = useMediaQuery('(max-width: 768px)');
+```
+
+### Conditional Rendering Pattern
+
+```javascript
+{isMobile ? (
+  <DashboardMobile employees={filtered} onEmployeeClick={setSelectedId} />
+) : (
+  <table style={s.table}>
+    {/* Desktop table layout */}
+  </table>
+)}
+```
+
+### Dynamic Style Injection
+
+```javascript
+const mobileStyles = `
+  @media (max-width: 768px) {
+    .dashboard-wrap {
+      padding: 16px !important;
+    }
+  }
+`;
+
+return (
+  <>
+    <style>{mobileStyles}</style>
+    {/* Component JSX */}
+  </>
+);
+```
+
+## Testing Checklist
+
+### Desktop (>768px)
+- [ ] Navigation displays horizontally
+- [ ] Dashboard shows full table
+- [ ] All columns visible
+- [ ] Docs button on right side
+- [ ] Full tab labels visible
+
+### Tablet (768px - 1024px)
+- [ ] Reduced padding maintains readability
+- [ ] Stats cards wrap to 2-3 columns
+- [ ] Table scrolls horizontally if needed
+
+### Mobile Portrait (375px - 768px)
+- [ ] Logo centered, tabs stacked
+- [ ] Dashboard shows card layout
+- [ ] Search input full width
+- [ ] Buttons stack vertically
+- [ ] Employee cards display all data
+- [ ] Tap targets ≥44px
+- [ ] No horizontal scroll required
+
+### Small Mobile (<480px)
+- [ ] Stat cards single column
+- [ ] Text remains readable
+- [ ] No layout breakage
+- [ ] Footer wraps properly
+
+### iOS-Specific
+- [ ] Input focus doesn't zoom page (16px font)
+- [ ] Smooth momentum scrolling
+- [ ] Tap highlights work correctly
+
+### Android-Specific
+- [ ] Touch feedback visible
+- [ ] Back button behavior correct
+- [ ] Keyboard doesn't break layout
+
+## Browser Support
+
+- **Chrome/Edge:** 88+
+- **Firefox:** 85+
+- **Safari:** 14+
+- **iOS Safari:** 14+
+- **Chrome Android:** 88+
+
+## Performance Considerations
+
+1. **Media query hook** re-renders only on breakpoint changes, not continuous resize
+2. **Card layout** renders fewer DOM elements than table on mobile
+3. **CSS injection** happens once per component mount
+4. **No external CSS libraries** (zero KB bundle increase)
+
+## Future Enhancements
+
+### Phase 2 (Optional)
+- [ ] ViolationForm mobile optimization with multi-step wizard
+- [ ] Modal responsive sizing and animations
+- [ ] Swipe gestures for employee cards
+- [ ] Pull-to-refresh on mobile
+- [ ] Offline support with service workers
+
+### Phase 3 (Advanced)
+- [ ] Progressive Web App (PWA) capabilities
+- [ ] Native app shell with Capacitor
+- [ ] Biometric authentication
+- [ ] Push notifications
+
+## File Structure
+
+```
+client/src/
+├── App.jsx                    # Updated with mobile nav
+├── components/
+│   ├── Dashboard.jsx           # Responsive table/card switch
+│   ├── DashboardMobile.jsx     # Mobile card layout (NEW)
+│   └── ...                     # Other components
+└── styles/
+    └── mobile.css              # Responsive utilities (NEW)
+```
+
+## Maintenance Notes
+
+### Adding New Components
+
+When creating new components, follow this pattern:
+
+1. **Import mobile.css utility classes:**
+   ```javascript
+   import '../styles/mobile.css';
+   ```
+
+2. **Use media query hook:**
+   ```javascript
+   const isMobile = useMediaQuery('(max-width: 768px)');
+   ```
+
+3. **Provide mobile-specific styles:**
+   ```javascript
+   const mobileStyles = `
+     @media (max-width: 768px) {
+       .my-component { /* mobile overrides */ }
+     }
+   `;
+   ```
+
+4. **Test on real devices** (Chrome DevTools is insufficient for touch testing)
+
+### Debugging Tips
+
+- Use Chrome DevTools Device Mode (Ctrl+Shift+M)
+- Test on actual devices when possible
+- Check console for media query match state
+- Verify tap target sizes with Chrome Lighthouse audit
+- Test keyboard behavior on Android
+
+## Deployment
+
+1. Merge `feature/mobile-responsive` into `master`
+2. Rebuild client bundle: `cd client && npm run build`
+3. Restart server
+4. Clear browser cache (Ctrl+Shift+R)
+5. Test on production URL with mobile devices
+
+## Support
+
+For issues or questions about mobile-responsive implementation:
+- Check browser console for errors
+- Verify `mobile.css` is loaded
+- Test with different screen sizes
+- Review media query breakpoints
+
+---
+
+**Branch:** `feature/mobile-responsive`  
+**Target Width:** 375px+ (standard phones)  
+**Last Updated:** March 8, 2026  
+**Maintainer:** Jason Stedwell

client/public/version.json

@@ -0,0 +1,5 @@
+{
+  "sha": "dev",
+  "shortSha": "dev",
+  "buildTime": null
+}

client/src/App.jsx

@@ -3,6 +3,7 @@ import ViolationForm from './components/ViolationForm';
 import Dashboard     from './components/Dashboard';
 import ReadmeModal   from './components/ReadmeModal';
 import ToastProvider from './components/ToastProvider';
+import './styles/mobile.css';
 
 const REPO_URL     = 'https://git.alwisp.com/jason/cpas';
 const PROJECT_START = new Date('2026-03-06T11:33:32-06:00');
@@ -42,8 +43,13 @@ function GiteaIcon() {
   );
 }
 
-function AppFooter() {
+function AppFooter({ version }) {
   const year = new Date().getFullYear();
+  const sha  = version?.shortSha || null;
+  const built = version?.buildTime
+    ? new Date(version.buildTime).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+    : null;
+
   return (
     <>
       <style>{`
@@ -51,15 +57,40 @@ function AppFooter() {
           0%, 100% { opacity: 1; transform: scale(1); }
           50%       { opacity: 0.4; transform: scale(0.75); }
         }
+
+        /* Mobile-specific footer adjustments */
+        @media (max-width: 768px) {
+          .footer-content {
+            flex-wrap: wrap;
+            justify-content: center;
+            font-size: 10px;
+            padding: 10px 16px;
+            gap: 8px;
+          }
+        }
       `}</style>
-      <footer style={sf.footer}>
+      <footer style={sf.footer} className="footer-content">
-        <span style={sf.copy}>© {year} Jason Stedwell</span>
+        <span style={sf.copy}>&copy; {year} Jason Stedwell</span>
-        <span style={sf.sep}>·</span>
+        <span style={sf.sep}>&middot;</span>
         <DevTicker />
-        <span style={sf.sep}>·</span>
+        <span style={sf.sep}>&middot;</span>
         <a href={REPO_URL} target="_blank" rel="noopener noreferrer" style={sf.link}>
           <GiteaIcon /> cpas
         </a>
+        {sha && sha !== 'dev' && (
+          <>
+            <span style={sf.sep}>&middot;</span>
+            <a
+              href={`${REPO_URL}/commit/${version.sha}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              style={sf.link}
+              title={built ? `Built ${built}` : 'View commit'}
+            >
+              {sha}
+            </a>
+          </>
+        )}
       </footer>
     </>
   );
@@ -70,6 +101,19 @@ const tabs = [
   { id: 'violation', label: '+ New Violation' },
 ];
 
+// Responsive utility hook
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) setMatches(media.matches);
+    const listener = () => setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [matches, query]);
+  return matches;
+}
+
 const s = {
   app:      { minHeight: '100vh', background: '#050608', fontFamily: "'Segoe UI', Arial, sans-serif", color: '#f8f9fa', display: 'flex', flexDirection: 'column' },
   nav:      { background: '#000000', padding: '0 40px', display: 'flex', alignItems: 'center', gap: 0, borderBottom: '1px solid #333' },
@@ -102,6 +146,58 @@ const s = {
   card: { maxWidth: '1100px', margin: '30px auto', background: '#111217', borderRadius: '10px', boxShadow: '0 2px 16px rgba(0,0,0,0.6)', border: '1px solid #222' },
 };
 
+// Mobile-responsive style overrides
+const mobileStyles = `
+  @media (max-width: 768px) {
+    .app-nav {
+      padding: 0 16px !important;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+    .logo-wrap {
+      margin-right: 0 !important;
+      padding: 12px 0 !important;
+      width: 100%;
+      justify-content: center;
+      border-bottom: 1px solid #1a1b22;
+    }
+    .nav-tabs {
+      display: flex;
+      width: 100%;
+      justify-content: space-around;
+    }
+    .nav-tab {
+      flex: 1;
+      text-align: center;
+      padding: 14px 8px !important;
+      font-size: 13px !important;
+    }
+    .docs-btn {
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      padding: 4px 10px !important;
+      font-size: 11px !important;
+    }
+    .docs-btn span:first-child {
+      display: none;
+    }
+    .main-card {
+      margin: 12px !important;
+      border-radius: 8px !important;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .logo-text {
+      font-size: 16px !important;
+    }
+    .logo-img {
+      height: 24px !important;
+    }
+  }
+`;
+
 const sf = {
   footer: {
     borderTop: '1px solid #1a1b22',
@@ -129,34 +225,46 @@ const sf = {
 export default function App() {
   const [tab,        setTab]        = useState('dashboard');
   const [showReadme, setShowReadme] = useState(false);
+  const [version,    setVersion]    = useState(null);
+  const isMobile = useMediaQuery('(max-width: 768px)');
+
+  useEffect(() => {
+    fetch('/version.json')
+      .then(r => r.ok ? r.json() : null)
+      .then(v => { if (v) setVersion(v); })
+      .catch(() => {});
+  }, []);
 
   return (
     <ToastProvider>
+      <style>{mobileStyles}</style>
       <div style={s.app}>
-        <nav style={s.nav}>
+        <nav style={s.nav} className="app-nav">
-          <div style={s.logoWrap}>
+          <div style={s.logoWrap} className="logo-wrap">
-            <img src="/static/mpm-logo.png" alt="MPM" style={s.logoImg} />
+            <img src="/static/mpm-logo.png" alt="MPM" style={s.logoImg} className="logo-img" />
-            <div style={s.logoText}>CPAS Tracker</div>
+            <div style={s.logoText} className="logo-text">CPAS Tracker</div>
           </div>
 
+          <div className="nav-tabs">
             {tabs.map(t => (
-            <button key={t.id} style={s.tab(tab === t.id)} onClick={() => setTab(t.id)}>
+              <button key={t.id} style={s.tab(tab === t.id)} className="nav-tab" onClick={() => setTab(t.id)}>
-              {t.label}
+                {isMobile ? t.label.replace('📊 ', '📊 ').replace('+ New ', '+ ') : t.label}
               </button>
             ))}
+          </div>
 
-          <button style={s.docsBtn} onClick={() => setShowReadme(true)} title="Open admin documentation">
+          <button style={s.docsBtn} className="docs-btn" onClick={() => setShowReadme(true)} title="Open admin documentation">
             <span>?</span> Docs
           </button>
         </nav>
 
         <div style={s.main}>
-          <div style={s.card}>
+          <div style={s.card} className="main-card">
             {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
           </div>
         </div>
 
-        <AppFooter />
+        <AppFooter version={version} />
 
         {showReadme && <ReadmeModal onClose={() => setShowReadme(false)} />}
       </div>

client/src/components/Dashboard.jsx

@@ -3,6 +3,7 @@ import axios from 'axios';
 import CpasBadge, { getTier } from './CpasBadge';
 import EmployeeModal from './EmployeeModal';
 import AuditLog from './AuditLog';
+import DashboardMobile from './DashboardMobile';
 
 const AT_RISK_THRESHOLD = 2;
 
@@ -28,15 +29,37 @@ function isAtRisk(points) {
   return boundary !== null && (boundary - points) <= AT_RISK_THRESHOLD;
 }
 
+// Media query hook
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) setMatches(media.matches);
+    const listener = () => setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [matches, query]);
+  return matches;
+}
+
+// Filter keys
+const FILTER_NONE     = null;
+const FILTER_TOTAL    = 'total';
+const FILTER_ELITE    = 'elite';
+const FILTER_ACTIVE   = 'active';
+const FILTER_AT_RISK  = 'at_risk';
+
 const s = {
   wrap:         { padding: '32px 40px', color: '#f8f9fa' },
   header:       { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px', flexWrap: 'wrap', gap: '12px' },
   title:        { fontSize: '24px', fontWeight: 700, color: '#f8f9fa' },
   subtitle:     { fontSize: '13px', color: '#b5b5c0', marginTop: '3px' },
   statsRow:     { display: 'flex', gap: '16px', flexWrap: 'wrap', marginBottom: '28px' },
-  statCard:     { flex: '1', minWidth: '140px', background: '#181924', border: '1px solid #30313f', borderRadius: '8px', padding: '16px', textAlign: 'center' },
+  statCard:     { flex: '1', minWidth: '140px', background: '#181924', border: '1px solid #303136', borderRadius: '8px', padding: '16px', textAlign: 'center', cursor: 'pointer', transition: 'border-color 0.15s, box-shadow 0.15s' },
+  statCardActive: { boxShadow: '0 0 0 2px #d4af37', border: '1px solid #d4af37' },
   statNum:      { fontSize: '28px', fontWeight: 800, color: '#f8f9fa' },
   statLbl:      { fontSize: '11px', color: '#b5b5c0', marginTop: '4px' },
+  filterBadge:  { fontSize: '10px', color: '#d4af37', marginTop: '4px', fontWeight: 600 },
   search:       { padding: '10px 14px', border: '1px solid #333544', borderRadius: '6px', fontSize: '14px', width: '260px', background: '#050608', color: '#f8f9fa' },
   table:        { width: '100%', borderCollapse: 'collapse', background: '#111217', borderRadius: '8px', overflow: 'hidden', boxShadow: '0 1px 8px rgba(0,0,0,0.6)', border: '1px solid #222' },
   th:           { background: '#000000', color: '#f8f9fa', padding: '10px 14px', textAlign: 'left', fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px' },
@@ -49,6 +72,55 @@ const s = {
   auditBtn:     { padding: '9px 18px', background: 'none', color: '#9ca0b8', border: '1px solid #2a2b3a', borderRadius: '6px', cursor: 'pointer', fontWeight: 600, fontSize: '13px' },
 };
 
+// Mobile styles
+const mobileStyles = `
+  @media (max-width: 768px) {
+    .dashboard-wrap {
+      padding: 16px !important;
+    }
+    .dashboard-header {
+      flex-direction: column;
+      align-items: flex-start !important;
+    }
+    .dashboard-title {
+      font-size: 20px !important;
+    }
+    .dashboard-subtitle {
+      font-size: 12px !important;
+    }
+    .dashboard-stats {
+      gap: 10px !important;
+    }
+    .dashboard-stat-card {
+      min-width: calc(50% - 5px) !important;
+      padding: 12px !important;
+    }
+    .stat-num {
+      font-size: 24px !important;
+    }
+    .stat-lbl {
+      font-size: 10px !important;
+    }
+    .toolbar-right {
+      width: 100%;
+      flex-direction: column;
+    }
+    .search-input {
+      width: 100% !important;
+    }
+    .toolbar-btn {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .dashboard-stat-card {
+      min-width: 100% !important;
+    }
+  }
+`;
+
 export default function Dashboard() {
   const [employees,   setEmployees]   = useState([]);
   const [filtered,    setFiltered]    = useState([]);
@@ -56,6 +128,8 @@ export default function Dashboard() {
   const [selectedId,  setSelectedId]  = useState(null);
   const [showAudit,   setShowAudit]   = useState(false);
   const [loading,     setLoading]     = useState(true);
+  const [activeFilter, setActiveFilter] = useState(FILTER_NONE);
+  const isMobile = useMediaQuery('(max-width: 768px)');
 
   const load = useCallback(() => {
     setLoading(true);
@@ -66,65 +140,147 @@ export default function Dashboard() {
 
   useEffect(() => { load(); }, [load]);
 
+  // Apply search + badge filter together
   useEffect(() => {
     const q = search.toLowerCase();
-    setFiltered(employees.filter(e =>
+    let base = employees;
+
+    if (activeFilter === FILTER_ELITE) {
+      base = base.filter(e => e.active_points >= 0 && e.active_points <= 4);
+    } else if (activeFilter === FILTER_ACTIVE) {
+      base = base.filter(e => e.active_points > 0);
+    } else if (activeFilter === FILTER_AT_RISK) {
+      base = base.filter(e => isAtRisk(e.active_points));
+    }
+    // FILTER_TOTAL and FILTER_NONE show all
+
+    if (q) {
+      base = base.filter(e =>
         e.name.toLowerCase().includes(q) ||
         (e.department || '').toLowerCase().includes(q) ||
         (e.supervisor || '').toLowerCase().includes(q)
-    ));
+      );
-  }, [search, employees]);
+    }
+
+    setFiltered(base);
+  }, [search, employees, activeFilter]);
 
   const atRiskCount = employees.filter(e => isAtRisk(e.active_points)).length;
   const activeCount = employees.filter(e => e.active_points > 0).length;
-  const cleanCount  = employees.filter(e => e.active_points === 0).length;
+  // Elite Standing: 0–4 pts (Tier 0-1)
+  const eliteCount  = employees.filter(e => e.active_points >= 0 && e.active_points <= 4).length;
   const maxPoints   = employees.reduce((m, e) => Math.max(m, e.active_points), 0);
 
+  function handleBadgeClick(filterKey) {
+    setActiveFilter(prev => prev === filterKey ? FILTER_NONE : filterKey);
+  }
+
+  function cardStyle(filterKey, extra = {}) {
+    const isActive = activeFilter === filterKey;
+    return {
+      ...s.statCard,
+      ...(isActive ? s.statCardActive : {}),
+      ...extra,
+    };
+  }
+
   return (
     <>
-      <div style={s.wrap}>
+      <style>{mobileStyles}</style>
-        <div style={s.header}>
+      <div style={s.wrap} className="dashboard-wrap">
+        <div style={s.header} className="dashboard-header">
           <div>
-            <div style={s.title}>Company Dashboard</div>
+            <div style={s.title} className="dashboard-title">Company Dashboard</div>
-            <div style={s.subtitle}>Click any employee name to view their full profile</div>
+            <div style={s.subtitle} className="dashboard-subtitle">
+              Click any employee name to view their full profile
+              {activeFilter && activeFilter !== FILTER_NONE && (
+                <span style={{ marginLeft: '10px', color: '#d4af37', fontWeight: 600 }}>
+                  · Filtered: {activeFilter === FILTER_ELITE ? 'Elite Standing (0–4 pts)' : activeFilter === FILTER_ACTIVE ? 'With Active Points' : activeFilter === FILTER_AT_RISK ? 'At Risk' : 'All'}
+                  <button
+                    onClick={() => setActiveFilter(FILTER_NONE)}
+                    style={{ marginLeft: '6px', background: 'none', border: 'none', color: '#9ca0b8', cursor: 'pointer', fontSize: '12px' }}
+                    title="Clear filter"
+                  >✕</button>
+                </span>
+              )}
             </div>
-          <div style={s.toolbarRight}>
+          </div>
+          <div style={s.toolbarRight} className="toolbar-right">
             <input
               style={s.search}
+              className="search-input"
               placeholder="Search name, dept, supervisor…"
               value={search}
               onChange={e => setSearch(e.target.value)}
             />
-            <button style={s.auditBtn} onClick={() => setShowAudit(true)}>📋 Audit Log</button>
+            <button style={s.auditBtn} className="toolbar-btn" onClick={() => setShowAudit(true)}>📋 Audit Log</button>
-            <button style={s.refreshBtn} onClick={load}>↻ Refresh</button>
+            <button style={s.refreshBtn} className="toolbar-btn" onClick={load}>↻ Refresh</button>
           </div>
         </div>
 
-        <div style={s.statsRow}>
+        <div style={s.statsRow} className="dashboard-stats">
-          <div style={s.statCard}>
+          {/* Total Employees — clicking shows all */}
-            <div style={s.statNum}>{employees.length}</div>
+          <div
-            <div style={s.statLbl}>Total Employees</div>
+            style={cardStyle(FILTER_TOTAL)}
+            className="dashboard-stat-card"
+            onClick={() => handleBadgeClick(FILTER_TOTAL)}
+            title="Click to show all employees"
+          >
+            <div style={s.statNum} className="stat-num">{employees.length}</div>
+            <div style={s.statLbl} className="stat-lbl">Total Employees</div>
+            {activeFilter === FILTER_TOTAL && <div style={s.filterBadge}>▼ Showing All</div>}
           </div>
-          <div style={{ ...s.statCard, borderTop: '3px solid #28a745' }}>
+
-            <div style={{ ...s.statNum, color: '#6ee7b7' }}>{cleanCount}</div>
+          {/* Elite Standing: 0–4 pts */}
-            <div style={s.statLbl}>Elite Standing (0 pts)</div>
+          <div
+            style={cardStyle(FILTER_ELITE, { borderTop: '3px solid #28a745' })}
+            className="dashboard-stat-card"
+            onClick={() => handleBadgeClick(FILTER_ELITE)}
+            title="Click to filter: Elite Standing (0–4 pts)"
+          >
+            <div style={{ ...s.statNum, color: '#6ee7b7' }} className="stat-num">{eliteCount}</div>
+            <div style={s.statLbl} className="stat-lbl">Elite Standing (0–4 pts)</div>
+            {activeFilter === FILTER_ELITE && <div style={s.filterBadge}>▼ Filtered</div>}
           </div>
-          <div style={{ ...s.statCard, borderTop: '3px solid #d4af37' }}>
+
-            <div style={{ ...s.statNum, color: '#ffd666' }}>{activeCount}</div>
+          {/* With Active Points */}
-            <div style={s.statLbl}>With Active Points</div>
+          <div
+            style={cardStyle(FILTER_ACTIVE, { borderTop: '3px solid #d4af37' })}
+            className="dashboard-stat-card"
+            onClick={() => handleBadgeClick(FILTER_ACTIVE)}
+            title="Click to filter: employees with active points"
+          >
+            <div style={{ ...s.statNum, color: '#ffd666' }} className="stat-num">{activeCount}</div>
+            <div style={s.statLbl} className="stat-lbl">With Active Points</div>
+            {activeFilter === FILTER_ACTIVE && <div style={s.filterBadge}>▼ Filtered</div>}
           </div>
-          <div style={{ ...s.statCard, borderTop: '3px solid #ffb020' }}>
+
-            <div style={{ ...s.statNum, color: '#ffdf8a' }}>{atRiskCount}</div>
+          {/* At Risk */}
-            <div style={s.statLbl}>At Risk (≤{AT_RISK_THRESHOLD} pts to next tier)</div>
+          <div
+            style={cardStyle(FILTER_AT_RISK, { borderTop: '3px solid #ffb020' })}
+            className="dashboard-stat-card"
+            onClick={() => handleBadgeClick(FILTER_AT_RISK)}
+            title={`Click to filter: at risk (≤${AT_RISK_THRESHOLD} pts to next tier)`}
+          >
+            <div style={{ ...s.statNum, color: '#ffdf8a' }} className="stat-num">{atRiskCount}</div>
+            <div style={s.statLbl} className="stat-lbl">At Risk (≤{AT_RISK_THRESHOLD} pts to next tier)</div>
+            {activeFilter === FILTER_AT_RISK && <div style={s.filterBadge}>▼ Filtered</div>}
           </div>
-          <div style={{ ...s.statCard, borderTop: '3px solid #c0392b' }}>
+
-            <div style={{ ...s.statNum, color: '#ff8a80' }}>{maxPoints}</div>
+          {/* Highest Score — display only, no filter */}
-            <div style={s.statLbl}>Highest Active Score</div>
+          <div
+            style={{ ...s.statCard, borderTop: '3px solid #c0392b', cursor: 'default' }}
+            className="dashboard-stat-card"
+          >
+            <div style={{ ...s.statNum, color: '#ff8a80' }} className="stat-num">{maxPoints}</div>
+            <div style={s.statLbl} className="stat-lbl">Highest Active Score</div>
           </div>
         </div>
 
         {loading ? (
           <p style={{ color: '#77798a', textAlign: 'center', padding: '40px' }}>Loading…</p>
+        ) : isMobile ? (
+          <DashboardMobile employees={filtered} onEmployeeClick={setSelectedId} />
         ) : (
           <table style={s.table}>
             <thead>

client/src/components/DashboardMobile.jsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import CpasBadge, { getTier } from './CpasBadge';
+
+const AT_RISK_THRESHOLD = 2;
+
+const TIERS = [
+  { min: 0,  max: 4   },
+  { min: 5,  max: 9   },
+  { min: 10, max: 14  },
+  { min: 15, max: 19  },
+  { min: 20, max: 24  },
+  { min: 25, max: 29  },
+  { min: 30, max: 999 },
+];
+
+function nextTierBoundary(points) {
+  for (const t of TIERS) {
+    if (points >= t.min && points <= t.max && t.max < 999) return t.max + 1;
+  }
+  return null;
+}
+
+function isAtRisk(points) {
+  const boundary = nextTierBoundary(points);
+  return boundary !== null && (boundary - points) <= AT_RISK_THRESHOLD;
+}
+
+const s = {
+  card: {
+    background: '#181924',
+    border: '1px solid #2a2b3a',
+    borderRadius: '10px',
+    padding: '16px',
+    marginBottom: '12px',
+    boxShadow: '0 1px 4px rgba(0,0,0,0.4)',
+  },
+  cardAtRisk: {
+    background: '#181200',
+    border: '1px solid #d4af37',
+  },
+  row: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '8px 0',
+    borderBottom: '1px solid rgba(255,255,255,0.05)',
+  },
+  rowLast: {
+    borderBottom: 'none',
+  },
+  label: {
+    fontSize: '11px',
+    fontWeight: 600,
+    color: '#9ca0b8',
+    textTransform: 'uppercase',
+    letterSpacing: '0.5px',
+  },
+  value: {
+    fontSize: '14px',
+    fontWeight: 600,
+    color: '#f8f9fa',
+    textAlign: 'right',
+  },
+  name: {
+    fontSize: '16px',
+    fontWeight: 700,
+    color: '#d4af37',
+    marginBottom: '8px',
+    cursor: 'pointer',
+    textDecoration: 'underline dotted',
+    background: 'none',
+    border: 'none',
+    padding: 0,
+    textAlign: 'left',
+    width: '100%',
+  },
+  atRiskBadge: {
+    display: 'inline-block',
+    marginTop: '4px',
+    padding: '3px 8px',
+    borderRadius: '10px',
+    fontSize: '10px',
+    fontWeight: 700,
+    background: '#3b2e00',
+    color: '#ffd666',
+    border: '1px solid #d4af37',
+  },
+  points: {
+    fontSize: '28px',
+    fontWeight: 800,
+    textAlign: 'center',
+    margin: '8px 0',
+  },
+};
+
+export default function DashboardMobile({ employees, onEmployeeClick }) {
+  if (!employees || employees.length === 0) {
+    return (
+      <div style={{ padding: '20px', textAlign: 'center', color: '#77798a', fontStyle: 'italic' }}>
+        No employees found.
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ padding: '12px' }}>
+      {employees.map((emp) => {
+        const risk = isAtRisk(emp.active_points);
+        const tier = getTier(emp.active_points);
+        const boundary = nextTierBoundary(emp.active_points);
+        const cardStyle = risk ? { ...s.card, ...s.cardAtRisk } : s.card;
+
+        return (
+          <div key={emp.id} style={cardStyle}>
+            <button style={s.name} onClick={() => onEmployeeClick(emp.id)}>
+              {emp.name}
+            </button>
+            {risk && (
+              <div style={s.atRiskBadge}>
+                ⚠ {boundary - emp.active_points} pt{boundary - emp.active_points > 1 ? 's' : ''} to {getTier(boundary).label.split('—')[0].trim()}
+              </div>
+            )}
+
+            <div style={{ ...s.row, marginTop: '12px' }}>
+              <span style={s.label}>Tier / Standing</span>
+              <span style={s.value}><CpasBadge points={emp.active_points} /></span>
+            </div>
+
+            <div style={s.row}>
+              <span style={s.label}>Active Points</span>
+              <span style={{ ...s.points, color: tier.color }}>{emp.active_points}</span>
+            </div>
+
+            <div style={s.row}>
+              <span style={s.label}>90-Day Violations</span>
+              <span style={s.value}>{emp.violation_count}</span>
+            </div>
+
+            {emp.department && (
+              <div style={s.row}>
+                <span style={s.label}>Department</span>
+                <span style={{ ...s.value, color: '#c0c2d6' }}>{emp.department}</span>
+              </div>
+            )}
+
+            {emp.supervisor && (
+              <div style={{ ...s.row, ...s.rowLast }}>
+                <span style={s.label}>Supervisor</span>
+                <span style={{ ...s.value, color: '#c0c2d6' }}>{emp.supervisor}</span>
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

client/src/components/TierWarning.jsx

@@ -17,14 +17,15 @@ export default function TierWarning({ currentPoints, addingPoints }) {
 
     return (
         <div style={{
-            background: '#fff3cd',
+            background: '#3b2e00',
-            border: '2px solid #ffc107',
+            border: '2px solid #d4af37',
             borderRadius: '6px',
             padding: '12px 16px',
             margin: '12px 0',
             fontSize: '13px',
+            color: '#ffdf8a',
         }}>
-            <strong>⚠ Tier Escalation Warning</strong><br />
+            <strong style={{ color: '#ffd666' }}>⚠ Tier Escalation Warning</strong><br />
             Adding <strong>{addingPoints} point{addingPoints !== 1 ? 's' : ''}</strong> will move this employee
             from <strong>{current.label}</strong> to <strong>{projected.label}</strong>.
             {tierUp && (

client/src/components/ViolationForm.jsx

@@ -1,10 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import axios from 'axios';
 import { violationData, violationGroups } from '../data/violations';
 import useEmployeeIntelligence from '../hooks/useEmployeeIntelligence';
 import CpasBadge from './CpasBadge';
 import TierWarning from './TierWarning';
 import ViolationHistory from './ViolationHistory';
+import ViolationTypeModal from './ViolationTypeModal';
 import { useToast } from './ToastProvider';
 import { DEPARTMENTS } from '../data/departments';
 
@@ -46,14 +47,72 @@ export default function ViolationForm() {
   const [status,       setStatus]       = useState(null);
   const [lastViolId,   setLastViolId]   = useState(null);
   const [pdfLoading,   setPdfLoading]   = useState(false);
+  const [customTypes,  setCustomTypes]  = useState([]);
+  const [typeModal,    setTypeModal]    = useState(null); // null | 'create' | <editing object>
 
   const toast = useToast();
   const intel = useEmployeeIntelligence(form.employeeId || null);
 
   useEffect(() => {
     axios.get('/api/employees').then(r => setEmployees(r.data)).catch(() => {});
+    fetchCustomTypes();
   }, []);
 
+  const fetchCustomTypes = () => {
+    axios.get('/api/violation-types').then(r => setCustomTypes(r.data)).catch(() => {});
+  };
+
+  // Build a map of custom types keyed by type_key for fast lookup
+  const customTypeMap = useMemo(() =>
+    Object.fromEntries(customTypes.map(t => [t.type_key, t])),
+    [customTypes]
+  );
+
+  // Merge hardcoded and custom violation groups for the dropdown
+  const mergedGroups = useMemo(() => {
+    const groups = {};
+    // Start with all hardcoded groups
+    Object.entries(violationGroups).forEach(([cat, items]) => {
+      groups[cat] = [...items];
+    });
+    // Add custom types into their respective category, or create new group
+    customTypes.forEach(t => {
+      const item = {
+        key:        t.type_key,
+        name:       t.name,
+        category:   t.category,
+        minPoints:  t.min_points,
+        maxPoints:  t.max_points,
+        chapter:    t.chapter     || '',
+        description: t.description || '',
+        fields:     t.fields,
+        isCustom:   true,
+        customId:   t.id,
+      };
+      if (!groups[t.category]) groups[t.category] = [];
+      groups[t.category].push(item);
+    });
+    return groups;
+  }, [customTypes]);
+
+  // Resolve a violation definition from either the hardcoded registry or custom types
+  const resolveViolation = key => {
+    if (violationData[key]) return violationData[key];
+    const ct = customTypeMap[key];
+    if (ct) return {
+      name:        ct.name,
+      category:    ct.category,
+      chapter:     ct.chapter     || '',
+      description: ct.description || '',
+      minPoints:   ct.min_points,
+      maxPoints:   ct.max_points,
+      fields:      ct.fields,
+      isCustom:    true,
+      customId:    ct.id,
+    };
+    return null;
+  };
+
   useEffect(() => {
     if (!violation || !form.violationType) return;
     const allTime = intel.countsAllTime[form.violationType];
@@ -72,7 +131,7 @@ export default function ViolationForm() {
 
   const handleViolationChange = e => {
     const key = e.target.value;
-    const v   = violationData[key] || null;
+    const v   = resolveViolation(key);
     setViolation(v);
     setForm(prev => ({ ...prev, violationType: key, points: v ? v.minPoints : 1 }));
   };
@@ -196,16 +255,37 @@ export default function ViolationForm() {
           <div style={s.grid}>
 
             <div style={{ ...s.item, ...s.fullCol }}>
-              <label style={s.label}>Violation Type:</label>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '5px' }}>
+                <label style={{ ...s.label, marginBottom: 0 }}>Violation Type:</label>
+                <div style={{ display: 'flex', gap: '6px' }}>
+                  {violation?.isCustom && (
+                    <button
+                      type="button"
+                      onClick={() => setTypeModal(customTypeMap[form.violationType])}
+                      style={{ fontSize: '11px', padding: '3px 10px', borderRadius: '4px', border: '1px solid #4caf50', background: '#1a2e1a', color: '#4caf50', cursor: 'pointer', fontWeight: 600 }}
+                    >
+                      Edit Type
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    onClick={() => setTypeModal('create')}
+                    style={{ fontSize: '11px', padding: '3px 10px', borderRadius: '4px', border: '1px solid #d4af37', background: '#181200', color: '#ffd666', cursor: 'pointer', fontWeight: 600 }}
+                    title="Add a new custom violation type"
+                  >
+                    + Add Type
+                  </button>
+                </div>
+              </div>
               <select style={s.input} value={form.violationType} onChange={handleViolationChange} required>
                 <option value="">-- Select Violation Type --</option>
-                {Object.entries(violationGroups).map(([group, items]) => (
+                {Object.entries(mergedGroups).map(([group, items]) => (
                   <optgroup key={group} label={group}>
                     {items.map(v => {
                       const prior = priorCount90(v.key);
                       return (
                         <option key={v.key} value={v.key}>
-                          {v.name}{prior > 0 ? ` ★ ${prior}x in 90 days` : ''}
+                          {v.name}{v.isCustom ? ' ✦' : ''}{prior > 0 ? ` ★ ${prior}x in 90 days` : ''}
                         </option>
                       );
                     })}
@@ -216,6 +296,11 @@ export default function ViolationForm() {
               {violation && (
                 <div style={s.contextBox}>
                   <strong>{violation.name}</strong>
+                  {violation.isCustom && (
+                    <span style={{ display: 'inline-block', marginLeft: '8px', padding: '1px 7px', borderRadius: '10px', fontSize: '10px', fontWeight: 700, background: '#1a2e1a', color: '#4caf50', border: '1px solid #4caf50' }}>
+                      Custom
+                    </span>
+                  )}
                   {isRepeat(form.violationType) && form.employeeId && (
                     <span style={s.repeatBadge}>
                       ★ Repeat — {intel.countsAllTime[form.violationType]?.count}x prior
@@ -348,6 +433,40 @@ export default function ViolationForm() {
         </div>
       )}
 
+      {typeModal && (
+        <ViolationTypeModal
+          editing={typeModal === 'create' ? null : typeModal}
+          onClose={() => setTypeModal(null)}
+          onSaved={saved => {
+            fetchCustomTypes();
+            setTypeModal(null);
+            // Auto-select the newly created type; do nothing on delete (saved === null)
+            if (saved) {
+              const v = {
+                name:        saved.name,
+                category:    saved.category,
+                chapter:     saved.chapter     || '',
+                description: saved.description || '',
+                minPoints:   saved.min_points,
+                maxPoints:   saved.max_points,
+                fields:      saved.fields,
+                isCustom:    true,
+                customId:    saved.id,
+              };
+              setViolation(v);
+              setForm(prev => ({ ...prev, violationType: saved.type_key, points: saved.min_points }));
+            } else {
+              // Type was deleted — clear selection if it was the active type
+              setForm(prev => {
+                const stillExists = violationData[prev.violationType] || false;
+                return stillExists ? prev : { ...prev, violationType: '', points: 1 };
+              });
+              setViolation(null);
+            }
+          }}
+        />
+      )}
+
     </div>
   );
 }

client/src/components/ViolationTypeModal.jsx

@@ -0,0 +1,292 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useToast } from './ToastProvider';
+
+// Existing hardcoded categories — used for datalist autocomplete
+const KNOWN_CATEGORIES = [
+  'Attendance & Punctuality',
+  'Administrative Integrity',
+  'Financial Stewardship',
+  'Operational Response',
+  'Professional Conduct',
+  'Work From Home',
+  'Safety & Security',
+];
+
+const CONTEXT_FIELDS = [
+  { key: 'time',        label: 'Incident Time' },
+  { key: 'minutes',     label: 'Minutes Late' },
+  { key: 'amount',      label: 'Amount / Value' },
+  { key: 'location',    label: 'Location / Context' },
+  { key: 'description', label: 'Additional Details' },
+];
+
+const s = {
+  overlay:   { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px' },
+  modal:     { background: '#111217', border: '1px solid #2a2b3a', borderRadius: '10px', width: '100%', maxWidth: '620px', maxHeight: '90vh', overflowY: 'auto', padding: '32px' },
+  title:     { color: '#f8f9fa', fontSize: '20px', fontWeight: 700, marginBottom: '24px', borderBottom: '1px solid #2a2b3a', paddingBottom: '12px' },
+  label:     { fontWeight: 600, color: '#e5e7f1', marginBottom: '5px', fontSize: '13px', display: 'block' },
+  input:     { width: '100%', padding: '10px', border: '1px solid #333544', borderRadius: '4px', fontSize: '14px', fontFamily: 'inherit', background: '#050608', color: '#f8f9fa', boxSizing: 'border-box' },
+  textarea:  { width: '100%', padding: '10px', border: '1px solid #333544', borderRadius: '4px', fontSize: '13px', fontFamily: 'inherit', background: '#050608', color: '#f8f9fa', resize: 'vertical', minHeight: '80px', boxSizing: 'border-box' },
+  group:     { marginBottom: '18px' },
+  hint:      { fontSize: '11px', color: '#9ca0b8', marginTop: '4px', fontStyle: 'italic' },
+  row:       { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px' },
+  toggle:    { display: 'flex', gap: '8px', marginTop: '6px' },
+  toggleBtn: (active) => ({
+    padding: '7px 18px', borderRadius: '4px', fontSize: '13px', fontWeight: 600, cursor: 'pointer', border: '1px solid',
+    background: active ? '#d4af37' : '#050608',
+    color:      active ? '#000'    : '#9ca0b8',
+    borderColor: active ? '#d4af37' : '#333544',
+  }),
+  fieldGrid: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px', marginTop: '8px' },
+  checkbox:  { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px', color: '#d1d3e0', cursor: 'pointer' },
+  btnRow:    { display: 'flex', gap: '12px', justifyContent: 'flex-end', marginTop: '28px', paddingTop: '16px', borderTop: '1px solid #2a2b3a' },
+  btnSave:   { padding: '10px 28px', fontSize: '14px', fontWeight: 600, border: 'none', borderRadius: '6px', cursor: 'pointer', background: 'linear-gradient(135deg, #d4af37 0%, #ffdf8a 100%)', color: '#000' },
+  btnDanger: { padding: '10px 18px', fontSize: '14px', fontWeight: 600, border: '1px solid #721c24', borderRadius: '6px', cursor: 'pointer', background: '#3c1114', color: '#ffb3b8' },
+  btnCancel: { padding: '10px 18px', fontSize: '14px', fontWeight: 600, border: '1px solid #333544', borderRadius: '6px', cursor: 'pointer', background: '#050608', color: '#f8f9fa' },
+  section:   { background: '#181924', border: '1px solid #2a2b3a', borderRadius: '6px', padding: '16px', marginBottom: '18px' },
+  secTitle:  { color: '#d4af37', fontSize: '13px', fontWeight: 700, marginBottom: '12px', textTransform: 'uppercase', letterSpacing: '0.05em' },
+  customBadge: { display: 'inline-block', marginLeft: '8px', padding: '1px 7px', borderRadius: '10px', fontSize: '10px', fontWeight: 700, background: '#1a2e1a', color: '#4caf50', border: '1px solid #4caf50', verticalAlign: 'middle' },
+};
+
+const EMPTY = {
+  name: '', category: '', chapter: '', description: '',
+  pointType: 'fixed',   // 'fixed' | 'sliding'
+  fixedPoints: 1,
+  minPoints: 1,
+  maxPoints: 5,
+  fields: ['description'],
+};
+
+export default function ViolationTypeModal({ onClose, onSaved, editing = null }) {
+  const [form,    setForm]    = useState(EMPTY);
+  const [saving,  setSaving]  = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const toast = useToast();
+
+  // Populate form when editing an existing type
+  useEffect(() => {
+    if (editing) {
+      const isSliding = editing.min_points !== editing.max_points;
+      setForm({
+        name:        editing.name,
+        category:    editing.category,
+        chapter:     editing.chapter     || '',
+        description: editing.description || '',
+        pointType:   isSliding ? 'sliding' : 'fixed',
+        fixedPoints: isSliding ? editing.min_points : editing.min_points,
+        minPoints:   editing.min_points,
+        maxPoints:   editing.max_points,
+        fields:      editing.fields || ['description'],
+      });
+    }
+  }, [editing]);
+
+  const set = (key, val) => setForm(prev => ({ ...prev, [key]: val }));
+
+  const toggleField = key => {
+    setForm(prev => ({
+      ...prev,
+      fields: prev.fields.includes(key)
+        ? prev.fields.filter(f => f !== key)
+        : [...prev.fields, key],
+    }));
+  };
+
+  const handleSave = async () => {
+    if (!form.name.trim()) { toast.warning('Violation name is required.'); return; }
+    if (!form.category.trim()) { toast.warning('Category is required.'); return; }
+
+    const minPts = form.pointType === 'fixed' ? parseInt(form.fixedPoints) || 1 : parseInt(form.minPoints) || 1;
+    const maxPts = form.pointType === 'fixed' ? minPts                           : parseInt(form.maxPoints) || 1;
+
+    if (maxPts < minPts) { toast.warning('Max points must be >= min points.'); return; }
+    if (form.fields.length === 0) { toast.warning('Select at least one context field.'); return; }
+
+    const payload = {
+      name:        form.name.trim(),
+      category:    form.category.trim(),
+      chapter:     form.chapter.trim()     || null,
+      description: form.description.trim() || null,
+      min_points:  minPts,
+      max_points:  maxPts,
+      fields:      form.fields,
+    };
+
+    setSaving(true);
+    try {
+      let saved;
+      if (editing) {
+        const res = await axios.put(`/api/violation-types/${editing.id}`, payload);
+        saved = res.data;
+        toast.success(`"${saved.name}" updated.`);
+      } else {
+        const res = await axios.post('/api/violation-types', payload);
+        saved = res.data;
+        toast.success(`"${saved.name}" added to violation types.`);
+      }
+      onSaved(saved);
+    } catch (err) {
+      toast.error(err.response?.data?.error || err.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!editing) return;
+    if (!window.confirm(`Delete "${editing.name}"? This cannot be undone and will fail if any violations reference this type.`)) return;
+    setDeleting(true);
+    try {
+      await axios.delete(`/api/violation-types/${editing.id}`);
+      toast.success(`"${editing.name}" deleted.`);
+      onSaved(null); // null signals a deletion to the parent
+    } catch (err) {
+      toast.error(err.response?.data?.error || err.message);
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  return (
+    <div style={s.overlay} onClick={e => e.target === e.currentTarget && onClose()}>
+      <div style={s.modal}>
+        <div style={s.title}>
+          {editing ? 'Edit Violation Type' : 'Add Violation Type'}
+          {editing && <span style={s.customBadge}>CUSTOM</span>}
+        </div>
+
+        {/* Basic Info */}
+        <div style={s.section}>
+          <div style={s.secTitle}>Violation Definition</div>
+
+          <div style={s.group}>
+            <label style={s.label}>Violation Name *</label>
+            <input
+              style={s.input}
+              type="text"
+              value={form.name}
+              onChange={e => set('name', e.target.value)}
+              placeholder="e.g. Unauthorized System Access"
+            />
+          </div>
+
+          <div style={s.group}>
+            <label style={s.label}>Category *</label>
+            <input
+              style={s.input}
+              type="text"
+              list="vt-categories"
+              value={form.category}
+              onChange={e => set('category', e.target.value)}
+              placeholder="Select existing or type new category"
+            />
+            <datalist id="vt-categories">
+              {KNOWN_CATEGORIES.map(c => <option key={c} value={c} />)}
+            </datalist>
+            <div style={s.hint}>Choose an existing category or type a new one to create a new group in the dropdown.</div>
+          </div>
+
+          <div style={s.group}>
+            <label style={s.label}>Handbook Reference / Chapter</label>
+            <input
+              style={s.input}
+              type="text"
+              value={form.chapter}
+              onChange={e => set('chapter', e.target.value)}
+              placeholder="e.g. Chapter 4, Section 6"
+            />
+          </div>
+
+          <div style={s.group}>
+            <label style={s.label}>Description / Reference Text</label>
+            <textarea
+              style={s.textarea}
+              value={form.description}
+              onChange={e => set('description', e.target.value)}
+              placeholder="Paste the relevant handbook language or describe the infraction in plain terms..."
+            />
+            <div style={s.hint}>Shown in the context box on the violation form and printed on the PDF.</div>
+          </div>
+        </div>
+
+        {/* Point Assignment */}
+        <div style={s.section}>
+          <div style={s.secTitle}>Point Assignment</div>
+
+          <label style={s.label}>Point Type</label>
+          <div style={s.toggle}>
+            <button type="button" style={s.toggleBtn(form.pointType === 'fixed')}   onClick={() => set('pointType', 'fixed')}>Fixed</button>
+            <button type="button" style={s.toggleBtn(form.pointType === 'sliding')} onClick={() => set('pointType', 'sliding')}>Sliding Range</button>
+          </div>
+          <div style={{ ...s.hint, marginTop: '6px' }}>
+            Fixed = exact value every time. Sliding = supervisor adjusts within a min/max range.
+          </div>
+
+          {form.pointType === 'fixed' ? (
+            <div style={{ ...s.group, marginTop: '14px' }}>
+              <label style={s.label}>Points (Fixed)</label>
+              <input
+                style={{ ...s.input, width: '120px' }}
+                type="number" min="1" max="30"
+                value={form.fixedPoints}
+                onChange={e => set('fixedPoints', e.target.value)}
+              />
+            </div>
+          ) : (
+            <div style={{ ...s.row, marginTop: '14px' }}>
+              <div style={s.group}>
+                <label style={s.label}>Min Points</label>
+                <input
+                  style={s.input}
+                  type="number" min="1" max="30"
+                  value={form.minPoints}
+                  onChange={e => set('minPoints', e.target.value)}
+                />
+              </div>
+              <div style={s.group}>
+                <label style={s.label}>Max Points</label>
+                <input
+                  style={s.input}
+                  type="number" min="1" max="30"
+                  value={form.maxPoints}
+                  onChange={e => set('maxPoints', e.target.value)}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Context Fields */}
+        <div style={s.section}>
+          <div style={s.secTitle}>Context Fields</div>
+          <div style={s.hint}>Select which additional fields appear on the violation form for this type.</div>
+          <div style={s.fieldGrid}>
+            {CONTEXT_FIELDS.map(({ key, label }) => (
+              <label key={key} style={s.checkbox}>
+                <input
+                  type="checkbox"
+                  checked={form.fields.includes(key)}
+                  onChange={() => toggleField(key)}
+                />
+                {label}
+              </label>
+            ))}
+          </div>
+        </div>
+
+        <div style={s.btnRow}>
+          {editing && (
+            <button type="button" style={s.btnDanger} onClick={handleDelete} disabled={deleting}>
+              {deleting ? 'Deleting…' : 'Delete Type'}
+            </button>
+          )}
+          <button type="button" style={s.btnCancel} onClick={onClose}>Cancel</button>
+          <button type="button" style={s.btnSave}   onClick={handleSave} disabled={saving}>
+            {saving ? 'Saving…' : editing ? 'Save Changes' : 'Add Violation Type'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/styles/mobile.css

@@ -0,0 +1,113 @@
+/* Mobile-Responsive Utilities for CPAS Tracker */
+/* Target: Standard phones 375px+ with graceful degradation */
+
+/* Base responsive utilities */
+@media (max-width: 768px) {
+  /* Hide scrollbars but keep functionality */
+  * {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Touch-friendly tap targets (min 44px) */
+  button, a, input, select {
+    min-height: 44px;
+  }
+
+  /* Improve form input sizing on mobile */
+  input, select, textarea {
+    font-size: 16px !important; /* Prevents iOS zoom on focus */
+  }
+}
+
+/* Tablet and below */
+@media (max-width: 1024px) {
+  .hide-tablet {
+    display: none !important;
+  }
+}
+
+/* Mobile portrait and landscape */
+@media (max-width: 768px) {
+  .hide-mobile {
+    display: none !important;
+  }
+
+  .mobile-full-width {
+    width: 100% !important;
+  }
+
+  .mobile-text-center {
+    text-align: center !important;
+  }
+
+  .mobile-no-padding {
+    padding: 0 !important;
+  }
+
+  .mobile-small-padding {
+    padding: 12px !important;
+  }
+
+  /* Stack flex containers vertically */
+  .mobile-stack {
+    flex-direction: column !important;
+  }
+
+  /* Allow horizontal scroll for tables */
+  .mobile-scroll-x {
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Card-based layout helpers */
+  .mobile-card {
+    display: block !important;
+    padding: 16px;
+    margin-bottom: 12px;
+    border-radius: 8px;
+    background: #181924;
+    border: 1px solid #2a2b3a;
+  }
+
+  .mobile-card-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 0;
+    border-bottom: 1px solid #1c1d29;
+  }
+
+  .mobile-card-row:last-child {
+    border-bottom: none;
+  }
+
+  .mobile-card-label {
+    font-weight: 600;
+    color: #9ca0b8;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .mobile-card-value {
+    font-weight: 600;
+    color: #f8f9fa;
+    text-align: right;
+  }
+}
+
+/* Small mobile phones */
+@media (max-width: 480px) {
+  .hide-small-mobile {
+    display: none !important;
+  }
+}
+
+/* Utility for sticky positioning on mobile */
+@media (max-width: 768px) {
+  .mobile-sticky-top {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: #000000;
+  }
+}

db/database.js

@@ -60,6 +60,23 @@ db.exec(`CREATE TABLE IF NOT EXISTS audit_log (
     created_at   DATETIME DEFAULT CURRENT_TIMESTAMP
 )`);
 
+// ── Feature: Custom Violation Types ──────────────────────────────────────────
+// Persisted violation type definitions created via the UI. type_key is prefixed
+// with 'custom_' to prevent collisions with hardcoded violation keys.
+db.exec(`CREATE TABLE IF NOT EXISTS violation_types (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    type_key    TEXT    NOT NULL UNIQUE,
+    name        TEXT    NOT NULL,
+    category    TEXT    NOT NULL DEFAULT 'Custom',
+    chapter     TEXT,
+    description TEXT,
+    min_points  INTEGER NOT NULL DEFAULT 1,
+    max_points  INTEGER NOT NULL DEFAULT 1,
+    fields      TEXT    NOT NULL DEFAULT '["description"]',
+    created_at  DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at  DATETIME DEFAULT CURRENT_TIMESTAMP
+)`);
+
 // Recreate view so it always filters negated rows
 db.exec(`DROP VIEW IF EXISTS active_cpas_scores;
 CREATE VIEW active_cpas_scores AS

server.js

@@ -29,8 +29,19 @@ function audit(action, entityType, entityId, performedBy, details) {
   }
 }
 
+// ── Version info (written by Dockerfile at build time) ───────────────────────
+// Falls back to { sha: 'dev' } when running outside a Docker build (local dev).
+let BUILD_VERSION = { sha: 'dev', shortSha: 'dev', buildTime: null };
+try {
+  BUILD_VERSION = require('./client/dist/version.json');
+} catch (_) { /* pre-build or local dev — stub values are fine */ }
+
 // Health
-app.get('/api/health', (req, res) => res.json({ status: 'ok', timestamp: new Date().toISOString() }));
+app.get('/api/health', (req, res) => res.json({
+  status:    'ok',
+  timestamp: new Date().toISOString(),
+  version:   BUILD_VERSION,
+}));
 
 // ── Employees ────────────────────────────────────────────────────────────────
 app.get('/api/employees', (req, res) => {
@@ -399,6 +410,100 @@ app.get('/api/audit', (req, res) => {
   res.json(db.prepare(sql).all(...args));
 });
 
+// ── Custom Violation Types ────────────────────────────────────────────────────
+// Persisted violation type definitions stored in violation_types table.
+// type_key is auto-generated (custom_<slug>) to avoid collisions with hardcoded keys.
+
+app.get('/api/violation-types', (req, res) => {
+  const rows = db.prepare('SELECT * FROM violation_types ORDER BY category ASC, name ASC').all();
+  res.json(rows.map(r => ({ ...r, fields: JSON.parse(r.fields) })));
+});
+
+app.post('/api/violation-types', (req, res) => {
+  const { name, category, chapter, description, min_points, max_points, fields, created_by } = req.body;
+  if (!name || !name.trim()) return res.status(400).json({ error: 'name is required' });
+
+  const minPts = parseInt(min_points) || 1;
+  const maxPts = parseInt(max_points) || minPts;
+  if (maxPts < minPts) return res.status(400).json({ error: 'max_points must be >= min_points' });
+
+  // Generate a unique type_key from the name, prefixed with 'custom_'
+  const base = 'custom_' + name.trim().toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');
+  let typeKey = base;
+  let suffix  = 2;
+  while (db.prepare('SELECT id FROM violation_types WHERE type_key = ?').get(typeKey)) {
+    typeKey = `${base}_${suffix++}`;
+  }
+
+  try {
+    const result = db.prepare(`
+      INSERT INTO violation_types (type_key, name, category, chapter, description, min_points, max_points, fields)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+    `).run(
+      typeKey,
+      name.trim(),
+      (category || 'Custom').trim(),
+      chapter     || null,
+      description || null,
+      minPts,
+      maxPts,
+      JSON.stringify(fields && fields.length ? fields : ['description'])
+    );
+    const row = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(result.lastInsertRowid);
+    audit('violation_type_created', 'violation_type', result.lastInsertRowid, created_by || null, { name: row.name, category: row.category });
+    res.status(201).json({ ...row, fields: JSON.parse(row.fields) });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+app.put('/api/violation-types/:id', (req, res) => {
+  const id  = parseInt(req.params.id);
+  const row = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(id);
+  if (!row) return res.status(404).json({ error: 'Violation type not found' });
+
+  const { name, category, chapter, description, min_points, max_points, fields, updated_by } = req.body;
+  if (!name || !name.trim()) return res.status(400).json({ error: 'name is required' });
+
+  const minPts = parseInt(min_points) || 1;
+  const maxPts = parseInt(max_points) || minPts;
+  if (maxPts < minPts) return res.status(400).json({ error: 'max_points must be >= min_points' });
+
+  db.prepare(`
+    UPDATE violation_types
+    SET name=?, category=?, chapter=?, description=?, min_points=?, max_points=?, fields=?, updated_at=CURRENT_TIMESTAMP
+    WHERE id=?
+  `).run(
+    name.trim(),
+    (category || 'Custom').trim(),
+    chapter     || null,
+    description || null,
+    minPts,
+    maxPts,
+    JSON.stringify(fields && fields.length ? fields : ['description']),
+    id
+  );
+
+  const updated = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(id);
+  audit('violation_type_updated', 'violation_type', id, updated_by || null, { name: updated.name, category: updated.category });
+  res.json({ ...updated, fields: JSON.parse(updated.fields) });
+});
+
+app.delete('/api/violation-types/:id', (req, res) => {
+  const id  = parseInt(req.params.id);
+  const row = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(id);
+  if (!row) return res.status(404).json({ error: 'Violation type not found' });
+
+  const usage = db.prepare('SELECT COUNT(*) as count FROM violations WHERE violation_type = ?').get(row.type_key);
+  if (usage.count > 0) {
+    return res.status(409).json({ error: `Cannot delete: ${usage.count} violation(s) reference this type. Negate those violations first.` });
+  }
+
+  db.prepare('DELETE FROM violation_types WHERE id = ?').run(id);
+  audit('violation_type_deleted', 'violation_type', id, null, { name: row.name, type_key: row.type_key });
+  res.json({ ok: true });
+});
+
 // ── PDF endpoint ─────────────────────────────────────────────────────────────
 app.get('/api/violations/:id/pdf', async (req, res) => {
   try {