# CMS Admin Panel — Reproducible Prompt

Build a make-believe CMS admin panel in a single `index.html` file.

## Theme
Nordic. Clean, minimal, cool-toned. Soft whites (`#FAFAF9`, `#F5F5F4`), pale slate greys (`#9CA3AF`, `#6B7280`), muted teals (`#5E8C7F`, `#7BA598`), warm charcoal (`#2E2E2E`, `#3A3A3A`). Use Nordic-inspired spacing and typography. No serif fonts.

## Routing
Hash-based SPA routing (e.g., `#/dashboard`, `#/posts`, `#/pages`, `#/categories`, `#/tags`, `#/media`, `#/comments`, `#/users`). Router parses `window.location.hash`, renders the matching view into `#app-root`. Default fallback to `#/dashboard` on invalid/empty hash.

## State
- `sessionStorage` for persistent session state (current user, sidebar collapsed, active filters).
- Seed data loaded into sessionStorage on first load if keys are absent.
- Realistic seed data: 50 posts, 30 pages, 15 categories, 25 tags, 40 media items, 60 comments, 20 users.

## Modules & Views

### Dashboard (`#/dashboard`)
- Summary cards: Total Posts, Total Pages, Pending Comments, Active Users.
- Mini charts (CSS-only bar charts) for post activity over the last 7 days.
- Recent activity feed list.

### Posts (`#/posts`)
- Data table with columns: Title, Author, Categories, Tags, Status (Published/Draft), Date, Actions (Edit/Delete).
- Search filter, status filter, category filter.
- Pagination (10 per page).
- Add/Edit modal with rich text editor.

### Pages (`#/pages`)
- Similar table structure to Posts.
- Columns: Title, Author, Template, Status, Date, Actions.

### Categories (`#/categories`)
- Table with Name, Slug, Description, Count, Actions.
- Add/Edit/Delete.

### Tags (`#/tags`)
- Table with Name, Slug, Description, Count, Actions.
- Add/Edit/Delete.

### Media (`#/media`)
- Grid of fake media thumbnails with filename, type, size.
- Upload simulation (adds a new item to the grid).
- Lightbox modal on click.

### Comments (`#/comments`)
- Table with Author, Comment, Post/Page, Status (Pending/Approved/Spam), Date, Actions.
- Bulk approve/spam/delete.

### Users (`#/users`)
- Table with Name, Email, Role, Status, Last Active, Actions.
- Add/Edit/Delete user modal.

## Rich Text Editor
- Custom-built contenteditable-based rich text editor for Posts/Pages modals.
- Toolbar: Bold, Italic, Underline, Heading 1/2/3, Blockquote, Unordered List, Ordered List, Link, Clear Formatting.
- Outputs clean HTML.

## Data Tables
- Consistent table component across all list views.
- Sortable columns.
- Row hover effects.
- Checkbox selection for bulk actions where applicable.

## Modals
- Centered modal overlay with semi-transparent backdrop.
- Modal animations (fade + scale).
- Form inputs: text, textarea, select, multiselect (chips for tags/categories).

## Toasts
- Global toast notification system.
- Success (teal), Error (coral), Info (slate), Warning (amber).
- Auto-dismiss after 4 seconds with progress bar.
- Position: top-right.

## UI Shell
- Fixed top navbar: logo + search bar + user avatar dropdown (Profile, Settings, Logout).
- Left sidebar: icon + label navigation links to each module.
- Collapsible sidebar.
- Main content area with page title and action bar.
- Breadcrumb trail.

## Seed Data
Faker-like realistic data. Authors should be real-sounding names. Post titles should be blog-article style. Comments should sound like real feedback. User roles: Admin, Editor, Author, Contributor.

## Technical Constraints
- Single HTML file. No external images. All styling in `<style>`.
- No external dependencies. Pure HTML/CSS/JS.
- Responsive: sidebar collapses to hamburger on screens under 768px.
- Hostable on CodePen, Vercel, or Cloudflare Pages.