itpp-infrastructure/projects/ops-portal-runcloud-design-brief.md

# Ops Portal Redesign — RunCloud-Inspired Design Brief

**Author:** Hermes Agent (Research + Design Synthesis)
**Date:** 2026-08-01
**Target:** ops.itpropartner.com (IT Pro Partner Operations Portal)
**Reference:** RunCloud Server Management Dashboard (v1 classic + v2 beta)
**Status:** Design Brief / Implementation Spec

---

## Table of Contents
1. [Executive Summary](#1-executive-summary)
2. [RunCloud UI Research Findings](#2-runcloud-ui-research-findings)
3. [Current Ops Portal Analysis](#3-current-ops-portal-analysis)
4. [Proposed Design System](#4-proposed-design-system)
5. [Layout Architecture](#5-layout-architecture)
6. [Component Patterns to Adopt](#6-component-patterns-to-adopt)
7. [Page-by-Page Redesign Specifications](#7-page-by-page-redesign-specifications)
8. [Functionality Gaps & New Features](#8-functionality-gaps--new-features)
9. [Implementation Phases](#9-implementation-phases)
10. [CSS Custom Properties Reference](#10-css-custom-properties-reference)

---

## 1. Executive Summary

This design brief provides a comprehensive specification for rebuilding the IT Pro Partner Operations Portal (ops.itpropartner.com) with a design language inspired by RunCloud's server management dashboard. RunCloud's UI has evolved through two major design languages (v1 dark classic and v2 modern), and both provide rich patterns applicable to our Ops Portal.

**Key transformation:** Move from a top-nav, full-width dark layout to a sidebar-first layout with a dark sidebar, content zone, rich data visualization cards, tabbed settings pages, global search, and batch-action capabilities.

**Primary goals:**
- Adopt RunCloud's professional dark admin aesthetic with sidebar navigation
- Introduce visual resource monitoring (donut charts, sparklines, progress bars)
- Add global search across all servers, services, and resources
- Implement batch actions (restart multiple services, run backups across servers)
- Build visual configuration editors for server/service settings
- Maintain mobile responsiveness and the existing auth integration with auth.itpropartner.com

---

## 2. RunCloud UI Research Findings

### 2.1 Methodology

Research was conducted through:
- Web searches for RunCloud dashboard screenshots, reviews, and walkthroughs
- Vision analysis of official RunCloud documentation screenshots (disk usage, server health, SSH config)
- Extraction of RunCloud's blog announcements about Dashboard v2 beta
- Third-party review articles describing UI patterns
- Comparison with similar admin panels (Plesk, cPanel, ServerAvatar)

### 2.2 RunCloud Classic Dashboard (v1 — manage.runcloud.io)

The classic dashboard served as RunCloud's primary interface and is characterized by:

**Color Palette (Classic Dark Theme):**
| Element | Hex Code | Usage |
|---------|----------|-------|
| Page background | `#141824` | Main content area background |
| Card surfaces | `#1E2232`–`#222738` | Elevated cards, stat panels |
| Sidebar background | `#0E1119`–`#131621` | Deepest layer, sidebar |
| Primary accent | `#3B82F6` | Active nav, selected tabs, buttons, badges |
| Chart line / donut | `#2DD4BF` (teal/cyan) | Sparklines, donut fills, area charts |
| Success / Healthy | `#22C55E` | Status badges, healthy indicators |
| Warning | `#F59E0B` (amber) | Warning badges, high-usage bars |
| Danger / Error | `#EF4444` | Error states, critical alerts |
| Primary text | `#FFFFFF` | Headings, metric values |
| Secondary text | `#94A3B8` | Labels, descriptions |
| Muted text | `#64748B` | Helper text, breadcrumbs |
| Border / divider | `#2D3344` | Card borders, gridlines |
| Sidebar icon color | `#A0AEC0` | Inactive nav items |
| Sidebar active bg | `rgba(59,130,246,0.12)` | Active navigation row |

**Layout Structure:**
- Fixed left sidebar (~220px) + fluid main content area
- Top bar: RunCloud logo + global search (`Ctrl+K`) + notification bell + chat bubble + user avatar
- Breadcrumb trail: `Servers > server-name > Section`
- Page title: Large bold white heading with subtitle in gray

**Stat Cards (4-column grid):**
- Each card: dark elevated surface (~`#1E2232`), generous rounded corners (10–12px), 20–24px padding
- Left side: large bold metric value (28–36px), label in small gray (12–14px), colored status badge
- Right side: visual element — donut chart, sparkline, or horizontal progress bar
- Donut chart: thin ring (6–8px), teal/cyan fill, dark track, center transparent
- Sparkline: miniature area chart, teal stroke + gradient fill, no axes
- Progress bar: rounded bar, dark track, amber fill at warning, rounded caps

**Time Range Tabs:**
- Pill-shaped tab group: `1 Hour | 3 Hours | 6 Hours | 12 Hours | 1 Day | 3 Days | 7 Days`
- Active tab: blue fill (`#3B82F6`) with white text
- Inactive: outlined, dark, gray text
- Font: 13–14px, medium weight

**Detail Panel (full-width chart):**
- Full-width card below stat cards
- Large line/area chart with dark background, subtle horizontal gridlines
- Teal line with gradient fill, dot markers at data points
- X-axis: time labels, Y-axis: percentage range
- Below chart: small I/O metric blocks with inline sparklines

**Sidebar Details:**
- Deepest dark (`#0E1119`–`#131621`)
- Collapsible sections: "Servers" (with chevron), "Team", "Settings"
- Active server shown under "Servers" section with submenu items
- Active item: 3–4px blue (`#3B82F6`) left border indicator + lighter background
- Icons: 24px stroke-based icons in `#A0AEC0` (active `#FFFFFF`)
- Font: Inter, 14px, regular weight
- Row height: ~44px, 16px left padding
- Hover state: `rgba(255,255,255,0.05)` background
- "New" badge: small blue pill with white text (10–11px)
- Bottom section: plan indicator + Upgrade button (green) + user identity

### 2.3 RunCloud Dashboard v2 Beta (new.runcloud.io — 2024)

The v2 redesign introduced a significant shift while maintaining some core patterns:

**Key Changes in v2:**
- **Accent color changed from blue to purple:** `#7C4DFF` (vibrant purple)
- **Content area shifted to light background:** `#FFFFFF` (cards white with shadows)
- Sidebar remained dark: `#1B2432`
- **Cards:** White background, no border, box-shadow for elevation
  - Shadow: `0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06)`
  - Border-radius: `8px` (0.5rem), padding: `24px`
- **Global Search:** Prominently placed with `Ctrl+K` shortcut, search across servers, apps, databases
- **Server Tags:** Color-coded tags for organizing servers
- **Web Applications:** Top-level menu showing apps across all servers
- **Recently Viewed:** Quick-access to recent servers and web apps
- **Tabbed Settings:** Server settings consolidated with tab navigation (SSH keys, login notification, session, config)
- **Toggle Switches:** Replacing checkboxes — track `#CBD5E0` (off) → `#7C4DFF` (on), 44×24px, fully rounded
- **Input Fields:** 40px height, 1px `#E2E8F0` border, 6px radius, focus `#7C4DFF` + 3px glow
- **Primary Buttons:** `#7C4DFF` bg, white text, 6px radius, 10px 24px padding, hover darkens to `#6B3DE0`
- **Typography:** Inter font family, 14px body, 20px page titles, 12px helper text
- **Laravel/WordPress Features:** One-click artisan commands, staging, cloning, Canvas interface
- **Improved Activity Logs:** Sorted by date with better visibility
- **Teams:** Redesigned flow with email invitations

### 2.4 Functional Patterns from RunCloud

**Server Management:**
- One-click actions: Start, Stop, Restart, Console, Edit
- Status dots: green (running) / red (stopped) on server cards
- Resource graphs: CPU, RAM, Disk with time-range selection
- File Manager: web-based with zip/unzip capabilities
- Log Viewer: tail logs in-browser
- SSH configuration: tabbed interface (Settings / Authentication)
- Central SSH utilities in one page with tabs

**Web Application Management:**
- App Library: categorized cards for one-click installs
- Git deployment: informative integration setup
- Database management: visual interface
- Cron job creation: floating modal/panel
- .env file editor: quick shortcut
- Deployment script editor

**Navigation Patterns:**
- Collapsible sidebar sections
- Breadcrumb trail for deep navigation
- Global search (Ctrl+K)
- Active item: colored left border + subtle background
- Sidebar collapses to icon-only on narrow screens
- Server list with tags for organization

**Settings Pages:**
- Tabbed navigation within settings (no page reload)
- Labels above form inputs
- Toggle switches for boolean settings
- Save button right-aligned at bottom of card
- Inline validation with error messages below inputs
- Disabled states: gray background + not-allowed cursor

---

## 3. Current Ops Portal Analysis

### 3.1 Existing Architecture

**Served from:** `/var/www/ops/` via Caddy on Core (152.53.192.33)
**Auth:** Separate auth service at auth.itpropartner.com (JWT-based)
**Data:** Fetches live data from `/data/ops-status.json`

**Files:**
- `css/ops.css` — 1027-line single stylesheet
- `js/utils.js` — 230-line shared utility functions
- `js/app.js` — Dashboard-specific logic
- `nav.html` — Shared navigation partial (not using SSI currently, nav duplicated across pages)
- 10 HTML pages: index, services, servers, network, backups, cron, config, logs, audit, cost

### 3.2 Current Design System

**Color Palette:**
| Variable | Value | Usage |
|----------|-------|-------|
| `--bg-body` | `#0F1628` | Page background |
| `--bg-card` | `#1E293B` | Card backgrounds, nav bar |
| `--bg-elevated` | `#1A2337` | (defined but underused) |
| `--bg-hover` | `#2A3A52` | Hover states |
| `--border-card` | `#2A3A4E` | Card and element borders |
| `--border-active` | `#3D506E` | Active/hover borders |
| `--accent` | `#F59E0B` | **Amber/orange** — primary accent |
| `--accent-hover` | `#D97706` | Darker amber |
| `--text-primary` | `#F1F5F9` | Main text |
| `--text-secondary` | `#94A3B8` | Secondary text |
| `--text-muted` | `#64748B` | Muted/helper text |
| `--green` | `#22C55E` | Success/healthy |
| `--amber` | `#F59E0B` | Warning (same as accent) |
| `--red` | `#EF4444` | Error/danger |
| `--teal` | `#14B8A6` | Info accent |
| `--blue` | `#3B82F6` | Info/secondary accent |

**Current Layout:**
- **Top nav bar** (`ops-nav`): sticky, full-width, 56px height, blur backdrop
  - Brand logo (left), hamburger toggle (mobile), nav links (center), logout (right)
  - Mobile: hamburger opens dropdown below nav
  - Desktop (>768px): horizontal inline links with bottom-border active indicator
- **Content:** `page-wrapper` max-width 1440px, centered, padding: 20-28px
- **Cards:** `--bg-card` background, 1px `--border-card` border, 12px radius, 20px padding, light shadow
- **Health Grid:** `auto-fit, minmax(140px, 1fr)`, large metric values (1.8rem), uppercase labels
- **Tables:** Full-width, sticky headers, clickable rows, hover highlight
- **Buttons:** Primary (amber fill), outline, danger, success variants, 6px radius
- **Status dots:** Colored with glow effect (green glow, red glow)
- **Badges:** Pill-shaped, colored backgrounds with matching text
- **Resource bars:** 8px height, rounded, with label + percentage
- **Toasts:** Slide-in from right, colored left border
- **Confirm dialog:** Modal overlay with blur backdrop

**Typography:**
- System font stack: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif`
- Page titles: 1.4rem (mobile) → 1.6rem (desktop), bold, amber, letter-spacing -0.02em
- Card headers: 0.78rem, uppercase, letter-spacing 0.06em, muted
- Body: 0.82rem in tables, 0.85rem in alerts

**Current Navigation (10 links):**
Dashboard, Services, Servers, Network, Backups, Cron Jobs, Config, Logs, Audit, Costs

### 3.3 Strengths of Current Design

- Clean dark theme with consistent CSS custom properties
- Mobile-responsive with hamburger menu
- JWT-based auth with login overlay
- Good component library: cards, tables, badges, toasts, modals, resource bars
- Live data fetching with refresh
- Status indicators with glow effects
- Good color semantics (green=ok, amber=warning, red=error)

### 3.4 Weaknesses to Address

- **No sidebar:** Top nav limits vertical space and feels dated compared to modern admin panels
- **No global search:** Cannot search across servers, services, or logs
- **Tables are text-heavy:** Servers and services use plain tables instead of visual cards with metrics
- **No resource visualization:** Missing charts, sparklines, donut indicators
- **No batch actions:** Cannot restart multiple services or trigger multiple backups at once
- **No visual config editors:** Config page is likely read-only or text-based
- **Nav duplicated across pages:** nav.html is manually included, not server-side included
- **Logs are probably raw text:** No filtering, search, or log-level coloring
- **No server grouping/tagging:** All servers in flat list
- **Limited dashboard interactivity:** Time-range selection for metrics missing

---

## 4. Proposed Design System

### 4.1 Color Palette (RunCloud-Inspired Dark Theme)

We will adopt a hybrid approach: keep the dark theme (matching our infrastructure aesthetic), but adopt RunCloud's richer color system and the purple or blue accent.

**Recommended palette — dark content area with rich accent:**

| CSS Variable | Hex Code | Usage |
|-------------|----------|-------|
| `--bg-sidebar` | `#0B0E14` | Sidebar background (deepest layer) |
| `--bg-sidebar-hover` | `#1A1F2E` | Sidebar item hover |
| `--bg-sidebar-active` | `rgba(59,130,246,0.12)` | Sidebar active item bg |
| `--bg-body` | `#111620` | Main content area background |
| `--bg-card` | `#1A1F2E` | Card surfaces |
| `--bg-card-hover` | `#21273A` | Card hover state |
| `--bg-input` | `#151A26` | Input/select backgrounds |
| `--bg-elevated` | `#1E2335` | Dropdowns, tooltips, elevated surfaces |
| `--border-default` | `#262D3F` | Card and input borders |
| `--border-active` | `#3B82F6` | Focus/active borders |
| `--border-subtle` | `#1E2538` | Dividers, subtle separators |
| `--accent-primary` | `#3B82F6` | **Primary accent (blue)** — buttons, active nav, links |
| `--accent-primary-hover` | `#2563EB` | Darker blue hover |
| `--accent-primary-glow` | `rgba(59,130,246,0.20)` | Focus rings, glows |
| `--accent-secondary` | `#7C4DFF` | **Purple accent** — alternative actions, secondary highlights |
| `--accent-chart` | `#2DD4BF` | **Teal/cyan** — charts, sparklines, donut fills |
| `--accent-chart-alt` | `#818CF8` | **Indigo** — secondary chart color |
| `--text-primary` | `#F1F5F9` | Primary text, headings |
| `--text-secondary` | `#94A3B8` | Secondary text, descriptions |
| `--text-muted` | `#64748B` | Muted/helper text, placeholders |
| `--text-sidebar` | `#9CA3AF` | Sidebar nav text (inactive) |
| `--text-sidebar-active` | `#FFFFFF` | Sidebar nav text (active) |
| `--green` | `#22C55E` | Success, healthy, running |
| `--green-bg` | `rgba(34,197,94,0.12)` | Success backgrounds |
| `--amber` | `#F59E0B` | Warning, degraded |
| `--amber-bg` | `rgba(245,158,11,0.12)` | Warning backgrounds |
| `--red` | `#EF4444` | Error, stopped, critical |
| `--red-bg` | `rgba(239,68,68,0.12)` | Error backgrounds |
| `--blue` | `#3B82F6` | Info, neutral |
| `--blue-bg` | `rgba(59,130,246,0.12)` | Info backgrounds |
| `--teal` | `#2DD4BF` | Chart accent |
| `--teal-bg` | `rgba(45,212,191,0.12)` | Chart accent backgrounds |

**Note on accent choice:** We're adopting blue (`#3B82F6`) as the primary accent (matching RunCloud classic's proven palette) with purple (`#7C4DFF`) as a secondary accent and teal (`#2DD4BF`) for data visualization. This gives us:
- Blue: Navigation, primary actions, links, selected states
- Purple: Secondary actions, special features, "New" badges
- Teal: All charts, sparklines, donut fills, metric visualization
- Green/Amber/Red: Status semantics (unchanged from current)

### 4.2 Typography

| Usage | Font | Size | Weight | Notes |
|-------|------|------|--------|-------|
| Page title | Inter | 24px (1.5rem) | 700 | Letter-spacing: -0.02em |
| Section heading | Inter | 14px (0.875rem) | 700 | Uppercase, letter-spacing: 0.05em |
| Card metric value | Inter | 32px (2rem) | 800 | Tabular figures, letter-spacing: -0.03em |
| Card label | Inter | 12px (0.75rem) | 600 | Uppercase, letter-spacing: 0.06em |
| Body text | Inter | 14px (0.875rem) | 400 | Line-height: 1.5 |
| Table cell | Inter | 13px (0.8125rem) | 400 | Tabular figures |
| Table header | Inter | 11px (0.6875rem) | 600 | Uppercase, letter-spacing: 0.06em |
| Sidebar item | Inter | 14px (0.875rem) | 500 | Line-height: 1.2 |
| Badge / tag | Inter | 11px (0.6875rem) | 600 | Uppercase, letter-spacing: 0.04em |
| Button text | Inter | 14px (0.875rem) | 600 | — |
| Helper / caption | Inter | 12px (0.75rem) | 400 | — |
| Code / mono | JetBrains Mono | 13px (0.8125rem) | 400 | For IPs, commands, config |

**Font loading strategy:**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
```

With fallback: `'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`

### 4.3 Spacing & Sizing

| Token | Value | Usage |
|-------|-------|-------|
| `--space-xs` | 4px | Tight gaps, icon padding |
| `--space-sm` | 8px | Element gaps, small padding |
| `--space-md` | 12px | Card internal gaps, input gaps |
| `--space-lg` | 16px | Section gaps, card padding |
| `--space-xl` | 24px | Card padding, section margins |
| `--space-2xl` | 32px | Page margins, large gaps |
| `--radius-sm` | 6px | Inputs, buttons, small elements |
| `--radius-md` | 8px | Cards, panels, dialogs |
| `--radius-lg` | 12px | Main cards, stat panels |
| `--radius-full` | 9999px | Pills, badges, toggle switches |

### 4.4 Shadows & Elevation

| Token | Value | Usage |
|-------|-------|-------|
| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.3)` | Cards (subtle elevation) |
| `--shadow-md` | `0 4px 12px rgba(0,0,0,0.4)` | Elevated cards, dropdowns |
| `--shadow-lg` | `0 8px 24px rgba(0,0,0,0.5)` | Modals, dialogs |
| `--shadow-glow-blue` | `0 0 12px rgba(59,130,246,0.15)` | Active/focus glows |
| `--shadow-glow-green` | `0 0 12px rgba(34,197,94,0.15)` | Status dot glows |
| `--shadow-glow-red` | `0 0 12px rgba(239,68,68,0.15)` | Error glows |

---

## 5. Layout Architecture

### 5.1 Global Shell

```
┌──────────────────────────────────────────────────────────────┐
│ ┌──────────┐ ┌──────────────────────────────────────────────┐│
│ │          │ │  TOP BAR: Logo + Global Search + Notif + User ││
│ │ SIDEBAR  │ ├──────────────────────────────────────────────┤│
│ │          │ │                                              ││
│ │  Logo    │ │  BREADCRUMB TRAIL                            ││
│ │  ──────  │ │  PAGE TITLE + ACTIONS                        ││
│ │  Search  │ │                                              ││
│ │  ──────  │ │  ┌──────────────────────────────────────┐   ││
│ │  Nav 1 ▸ │ │  │                                      │   ││
│ │  Nav 2   │ │  │        MAIN CONTENT ZONE              │   ││
│ │  Nav 3   │ │  │  (Cards, Tables, Charts, Forms)       │   ││
│ │  Nav 4   │ │  │                                      │   ││
│ │  Nav 5   │ │  └──────────────────────────────────────┘   ││
│ │  ──────  │ │                                              ││
│ │  Section │ │                                              ││
│ │  ──────  │ │                                              ││
│ │  User    │ │                                              ││
│ └──────────┘ └──────────────────────────────────────────────┘│
└──────────────────────────────────────────────────────────────┘
```

**Sidebar:** Fixed, 240px width (desktop), collapsible to 64px (icon-only)
**Top Bar:** 56px height, spans the full width of the content area (right of sidebar)
**Main Content:** Scrollable, fills remaining viewport, max-width 1400px with auto margins

### 5.2 Sidebar Specification

```
┌──────────────────┐
│ [Logo] ITPP  [◀] │  ← Logo + collapse toggle
├──────────────────┤
│ 🔍 Quick search  │  ← In-sidebar search (or cmd+k global)
├──────────────────┤
│                  │
│ 📊 Dashboard     │  ← Active: blue left border + light bg
│                  │
│ DASHBOARD        │  ← Section header (collapsible)
│ 📈 Overview      │
│ 📋 Activity      │
│                  │
│ INFRASTRUCTURE   │
│ 🖥 Servers    [5]│  ← With count badge
│ ⚙ Services   [12]│
│ 🌐 Network       │
│ 💾 Backups       │
│ ⏰ Cron Jobs     │
│                  │
│ MANAGEMENT       │
│ 📝 Config        │
│ 📄 Logs          │
│ ✓ Audit          │
│ 💰 Costs         │
│                  │
├──────────────────┤
│ 👤 admin@itpp... │  ← User identity
│ ⚙ Settings       │
│ 🚪 Sign Out      │
└──────────────────┘
```

**Sidebar behavior:**
- **Default:** 240px wide, full text + icons
- **Collapsed:** 64px wide, icons only, tooltips on hover
- **Mobile (<768px):** Hidden behind hamburger, slides in as overlay
- **Sections:** Collapsible with chevron indicators
- **Active item:** 3px blue left border + `rgba(59,130,246,0.10)` background + white text
- **Hover:** `#1A1F2E` background, white text
- **Count badges:** Small pill on right side of nav items
- **Server sub-list:** Expandable tree showing individual server names with status dots

### 5.3 Top Bar Specification

```
┌──────────────────────────────────────────────────────────────┐
│ 🔍 Search servers, services, logs...        [Ctrl+K]    🔔 💬 👤│
└──────────────────────────────────────────────────────────────┘
```

**Elements (right-aligned):**
- Global search: `Ctrl+K` shortcut, ⌘ on Mac
- Notification bell: with unread count badge
- User avatar: initials on colored circle, dropdown for Settings / Sign Out

### 5.4 Content Zones

Each page follows this vertical layout within the content area:

1. **Breadcrumb row:** `Home > Section > Subsection` (12px, muted, with chevron separators)
2. **Page header:** Title (24px bold white) + description (14px gray) + action buttons (right-aligned)
3. **Summary bar (optional):** Quick stats in a horizontal pill row
4. **Main content:** Cards, tables, charts — scrollable
5. **Footer (optional):** "Last updated: ..." timestamp

### 5.5 Responsive Breakpoints

| Breakpoint | Width | Sidebar | Content | Layout Changes |
|-----------|-------|---------|---------|----------------|
| Mobile | < 768px | Hidden (hamburger overlay) | Full width | Cards stack 1-col, tables become cards |
| Tablet | 768–1023px | Collapsed (64px, icons only) | Fluid | Cards 2-col, sidebar icons with tooltips |
| Desktop | ≥ 1024px | Full (240px) | Max 1400px centered | Full layout, 4-col card grids |
| Wide | ≥ 1440px | Full (240px) | Max 1400px centered | Extra whitespace on sides |

---

## 6. Component Patterns to Adopt

### 6.1 Stat/Metric Cards

**Pattern from RunCloud:** Each server or resource card shows a large metric value, a label, a status badge, and a visual indicator.

**Specification:**
```css
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);       /* 12px */
  padding: var(--space-xl);              /* 24px */
  display: flex;
  align-items: center;
  gap: var(--space-lg);                  /* 16px */
  transition: border-color 0.2s ease;
}
.stat-card:hover {
  border-color: var(--border-active);
}
.stat-card .stat-left {
  flex: 1;
  min-width: 0;
}
.stat-card .stat-value {
  font-size: 2rem;                       /* 32px */
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-card .stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 4px;
}
.stat-card .stat-visual {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-card .stat-status {
  margin-top: 8px;
}
```

### 6.2 Donut Chart (for disk usage, pass rates)

Lightweight SVG donut chart — no library needed.

```html
<svg viewBox="0 0 64 64" class="donut-chart">
  <circle cx="32" cy="32" r="28" fill="none"
          stroke="var(--border-default)" stroke-width="6"/>
  <circle cx="32" cy="32" r="28" fill="none"
          stroke="var(--accent-chart)" stroke-width="6"
          stroke-dasharray="176 176"           <!-- 2πr = 175.93 -->
          stroke-dashoffset="97.7"             <!-- offset based on % -->
          stroke-linecap="round"
          transform="rotate(-90 32 32)"/>
  <text x="32" y="36" text-anchor="middle"
        fill="var(--text-primary)" font-size="11" font-weight="700">
    44.5%
  </text>
</svg>
```

### 6.3 Sparkline (mini area chart)

SVG-based sparkline for CPU, load, request rate trends.

```html
<svg viewBox="0 0 80 32" class="sparkline" preserveAspectRatio="none">
  <defs>
    <linearGradient id="sparkGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="var(--accent-chart)" stop-opacity="0.3"/>
      <stop offset="100%" stop-color="var(--accent-chart)" stop-opacity="0"/>
    </linearGradient>
  </defs>
  <path d="M0,28 L5,26 L10,22 L15,24 L20,18 L25,20 L30,14 L35,16
           L40,10 L45,12 L50,8 L55,10 L60,6 L65,8 L70,4 L75,6 L80,5"
        fill="url(#sparkGrad)" stroke="var(--accent-chart)"
        stroke-width="1.5" stroke-linejoin="round"/>
  <path d="M0,28 L5,26 ... L80,5"
        fill="none" stroke="var(--accent-chart)"
        stroke-width="1.5" stroke-linejoin="round"/>
</svg>
```

### 6.4 Progress/RAM Bar (with color thresholds)

```css
.progress-bar {
  height: 10px;
  background: var(--bg-body);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar .fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s ease, background 0.3s ease;
}
.fill-low    { background: var(--green); }      /* 0-50% */
.fill-medium { background: var(--amber); }      /* 50-80% */
.fill-high   { background: var(--red); }        /* 80-100% */
```

With label row above: `[Label]  [Percentage]`

### 6.5 Time Range Selector

Pill-shaped tab group for filtering metric time ranges.

```html
<div class="time-tabs">
  <button class="time-tab active">1H</button>
  <button class="time-tab">3H</button>
  <button class="time-tab">6H</button>
  <button class="time-tab">12H</button>
  <button class="time-tab">1D</button>
  <button class="time-tab">3D</button>
  <button class="time-tab">7D</button>
</div>
```

```css
.time-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-body);
  border-radius: var(--radius-md);
  padding: 3px;
}
.time-tab {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.time-tab:hover { color: var(--text-primary); }
.time-tab.active {
  background: var(--accent-primary);
  color: #FFFFFF;
}
```

### 6.6 Resource Usage Card (Server Card)

Replaces current plain server table with visual cards:

```
┌─────────────────────────────────────┐
│ 🟢 Core (152.53.192.33)    netcup  │
│ ─────────────────────────────────── │
│ CPU  ████████░░░░  12%             │
│ RAM  ██████████████████░░  82%  ⚠  │
│ Disk ██████░░░░░░░░  31%           │
│                                     │
│ Services: 8 running, 0 stopped      │
│ Uptime: 47d 12h                     │
│ ─────────────────────────────────── │
│ [View] [SSH] [Restart] [Monitor]    │
└─────────────────────────────────────┘
```

### 6.7 Server List with Status Dots (Sidebar Tree)

```
🖥 Servers              [5]
  ├─ 🟢 Core (152.53.192.33)
  ├─ 🟢 App1 (192.168.x.x)
  ├─ 🟡 DB1 (192.168.x.x)       ← Warning
  ├─ 🔴 WPHost (192.168.x.x)    ← Down
  └─ 🟢 Monitor (192.168.x.x)
```

### 6.8 Tabbed Settings Pages

```html
<div class="settings-card">
  <div class="tab-bar">
    <button class="tab active">General</button>
    <button class="tab">SSH</button>
    <button class="tab">Firewall</button>
    <button class="tab">Monitoring</button>
  </div>
  <div class="tab-content">
    <!-- Form fields here -->
  </div>
  <div class="settings-actions">
    <button class="btn btn-primary">Save Changes</button>
  </div>
</div>
```

```css
.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 24px;
}
.tab {
  padding: 10px 20px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text-primary); }
.tab.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
  font-weight: 600;
}
```

### 6.9 Toggle Switches

```css
.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider {
  position: absolute;
  inset: 0;
  background: #374151;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.toggle .slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 2px;
  bottom: 2px;
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.toggle input:checked + .slider {
  background: var(--accent-primary);
}
.toggle input:checked + .slider::before {
  transform: translateX(20px);
}
.toggle input:focus-visible + .slider {
  box-shadow: 0 0 0 3px var(--accent-primary-glow);
}
```

### 6.10 Global Search Modal

Triggered by `Ctrl+K` or clicking the search bar. Overlay with:

```
┌─────────────────────────────────────────┐
│ 🔍 Search servers, services, logs...    │
│                                         │
│ ─── SERVERS ─────────────────────────── │
│ 🖥 Core (152.53.192.33)          netcup │
│ 🖥 App1 (192.168.x.x)            hetzner│
│                                         │
│ ─── SERVICES ────────────────────────── │
│ ⚙ caddy.service                running │
│ ⚙ sshd.service                 running │
│                                         │
│ ─── RECENT ──────────────────────────── │
│ 📄 Core system logs                     │
│ 📊 Server health metrics                │
└─────────────────────────────────────────┘
```

Fuzzy search across: server names, IPs, service names, log entries, config keys, backup names.

### 6.11 Toast Notifications (Refined)

Current toast design is good — enhance with:
- Progress bar for auto-dismiss
- Action button (e.g., "Undo" for batch actions)
- Stack limit (max 3 visible)
- Sound optional for critical alerts

### 6.12 Empty States

```html
<div class="empty-state">
  <div class="empty-icon">
    <svg><!-- server icon --></svg>
  </div>
  <h3>No servers connected</h3>
  <p>Connect your first server to start monitoring.</p>
  <button class="btn btn-primary">Add Server</button>
</div>
```

---

## 7. Page-by-Page Redesign Specifications

### 7.1 Dashboard (index.html) — Highest Priority

**Current:** Health grid (5 items), Quick Actions (3 cards), Server table, Cron table, Audit log.
**Redesign:**

```
┌──────────────────────────────────────────────────────────┐
│ 🏠 Dashboard                                             │
│ System health, recent activity, and quick actions         │
│                                              [Refresh]   │
├──────────────────────────────────────────────────────────┤
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐        │
│ │ Servers │ │Services │ │  Disk   │ │  RAM    │        │
│ │   5     │ │  12 ok  │ │  31%    │ │  62%    │        │
│ │ 4 up    │ │  0 fail │ │  [████░░]│ │  [█████░]│       │
│ │ 1 warn  │ │         │ │  Healthy│ │  Warning │        │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘        │
│                                                          │
│ ┌──────────────────────┐ ┌──────────────────────┐       │
│ │ CPU Load (1H)        │ │ Network I/O           │       │
│ │ [    sparkline     ] │ │ [    sparkline      ] │       │
│ │ 0.87 avg | 2.1 peak │ │ 1.2 MB/s ↓ | 0.8 ↑   │       │
│ └──────────────────────┘ └──────────────────────┘       │
│                                                          │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Servers Overview                              [All →]│ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐│ │
│ │ │🟢 Core   │ │🟢 App1   │ │🟡 DB1    │ │🟢 Monitor││ │
│ │ │CPU: 12%  │ │CPU: 8%   │ │CPU: 67%  │ │CPU: 3%   ││ │
│ │ │RAM: 62%  │ │RAM: 45%  │ │RAM: 82%⚠│ │RAM: 22%  ││ │
│ │ │[View]    │ │[View]    │ │[View]    │ │[View]    ││ │
│ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘│ │
│ └──────────────────────────────────────────────────────┘ │
│                                                          │
│ ┌──────────────────────┐ ┌──────────────────────┐       │
│ │ Recent Audit Log     │ │ Scheduled Jobs       │       │
│ │ 12:34  backup ok    │ │ ⏰ hermes-backup ✓   │       │
│ │ 11:20  caddy reload │ │ ⏰ lynis-scan   ✓    │       │
│ │ 09:15  deploy app1  │ │ ⏰ s3-sync      ⚠    │       │
│ │          [View All]  │ │          [View All]  │       │
│ └──────────────────────┘ └──────────────────────┘       │
└──────────────────────────────────────────────────────────┘
```

**New features:**
- Server mini-cards with CPU/RAM bars and status dots
- Sparkline charts for CPU load and network I/O
- Time range selector for metric detail views
- Quick-jump from audit entries to affected resources
- Collapsible sections for less-used widgets

### 7.2 Servers Page — Major Upgrade

**Current:** Plain HTML table: Name, Type, IP, Status, Provider.
**Redesign:** Card grid with rich server cards.

Each server card:
```
┌──────────────────────────────────────┐
│ 🟢 Core                       netcup │
│ 152.53.192.33                        │
│ ──────────────────────────────────── │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ CPU     │ │ RAM     │ │ Disk    │ │
│ │ [donut] │ │ [bar]   │ │ [donut] │ │
│ │  12%    │ │  62%    │ │  31%    │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│                                      │
│ Services: 8 running • Uptime: 47d   │
│ ──────────────────────────────────── │
│ [Details] [SSH] [Restart] [Logs]    │
└──────────────────────────────────────┘
```

**New features:**
- **Search/filter:** Bar above grid to filter servers by name, IP, provider, status, tags
- **Server tags:** Color-coded tags for grouping (e.g., "production", "staging", "web", "db")
- **Batch actions:** Checkbox on each card → batch restart, batch update, batch backup trigger
- **Sort options:** By name, CPU, RAM, disk, uptime, status
- **View toggle:** Grid view (cards) vs. List view (compact table)
- **Server grouping:** Group by provider, tag, or status
- **Quick actions on hover:** SSH, Restart, View Logs without navigating

### 7.3 Services Page

**Current:** Individual service cards with status dot, name, status text, action buttons.
**Redesign:**

```
┌──────────────────────────────────────────────────────────┐
│ ⚙ Services                                [+ Add Filter]│
│ ┌──────────────────────────────────────────────────────┐ │
│ │ 🔍 Filter services...     [All ▾] [Server: All ▾]   │ │
│ └──────────────────────────────────────────────────────┘ │
│                                                          │
│ ┌─────────────────────┐ ┌─────────────────────┐         │
│ │ 🟢 caddy            │ │ 🟢 sshd             │         │
│ │ Core · web server   │ │ Core · ssh daemon   │         │
│ │ Uptime: 47d 12h     │ │ Uptime: 47d 12h     │         │
│ │ [Restart] [Logs]    │ │ [Restart] [Logs]    │         │
│ └─────────────────────┘ └─────────────────────┘         │
│                                                          │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Batch Actions: [Select All] [Restart Selected (3)]   │ │
│ └──────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────┘
```

**New features:**
- Filter by service name, server, status (running/stopped/failed)
- Group by server with collapsible sections
- Batch restart/stop of selected services
- Service dependency visualization
- Last log excerpt shown inline (last 3 lines)

### 7.4 Backups Page

**Current:** Bucket cards with name, status, details.
**Redesign:**

- Visual backup health indicator (donut showing % of successful recent backups)
- Timeline view of last N backups per target
- Backup size trend sparkline
- "Backup Now" button per target with confirmation
- Batch trigger all backups
- Last backup duration and transfer speed

### 7.5 Network Page

**Current:** Network-related data display.
**Redesign:**

- Network topology mini-map (server nodes + connections)
- Per-server network I/O sparklines
- Open ports table with security indicators
- DNS health check results
- SSL certificate expiry countdown widgets
- Tailscale/ WireGuard peer status list

### 7.6 Logs Page — Major Upgrade

**Current:** Likely raw log display or simple list.
**Redesign:**

```
┌──────────────────────────────────────────────────────────┐
│ 📄 Logs                                                 │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Server: [All ▾]  Service: [All ▾]  Level: [All ▾]  │ │
│ │ 🔍 Search logs...                         [Live ▾]  │ │
│ └──────────────────────────────────────────────────────┘ │
│                                                          │
│ 12:34:56  INFO   caddy    TLS handshake from 1.2.3.4    │
│ 12:34:55  WARN   sshd     Failed password for root      │
│ 12:34:54  ERROR  app1     500 GET /api/status           │
│ 12:34:53  INFO   cron     job 'backup' completed (OK)   │
│                                                          │
│ [Load older]                              [Auto-scroll ✓]│
└──────────────────────────────────────────────────────────┘
```

**New features:**
- Log level coloring (ERROR=red, WARN=amber, INFO=blue, DEBUG=gray)
- Server and service filter dropdowns
- Free-text search with regex support
- Live tail mode (WebSocket or polling)
- Time range picker
- Export logs to file
- Log entry click → expand details (full stack trace, context)

### 7.7 Config Page

**Current:** Config data display.
**Redesign:** Tabbed settings page with visual configuration editors.

```
┌──────────────────────────────────────────────────────────┐
│ 📝 Configuration                                        │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ [General] [SSH] [Firewall] [Monitoring] [Backups]   │ │
│ └──────────────────────────────────────────────────────┘ │
│                                                          │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Server Configuration                          Core   │ │
│ │ ──────────────────────────────────────────────────── │ │
│ │ Hostname      [core.itpropartner.com        ]        │ │
│ │ Timezone      [America/Chicago ▾            ]        │ │
│ │                                                      │ │
│ │ SSH Port      [22                           ]        │ │
│ │ Root Login    [◉] Off  ○ On                          │ │
│ │ Password Auth [○] Off  ◉ On                          │ │
│ │                                                      │ │
│ │ Firewall                                              │ │
│ │ ☑ 22/tcp  (SSH)                                      │ │
│ │ ☑ 80/tcp  (HTTP)                                     │ │
│ │ ☑ 443/tcp (HTTPS)                                    │ │
│ │ ☐ 8080/tcp (Alt HTTP)                                │ │
│ │                                                      │ │
│ │                              [Save Changes] [Reset]   │ │
│ └──────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────┘
```

### 7.8 Cron Jobs Page

**Current:** Plain table.
**Redesign:**

- Visual schedule indicators (clock-like UI showing next run time)
- Job dependency graph
- Manual trigger button per job
- Last N run results with duration sparklines
- Enable/disable toggles per job
- "Create Cron Job" button with modal form

### 7.9 Audit Page

**Current:** List of audit entries.
**Redesign:**

- Filterable by action type, target, result, date range
- Timeline visualization
- Actor identification (which user/system triggered each action)
- Export audit log
- Audit statistics (actions per day, failure rate)

### 7.10 Costs Page

**Current:** Cost data display.
**Redesign:**

- Monthly cost trend chart (area chart)
- Per-provider cost breakdown (stacked bar or donut)
- Per-server cost allocation
- Projected monthly cost based on current usage
- Cost anomaly detection alerts

---

## 8. Functionality Gaps & New Features

### 8.1 Global Search (Priority: HIGH)
- **`Ctrl+K` / `⌘K`** shortcut to open search modal
- Fuzzy search across: servers (name, IP, provider), services, log entries, config keys, cron jobs, backups
- Results grouped by category with icons
- Recent searches saved locally
- Keyboard navigation (arrow keys + Enter)

### 8.2 Batch Actions (Priority: HIGH)
- Checkbox selection on servers, services, backups
- Batch restart services across servers
- Batch trigger backups
- Batch enable/disable cron jobs
- Confirmation dialog with summary of affected items
- Progress indicator for long-running batch operations

### 8.3 Visual Resource Monitoring (Priority: HIGH)
- Donut charts for disk usage per server
- Sparklines for CPU load, memory, network I/O
- Progress bars with color thresholds
- Time range selector (1H, 3H, 6H, 12H, 1D, 3D, 7D)
- Auto-refresh with configurable interval (15s, 30s, 1m, 5m, off)
- Click sparkline → expand to detailed chart modal

### 8.4 Visual Configuration Editors (Priority: MEDIUM)
- Tabbed settings pages (SSH, Firewall, Monitoring, Backups, Notifications)
- Toggle switches for boolean settings
- Dropdown selects for enumerated values
- Input validation with inline errors
- "Save Changes" with loading state and success toast
- "Reset to defaults" with confirmation
- Config diff view showing changes before save

### 8.5 Server Dashboard (Per-Server Detail Page) (Priority: MEDIUM)
- New page: `/server.html?name=core`
- Tabs: Overview, Services, Logs, Config, Backups
- Overview: CPU/RAM/Disk graphs, service status list, recent logs
- One-click actions: Restart, SSH, View Logs, Edit Config

### 8.6 Server Tags (Priority: MEDIUM)
- Color-coded tags for organizing servers (e.g., "production" = green, "staging" = amber, "database" = blue)
- Filter sidebar by tags
- Bulk tag assignment
- Custom tag creation

### 8.7 Notifications & Alerting (Priority: LOW)
- Notification bell in top bar with dropdown
- Alert rules: CPU > 90%, disk > 85%, service down, backup failed
- In-app toast + optional email notification
- Alert history page

### 8.8 Dark/Light Theme Toggle (Priority: LOW)
- Toggle in user menu or sidebar footer
- Persisted to localStorage
- Light theme uses RunCloud v2 color scheme (white content area, dark sidebar)

### 8.9 Mobile Optimizations (Priority: MEDIUM)
- Bottom tab bar on mobile (instead of collapsed sidebar)
- Swipe gestures for navigation
- Touch-friendly card actions (larger tap targets)
- Pull-to-refresh on dashboard
- Responsive charts and tables (cards replace tables on mobile)

---

## 9. Implementation Phases

### Phase 1: Foundation (Week 1–2)
1. Create new `ops.css` with the full design system (CSS custom properties)
2. Build sidebar component (HTML + CSS + JS)
3. Build top bar with global search trigger
4. Create page shell template (sidebar + top bar + content zone)
5. Set up CSS grid layout for content area
6. Implement responsive breakpoints and mobile sidebar
7. Add Inter + JetBrains Mono fonts

### Phase 2: Core Components (Week 2–3)
8. Build stat card component (with donut chart variant)
9. Build sparkline chart component (SVG-based)
10. Build progress bar component (with thresholds)
11. Build time range selector tabs
12. Build tabbed settings component
13. Build toggle switch component
14. Build global search modal (UI only)
15. Build breadcrumb component

### Phase 3: Dashboard Redesign (Week 3–4)
16. Rebuild Dashboard page with new stat cards
17. Add server mini-cards with CPU/RAM bars
18. Add sparkline charts for CPU and Network I/O
19. Implement time range filtering for dashboard metrics
20. Polish audit log and cron job widgets

### Phase 4: Content Pages (Week 4–6)
21. Rebuild Servers page with card grid
22. Add server search/filter/sort
23. Add batch action capability
24. Rebuild Services page with filter and batch actions
25. Rebuild Backups page with visual indicators
26. Rebuild Logs page with log viewer and filters
27. Rebuild Config page with tabbed settings and toggles
28. Rebuild Network, Audit, Cron, Costs pages with refreshed UI

### Phase 5: Advanced Features (Week 6–8)
29. Implement global search backend (fuzzy search across data)
30. Add server detail page (`/server.html`)
31. Implement server tags system
32. Add notification system (bell + dropdown + toast on alerts)
33. Add dark/light theme toggle
34. Mobile bottom tab bar
35. Performance optimization and final polish

---

## 10. CSS Custom Properties Reference

Complete CSS custom properties for the new design system:

```css
:root {
  /* ===== SURFACES ===== */
  --bg-sidebar: #0B0E14;
  --bg-sidebar-hover: #1A1F2E;
  --bg-sidebar-active: rgba(59, 130, 246, 0.10);
  --bg-body: #111620;
  --bg-card: #1A1F2E;
  --bg-card-hover: #21273A;
  --bg-input: #151A26;
  --bg-elevated: #1E2335;

  /* ===== BORDERS ===== */
  --border-default: #262D3F;
  --border-active: #3B82F6;
  --border-subtle: #1E2538;

  /* ===== ACCENTS ===== */
  --accent-primary: #3B82F6;
  --accent-primary-hover: #2563EB;
  --accent-primary-glow: rgba(59, 130, 246, 0.20);
  --accent-secondary: #7C4DFF;
  --accent-chart: #2DD4BF;
  --accent-chart-alt: #818CF8;

  /* ===== TEXT ===== */
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-sidebar: #9CA3AF;
  --text-sidebar-active: #FFFFFF;

  /* ===== SEMANTIC COLORS ===== */
  --green: #22C55E;
  --green-bg: rgba(34, 197, 94, 0.12);
  --green-glow: rgba(34, 197, 94, 0.25);
  --amber: #F59E0B;
  --amber-bg: rgba(245, 158, 11, 0.12);
  --red: #EF4444;
  --red-bg: rgba(239, 68, 68, 0.12);
  --red-glow: rgba(239, 68, 68, 0.25);
  --blue: #3B82F6;
  --blue-bg: rgba(59, 130, 246, 0.12);
  --teal: #2DD4BF;
  --teal-bg: rgba(45, 212, 191, 0.12);
  --purple: #7C4DFF;
  --purple-bg: rgba(124, 77, 255, 0.12);

  /* ===== SPACING ===== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;

  /* ===== RADIUS ===== */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow-blue: 0 0 12px rgba(59, 130, 246, 0.15);
  --shadow-glow-green: 0 0 12px rgba(34, 197, 94, 0.15);
  --shadow-glow-red: 0 0 12px rgba(239, 68, 68, 0.15);

  /* ===== TYPOGRAPHY ===== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Consolas', monospace;

  /* ===== LAYOUT ===== */
  --sidebar-width: 240px;
  --sidebar-collapsed: 64px;
  --topbar-height: 56px;

  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}
```

---

## Appendix A: RunCloud Reference URLs

- RunCloud Homepage: https://runcloud.io/
- Dashboard v2 Beta Blog: https://runcloud.io/blog/dashboard-v2-beta
- Server Health Docs: https://runcloud.io/docs/understanding-server-health-load-memory-disk
- Disk Space Usage Docs: https://runcloud.io/docs/disk-space-usage
- SSH Hardening Docs: https://runcloud.io/docs/ssh-service-hardening-on-runcloud
- Classic Dashboard: https://manage.runcloud.io
- New Dashboard v2: https://new.runcloud.io
- Third-party Review: https://responsiveweb.nz/blog/post/runcloud-server-management-review
- Third-party Review: https://wpjohnny.com/runcloud-cloud-based-vps-webhosting-control-panel-review/

## Appendix B: Existing Ops Portal Reference

- Production URL: https://ops.itpropartner.com
- Server: Core (152.53.192.33)
- Document root: `/var/www/ops/`
- Web server: Caddy
- Auth: JWT via auth.itpropartner.com
- Data source: `/data/ops-status.json`
- Existing CSS: `/var/www/ops/css/ops.css` (1027 lines)
- Existing JS: `/var/www/ops/js/utils.js` (230 lines), `/var/www/ops/js/app.js`
- Pages: index, services, servers, network, backups, cron, config, logs, audit, cost

## Appendix C: Key Design Decisions

1. **Dark theme retained** — matches infrastructure/admin tooling conventions and existing brand
2. **Blue primary accent** over amber — RunCloud's blue is more professional and less "warning-like"; purple available as secondary
3. **Teal for data visualization** — distinct from UI accent to avoid confusion with interactive elements
4. **Sidebar over top nav** — modern admin panel standard, better use of horizontal space on wide screens
5. **Inter font** — RunCloud's choice, excellent legibility, good tabular figures for metrics
6. **SVG-based charts** — no library dependency, lightweight, themeable via CSS variables
7. **Single-file architecture retained** — each page is a self-contained HTML file with shared CSS/JS, no build step required
8. **Progressive enhancement** — all pages usable without JS, enhanced with JS for interactivity

---

*End of Design Brief*