@necrolab/dashboard 0.5.15 → 0.5.17

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

@@ -1,2438 +0,0 @@
-# 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 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="h-3 w-3 text-accent-green" />
-        <CloseXIcon v-else class="h-3 w-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"></tr>
-```
-
-**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 h-screen min-h-screen"></div>
-```
-
-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"></div>
-```
-
-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="h-5 w-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 bg-overlay-dark backdrop-blur-xs fixed inset-0 z-modal flex pt-14"></div>
-```
-
-**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.6 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 { 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 flex items-center gap-2 text-sm font-medium text-light-400">
-            {{ label }}
-            <component :is="icon" v-if="icon" class="h-4 w-4" />
-        </label>
-        <div
-            class="relative flex items-center rounded-md border bg-dark-500 transition-colors"
-            :class="[hasError ? 'border-error-500' : 'border-dark-600', required ? 'ring-primary/20 ring-2' : '']">
-            <slot>
-                <input
-                    :type="type"
-                    :placeholder="placeholder"
-                    :value="modelValue"
-                    @input="emit('update:modelValue', $event.target.value)"
-                    v-bind="attrs"
-                    class="w-full bg-transparent px-3 py-2 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 transition-colors hover:bg-dark-650">
-                    <UpIcon class="h-3 w-3 text-light-400" />
-                </button>
-                <button @click="emit('decrement')" type="button" class="px-2 py-1 transition-colors hover:bg-dark-650">
-                    <DownIcon class="h-3 w-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 { 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 rounded-md px-3 py-2 transition-colors hover:bg-dark-400/50"
-        :class="{ 'cursor-pointer': copyable }"
-        @click="handleCopy">
-        <component :is="icon" v-if="icon" class="h-5 w-5 flex-shrink-0 text-light-500" />
-        <span class="min-w-[100px] text-sm text-light-500">{{ label }}</span>
-        <span class="flex-1 text-right text-sm text-light-300" :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>
-const props = defineProps({
-    title: {
-        type: String,
-        default: ""
-    }
-});
-</script>
-
-<template>
-    <div class="rounded-lg border border-dark-600 bg-dark-400 p-4">
-        <h3 v-if="title" class="mb-4 border-b border-dark-600 pb-2 text-lg font-semibold text-light-300">
-            {{ 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