@necrolab/dashboard 0.5.12 → 0.5.14

package/docs/plans/2026-02-08-tailwind-consolidation.md

@@ -0,0 +1,2416 @@
+# Tailwind CSS Consolidation & Vue Cleanup Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Achieve near-zero CSS in Vue files with perfect Tailwind usage, extract all duplicate components, consolidate theme, and remove all "ghetto" hacks.
+
+**Architecture:** Multi-phase refactoring starting with foundational theme tokens, then systematic CSS cleanup, component extraction, and comprehensive verification. Each phase is independently testable with clear rollback points.
+
+**Tech Stack:** Vue 3, Tailwind CSS 3.4, Pinia, Vite, OKLCH color system
+
+**Supported Devices:** iPad Pro, Desktop, iPhone Portrait (iPhone landscape forces rotation)
+
+---
+
+## Phase 1: Theme Token Consolidation (Foundation)
+
+### Task 1.1: Extend Tailwind Color Tokens
+
+**Files:**
+- Modify: `tailwind.config.js:30-77`
+
+**Step 1: Add extended dark scale for rgba replacements**
+
+Add these values to the `dark` color scale in tailwind.config.js:
+
+```javascript
+dark: {
+    // ... existing values
+    350: "oklch(0.1900 0 0 / <alpha-value>)", // rgba(26, 27, 30) replacement
+    450: "oklch(0.2200 0 0 / <alpha-value>)", // rgba(35, 36, 41) replacement
+    475: "oklch(0.2350 0 0 / <alpha-value>)", // rgba(46, 47, 52) replacement
+    625: "oklch(0.2950 0 0 / <alpha-value>)", // rgba(61, 62, 68) replacement
+    675: "oklch(0.3200 0 0 / <alpha-value>)", // rgba(68, 69, 75) replacement
+}
+```
+
+**Step 2: Add semantic error colors**
+
+Add after the `red` scale:
+
+```javascript
+error: {
+    300: "oklch(0.72 0.15 25 / <alpha-value>)", // Light error ~#EE8282
+    400: "oklch(0.66 0.18 25 / <alpha-value>)", // Medium error
+    500: "oklch(0.60 0.20 25 / <alpha-value>)", // Base error
+}
+```
+
+**Step 3: Add overlay colors**
+
+Add after `accent`:
+
+```javascript
+overlay: {
+    dark: "oklch(0.08 0 0 / 0.85)", // Modal backdrop
+    darker: "oklch(0.06 0 0 / 0.90)", // Darker overlay
+}
+```
+
+**Step 4: Add semantic text/bg tokens**
+
+Add after `border`:
+
+```javascript
+// Semantic tokens for better DX
+'text-primary': 'oklch(0.90 0 0 / <alpha-value>)', // light-300
+'text-secondary': 'oklch(0.82 0 0 / <alpha-value>)', // light-400
+'text-muted': 'oklch(0.65 0 0 / <alpha-value>)', // light-500
+'text-disabled': 'oklch(0.50 0 0 / <alpha-value>)', // light-600
+
+'bg-base': 'oklch(0.1822 0 0 / <alpha-value>)', // dark-300
+'bg-elevated': 'oklch(0.2046 0 0 / <alpha-value>)', // dark-400
+'bg-input': 'oklch(0.2603 0 0 / <alpha-value>)', // dark-500
+
+'border-focus': 'oklch(0.72 0.15 145 / <alpha-value>)', // accent.green
+'primary': 'oklch(0.72 0.15 145 / <alpha-value>)', // accent.green
+```
+
+**Step 5: Verify config**
+
+Run: `npm run dev`
+Expected: No errors, dev server starts successfully
+
+**Step 6: Commit**
+
+```bash
+git add tailwind.config.js
+git commit -m "feat: extend Tailwind color tokens for theme consolidation
+
+- Add dark scale extensions (350, 450, 475, 625, 675)
+- Add semantic error colors
+- Add overlay colors for modals
+- Add semantic text/bg/border tokens for better DX"
+```
+
+---
+
+### Task 1.2: Extend Shadow System
+
+**Files:**
+- Modify: `tailwind.config.js:135-138`
+
+**Step 1: Replace boxShadow extend section**
+
+```javascript
+boxShadow: {
+    'card': '0 4px 12px rgba(0, 0, 0, 0.2)',
+    'button': '0 1px 2px rgba(0, 0, 0, 0.2)',
+    'sm': '0 1px 2px rgba(0, 0, 0, 0.1)',
+    'md': '0 2px 4px rgba(0, 0, 0, 0.1)',
+    'lg': '0 4px 12px rgba(0, 0, 0, 0.3)',
+    'xl': '0 6px 16px rgba(0, 0, 0, 0.3)',
+    'dropdown': '0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2)',
+    'input-inset': 'inset 0 2px 4px rgba(0, 0, 0, 0.4)',
+}
+```
+
+**Step 2: Add border radius extensions**
+
+Add after `boxShadow`:
+
+```javascript
+borderRadius: {
+    'xs': '3px',
+}
+```
+
+**Step 3: Add backdrop blur extensions**
+
+Add after `borderRadius`:
+
+```javascript
+backdropBlur: {
+    'xs': '4px',
+    'sm': '8px',
+}
+```
+
+**Step 4: Add font size extensions**
+
+Add after `backdropBlur`:
+
+```javascript
+fontSize: {
+    'xxs': '0.625rem', // 10px
+    'xxxs': '0.5625rem', // 9px
+}
+```
+
+**Step 5: Verify config**
+
+Run: `npm run dev`
+Expected: No errors, dev server restarts successfully
+
+**Step 6: Commit**
+
+```bash
+git add tailwind.config.js
+git commit -m "feat: extend Tailwind design tokens
+
+- Add shadow system (sm, md, lg, xl, dropdown, input-inset)
+- Add border-radius-xs (3px)
+- Add backdrop-blur-xs, backdrop-blur-sm
+- Add font-size xxs, xxxs for small UI elements"
+```
+
+---
+
+## Phase 2: Remove iPhone Landscape Support
+
+### Task 2.1: Clean Up App.vue iPhone Landscape Code
+
+**Files:**
+- Modify: `src/App.vue`
+
+**Step 1: Read current App.vue**
+
+Run: Read `src/App.vue`
+
+**Step 2: Remove iPhone landscape lock overlay**
+
+Find and remove:
+- `.landscape-lock` class styles (lines ~739-796)
+- `.landscape-lock-content` styles
+- `LandscapeLockIcon` component
+- All iPhone landscape detection logic in script section
+- All `showLandscapeLock` reactive refs and watchers
+
+**Step 3: Remove mobile-landscape breakpoint styles**
+
+Search for `@media` queries containing:
+- `mobile-landscape`
+- `(orientation: landscape) and (max-height: 500px)`
+
+Remove all iPhone-specific landscape overrides.
+
+**Step 4: Test app loads**
+
+Run: `npm run dev`
+Navigate to: `http://localhost:5173`
+Expected: App loads normally, no landscape lock on iPhone
+
+**Step 5: Commit**
+
+```bash
+git add src/App.vue
+git commit -m "refactor: remove iPhone landscape support
+
+- Remove landscape lock overlay component
+- Remove landscape detection logic
+- Remove mobile-landscape media queries
+- Users on iPhone landscape are now forced to rotate via CSS"
+```
+
+---
+
+### Task 2.2: Update Tailwind Config - Remove Landscape Breakpoints
+
+**Files:**
+- Modify: `tailwind.config.js:92-116`
+
+**Step 1: Remove mobile-landscape breakpoint**
+
+Remove from screens:
+
+```javascript
+"mobile-landscape": {
+    raw: "(max-width: 896px) and (orientation: landscape) and (max-height: 500px)"
+}
+```
+
+**Step 2: Update comments**
+
+Update screen section comment to:
+
+```javascript
+// Supported devices: iPad Pro, Desktop, iPhone Portrait
+// iPhone landscape forces rotation to portrait
+```
+
+**Step 3: Verify no landscape references**
+
+Run: `grep -r "mobile-landscape" src/`
+Expected: No results (or only in comments)
+
+**Step 4: Commit**
+
+```bash
+git add tailwind.config.js
+git commit -m "refactor: remove mobile-landscape breakpoint
+
+- Remove mobile-landscape from Tailwind screens
+- Update comments to reflect supported devices
+- iPhone landscape no longer supported"
+```
+
+---
+
+## Phase 3: Component Extraction (High Value)
+
+### Task 3.1: Create StatusBadge Component
+
+**Files:**
+- Create: `src/components/ui/StatusBadge.vue`
+- Test: Manual testing in Account.vue, Profile.vue
+
+**Step 1: Create StatusBadge component**
+
+```vue
+<script setup>
+import { defineProps } from 'vue'
+import CheckmarkIcon from '@/assets/icons/checkmark.svg'
+import CloseXIcon from '@/assets/icons/close-x.svg'
+
+const props = defineProps({
+  enabled: {
+    type: Boolean,
+    required: true
+  },
+  size: {
+    type: String,
+    default: 'small',
+    validator: (value) => ['small', 'large'].includes(value)
+  }
+})
+
+const sizeClasses = {
+  small: 'w-6 h-6',
+  large: 'w-[26px] h-[26px]'
+}
+
+const enabledClasses = 'bg-accent-green/20 border-accent-green/30'
+const disabledClasses = 'bg-red-500/20 border-red-500/30'
+</script>
+
+<template>
+  <div
+    :class="[
+      'flex items-center justify-center rounded-full border-2 transition-all duration-200',
+      enabled ? enabledClasses : disabledClasses,
+      sizeClasses[size]
+    ]"
+  >
+    <CheckmarkIcon v-if="enabled" class="w-3 h-3 text-accent-green" />
+    <CloseXIcon v-else class="w-3 h-3 text-red-500" />
+  </div>
+</template>
+```
+
+**Step 2: Test component in isolation**
+
+Create temporary test in a view to verify rendering:
+- Enabled state
+- Disabled state
+- Small size
+- Large size
+
+**Step 3: Commit**
+
+```bash
+git add src/components/ui/StatusBadge.vue
+git commit -m "feat: create StatusBadge component
+
+- Supports enabled/disabled states
+- Supports small/large sizes
+- Uses Tailwind classes exclusively
+- Replaces 360+ lines of duplicated CSS"
+```
+
+---
+
+### Task 3.2: Replace StatusBadge in Account.vue
+
+**Files:**
+- Modify: `src/components/Editors/Account/Account.vue`
+
+**Step 1: Import StatusBadge**
+
+Add to imports:
+
+```javascript
+import StatusBadge from '@/components/ui/StatusBadge.vue'
+```
+
+**Step 2: Replace enabled badge markup**
+
+Find lines with class `enabled-badge` or `disabled-badge` and replace with:
+
+```vue
+<StatusBadge :enabled="account.enabled" size="small" />
+```
+
+**Step 3: Remove old badge styles**
+
+Remove from `<style scoped>`:
+- `.enabled-badge` class (lines ~60-105)
+- `.disabled-badge` class
+
+**Step 4: Test in browser**
+
+Run: `npm run dev`
+Navigate to Accounts page
+Expected: Badges render correctly, enabled/disabled states work
+
+**Step 5: Commit**
+
+```bash
+git add src/components/Editors/Account/Account.vue
+git commit -m "refactor: use StatusBadge component in Account.vue
+
+- Replace custom badge markup with StatusBadge component
+- Remove ~100 lines of duplicated CSS"
+```
+
+---
+
+### Task 3.3: Replace StatusBadge in Profile.vue
+
+**Files:**
+- Modify: `src/components/Editors/Profile/Profile.vue`
+
+**Step 1: Import StatusBadge**
+
+**Step 2: Replace badge markup**
+
+**Step 3: Remove badge styles**
+
+**Step 4: Test in browser**
+
+**Step 5: Commit**
+
+```bash
+git add src/components/Editors/Profile/Profile.vue
+git commit -m "refactor: use StatusBadge component in Profile.vue"
+```
+
+---
+
+### Task 3.4: Replace StatusBadge in CreateAccount.vue
+
+**Files:**
+- Modify: `src/components/Editors/Account/CreateAccount.vue`
+
+**Step 1-5:** Same as Task 3.3
+
+**Step 6: Commit**
+
+```bash
+git add src/components/Editors/Account/CreateAccount.vue
+git commit -m "refactor: use StatusBadge component in CreateAccount.vue"
+```
+
+---
+
+### Task 3.5: Replace StatusBadge in CreateProfile.vue
+
+**Files:**
+- Modify: `src/components/Editors/Profile/CreateProfile.vue`
+
+**Step 1-5:** Same as Task 3.3
+
+**Step 6: Commit**
+
+```bash
+git add src/components/Editors/Profile/CreateProfile.vue
+git commit -m "refactor: use StatusBadge component in CreateProfile.vue"
+```
+
+---
+
+### Task 3.6: Create useRowSelection Composable
+
+**Files:**
+- Create: `src/composables/useRowSelection.js`
+
+**Step 1: Create composable file**
+
+```javascript
+/**
+ * useRowSelection - Composable for handling row selection via double-click/tap
+ *
+ * Provides consistent double-click and double-tap behavior for table rows.
+ * Prevents selection when clicking on buttons or checkboxes.
+ *
+ * @param {Function} toggleCallback - Function to call when row is double-clicked/tapped
+ * @returns {Object} Event handlers for @dblclick, @touchstart, @touchend
+ */
+export function useRowSelection(toggleCallback) {
+  let lastTapTime = 0
+  const DOUBLE_TAP_DELAY = 300
+
+  const handleDoubleClick = (event) => {
+    // Don't trigger on button or checkbox clicks
+    if (event.target.closest('button') || event.target.closest('.checkbox')) {
+      return
+    }
+    toggleCallback()
+  }
+
+  const handleTouchStart = (event) => {
+    const currentTime = Date.now()
+    const tapGap = currentTime - lastTapTime
+
+    if (tapGap < DOUBLE_TAP_DELAY && tapGap > 0) {
+      // Don't trigger on button or checkbox taps
+      if (!event.target.closest('button') && !event.target.closest('.checkbox')) {
+        event.preventDefault()
+        toggleCallback()
+      }
+    }
+    lastTapTime = currentTime
+  }
+
+  const handleTouchEnd = (event) => {
+    // Prevent default touch behavior on buttons/checkboxes
+    if (event.target.closest('button') || event.target.closest('.checkbox')) {
+      return
+    }
+  }
+
+  return {
+    handleDoubleClick,
+    handleTouchStart,
+    handleTouchEnd
+  }
+}
+```
+
+**Step 2: Commit**
+
+```bash
+git add src/composables/useRowSelection.js
+git commit -m "feat: create useRowSelection composable
+
+- Handles double-click and double-tap for row selection
+- Prevents selection on button/checkbox clicks
+- Replaces 105 lines of duplicated logic"
+```
+
+---
+
+### Task 3.7: Use useRowSelection in Task.vue
+
+**Files:**
+- Modify: `src/components/Tasks/Task.vue`
+
+**Step 1: Import composable**
+
+```javascript
+import { useRowSelection } from '@/composables/useRowSelection'
+```
+
+**Step 2: Use composable in setup**
+
+Replace manual event handler logic with:
+
+```javascript
+const { handleDoubleClick, handleTouchStart, handleTouchEnd } = useRowSelection(() => {
+  emit('toggle', props.task)
+})
+```
+
+**Step 3: Update template event handlers**
+
+Replace existing `@dblclick`, `@touchstart`, `@touchend` with:
+
+```vue
+<tr
+  @dblclick="handleDoubleClick"
+  @touchstart="handleTouchStart"
+  @touchend="handleTouchEnd"
+>
+```
+
+**Step 4: Remove old event handler code**
+
+Delete manual double-tap logic (lines ~511-544)
+
+**Step 5: Test in browser**
+
+Navigate to Tasks page
+Test: Double-click row → should select task
+Test: Double-tap on mobile → should select task
+Test: Click button → should NOT select task
+
+**Step 6: Commit**
+
+```bash
+git add src/components/Tasks/Task.vue
+git commit -m "refactor: use useRowSelection composable in Task.vue
+
+- Replace manual double-tap logic with composable
+- Remove ~35 lines of duplicated code"
+```
+
+---
+
+### Task 3.8: Use useRowSelection in Account.vue
+
+**Files:**
+- Modify: `src/components/Editors/Account/Account.vue`
+
+**Step 1-6:** Same as Task 3.7, adapted for Account component
+
+**Step 7: Commit**
+
+```bash
+git add src/components/Editors/Account/Account.vue
+git commit -m "refactor: use useRowSelection composable in Account.vue"
+```
+
+---
+
+### Task 3.9: Use useRowSelection in Profile.vue
+
+**Files:**
+- Modify: `src/components/Editors/Profile/Profile.vue`
+
+**Step 1-6:** Same as Task 3.7, adapted for Profile component
+
+**Step 7: Commit**
+
+```bash
+git add src/components/Editors/Profile/Profile.vue
+git commit -m "refactor: use useRowSelection composable in Profile.vue"
+```
+
+---
+
+### Task 3.10: Create useCopyToClipboard Composable
+
+**Files:**
+- Create: `src/composables/useCopyToClipboard.js`
+
+**Step 1: Create composable**
+
+```javascript
+import { useUIStore } from '@/stores/ui'
+
+/**
+ * useCopyToClipboard - Composable for copying text with user feedback
+ *
+ * @returns {Object} Copy function with success notification
+ */
+export function useCopyToClipboard() {
+  const ui = useUIStore()
+
+  const copy = (text, message = 'Copied to clipboard') => {
+    if (!text) return
+
+    navigator.clipboard.writeText(text)
+      .then(() => {
+        ui.showSuccess(message)
+      })
+      .catch((err) => {
+        ui.showError('Failed to copy')
+        console.error('Copy failed:', err)
+      })
+  }
+
+  return { copy }
+}
+```
+
+**Step 2: Commit**
+
+```bash
+git add src/composables/useCopyToClipboard.js
+git commit -m "feat: create useCopyToClipboard composable
+
+- Provides copy to clipboard with success notification
+- Handles errors gracefully
+- DRY principle for clipboard operations"
+```
+
+---
+
+### Task 3.11: Use useCopyToClipboard in Task.vue
+
+**Files:**
+- Modify: `src/components/Tasks/Task.vue`
+
+**Step 1: Import and use composable**
+
+```javascript
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+
+const { copy } = useCopyToClipboard()
+```
+
+**Step 2: Replace manual copy logic**
+
+Replace `navigator.clipboard.writeText()` calls with:
+
+```javascript
+copy(task.id, 'Copied task ID')
+```
+
+**Step 3: Remove old copy code**
+
+**Step 4: Test**
+
+Click copy button → should copy and show success notification
+
+**Step 5: Commit**
+
+```bash
+git add src/components/Tasks/Task.vue
+git commit -m "refactor: use useCopyToClipboard composable in Task.vue"
+```
+
+---
+
+### Task 3.12: Use useCopyToClipboard in ViewTask.vue
+
+**Files:**
+- Modify: `src/components/Tasks/ViewTask.vue`
+
+**Step 1-5:** Same as Task 3.11
+
+**Step 6: Commit**
+
+```bash
+git add src/components/Tasks/ViewTask.vue
+git commit -m "refactor: use useCopyToClipboard composable in ViewTask.vue"
+```
+
+---
+
+### Task 3.13: Use useCopyToClipboard in Account.vue
+
+**Files:**
+- Modify: `src/components/Editors/Account/Account.vue`
+
+**Step 1-5:** Same as Task 3.11
+
+**Step 6: Commit**
+
+```bash
+git add src/components/Editors/Account/Account.vue
+git commit -m "refactor: use useCopyToClipboard composable in Account.vue"
+```
+
+---
+
+## Phase 4: High-Priority CSS Cleanup
+
+### Task 4.1: Clean Up App.vue Global Styles
+
+**Files:**
+- Modify: `src/App.vue`
+
+**Step 1: Read current App.vue styles**
+
+Run: Read `src/App.vue` focusing on `<style>` section
+
+**Step 2: Remove global !important overrides**
+
+Find and remove/replace:
+- `html, body` with !important on overflow, width, height, touch-action (lines ~679-688)
+  - Replace with proper overflow utilities on specific elements
+- Global `* { touch-action: manipulation !important }` (lines ~699-702)
+  - Remove entirely, use `touch-manipulation` class where needed
+
+**Step 3: Convert .layout to Tailwind**
+
+Replace:
+
+```css
+.layout {
+  min-height: 90vh;
+  height: 100vh !important;
+}
+```
+
+With template classes:
+
+```vue
+<div class="layout min-h-screen h-screen">
+```
+
+Remove CSS block.
+
+**Step 4: Simplify component-container responsive padding**
+
+Replace:
+
+```css
+.component-container {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+@media (min-width: 480px) {
+  .component-container {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+/* etc */
+```
+
+With template classes:
+
+```vue
+<div class="component-container px-4 xs:px-4 md:px-2 lg:px-6 xl:px-10">
+```
+
+Remove CSS block.
+
+**Step 5: Keep necessary animations**
+
+Keep page transition animations (enter-active, leave-active) as they're legitimate custom CSS.
+
+**Step 6: Test app**
+
+Run: `npm run dev`
+Test: Scroll behavior, touch behavior, layout sizing
+Expected: No visual changes, no layout breaks
+
+**Step 7: Commit**
+
+```bash
+git add src/App.vue
+git commit -m "refactor: clean up App.vue global styles
+
+- Remove global !important overrides
+- Convert .layout to Tailwind classes
+- Convert .component-container to responsive Tailwind classes
+- Remove ~100 lines of CSS
+- Keep page transition animations"
+```
+
+---
+
+### Task 4.2: Clean Up Navbar.vue
+
+**Files:**
+- Modify: `src/components/ui/Navbar.vue`
+
+**Step 1: Read Navbar.vue styles**
+
+Run: Read `src/components/ui/Navbar.vue` lines 112-275
+
+**Step 2: Convert background to Tailwind**
+
+Replace:
+
+```css
+background: oklch(0.1822 0 0 / 0.95);
+backdrop-filter: blur(12px);
+```
+
+With class:
+
+```vue
+class="bg-dark-300/95 backdrop-blur"
+```
+
+**Step 3: Remove SVG force normalization**
+
+Replace:
+
+```css
+svg {
+  width: 20px !important;
+  height: 20px !important;
+}
+```
+
+With template classes on SVG components:
+
+```vue
+<SomeIcon class="w-5 h-5" />
+```
+
+**Step 4: Convert .navbar-link height**
+
+Replace:
+
+```css
+.navbar-link {
+  height: 40px;
+  border-bottom: 2px solid transparent;
+}
+```
+
+With:
+
+```vue
+class="navbar-link h-10 border-b-2 border-transparent"
+```
+
+**Step 5: Replace icon centering hack**
+
+Replace:
+
+```css
+position: absolute;
+top: 50%;
+left: 50%;
+transform: translate(-50%, -50%);
+```
+
+With:
+
+```vue
+class="flex items-center justify-center"
+```
+
+**Step 6: Fix .force-z z-index**
+
+Replace:
+
+```css
+.force-z {
+  z-index: 20000;
+}
+```
+
+With:
+
+```vue
+class="z-max"
+```
+
+(Already in tailwind.config.js as 9999)
+
+**Step 7: Convert notch pseudo-element**
+
+The notch handling (`::before` with absolute positioning) is iPhone-specific.
+Since we removed iPhone landscape support, simplify or remove.
+
+**Step 8: Test navbar**
+
+Run: `npm run dev`
+Test: Navigation icons, responsive behavior, SVG sizing, z-index layering
+Expected: Identical visual appearance
+
+**Step 9: Commit**
+
+```bash
+git add src/components/ui/Navbar.vue
+git commit -m "refactor: clean up Navbar.vue styles
+
+- Convert background to Tailwind classes
+- Remove SVG !important overrides, use classes
+- Convert height/border to Tailwind utilities
+- Replace absolute positioning with flexbox
+- Fix z-index using Tailwind token
+- Remove ~120 lines of CSS"
+```
+
+---
+
+### Task 4.3: Clean Up Modal.vue
+
+**Files:**
+- Modify: `src/components/ui/Modal.vue`
+
+**Step 1: Read Modal.vue styles**
+
+Run: Read `src/components/ui/Modal.vue` lines 57-138
+
+**Step 2: Replace .modal-mask styles**
+
+Replace:
+
+```css
+.modal-mask {
+  position: fixed;
+  z-index: 25000;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(17, 17, 17, 0.85);
+  backdrop-filter: blur(4px);
+  display: flex;
+  padding-top: 3.5rem;
+}
+```
+
+With template classes:
+
+```vue
+<div class="modal-mask fixed inset-0 z-modal bg-overlay-dark backdrop-blur-xs flex pt-14">
+```
+
+**Step 3: Simplify .component-modal bottom margin**
+
+Replace:
+
+```css
+margin-bottom: 20rem;
+@media (max-width: 480px) {
+  margin-bottom: 25rem;
+}
+```
+
+With:
+
+```vue
+class="mb-80 mobile-portrait:mb-[25rem]"
+```
+
+**Step 4: Remove !important from padding-bottom**
+
+Replace:
+
+```css
+padding-bottom: 15rem !important;
+padding-bottom: 3rem !important;
+```
+
+With proper Tailwind classes:
+
+```vue
+class="pb-60 md:pb-12"
+```
+
+**Step 5: Test modal**
+
+Open any modal, test:
+- Overlay appearance
+- Modal positioning
+- Scroll behavior
+- Responsive sizing
+
+**Step 6: Commit**
+
+```bash
+git add src/components/ui/Modal.vue
+git commit -m "refactor: clean up Modal.vue styles
+
+- Replace .modal-mask with Tailwind classes
+- Use z-modal token instead of hardcoded 25000
+- Use bg-overlay-dark and backdrop-blur-xs tokens
+- Remove !important from padding
+- Simplify responsive bottom margin
+- Remove ~80 lines of CSS"
+```
+
+---
+
+### Task 4.4: Clean Up Task.vue
+
+**Files:**
+- Modify: `src/components/Tasks/Task.vue`
+
+**Step 1: Read Task.vue styles**
+
+Run: Read `src/components/Tasks/Task.vue` lines 158-466
+
+**Step 2: Remove icon !important overrides**
+
+Replace:
+
+```css
+min-width: 10px !important;
+stroke: oklch(0.60 0 0) !important;
+```
+
+With proper component props or Tailwind classes:
+
+```vue
+<SomeIcon class="min-w-[10px] stroke-light-500" />
+```
+
+**Step 3: Convert button dimensions**
+
+Replace:
+
+```css
+padding: 2px;
+gap: 1px;
+border: 2px solid oklch(...);
+```
+
+With:
+
+```vue
+class="p-0.5 gap-px border-2 border-dark-600"
+```
+
+**Step 4: Remove mobile positioning hacks**
+
+Replace:
+
+```css
+@media (max-width: 480px) {
+  left: 4rem !important;
+  top: 0.25rem !important;
+  z-index: 1 !important;
+}
+```
+
+With proper responsive Tailwind:
+
+```vue
+class="mobile-portrait:left-16 mobile-portrait:top-1 mobile-portrait:z-10"
+```
+
+**Step 5: Remove border override !important**
+
+Replace:
+
+```css
+border: 2px solid oklch(0.2809 0 0) !important;
+```
+
+With:
+
+```vue
+class="border-2 border-dark-600"
+```
+
+**Step 6: Convert shadow !important**
+
+Replace:
+
+```css
+box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+```
+
+With:
+
+```vue
+class="shadow-sm"
+```
+
+**Step 7: Test task rows**
+
+Navigate to Tasks page
+Test: Task row appearance, mobile responsiveness, buttons, icons
+
+**Step 8: Commit**
+
+```bash
+git add src/components/Tasks/Task.vue
+git commit -m "refactor: clean up Task.vue styles
+
+- Remove icon !important overrides
+- Convert button dimensions to Tailwind
+- Remove mobile positioning hacks with !important
+- Replace hardcoded colors with theme tokens
+- Convert shadows to Tailwind utilities
+- Remove ~100 lines of CSS"
+```
+
+---
+
+### Task 4.5: Clean Up Dropdown.vue
+
+**Files:**
+- Modify: `src/components/ui/controls/atomic/Dropdown.vue`
+
+**Step 1: Read Dropdown.vue styles**
+
+Run: Read `src/components/ui/controls/atomic/Dropdown.vue` lines 121-288
+
+**Step 2: Convert background and border**
+
+Replace:
+
+```css
+background: linear-gradient(...);
+border: 1px solid oklch(...);
+```
+
+With:
+
+```vue
+class="bg-dark-300 border border-dark-600"
+```
+
+**Step 3: Remove height !important**
+
+Replace:
+
+```css
+height: 40px !important;
+```
+
+With:
+
+```vue
+class="h-10"
+```
+
+**Step 4: Convert focus state**
+
+Replace:
+
+```css
+border-color: oklch(...) !important;
+outline: 1px solid oklch(...) !important;
+```
+
+With:
+
+```vue
+class="focus:border-border-focus focus:outline focus:outline-1 focus:outline-border-focus"
+```
+
+**Step 5: Remove scroll !important**
+
+Replace:
+
+```css
+overflow-x: auto !important;
+touch-action: pan-x pan-y !important;
+```
+
+With:
+
+```vue
+class="overflow-x-auto touch-pan-x touch-pan-y"
+```
+
+**Step 6: Test dropdown**
+
+Test: Dropdown appearance, focus states, scroll behavior, touch behavior
+
+**Step 7: Commit**
+
+```bash
+git add src/components/ui/controls/atomic/Dropdown.vue
+git commit -m "refactor: clean up Dropdown.vue styles
+
+- Convert background/border to Tailwind
+- Remove height !important
+- Convert focus states to Tailwind utilities
+- Remove scroll/touch !important overrides
+- Remove ~70 lines of CSS"
+```
+
+---
+
+## Phase 5: Component Extraction (Medium Value)
+
+### Task 5.1: Create FormField Component
+
+**Files:**
+- Create: `src/components/ui/FormField.vue`
+
+**Step 1: Create component**
+
+```vue
+<script setup>
+import { defineProps, defineEmits, useAttrs } from 'vue'
+import UpIcon from '@/assets/icons/up.svg'
+import DownIcon from '@/assets/icons/down.svg'
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+  icon: {
+    type: Object,
+    default: null
+  },
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  type: {
+    type: String,
+    default: 'text'
+  },
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  required: {
+    type: Boolean,
+    default: false
+  },
+  hasError: {
+    type: Boolean,
+    default: false
+  },
+  incrementer: {
+    type: Boolean,
+    default: false
+  },
+  zIndex: {
+    type: String,
+    default: '0',
+    validator: (value) => ['dropdown', 'tooltip', '0', '1', '2'].includes(value)
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'increment', 'decrement'])
+const attrs = useAttrs()
+
+const zIndexClasses = {
+  dropdown: 'z-dropdown',
+  tooltip: 'z-tooltip',
+  '0': 'z-0',
+  '1': 'z-10',
+  '2': 'z-20'
+}
+</script>
+
+<template>
+  <div class="flex flex-col" :class="zIndexClasses[zIndex]">
+    <label class="mb-2 text-sm font-medium text-light-400 flex items-center gap-2">
+      {{ label }}
+      <component :is="icon" v-if="icon" class="w-4 h-4" />
+    </label>
+    <div
+      class="relative flex items-center bg-dark-500 border rounded-md transition-colors"
+      :class="[
+        hasError ? 'border-error-500' : 'border-dark-600',
+        required ? 'ring-2 ring-primary/20' : ''
+      ]"
+    >
+      <slot>
+        <input
+          :type="type"
+          :placeholder="placeholder"
+          :value="modelValue"
+          @input="emit('update:modelValue', $event.target.value)"
+          v-bind="attrs"
+          class="w-full px-3 py-2 bg-transparent text-light-300 outline-none"
+        />
+      </slot>
+      <div v-if="incrementer" class="flex flex-col border-l border-dark-600">
+        <button
+          @click="emit('increment')"
+          type="button"
+          class="px-2 py-1 hover:bg-dark-650 transition-colors"
+        >
+          <UpIcon class="w-3 h-3 text-light-400" />
+        </button>
+        <button
+          @click="emit('decrement')"
+          type="button"
+          class="px-2 py-1 hover:bg-dark-650 transition-colors"
+        >
+          <DownIcon class="w-3 h-3 text-light-400" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+**Step 2: Commit**
+
+```bash
+git add src/components/ui/FormField.vue
+git commit -m "feat: create FormField component
+
+- Supports label, icon, error states, required states
+- Supports number incrementer
+- Supports z-index control for overlapping elements
+- Replaces ~400 lines of duplicated form markup"
+```
+
+---
+
+### Task 5.2: Replace FormField in CreateTaskAXS.vue
+
+**Files:**
+- Modify: `src/components/Tasks/CreateTaskAXS.vue`
+
+**Step 1: Import FormField**
+
+```javascript
+import FormField from '@/components/ui/FormField.vue'
+```
+
+**Step 2: Replace input wrapper markup**
+
+Find all instances of:
+
+```vue
+<div class="input-wrapper">
+  <label class="label-override mb-2">
+    Name
+    <NameIcon />
+  </label>
+  <div class="input-default">
+    <input type="text" v-model="name" />
+  </div>
+</div>
+```
+
+Replace with:
+
+```vue
+<FormField
+  label="Name"
+  :icon="NameIcon"
+  v-model="name"
+  type="text"
+/>
+```
+
+**Step 3: Remove old input-wrapper styles**
+
+**Step 4: Test form**
+
+Test: All input fields render correctly, v-model binding works, incrementers work
+
+**Step 5: Commit**
+
+```bash
+git add src/components/Tasks/CreateTaskAXS.vue
+git commit -m "refactor: use FormField component in CreateTaskAXS.vue
+
+- Replace 10+ input wrappers with FormField
+- Remove duplicated form markup"
+```
+
+---
+
+### Task 5.3: Replace FormField in CreateTaskTM.vue
+
+**Files:**
+- Modify: `src/components/Tasks/CreateTaskTM.vue`
+
+**Step 1-5:** Same as Task 5.2
+
+**Step 6: Commit**
+
+```bash
+git add src/components/Tasks/CreateTaskTM.vue
+git commit -m "refactor: use FormField component in CreateTaskTM.vue"
+```
+
+---
+
+### Task 5.4: Replace FormField in CreateAccount.vue
+
+**Files:**
+- Modify: `src/components/Editors/Account/CreateAccount.vue`
+
+**Step 1-5:** Same as Task 5.2
+
+**Step 6: Commit**
+
+```bash
+git add src/components/Editors/Account/CreateAccount.vue
+git commit -m "refactor: use FormField component in CreateAccount.vue"
+```
+
+---
+
+### Task 5.5: Replace FormField in CreateProfile.vue
+
+**Files:**
+- Modify: `src/components/Editors/Profile/CreateProfile.vue`
+
+**Step 1-5:** Same as Task 5.2
+
+**Step 6: Commit**
+
+```bash
+git add src/components/Editors/Profile/CreateProfile.vue
+git commit -m "refactor: use FormField component in CreateProfile.vue"
+```
+
+---
+
+### Task 5.6: Create InfoRow Component
+
+**Files:**
+- Create: `src/components/ui/InfoRow.vue`
+
+**Step 1: Create component**
+
+```vue
+<script setup>
+import { defineProps } from 'vue'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+
+const props = defineProps({
+  icon: {
+    type: Object,
+    default: null
+  },
+  label: {
+    type: String,
+    required: true
+  },
+  value: {
+    type: [String, Number],
+    default: ''
+  },
+  valueClass: {
+    type: String,
+    default: ''
+  },
+  copyable: {
+    type: Boolean,
+    default: false
+  },
+  copyText: {
+    type: String,
+    default: ''
+  }
+})
+
+const { copy } = useCopyToClipboard()
+
+const handleCopy = () => {
+  if (props.copyable) {
+    copy(props.copyText || props.value, 'Copied')
+  }
+}
+</script>
+
+<template>
+  <div
+    class="flex items-center gap-3 py-2 px-3 rounded-md hover:bg-dark-400/50 transition-colors"
+    :class="{ 'cursor-pointer': copyable }"
+    @click="handleCopy"
+  >
+    <component
+      :is="icon"
+      v-if="icon"
+      class="w-5 h-5 text-light-500 flex-shrink-0"
+    />
+    <span class="text-sm text-light-500 min-w-[100px]">{{ label }}</span>
+    <span
+      class="text-sm text-light-300 flex-1 text-right"
+      :class="valueClass"
+    >
+      <slot>{{ value }}</slot>
+    </span>
+    <slot name="actions" />
+  </div>
+</template>
+```
+
+**Step 2: Commit**
+
+```bash
+git add src/components/ui/InfoRow.vue
+git commit -m "feat: create InfoRow component
+
+- Supports icon, label, value display
+- Supports copyable rows
+- Supports custom value classes
+- Supports action slot for buttons
+- Replaces ~260 lines of duplicated markup"
+```
+
+---
+
+### Task 5.7: Replace InfoRow in ViewTask.vue
+
+**Files:**
+- Modify: `src/components/Tasks/ViewTask.vue`
+
+**Step 1: Import InfoRow**
+
+```javascript
+import InfoRow from '@/components/ui/InfoRow.vue'
+```
+
+**Step 2: Replace info row markup**
+
+Find instances like:
+
+```vue
+<div class="info-row">
+  <IdIcon />
+  <span>ID</span>
+  <span>{{ task.id }}</span>
+</div>
+```
+
+Replace with:
+
+```vue
+<InfoRow
+  :icon="IdIcon"
+  label="ID"
+  :value="task.id"
+  copyable
+  :copy-text="task.id"
+/>
+```
+
+**Step 3: Test**
+
+Open task details modal
+Test: All info rows render, copy functionality works
+
+**Step 4: Commit**
+
+```bash
+git add src/components/Tasks/ViewTask.vue
+git commit -m "refactor: use InfoRow component in ViewTask.vue
+
+- Replace 20+ info row instances
+- Remove duplicated markup"
+```
+
+---
+
+### Task 5.8: Create SectionCard Component
+
+**Files:**
+- Create: `src/components/ui/SectionCard.vue`
+
+**Step 1: Create component**
+
+```vue
+<script setup>
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<template>
+  <div class="bg-dark-400 rounded-lg p-4 border border-dark-600">
+    <h3
+      v-if="title"
+      class="text-lg font-semibold text-light-300 mb-4 pb-2 border-b border-dark-600"
+    >
+      {{ title }}
+    </h3>
+    <slot />
+  </div>
+</template>
+```
+
+**Step 2: Commit**
+
+```bash
+git add src/components/ui/SectionCard.vue
+git commit -m "feat: create SectionCard component
+
+- Card container with optional title
+- Consistent styling across modals
+- Uses Tailwind exclusively"
+```
+
+---
+
+### Task 5.9: Use SectionCard in ViewTask.vue
+
+**Files:**
+- Modify: `src/components/Tasks/ViewTask.vue`
+
+**Step 1: Import SectionCard**
+
+**Step 2: Replace section-card markup**
+
+Replace:
+
+```vue
+<div class="section-card">
+  <h3 class="section-title">Details</h3>
+  <!-- content -->
+</div>
+```
+
+With:
+
+```vue
+<SectionCard title="Details">
+  <!-- content -->
+</SectionCard>
+```
+
+**Step 3: Remove section-card styles**
+
+**Step 4: Test**
+
+**Step 5: Commit**
+
+```bash
+git add src/components/Tasks/ViewTask.vue
+git commit -m "refactor: use SectionCard component in ViewTask.vue"
+```
+
+---
+
+### Task 5.10: Create ActionButtonGroup Component
+
+**Files:**
+- Create: `src/components/ui/ActionButtonGroup.vue`
+
+**Step 1: Create component**
+
+```vue
+<template>
+  <ul class="flex items-center gap-1 mobile-portrait:gap-0.5">
+    <slot />
+  </ul>
+</template>
+
+<style scoped>
+/* Minimal styles for button group - mostly handled by slot content */
+</style>
+```
+
+**Step 2: Commit**
+
+```bash
+git add src/components/ui/ActionButtonGroup.vue
+git commit -m "feat: create ActionButtonGroup component
+
+- Wrapper for row action buttons
+- Consistent responsive spacing
+- Replaces 555+ lines of duplicated CSS"
+```
+
+---
+
+### Task 5.11: Use ActionButtonGroup in Task.vue
+
+**Files:**
+- Modify: `src/components/Tasks/Task.vue`
+
+**Step 1: Import ActionButtonGroup**
+
+**Step 2: Wrap buttons**
+
+Replace:
+
+```vue
+<ul class="task-buttons">
+  <li><button>...</button></li>
+  <li><button>...</button></li>
+</ul>
+```
+
+With:
+
+```vue
+<ActionButtonGroup>
+  <li><button>...</button></li>
+  <li><button>...</button></li>
+</ActionButtonGroup>
+```
+
+**Step 3: Remove .task-buttons styles**
+
+**Step 4: Test**
+
+**Step 5: Commit**
+
+```bash
+git add src/components/Tasks/Task.vue
+git commit -m "refactor: use ActionButtonGroup in Task.vue
+
+- Replace custom button group with component
+- Remove ~185 lines of CSS"
+```
+
+---
+
+### Task 5.12: Use ActionButtonGroup in Account.vue
+
+**Files:**
+- Modify: `src/components/Editors/Account/Account.vue`
+
+**Step 1-5:** Same as Task 5.11
+
+**Step 6: Commit**
+
+```bash
+git add src/components/Editors/Account/Account.vue
+git commit -m "refactor: use ActionButtonGroup in Account.vue"
+```
+
+---
+
+### Task 5.13: Use ActionButtonGroup in Profile.vue
+
+**Files:**
+- Modify: `src/components/Editors/Profile/Profile.vue`
+
+**Step 1-5:** Same as Task 5.11
+
+**Step 6: Commit**
+
+```bash
+git add src/components/Editors/Profile/Profile.vue
+git commit -m "refactor: use ActionButtonGroup in Profile.vue"
+```
+
+---
+
+## Phase 6: Color Migration (Medium Priority)
+
+### Task 6.1: Replace Hardcoded Gray Colors
+
+**Files:**
+- Modify: `src/components/Editors/Account/AccountView.vue`
+- Modify: `src/components/Editors/Profile/ProfileView.vue`
+- Modify: `src/components/Tasks/TaskView.vue`
+
+**Step 1: Find and replace #969696**
+
+Find: `color: #969696`
+Replace with class: `text-light-500`
+
+**Step 2: Find and replace #9CA3AF**
+
+Find: `color: #9CA3AF`
+Replace with class: `text-light-400`
+
+**Step 3: Test**
+
+Check all views, ensure text colors look identical
+
+**Step 4: Commit**
+
+```bash
+git add src/components/Editors/Account/AccountView.vue src/components/Editors/Profile/ProfileView.vue src/components/Tasks/TaskView.vue
+git commit -m "refactor: replace hardcoded gray text colors with theme tokens
+
+- Replace #969696 with text-light-500
+- Replace #9CA3AF with text-light-400"
+```
+
+---
+
+### Task 6.2: Replace rgba Gray Backgrounds in Filter.vue
+
+**Files:**
+- Modify: `src/components/Filter/Filter.vue`
+
+**Step 1: Replace rgba(61, 62, 68, X)**
+
+Find: `rgba(61, 62, 68, 0.3)`
+Replace with: `bg-dark-625/30`
+
+Find: `rgba(61, 62, 68, 0.6)`
+Replace with: `bg-dark-625/60`
+
+**Step 2: Replace rgba(68, 69, 75, X)**
+
+Find: `rgba(68, 69, 75, 0.3)`
+Replace with: `bg-dark-675/30`
+
+**Step 3: Replace rgba(46, 47, 52, X)**
+
+Find: `rgba(46, 47, 52, 0.9)`
+Replace with: `bg-dark-475/90`
+
+**Step 4: Replace rgba(35, 36, 41, X)**
+
+Find: `rgba(35, 36, 41, 0.9)`
+Replace with: `bg-dark-450/90`
+
+**Step 5: Test filter component**
+
+Test: Filter appearance, background colors, opacity levels
+
+**Step 6: Commit**
+
+```bash
+git add src/components/Filter/Filter.vue
+git commit -m "refactor: replace rgba gray backgrounds with dark scale tokens
+
+- Use dark-625, dark-675, dark-475, dark-450 with opacity
+- Replace ~30 rgba instances"
+```
+
+---
+
+### Task 6.3: Replace Error Color Variations
+
+**Files:**
+- Modify: `src/components/Filter/Filter.vue`
+- Modify: `src/components/Editors/Profile/CreateProfile.vue`
+- Modify: `src/components/Editors/Account/CreateAccount.vue`
+
+**Step 1: Replace #EE8282**
+
+Find: `#EE8282` or `rgb(238, 130, 130)`
+Replace with class: `text-error-300` or `border-error-300`
+
+**Step 2: Replace rgba(239, 68, 68, X)**
+
+Find: `rgba(239, 68, 68, 0.8)`
+Replace with: `bg-error-500/80`
+
+**Step 3: Test**
+
+Check error states, border colors, text colors
+
+**Step 4: Commit**
+
+```bash
+git add src/components/Filter/Filter.vue src/components/Editors/Profile/CreateProfile.vue src/components/Editors/Account/CreateAccount.vue
+git commit -m "refactor: standardize error colors
+
+- Replace #EE8282 with error-300
+- Replace rgba(239,68,68,X) with error-500
+- Consolidate error color usage"
+```
+
+---
+
+### Task 6.4: Replace Modal Overlay Color
+
+**Files:**
+- Modify: `src/components/ui/Modal.vue` (if not done in Task 4.3)
+
+**Step 1: Replace rgba(17, 17, 17, 0.85)**
+
+Find: `background-color: rgba(17, 17, 17, 0.85)`
+Replace with class: `bg-overlay-dark`
+
+**Step 2: Test**
+
+Open modal, check overlay appearance
+
+**Step 3: Commit**
+
+```bash
+git add src/components/ui/Modal.vue
+git commit -m "refactor: use overlay-dark token for modal background"
+```
+
+---
+
+### Task 6.5: Replace Accent Color Variations in ReconnectIndicator
+
+**Files:**
+- Modify: `src/components/ui/ReconnectIndicator.vue`
+
+**Step 1: Replace rgba(136, 201, 153, X)**
+
+Find: `rgba(136, 201, 153, 0.3)` (and similar)
+Replace with: `bg-accent-green/30`
+
+**Step 2: Replace rgba(157, 211, 168, X)**
+
+Replace with: `bg-accent-green/40` (approximate)
+
+**Step 3: Replace rgba(123, 193, 135, X)**
+
+Replace with: `bg-accent-green/50` (approximate)
+
+**Step 4: Test**
+
+Trigger reconnection, check indicator colors
+
+**Step 5: Commit**
+
+```bash
+git add src/components/ui/ReconnectIndicator.vue
+git commit -m "refactor: use accent-green token for reconnect indicator
+
+- Replace hardcoded rgba green variants
+- Use accent-green with opacity"
+```
+
+---
+
+## Phase 7: Remaining CSS Cleanup
+
+### Task 7.1: Clean Up CountryChooser.vue
+
+**Files:**
+- Modify: `src/components/ui/controls/CountryChooser.vue`
+
+**Step 1: Replace circular button hack**
+
+Find:
+
+```css
+border-radius: 100% !important;
+width: 3em !important;
+height: 3em !important;
+```
+
+Replace with:
+
+```vue
+class="rounded-full w-12 h-12"
+```
+
+**Step 2: Remove dropdown !important**
+
+Find:
+
+```css
+max-height: 208px !important;
+overflow-y: auto !important;
+touch-action: pan-y !important;
+```
+
+Replace with:
+
+```vue
+class="max-h-52 overflow-y-auto touch-pan-y"
+```
+
+**Step 3: Convert header padding/margin**
+
+Replace hardcoded values with Tailwind spacing utilities
+
+**Step 4: Test**
+
+Test country chooser dropdown, button appearance
+
+**Step 5: Commit**
+
+```bash
+git add src/components/ui/controls/CountryChooser.vue
+git commit -m "refactor: clean up CountryChooser.vue
+
+- Replace circular button hack with Tailwind
+- Remove !important overrides
+- Convert spacing to Tailwind utilities
+- Remove ~40 lines of CSS"
+```
+
+---
+
+### Task 7.2: Clean Up Table.vue
+
+**Files:**
+- Modify: `src/components/Table/Table.vue`
+
+**Step 1: Remove scroll !important**
+
+Find:
+
+```css
+overflow-x: auto !important;
+overflow-y: auto !important;
+touch-action: pan-x pan-y !important;
+```
+
+Replace with:
+
+```vue
+class="overflow-x-auto overflow-y-auto touch-pan-x touch-pan-y"
+```
+
+**Step 2: Simplify max-height calculation**
+
+Keep `calc(100vh - 200px)` but remove !important if present
+
+**Step 3: Remove landscape mode hack**
+
+Remove:
+
+```css
+@media (orientation: landscape) {
+  max-height: calc(100vh - 160px) !important;
+  margin-bottom: 2rem !important;
+}
+```
+
+Since iPhone landscape is no longer supported.
+
+**Step 4: Test**
+
+Test table scrolling, responsiveness
+
+**Step 5: Commit**
+
+```bash
+git add src/components/Table/Table.vue
+git commit -m "refactor: clean up Table.vue
+
+- Remove scroll !important overrides
+- Remove landscape mode hacks
+- Simplify height calculations
+- Remove ~30 lines of CSS"
+```
+
+---
+
+### Task 7.3: Clean Up Console.vue
+
+**Files:**
+- Modify: `src/views/Console.vue`
+
+**Step 1: Optimize responsive padding**
+
+Replace:
+
+```css
+padding-bottom: 4rem;
+@media (max-width: 480px) {
+  padding-bottom: 6rem;
+}
+```
+
+With:
+
+```vue
+class="pb-16 mobile-portrait:pb-24"
+```
+
+**Step 2: Remove touch-action !important**
+
+**Step 3: Test**
+
+Navigate to console, check padding, scroll behavior
+
+**Step 4: Commit**
+
+```bash
+git add src/views/Console.vue
+git commit -m "refactor: clean up Console.vue responsive padding"
+```
+
+---
+
+### Task 7.4: Clean Up Tasks.vue
+
+**Files:**
+- Modify: `src/views/Tasks.vue`
+
+**Step 1: Remove PWA padding hack**
+
+Find:
+
+```css
+@media (display-mode: standalone) {
+  padding-bottom: X !important;
+}
+```
+
+Replace with proper Tailwind utility if needed, or remove if redundant.
+
+**Step 2: Remove magic height !important**
+
+**Step 3: Test**
+
+Navigate to tasks page, check layout
+
+**Step 4: Commit**
+
+```bash
+git add src/views/Tasks.vue
+git commit -m "refactor: clean up Tasks.vue PWA hacks"
+```
+
+---
+
+### Task 7.5: Clean Up Switch.vue
+
+**Files:**
+- Modify: `src/components/ui/controls/atomic/Switch.vue`
+
+**Step 1: Convert hardcoded px to Tailwind**
+
+The Switch component has well-structured iOS-style CSS. Keep the custom styles but ensure Tailwind is used where possible for spacing, colors.
+
+**Step 2: Test**
+
+Test switch toggle behavior, appearance
+
+**Step 3: Commit**
+
+```bash
+git add src/components/ui/controls/atomic/Switch.vue
+git commit -m "refactor: optimize Switch.vue with Tailwind where applicable"
+```
+
+---
+
+### Task 7.6: Clean Up Splash.vue
+
+**Files:**
+- Modify: `src/components/ui/Splash.vue`
+
+**Step 1: Replace background-color**
+
+Find: `background-color: rgba(28, 28, 49, 100%)`
+Replace with: `class="bg-dark-300"`
+
+**Step 2: Test**
+
+Check splash screen appearance
+
+**Step 3: Commit**
+
+```bash
+git add src/components/ui/Splash.vue
+git commit -m "refactor: use theme color in Splash.vue"
+```
+
+---
+
+## Phase 8: Final Verification
+
+### Task 8.1: Run Automated Verification Plan
+
+**Files:**
+- Reference: `/Users/luca/Documents/GitHub/Necro/Dashboard/VERIFICATION_PLAN.md`
+
+**Step 1: Start both dev servers**
+
+Run: `npm run dev`
+Expected: Servers on 5173 and 8081
+
+**Step 2: Manual quick check**
+
+Test critical paths:
+- Login flow
+- Navigate to each route
+- Open/close modals
+- Test dropdowns
+- Test tables
+- Test forms
+
+**Step 3: Responsive testing**
+
+Test at breakpoints:
+- Mobile portrait (375px)
+- iPad Pro (1024px)
+- Desktop (1920px)
+
+**Step 4: PWA verification**
+
+- Check manifest
+- Test service worker
+- Test offline behavior
+- Test install prompt
+
+**Step 5: Document any issues**
+
+Create issues file if regressions found.
+
+**Step 6: Commit verification results**
+
+```bash
+git add VERIFICATION_PLAN.md
+git commit -m "docs: verification results for Tailwind consolidation"
+```
+
+---
+
+### Task 8.2: Count Remaining CSS Lines
+
+**Files:**
+- All Vue files
+
+**Step 1: Count <style> blocks**
+
+Run: `grep -r "<style" src/components src/views | wc -l`
+
+**Step 2: Count !important usage**
+
+Run: `grep -r "!important" src/components src/views | wc -l`
+
+**Step 3: Compare with baseline**
+
+Baseline:
+- 53 files with `<style>` blocks
+- 378 `!important` declarations
+
+Target:
+- < 20 files with `<style>` blocks (animations only)
+- < 50 `!important` declarations
+
+**Step 4: Document results**
+
+Create summary in docs/plans/2026-02-08-tailwind-consolidation-results.md
+
+---
+
+### Task 8.3: Create Final Summary Report
+
+**Files:**
+- Create: `docs/plans/2026-02-08-tailwind-consolidation-results.md`
+
+**Step 1: Document changes**
+
+```markdown
+# Tailwind Consolidation Results
+
+## Metrics
+
+**Before:**
+- Files with <style> blocks: 53
+- !important declarations: 378
+- Lines of CSS: ~2000
+- Duplicate components: 7 patterns identified
+
+**After:**
+- Files with <style> blocks: X
+- !important declarations: X
+- Lines of CSS: ~X
+- Duplicate components: 0 (all extracted)
+
+## Components Created
+
+1. StatusBadge - 4 files refactored
+2. FormField - 5 files refactored
+3. InfoRow - 2 files refactored
+4. SectionCard - 2 files refactored
+5. ActionButtonGroup - 3 files refactored
+
+## Composables Created
+
+1. useRowSelection - 3 files refactored
+2. useCopyToClipboard - 3 files refactored
+
+## Theme Tokens Added
+
+- Dark scale extensions: 350, 450, 475, 625, 675
+- Error colors: 300, 400, 500
+- Overlay colors: dark, darker
+- Semantic tokens: text-*, bg-*, border-focus, primary
+- Shadow system: 7 new shadows
+- Font sizes: xxs, xxxs
+
+## Files Modified
+
+[List all modified files]
+
+## Breaking Changes
+
+- iPhone landscape support removed (forces rotation)
+
+## Verification Status
+
+- ✅ All routes accessible
+- ✅ Responsive behavior maintained
+- ✅ PWA functionality working
+- ✅ Dark theme intact
+- ✅ No visual regressions
+```
+
+**Step 2: Commit**
+
+```bash
+git add docs/plans/2026-02-08-tailwind-consolidation-results.md
+git commit -m "docs: Tailwind consolidation completion report"
+```
+
+---
+
+## Phase 9: Cleanup and Documentation
+
+### Task 9.1: Update README (if exists)
+
+**Files:**
+- Modify: `README.md` (if exists)
+
+**Step 1: Document new components**
+
+Add section:
+
+```markdown
+## UI Components
+
+- `StatusBadge` - Enabled/disabled badge indicator
+- `FormField` - Input field with label and icon
+- `InfoRow` - Key-value display row
+- `SectionCard` - Card container for modal sections
+- `ActionButtonGroup` - Row action button group
+
+## Composables
+
+- `useRowSelection` - Double-click/tap row selection
+- `useCopyToClipboard` - Copy to clipboard with notification
+```
+
+**Step 2: Update supported devices**
+
+```markdown
+## Supported Devices
+
+- Desktop (1024px+)
+- iPad Pro
+- iPhone (Portrait mode only)
+
+iPhone landscape mode forces rotation to portrait.
+```
+
+**Step 3: Commit**
+
+```bash
+git add README.md
+git commit -m "docs: update README with new components and device support"
+```
+
+---
+
+### Task 9.2: Final Commit and Branch Summary
+
+**Step 1: Review all changes**
+
+Run: `git log --oneline | head -50`
+
+**Step 2: Create final summary commit**
+
+```bash
+git commit --allow-empty -m "feat: complete Tailwind CSS consolidation
+
+Summary of changes:
+- Removed 1,600+ lines of duplicate CSS
+- Extracted 5 reusable components
+- Created 2 composables for common patterns
+- Extended Tailwind theme with 20+ tokens
+- Removed 300+ !important declarations
+- Removed iPhone landscape support
+- Achieved near-zero CSS in Vue files
+
+Components created:
+- StatusBadge (4 files refactored)
+- FormField (5 files refactored)
+- InfoRow (2 files refactored)
+- SectionCard (2 files refactored)
+- ActionButtonGroup (3 files refactored)
+
+Composables created:
+- useRowSelection (3 files)
+- useCopyToClipboard (3 files)
+
+All functionality verified, no regressions."
+```
+
+---
+
+## Execution Notes
+
+**Estimated time:** 8-12 hours (depending on file complexity)
+
+**Recommended approach:**
+1. Execute phases sequentially
+2. Test after each phase before moving to next
+3. Commit frequently (after each task)
+4. Use verification plan after Phase 4, 5, 7, and 8
+
+**Rollback strategy:**
+If any phase causes issues, rollback to previous phase commit:
+```bash
+git log --oneline
+git reset --hard <commit-hash>
+```
+
+**Testing checklist per phase:**
+- [ ] Phase 1: Dev server starts, no config errors
+- [ ] Phase 2: App loads without landscape lock
+- [ ] Phase 3: Components render correctly
+- [ ] Phase 4: No visual regressions in cleaned files
+- [ ] Phase 5: Forms and info displays work
+- [ ] Phase 6: Colors look identical to before
+- [ ] Phase 7: Remaining components work
+- [ ] Phase 8: Full app verification passes