CSS optimization

PlanTempus.Application/reports/CSS_OPTIMIZATION_REPORT.md

@@ -184,16 +184,21 @@ swp-status-badge.active {
 ---
 
 ### 3. GRID+SUBGRID TABLE PATTERN (Medium Priority)
-**Found:** Duplicated in 6 files  
+**Found:** Duplicated in 5 files (plus 1 generic base already exists)
 **Impact:** ~200 lines
 
-**Files with duplicate pattern:**
+**Good News:** `swp-data-table` already exists as generic base component in components.css!
+
+**Files with duplicate pattern (should migrate to swp-data-table):**
 1. cash.css:130 - swp-cash-table
 2. employees.css:69 - swp-employee-table
 3. account.css:185 - swp-invoice-table
 4. employees.css:729 - swp-salary-table
-5. cash.css:357 - swp-data-table
-6. page.css:85 - Card content grids
+5. page.css:85 - Card content grids
+
+**Already using swp-data-table:**
+- ✅ employees.css:855 - `.rates-content swp-data-table` (with nth-child styling)
+- ✅ employees.css:960 - `.stats-bookings swp-data-table` (with nth-child styling)
 
 **Current pattern (repeated 6 times):**
 ```css
@@ -217,77 +222,91 @@ swp-[feature]-row {
 }
 ```
 
-**Recommendation - Add base pattern to components.css:**
+**Current Base Component (components.css:498-537):**
 ```css
-/* Base table component - reuse this pattern */
-swp-table {
+/* ✅ Already exists - USE THIS! */
+swp-data-table {
   display: grid;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
+  font-size: var(--font-size-base);
 }
 
-swp-table-header,
-swp-table-body {
+swp-data-table-header {
   display: grid;
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
-}
-
-swp-table-header {
   background: var(--color-background-alt);
-  border-bottom: 1px solid var(--color-border);
 }
 
-swp-table-row {
+swp-data-table-row {
   display: grid;
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
   align-items: center;
   border-bottom: 1px solid var(--color-border);
-  transition: background var(--transition-fast);
 }
 
-swp-table-row:last-child {
-  border-bottom: none;
-}
-
-swp-table-body swp-table-row:hover {
+swp-data-table-row:hover {
   background: var(--color-background-hover);
 }
 
-swp-table-cell {
-  padding: var(--spacing-5) var(--spacing-4);
-  font-size: var(--font-size-base);
-  color: var(--color-text);
+swp-data-table-row:last-child {
+  border-bottom: none;
 }
 
-swp-table-header swp-table-cell {
-  font-size: var(--font-size-xs);
+swp-data-table-header swp-data-table-cell {
+  font-size: 11px;
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.3px;
   color: var(--color-text-secondary);
 }
+
+swp-data-table-cell {
+  padding: 12px 16px;
+  color: var(--color-text);
+}
 ```
 
-**Migration example:**
+**Recommendation:** Migrate existing specialized tables to use `swp-data-table` + nth-child styling
+
+**Migration example (cash.css):**
 ```css
-/* Before - cash.css (~70 lines of boilerplate) */
+/* Before - cash.css (~70 lines of custom table boilerplate) */
 swp-cash-table {
   display: grid;
   grid-template-columns: 50px 70px 60px minmax(140px, 1fr) 90px 100px 100px 110px 120px 40px;
-  /* ... 60+ more lines ... */
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  /* ... 60+ more lines of standard table styles ... */
 }
 
-/* After - cash.css (~10 lines) */
-swp-cash-table {
+/* After - cash.css (~15 lines, using swp-data-table) */
+swp-data-table.cash-register {
   grid-template-columns: 50px 70px 60px minmax(140px, 1fr) 90px 100px 100px 110px 120px 40px;
 }
 
-swp-cash-td.mono { font-family: var(--font-mono); }
-swp-cash-td.negative { color: var(--color-red); }
+/* Feature-specific styling with nth-child (like employees.css does) */
+.cash-register swp-data-table-cell:nth-child(3) {
+  font-family: var(--font-mono);
+}
+
+.cash-register swp-data-table-cell.negative {
+  color: var(--color-red);
+}
+```
+
+**Real-world example from employees.css:**
+```css
+/* ✅ Already implemented correctly! */
+.stats-bookings swp-data-table {
+  grid-template-columns: 90px 60px minmax(120px, 1fr) minmax(150px, 1fr) 80px 100px 100px;
+}
+
+.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(1),
+.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(2) {
+  font-family: var(--font-mono);
+  color: var(--color-text-secondary);
+}
 ```
 
 ---
@@ -408,15 +427,22 @@ swp-badge.purple { background: var(--bg-purple-strong); color: var(--color-purpl
 ### Phase 2: Component Consolidation
 
 **Files to modify:**
-- components.css (add base patterns)
+- components.css (enhance existing swp-data-table)
+- Feature files using custom tables
 
 **Changes:**
-1. Create base table component (swp-table)
-2. Unify badge system (swp-badge)
+1. ✅ **swp-data-table already exists** - just need to migrate other tables to use it
+2. Unify badge system to single swp-badge component
 3. Standardize form controls
-4. Update COMPONENT-CATALOG.md
+4. Update COMPONENT-CATALOG.md with swp-data-table examples
 
-**Impact:** ~350 lines saved across 10+ feature files
+**Impact:** ~350 lines saved across feature files (cash.css, account.css, etc.)
+
+**Migration priority:**
+1. cash.css: Replace swp-cash-table → swp-data-table.cash-register
+2. account.css: Replace swp-invoice-table → swp-data-table.invoices
+3. employees.css: Replace swp-employee-table → swp-data-table.employees
+4. employees.css: Replace swp-salary-table → swp-data-table.salary
 
 ---