docs(css): Add comprehensive CSS refactoring plan and documentation

Add complete planning documentation for CSS architecture refactoring project: - 7-phase implementation plan (92-120 hours) - 123 detailed tasks across all phases - Target: ~3,260 lines CSS reduction (40-50%) - Complete requirements analysis - Progress tracking system - Phase-by-phase breakdown with acceptance criteria Documentation structure: - features/README.md - Project overview and quick start - features/CSS_REFACTORING_PLAN.md - Implementation strategy - features/CSS_REFACTORING_REQUIREMENTS.md - Detailed requirements - features/PROGRESS_TRACKER.md - Live progress tracking - features/phases/*.md - 7 phase documents with tasks Ready to begin Phase 1: Forms Standardization 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 13:10:57 +02:00
parent e2d63d609a
commit bff37e78d8
11 changed files with 6157 additions and 0 deletions
--- a/features/CSS_REFACTORING_PLAN.md
+++ b/features/CSS_REFACTORING_PLAN.md
@@ -0,0 +1,380 @@
+# ROA2WEB CSS Refactoring - Implementation Plan
+
+**Project:** CSS Architecture Refactoring
+**Start Date:** TBD
+**Duration:** 5-6 weeks (92-120 hours)
+**Status:** Planning
+**Branch:** `feature/css-refactoring`
+
+---
+
+## Implementation Strategy
+
+### Branch Strategy
+- **Single feature branch:** `feature/css-refactoring`
+- **Commit after each phase** with detailed commit messages
+- **Final merge to main** after all phases complete and tested
+- **No intermediate merges** to avoid partial states in production
+
+### Testing Strategy
+1. **Playwright visual snapshots** - Capture baseline before Phase 1
+2. **Snapshot comparison** - After each phase completion
+3. **Manual testing checklist** - Desktop/tablet/mobile after each phase
+4. **Real device testing** - On actual mobile devices (not just browser resize)
+
+### Workflow
+```bash
+# Initial setup
+git checkout -b feature/css-refactoring
+npm run test:e2e -- --update-snapshots  # Capture baseline
+
+# For each phase
+# 1. Implement changes
+# 2. Test with snapshots
+npm run test:e2e
+# 3. Manual testing
+# 4. Commit
+git add .
+git commit -m "feat(css): Phase X - [description]"
+git push origin feature/css-refactoring
+
+# Final merge (after Phase 7)
+git checkout main
+git merge feature/css-refactoring
+git push origin main
+```
+
+---
+
+## Phase Overview
+
+| Phase | Priority | Duration | Lines Saved | Risk | Status |
+|-------|----------|----------|-------------|------|--------|
+| 1. Standardizare Formulare | 🔥 High | 10-12h | ~150 | Medium | ⏸️ Pending |
+| 2. Fundație Pattern-uri | 🏗️ Foundation | 8-10h | 0 (setup) | Low | ⏸️ Pending |
+| 3. PrimeVue Centralizare | 🎨 High | 6-8h | ~150 | Medium | ⏸️ Pending |
+| 4. Card Components | 📊 High | 16-20h | ~800 | High | ⏸️ Pending |
+| 5. DashboardView Major | 🚀 Critical | 24-32h | ~1,710 | Very High | ⏸️ Pending |
+| 6. View-uri Rămase | 📄 Medium | 16-20h | ~400 | Medium | ⏸️ Pending |
+| 7. Documentare | 📚 High | 12-16h | 0 (docs) | Low | ⏸️ Pending |
+| **TOTAL** | - | **92-120h** | **~3,260** | - | **0% Complete** |
+
+---
+
+## Detailed Phase Breakdown
+
+### Phase 1: Standardizare Formulare ⚡
+**Priority:** User-facing impact
+**Duration:** 10-12 hours
+**Files:** [See phase-1-forms.md](./phases/phase-1-forms.md)
+
+**Objectives:**
+- Eliminate inconsistent form patterns
+- Standardize all forms to use `forms.css`
+- Remove duplicate form styling
+- Create form template for future use
+
+**Key Changes:**
+- LoginView.vue: `.field` → `.form-group`
+- InvoicesView.vue: `.filter-group` → `.form-group`
+- Eliminate ~150 lines of duplicate CSS
+
+---
+
+### Phase 2: Fundație Pattern-uri Globale 🏗️
+**Priority:** Foundation for future phases
+**Duration:** 8-10 hours
+**Files:** [See phase-2-foundation.md](./phases/phase-2-foundation.md)
+
+**Objectives:**
+- Create global pattern files
+- Establish reusable component classes
+- Set up extended design tokens
+- Prepare for major refactoring
+
+**New Files Created:**
+- `assets/css/patterns/interactive.css`
+- `assets/css/patterns/dashboard.css`
+- `assets/css/patterns/animations.css`
+- `assets/css/core/tokens.css`
+- `assets/css/vendor/primevue-overrides.css`
+
+---
+
+### Phase 3: PrimeVue Centralizare 🎨
+**Priority:** Eliminate anti-patterns
+**Duration:** 6-8 hours
+**Files:** [See phase-3-primevue.md](./phases/phase-3-primevue.md)
+
+**Objectives:**
+- Move all `:deep()` overrides to global CSS
+- Eliminate `!important` from components
+- Replace hardcoded colors with design tokens
+- Achieve 0 PrimeVue overrides in components
+
+**Target:** 50+ `:deep()` instances → 0
+
+---
+
+### Phase 4: Card Components 📊
+**Priority:** High duplication area
+**Duration:** 16-20 hours
+**Files:** [See phase-4-cards.md](./phases/phase-4-cards.md)
+
+**Objectives:**
+- Extract common card patterns
+- Refactor 5 card components
+- Reduce card CSS by ~70%
+- Create reusable card classes
+
+**Components:**
+- MetricCard.vue: 331 → 80 lines
+- CashFlowMetricCard.vue: 179 → 60 lines
+- ClientiBalanceCard.vue: 260 → 90 lines
+- FurnizoriBalanceCard.vue: ~260 → 90 lines
+- TreasuryDualCard.vue: ~200 → 60 lines
+
+---
+
+### Phase 5: DashboardView Major Refactoring 🚀
+**Priority:** CRITICAL - Biggest impact
+**Duration:** 24-32 hours
+**Files:** [See phase-5-dashboard.md](./phases/phase-5-dashboard.md)
+
+**Objectives:**
+- Reduce 2,010 lines to ~300 lines (85% reduction)
+- Eliminate table style duplication
+- Consolidate 4 responsive breakpoints to 1
+- Extract all reusable patterns
+
+**⚠️ High Risk:**
+- Main dashboard view - critical functionality
+- Extensive visual regression testing required
+- Incremental approach mandatory
+
+---
+
+### Phase 6: View-uri Rămase 📄
+**Priority:** Complete standardization
+**Duration:** 16-20 hours
+**Files:** [See phase-6-views.md](./phases/phase-6-views.md)
+
+**Objectives:**
+- Apply patterns to remaining views
+- Ensure consistency across all pages
+- Eliminate view-specific duplications
+
+**Views:**
+- TelegramView.vue: 218 → 80 lines
+- BankCashRegisterView.vue
+- CacheStatsView.vue
+- Other views as needed
+
+---
+
+### Phase 7: Documentare & Finalizare 📚
+**Priority:** Long-term maintainability
+**Duration:** 12-16 hours
+**Files:** [See phase-7-documentation.md](./phases/phase-7-documentation.md)
+
+**Objectives:**
+- Create comprehensive pattern library
+- Document component styling guidelines
+- Create developer onboarding guide
+- Performance report and metrics
+
+**Deliverables:**
+- `docs/CSS_PATTERNS.md`
+- `docs/FORM_TEMPLATE.md`
+- `docs/COMPONENT_STYLING.md`
+- `docs/STYLING_GUIDELINES.md`
+- Performance comparison report
+
+---
+
+## Testing Checklist (Per Phase)
+
+### Automated Testing
+- [ ] Playwright visual regression tests pass
+- [ ] No snapshot differences (or approved differences)
+- [ ] Build completes without errors
+- [ ] No console errors in browser
+
+### Manual Testing
+- [ ] Desktop view (1920x1080) - All functionality works
+- [ ] Tablet view (768x1024) - Responsive layout correct
+- [ ] Mobile view (375x667) - Touch interactions work
+- [ ] All forms validate correctly
+- [ ] All buttons respond to clicks
+- [ ] All PrimeVue components styled correctly
+- [ ] Hover states work on desktop
+- [ ] Focus states visible (keyboard navigation)
+- [ ] Loading states display correctly
+- [ ] Error states display correctly
+
+### Browser Compatibility
+- [ ] Chrome (latest)
+- [ ] Firefox (latest)
+- [ ] Safari (latest)
+- [ ] Edge (latest)
+
+### Performance
+- [ ] CSS bundle size measured (before/after)
+- [ ] Page load time measured
+- [ ] Lighthouse score recorded
+- [ ] No performance degradation
+
+---
+
+## Progress Tracking
+
+See [PROGRESS_TRACKER.md](./PROGRESS_TRACKER.md) for detailed task-level tracking.
+
+### Overall Progress
+- **Phases Completed:** 0/7 (0%)
+- **Total Hours Spent:** 0h / 92-120h
+- **CSS Lines Eliminated:** 0 / ~3,260
+
+### Current Phase
+- **Phase:** None (Planning)
+- **Status:** Awaiting approval
+- **Next:** Phase 1 - Forms Standardization
+
+---
+
+## Rollback Plan
+
+If any phase causes critical issues:
+
+### Immediate Rollback
+```bash
+# Revert to last working commit
+git reset --hard <last-good-commit>
+git push origin feature/css-refactoring --force
+```
+
+### Phase-Specific Rollback
+```bash
+# Revert specific phase commits
+git revert <phase-commit-hash>
+git push origin feature/css-refactoring
+```
+
+### Complete Rollback
+```bash
+# Abandon feature branch
+git checkout main
+git branch -D feature/css-refactoring
+# Redeploy last stable version
+```
+
+---
+
+## Success Criteria
+
+### Code Quality
+- [ ] CSS duplication reduced from 70% to <20%
+- [ ] Zero `:deep()` PrimeVue overrides in components
+- [ ] All forms use standard `.form-group` pattern
+- [ ] Hardcoded values reduced from ~150 to <20
+
+### Performance
+- [ ] CSS bundle size reduced by 30%
+- [ ] Page load time improved by 15%
+- [ ] Lighthouse score increased by 10+ points
+
+### Functionality
+- [ ] Zero visual regressions
+- [ ] All features work identically
+- [ ] No console errors
+- [ ] All tests pass
+
+### Documentation
+- [ ] Pattern library complete
+- [ ] Developer guidelines written
+- [ ] Examples provided for all patterns
+- [ ] Onboarding documentation ready
+
+---
+
+## Communication Plan
+
+### Daily Updates
+- Progress posted in development channel
+- Blockers escalated immediately
+- Phase completion announced
+
+### Phase Reviews
+- Demo after each phase completion
+- Stakeholder approval before next phase
+- Testing results shared
+
+### Final Review
+- Comprehensive demo of all changes
+- Performance metrics presented
+- Before/after comparison
+- Approval for merge to main
+
+---
+
+## Dependencies & Blockers
+
+### Current Blockers
+- [ ] Plan approval pending
+- [ ] Testing strategy confirmation needed
+- [ ] Resource allocation required
+
+### External Dependencies
+- PrimeVue library (must remain compatible)
+- Playwright testing framework
+- Vue.js 3 framework
+
+### Internal Dependencies
+- Frontend development environment
+- Access to staging/testing environment
+- QA team availability for testing
+
+---
+
+## Timeline
+
+**Optimistic:** 5 weeks (92 hours @ 18h/week)
+**Realistic:** 6 weeks (108 hours @ 18h/week)
+**Pessimistic:** 7 weeks (120 hours @ 17h/week)
+
+### Week-by-Week Plan
+
+| Week | Phases | Hours | Deliverable |
+|------|--------|-------|-------------|
+| 1 | Phase 1 + Phase 2 | 18-22h | Forms + Foundation |
+| 2 | Phase 3 | 6-8h | PrimeVue centralized |
+| 3 | Phase 4 | 16-20h | Cards refactored |
+| 4 | Phase 5 (start) | 18-20h | Dashboard partial |
+| 5 | Phase 5 (complete) + Phase 6 | 18-20h | Dashboard + Views |
+| 6 | Phase 7 | 12-16h | Documentation |
+
+---
+
+## Approval & Sign-off
+
+### Required Approvals
+- [ ] Technical Lead - Plan review
+- [ ] Product Owner - Scope approval
+- [ ] QA Lead - Testing strategy approval
+- [ ] Development Team - Resource commitment
+
+### Sign-off
+- [ ] Plan approved for execution
+- [ ] Resources allocated
+- [ ] Timeline agreed
+- [ ] Success metrics confirmed
+
+**Approved By:** _____________
+**Date:** _____________
+**Start Date:** _____________
+
+---
+
+**Last Updated:** 2025-11-18
+**Document Version:** 1.0
+**Next Review:** After Phase 1 completion
--- a/features/CSS_REFACTORING_REQUIREMENTS.md
+++ b/features/CSS_REFACTORING_REQUIREMENTS.md
@@ -0,0 +1,367 @@
+# ROA2WEB Frontend CSS Refactoring - Requirements & Analysis
+
+**Created:** 2025-11-18
+**Status:** Planning Phase
+**Priority:** High
+**Estimated Effort:** 92-120 hours (5-6 weeks)
+
+---
+
+## Executive Summary
+
+The ROA2WEB Vue.js frontend has a **well-designed CSS foundation** but suffers from **severe style duplication** in component scoped styles. An estimated **70-80% of scoped styles can be eliminated** by properly utilizing the existing CSS system.
+
+### Critical Statistics
+
+- **Total Vue files analyzed:** 24 components (4,353 lines)
+- **CSS system files:** 17 organized stylesheets
+- **Estimated reduction:** ~3,260 lines of CSS (40-50%)
+- **Biggest problem:** DashboardView.vue with 2,010 lines of scoped CSS
+
+---
+
+## Current State Analysis
+
+### ✅ Strengths
+
+1. **Professional CSS Architecture**
+   - Location: `/reports-app/frontend/src/assets/css/`
+   - 17 well-organized files (core, layout, components, utilities)
+   - 181 lines of design tokens in `variables.css`
+   - 460 lines comprehensive form system in `forms.css`
+   - 430 lines button system in `buttons.css`
+
+2. **Design Tokens System**
+   ```css
+   /* Excellent foundation */
+   --space-xs through --space-3xl     /* 8 spacing values */
+   --text-xs through --text-4xl       /* 8 typography sizes */
+   --color-primary, --color-success   /* Semantic colors */
+   --shadow-sm through --shadow-xl    /* 4 shadow levels */
+   --radius-sm through --radius-full  /* Border radius scale */
+   ```
+
+### ❌ Critical Issues
+
+#### 1. DashboardView.vue - THE BIGGEST PROBLEM
+**File:** `src/views/DashboardView.vue`
+**Lines 787-2010:** 2,010 lines of scoped CSS (47% of component)
+
+**Problems:**
+- Duplicates `containers.css` patterns
+- Duplicates `cards.css` patterns
+- Duplicates `tables.css` patterns
+- 4 separate responsive breakpoints (600 lines)
+- Loading spinner repeated (also in 3 other files)
+- Table styles (400 lines) should use `tables.css`
+
+**Target:** Reduce to ~300 lines (85% reduction = 1,710 lines eliminated)
+
+#### 2. Card Components - Massive Duplication
+
+| Component | Total CSS | Duplicated | Target |
+|-----------|-----------|------------|--------|
+| MetricCard.vue | 331 lines | ~250 lines | 80 lines |
+| CashFlowMetricCard.vue | 179 lines | ~120 lines | 60 lines |
+| ClientiBalanceCard.vue | 260 lines | ~170 lines | 90 lines |
+| FurnizoriBalanceCard.vue | ~260 lines | ~170 lines | 90 lines |
+| TreasuryDualCard.vue | ~200 lines | ~140 lines | 60 lines |
+
+**Repeated Patterns (in all 5 files):**
+```css
+/* Card base styles */
+.metric-card {
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--card-radius);
+  /* ... 20 more identical properties ... */
+}
+
+/* Hover effects */
+.metric-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+  /* ... identical across all files ... */
+}
+
+/* Sparkline containers */
+.sparkline-container { /* Repeated 4 times */ }
+
+/* Breakdown patterns */
+.breakdown-header { /* Repeated 3 times */ }
+
+/* Trend indicators */
+.trend-up, .trend-down, .trend-neutral { /* Repeated 5 times */ }
+```
+
+#### 3. Inconsistent Form Patterns
+
+**Problem:** Each view reinvents forms differently:
+
+| View | Field Wrapper | Label Class | Status |
+|------|--------------|-------------|--------|
+| LoginView.vue | `.field` | `.field-label` | ❌ Custom |
+| InvoicesView.vue | `.filter-group` | `.filter-label` | ❌ Custom |
+| **forms.css (correct)** | `.form-group` | `.form-label` | ✅ Standard |
+
+**Impact:**
+- Inconsistent user experience
+- 3 different implementations
+- forms.css (460 lines) is **underutilized**
+
+#### 4. PrimeVue Anti-Patterns
+
+**LoginView.vue example (lines 269-283):**
+```vue
+<style scoped>
+:deep(.p-inputtext),
+:deep(.p-password input) {
+  border: 2px solid #e5e7eb !important;  /* Hardcoded color */
+  padding: 12px !important;               /* Hardcoded value */
+  font-size: 16px !important;             /* Not using --text-base */
+  transition: all 0.3s ease !important;
+  border-radius: 8px !important;          /* Not using --radius-md */
+}
+
+:deep(.p-inputtext:focus) {
+  border-color: #3b82f6 !important;       /* Hardcoded primary color */
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
+}
+</style>
+```
+
+**Issues:**
+- 50+ instances of `:deep()` with `!important`
+- Hardcoded colors (#3b82f6) instead of `var(--color-primary)`
+- Specificity wars
+- Breaks component encapsulation
+- Maintenance nightmare
+
+#### 5. Loading Spinner Duplication
+
+**Repeated in 4+ files:**
+```css
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+```
+
+**Found in:**
+- DashboardView.vue (lines 1409-1428)
+- MetricCard.vue
+- InvoicesView.vue
+- TelegramView.vue
+
+---
+
+## Requirements
+
+### Functional Requirements
+
+1. **No Visual Changes**
+   - All refactoring must maintain identical appearance
+   - User experience remains unchanged
+   - No functionality breakage
+
+2. **Form Standardization**
+   - Single form pattern across all views
+   - Consistent field structure: `.form-group` + `.form-label`
+   - Utilize existing `forms.css` (460 lines)
+   - Eliminate custom form implementations
+
+3. **PrimeVue Integration**
+   - Centralize all PrimeVue overrides
+   - Eliminate `:deep()` from component scoped styles
+   - Use design tokens instead of hardcoded values
+   - Single source of truth for PrimeVue styling
+
+4. **Pattern Reusability**
+   - Extract common patterns to global CSS
+   - Create reusable component classes
+   - Document patterns for future development
+
+5. **Responsive Consistency**
+   - Consolidate responsive breakpoints
+   - Use global responsive utilities
+   - Reduce component-specific media queries
+
+### Non-Functional Requirements
+
+1. **Performance**
+   - CSS bundle size reduction: -30%
+   - Page load time improvement: -15%
+   - Lighthouse performance score: +10 points
+
+2. **Maintainability**
+   - New component creation time: 2h → 30min
+   - Clear separation: global vs component-specific CSS
+   - Comprehensive documentation
+
+3. **Code Quality**
+   - Eliminate CSS duplication: 70% → 20%
+   - Remove hardcoded values: ~150 → ~20 instances
+   - Zero `:deep()` overrides in components
+   - Consistent design token usage
+
+4. **Testing**
+   - Visual regression tests (Playwright snapshots)
+   - Manual testing checklist (desktop/tablet/mobile)
+   - No functional regressions
+
+---
+
+## Constraints
+
+1. **Technology Stack**
+   - Plain CSS only (no SCSS/SASS available)
+   - Vue.js 3 with scoped styles
+   - PrimeVue component library (saga-blue theme)
+   - Vite build tool
+
+2. **Development**
+   - Cannot break existing functionality
+   - Must maintain backward compatibility
+   - All changes in feature branch
+   - Phased implementation approach
+
+3. **Testing**
+   - Playwright for visual regression
+   - Manual testing between phases
+   - No automated CSS testing tools currently
+
+---
+
+## Success Metrics
+
+### Code Metrics
+
+| Metric | Current | Target | Measurement |
+|--------|---------|--------|-------------|
+| Total scoped CSS lines | ~6,000 | ~2,500 | Line count |
+| DashboardView.vue CSS | 2,010 lines | 300 lines | Line count |
+| CSS duplication | ~70% | ~20% | Manual audit |
+| Hardcoded values | ~150 | ~20 | Grep search |
+| `:deep()` overrides | ~50 | 0 | Grep search |
+| Form patterns | 3 different | 1 standard | Manual review |
+
+### Performance Metrics
+
+| Metric | Target | Measurement |
+|--------|--------|-------------|
+| CSS bundle size | -30% | Build output |
+| Page load time | -15% | Lighthouse |
+| First Contentful Paint | -10% | Lighthouse |
+| Lighthouse Performance | +10 points | Lighthouse |
+
+### Quality Metrics
+
+| Metric | Target | Measurement |
+|--------|--------|-------------|
+| Accessibility score | 95+/100 | Lighthouse |
+| Visual consistency | 95+/100 | Manual review |
+| Mobile responsiveness | 100/100 | Device testing |
+| Cross-browser compatibility | 100/100 | BrowserStack |
+
+---
+
+## Risks & Mitigation
+
+### High Risks
+
+| Risk | Probability | Impact | Mitigation |
+|------|-------------|--------|------------|
+| Visual regressions | High | High | Playwright snapshots before/after each phase |
+| PrimeVue conflicts | Medium | High | Test all PrimeVue components after global overrides |
+| Mobile breakage | Medium | High | Test on real devices, not just browser resize |
+| DashboardView errors | High | Very High | Extensive testing, careful incremental changes |
+
+### Medium Risks
+
+| Risk | Probability | Impact | Mitigation |
+|------|-------------|--------|------------|
+| Scope creep | High | Medium | Stick to phase plan, defer enhancements |
+| Incomplete testing | Medium | High | Comprehensive test checklist per phase |
+| Z-index conflicts | Medium | Low | Use design tokens z-index scale consistently |
+
+### Low Risks
+
+| Risk | Probability | Impact | Mitigation |
+|------|-------------|--------|------------|
+| Performance degradation | Low | Medium | Measure CSS bundle size before/after |
+| Documentation gaps | Medium | Medium | Write docs as you go, not at the end |
+| Developer confusion | Medium | Low | Clear guidelines and examples |
+
+---
+
+## Dependencies
+
+### External
+- PrimeVue component library (must remain compatible)
+- Existing design tokens in `variables.css`
+- Playwright testing framework
+
+### Internal
+- Existing CSS system in `/assets/css/`
+- Vue.js component structure
+- Current responsive breakpoints
+
+---
+
+## Out of Scope
+
+The following are explicitly **NOT** included in this refactoring:
+
+1. Adding SCSS/SASS compilation
+2. Changing PrimeVue theme (saga-blue)
+3. Redesigning UI/UX
+4. Adding new features or functionality
+5. Refactoring JavaScript/TypeScript logic
+6. Database or backend changes
+7. Adding CSS-in-JS libraries
+8. Implementing CSS modules
+
+---
+
+## Stakeholders
+
+- **Development Team:** Implementation and maintenance
+- **End Users:** No visible changes, improved performance
+- **QA Team:** Testing and validation
+- **Product Owner:** Approval and sign-off
+
+---
+
+## Approval Criteria
+
+Before proceeding to implementation:
+
+- [ ] Plan reviewed and approved
+- [ ] Phased approach agreed upon
+- [ ] Testing strategy confirmed
+- [ ] Timeline acceptable
+- [ ] Resources allocated
+- [ ] Risks acknowledged
+
+---
+
+## References
+
+- Analysis report: Full ULTRATHINK analysis (37,661 tokens)
+- Existing CSS system: `/reports-app/frontend/src/assets/css/`
+- PrimeVue docs: https://primevue.org/
+- Design tokens: `assets/css/core/variables.css`
+
+---
+
+**Last Updated:** 2025-11-18
+**Document Version:** 1.0
+**Status:** Awaiting Approval
--- a/features/PROGRESS_TRACKER.md
+++ b/features/PROGRESS_TRACKER.md
@@ -0,0 +1,465 @@
+# ROA2WEB CSS Refactoring - Progress Tracker
+
+**Last Updated:** 2025-11-18
+**Overall Status:** ⏸️ Not Started (Awaiting Approval)
+**Branch:** `feature/css-refactoring`
+
+---
+
+## Overall Progress
+
+```
+Progress: [░░░░░░░░░░░░░░░░░░░░] 0% Complete
+
+Phases Complete: 0/7
+Tasks Complete: 0/117
+Hours Spent: 0h / 92-120h
+CSS Lines Eliminated: 0 / ~3,260
+```
+
+---
+
+## Phase Status Overview
+
+| Phase | Status | Progress | Tasks | Time | Lines Saved | Started | Completed |
+|-------|--------|----------|-------|------|-------------|---------|-----------|
+| **Phase 1: Forms** | ⏸️ Not Started | 0% | 0/18 | 0h/12h | 0/150 | - | - |
+| **Phase 2: Foundation** | ⏸️ Not Started | 0% | 0/15 | 0h/10h | 0/0 | - | - |
+| **Phase 3: PrimeVue** | ⏸️ Not Started | 0% | 0/12 | 0h/8h | 0/150 | - | - |
+| **Phase 4: Cards** | ⏸️ Not Started | 0% | 0/22 | 0h/20h | 0/800 | - | - |
+| **Phase 5: Dashboard** | ⏸️ Not Started | 0% | 0/28 | 0h/32h | 0/1710 | - | - |
+| **Phase 6: Views** | ⏸️ Not Started | 0% | 0/16 | 0h/20h | 0/400 | - | - |
+| **Phase 7: Docs** | ⏸️ Not Started | 0% | 0/12 | 0h/16h | 0/0 | - | - |
+
+**Legend:**
+- ⏸️ Not Started
+- 🔄 In Progress
+- ⏸️ Paused
+- ✅ Complete
+- ❌ Blocked
+
+---
+
+## Current Sprint
+
+### Active Phase
+**None** - Awaiting project approval
+
+### Today's Focus
+- Planning and documentation
+- Awaiting approval to start Phase 1
+
+### Blockers
+- [ ] Plan approval required
+- [ ] Resources allocation needed
+- [ ] Testing environment confirmation
+
+---
+
+## Detailed Phase Progress
+
+### Phase 1: Standardizare Formulare ⚡
+**Status:** ⏸️ Not Started | **Progress:** 0/18 tasks (0%)
+
+<details>
+<summary>View Tasks (0/18 complete)</summary>
+
+#### Setup & Preparation (0/3)
+- [ ] Create feature branch `feature/css-refactoring`
+- [ ] Capture Playwright baseline snapshots
+- [ ] Review existing forms.css capabilities
+
+#### LoginView.vue Refactoring (0/6)
+- [ ] Update template: `.field` → `.form-group`
+- [ ] Update template: `.field-label` → `.form-label`
+- [ ] Remove custom form CSS (lines 234-243)
+- [ ] Remove PrimeVue `:deep()` overrides (lines 269-288)
+- [ ] Test login functionality
+- [ ] Visual regression test
+
+#### InvoicesView.vue Refactoring (0/5)
+- [ ] Update template: `.filter-group` → `.form-group`
+- [ ] Update template: `.filter-label` → `.form-label`
+- [ ] Convert `.filters-row` to `.form-row`
+- [ ] Remove custom filter CSS (lines 545-578)
+- [ ] Visual regression test
+
+#### Testing & Validation (0/3)
+- [ ] Playwright snapshot comparison
+- [ ] Manual testing all breakpoints
+- [ ] Browser compatibility check
+
+#### Documentation (0/1)
+- [ ] Create form template documentation
+
+</details>
+
+**Time Spent:** 0h / 10-12h | **CSS Eliminated:** 0 / ~150 lines
+
+---
+
+### Phase 2: Fundație Pattern-uri Globale 🏗️
+**Status:** ⏸️ Not Started | **Progress:** 0/15 tasks (0%)
+
+<details>
+<summary>View Tasks (0/15 complete)</summary>
+
+#### File Creation (0/5)
+- [ ] Create `assets/css/patterns/interactive.css`
+- [ ] Create `assets/css/patterns/dashboard.css`
+- [ ] Create `assets/css/patterns/animations.css`
+- [ ] Create `assets/css/core/tokens.css`
+- [ ] Create `assets/css/vendor/primevue-overrides.css`
+
+#### Pattern Implementation (0/7)
+- [ ] Implement loading spinner patterns
+- [ ] Implement trend indicator patterns
+- [ ] Implement collapse/expand patterns
+- [ ] Implement page header patterns
+- [ ] Implement section header patterns
+- [ ] Implement breakdown patterns
+- [ ] Implement card hover effects
+
+#### Integration (0/2)
+- [ ] Update `main.css` with new imports
+- [ ] Verify no visual changes
+
+#### Testing (0/1)
+- [ ] Build verification (no errors)
+
+</details>
+
+**Time Spent:** 0h / 8-10h | **CSS Eliminated:** 0 lines (setup phase)
+
+---
+
+### Phase 3: PrimeVue Centralizare 🎨
+**Status:** ⏸️ Not Started | **Progress:** 0/12 tasks (0%)
+
+<details>
+<summary>View Tasks (0/12 complete)</summary>
+
+#### Global Override Setup (0/3)
+- [ ] Move input overrides to `primevue-overrides.css`
+- [ ] Move button overrides to `primevue-overrides.css`
+- [ ] Move datatable overrides to `primevue-overrides.css`
+
+#### Component Cleanup (0/6)
+- [ ] Remove `:deep()` from LoginView.vue
+- [ ] Remove `:deep()` from InvoicesView.vue
+- [ ] Remove `:deep()` from card components
+- [ ] Replace hardcoded colors with design tokens
+- [ ] Remove all `!important` from components
+- [ ] Verify 0 `:deep()` in codebase
+
+#### Testing (0/3)
+- [ ] Test all PrimeVue components
+- [ ] Playwright snapshot comparison
+- [ ] Browser compatibility check
+
+</details>
+
+**Time Spent:** 0h / 6-8h | **CSS Eliminated:** 0 / ~150 lines
+
+---
+
+### Phase 4: Card Components 📊
+**Status:** ⏸️ Not Started | **Progress:** 0/22 tasks (0%)
+
+<details>
+<summary>View Tasks (0/22 complete)</summary>
+
+#### Global Pattern Extraction (0/5)
+- [ ] Add base card styles to `cards.css`
+- [ ] Add sparkline patterns to `dashboard.css`
+- [ ] Add breakdown patterns to `dashboard.css`
+- [ ] Add metric display patterns
+- [ ] Add trend indicator integration
+
+#### MetricCard.vue (0/3)
+- [ ] Update template to use global classes
+- [ ] Remove duplicate CSS (331 → 80 lines)
+- [ ] Visual regression test
+
+#### CashFlowMetricCard.vue (0/3)
+- [ ] Update template to use global classes
+- [ ] Remove duplicate CSS (179 → 60 lines)
+- [ ] Visual regression test
+
+#### ClientiBalanceCard.vue (0/3)
+- [ ] Update template to use global classes
+- [ ] Remove duplicate CSS (260 → 90 lines)
+- [ ] Visual regression test
+
+#### FurnizoriBalanceCard.vue (0/3)
+- [ ] Update template to use global classes
+- [ ] Remove duplicate CSS (~260 → 90 lines)
+- [ ] Visual regression test
+
+#### TreasuryDualCard.vue (0/3)
+- [ ] Update template to use global classes
+- [ ] Remove duplicate CSS (~200 → 60 lines)
+- [ ] Visual regression test
+
+#### Final Testing (0/2)
+- [ ] Test all cards together
+- [ ] Performance measurement
+
+</details>
+
+**Time Spent:** 0h / 16-20h | **CSS Eliminated:** 0 / ~800 lines
+
+---
+
+### Phase 5: DashboardView Major Refactoring 🚀
+**Status:** ⏸️ Not Started | **Progress:** 0/28 tasks (0%)
+
+<details>
+<summary>View Tasks (0/28 complete)</summary>
+
+#### Preparation (0/2)
+- [ ] Full backup of DashboardView.vue
+- [ ] Detailed analysis of all 2,010 CSS lines
+
+#### Page Structure (0/4)
+- [ ] Convert page header to global pattern
+- [ ] Convert section headers to global pattern
+- [ ] Simplify dashboard container layout
+- [ ] Remove duplicate container CSS
+
+#### Table Styles (0/3)
+- [ ] Replace custom table CSS with `tables.css`
+- [ ] Remove 400 lines of table-specific CSS
+- [ ] Test table functionality
+
+#### Stats & Metrics (0/3)
+- [ ] Use metric card patterns from Phase 4
+- [ ] Remove duplicate stat displays
+- [ ] Test all dashboard metrics
+
+#### Responsive Consolidation (0/6)
+- [ ] Audit all 4 media query sections
+- [ ] Extract common patterns to global
+- [ ] Consolidate to single mobile breakpoint
+- [ ] Remove 500+ lines of duplicate responsive CSS
+- [ ] Test on all screen sizes
+- [ ] Test on real mobile devices
+
+#### Loading & Animations (0/3)
+- [ ] Replace loading spinner with global pattern
+- [ ] Use animation patterns from Phase 2
+- [ ] Remove 100 lines of animation CSS
+
+#### Testing (0/5)
+- [ ] Playwright visual regression (critical)
+- [ ] Desktop testing (1920x1080, 1366x768)
+- [ ] Tablet testing (768x1024)
+- [ ] Mobile testing (375x667, 414x896)
+- [ ] All dashboard features functional
+
+#### Validation (0/2)
+- [ ] Measure CSS reduction (target: 1,710 lines)
+- [ ] Performance comparison
+
+</details>
+
+**Time Spent:** 0h / 24-32h | **CSS Eliminated:** 0 / ~1,710 lines
+
+⚠️ **Critical Phase:** Most complex refactoring - requires extensive testing
+
+---
+
+### Phase 6: View-uri Rămase 📄
+**Status:** ⏸️ Not Started | **Progress:** 0/16 tasks (0%)
+
+<details>
+<summary>View Tasks (0/16 complete)</summary>
+
+#### TelegramView.vue (0/5)
+- [ ] Convert page header to global pattern
+- [ ] Replace custom buttons with `buttons.css`
+- [ ] Use standard card patterns
+- [ ] Remove 138 lines of CSS (218 → 80)
+- [ ] Visual regression test
+
+#### BankCashRegisterView.vue (0/4)
+- [ ] Audit current CSS patterns
+- [ ] Apply global patterns
+- [ ] Remove duplicate CSS
+- [ ] Visual regression test
+
+#### CacheStatsView.vue (0/4)
+- [ ] Audit current CSS patterns
+- [ ] Apply global patterns
+- [ ] Remove duplicate CSS
+- [ ] Visual regression test
+
+#### Final Validation (0/3)
+- [ ] All views use consistent patterns
+- [ ] Playwright full suite test
+- [ ] Performance measurement all views
+
+</details>
+
+**Time Spent:** 0h / 16-20h | **CSS Eliminated:** 0 / ~400 lines
+
+---
+
+### Phase 7: Documentare & Finalizare 📚
+**Status:** ⏸️ Not Started | **Progress:** 0/12 tasks (0%)
+
+<details>
+<summary>View Tasks (0/12 complete)</summary>
+
+#### Pattern Documentation (0/4)
+- [ ] Create `docs/CSS_PATTERNS.md` with examples
+- [ ] Create `docs/FORM_TEMPLATE.md` standard template
+- [ ] Create `docs/COMPONENT_STYLING.md` guidelines
+- [ ] Create `docs/STYLING_GUIDELINES.md` best practices
+
+#### Code Documentation (0/2)
+- [ ] Add JSDoc comments to CSS files
+- [ ] Document design token usage
+
+#### Performance Report (0/3)
+- [ ] CSS bundle size before/after
+- [ ] Lighthouse score before/after
+- [ ] Page load metrics comparison
+
+#### Final Deliverables (0/3)
+- [ ] Complete pattern library
+- [ ] Developer onboarding guide
+- [ ] Project completion report
+
+</details>
+
+**Time Spent:** 0h / 12-16h | **Deliverables:** 0/4 documents
+
+---
+
+## Metrics Dashboard
+
+### Code Quality Metrics
+
+| Metric | Baseline | Current | Target | Progress |
+|--------|----------|---------|--------|----------|
+| Total scoped CSS | ~6,000 lines | ~6,000 lines | ~2,500 lines | 0% |
+| DashboardView CSS | 2,010 lines | 2,010 lines | 300 lines | 0% |
+| CSS duplication | ~70% | ~70% | ~20% | 0% |
+| Hardcoded values | ~150 | ~150 | ~20 | 0% |
+| `:deep()` overrides | ~50 | ~50 | 0 | 0% |
+| Form patterns | 3 | 3 | 1 | 0% |
+
+### Performance Metrics
+
+| Metric | Baseline | Current | Target | Status |
+|--------|----------|---------|--------|--------|
+| CSS bundle size | TBD | - | -30% | ⏸️ Not measured |
+| Page load time | TBD | - | -15% | ⏸️ Not measured |
+| First Contentful Paint | TBD | - | -10% | ⏸️ Not measured |
+| Lighthouse Performance | TBD | - | +10pts | ⏸️ Not measured |
+
+### Time Tracking
+
+| Category | Estimated | Actual | Variance | Status |
+|----------|-----------|--------|----------|--------|
+| Phase 1 | 10-12h | 0h | - | ⏸️ |
+| Phase 2 | 8-10h | 0h | - | ⏸️ |
+| Phase 3 | 6-8h | 0h | - | ⏸️ |
+| Phase 4 | 16-20h | 0h | - | ⏸️ |
+| Phase 5 | 24-32h | 0h | - | ⏸️ |
+| Phase 6 | 16-20h | 0h | - | ⏸️ |
+| Phase 7 | 12-16h | 0h | - | ⏸️ |
+| **TOTAL** | **92-120h** | **0h** | **-** | **0%** |
+
+---
+
+## Commit History
+
+_No commits yet - project not started_
+
+---
+
+## Issues & Blockers
+
+### Current Blockers
+1. **Plan Approval** - Awaiting stakeholder approval
+   - **Impact:** Cannot start Phase 1
+   - **Status:** ⏸️ Pending
+   - **ETA:** TBD
+
+### Resolved Issues
+_None yet_
+
+---
+
+## Testing Results
+
+### Visual Regression Tests
+- **Baseline Snapshots:** Not captured
+- **Last Test Run:** N/A
+- **Failures:** 0
+- **Status:** ⏸️ Awaiting Phase 1
+
+### Performance Tests
+- **Last Run:** N/A
+- **CSS Bundle:** Not measured
+- **Lighthouse:** Not measured
+
+---
+
+## Risk Assessment
+
+### Active Risks
+| Risk | Severity | Probability | Status | Mitigation |
+|------|----------|-------------|--------|------------|
+| Visual regressions | High | High | ⚠️ Active | Playwright snapshots |
+| DashboardView breaking | Very High | Medium | ⚠️ Active | Incremental changes |
+| PrimeVue conflicts | High | Medium | ⚠️ Active | Comprehensive testing |
+| Timeline overrun | Medium | Medium | ⚠️ Active | Phase flexibility |
+
+---
+
+## Next Steps
+
+### Immediate Actions (Once Approved)
+1. ✅ Create feature branch `feature/css-refactoring`
+2. ✅ Capture Playwright baseline snapshots
+3. ✅ Start Phase 1: Forms Standardization
+
+### This Week Goals
+- Complete Phase 1 (Forms)
+- Complete Phase 2 (Foundation)
+- Start Phase 3 (PrimeVue)
+
+### This Sprint Goals
+- Complete Phases 1-3
+- Begin Phase 4 (Cards)
+
+---
+
+## Notes & Observations
+
+### 2025-11-18
+- Initial project planning complete
+- 117 total tasks identified across 7 phases
+- Detailed requirements and plan documented
+- Awaiting approval to proceed
+
+---
+
+## Approvals
+
+### Required Sign-offs
+- [ ] Technical Lead: Plan approved
+- [ ] Product Owner: Scope approved
+- [ ] QA Lead: Testing strategy approved
+- [ ] Team: Resources committed
+
+### Change Log
+- 2025-11-18: Initial tracker created
+
+---
+
+**Last Updated:** 2025-11-18 by Claude Code
+**Next Update:** Upon Phase 1 start
--- a/features/README.md
+++ b/features/README.md
@@ -0,0 +1,388 @@
+# ROA2WEB Features & Planning
+
+Acest director conține documentația detaliată pentru toate feature-urile și refactorizările majore ale proiectului ROA2WEB.
+
+## 📁 Structură Director
+
+```
+features/
+├── README.md                              # Acest fișier
+├── CSS_REFACTORING_REQUIREMENTS.md        # Cerințe detaliate CSS refactoring
+├── CSS_REFACTORING_PLAN.md                # Plan general implementare
+├── PROGRESS_TRACKER.md                    # Tracker central progres (LIVE)
+└── phases/                                # Faze detaliate
+    ├── phase-1-forms.md                   # Faza 1: Standardizare formulare (18 tasks)
+    ├── phase-2-foundation.md              # Faza 2: Fundație pattern-uri (15 tasks)
+    ├── phase-3-primevue.md                # Faza 3: PrimeVue centralizare (12 tasks)
+    ├── phase-4-cards.md                   # Faza 4: Card components (22 tasks)
+    ├── phase-5-dashboard.md               # Faza 5: DashboardView major (28 tasks)
+    ├── phase-6-views.md                   # Faza 6: View-uri rămase (16 tasks)
+    └── phase-7-documentation.md           # Faza 7: Documentare (12 tasks)
+```
+
+---
+
+## 🎯 Current Project: CSS Architecture Refactoring
+
+### Status: ⏸️ **PLANNING** (Awaiting Approval)
+
+### Quick Stats
+
+| Metric | Value |
+|--------|-------|
+| **Total Phases** | 7 |
+| **Total Tasks** | 123 tasks |
+| **Estimated Duration** | 5-6 weeks |
+| **Estimated Effort** | 92-120 hours |
+| **Target CSS Reduction** | ~3,260 lines (40-50%) |
+| **Current Progress** | 0% (Not started) |
+
+---
+
+## 📖 How to Use This Documentation
+
+### For Project Managers
+
+1. **Start here:** Read `CSS_REFACTORING_PLAN.md` for high-level overview
+2. **Track progress:** Monitor `PROGRESS_TRACKER.md` (updated in real-time)
+3. **Review phases:** Each phase document has detailed task breakdown
+4. **Check metrics:** Progress tracker shows completion percentages
+
+### For Developers
+
+1. **Understand requirements:** Read `CSS_REFACTORING_REQUIREMENTS.md`
+2. **Find current phase:** Check `PROGRESS_TRACKER.md` → Current Sprint
+3. **Get task details:** Open relevant `phases/phase-X-*.md` file
+4. **Follow instructions:** Each task has:
+   - Status indicator
+   - Time estimate
+   - Detailed instructions
+   - Code examples
+   - Acceptance criteria
+   - Testing requirements
+
+### For QA/Testing
+
+1. **Review testing strategy:** See `CSS_REFACTORING_PLAN.md` → Testing Checklist
+2. **Phase-specific tests:** Each phase document has testing section
+3. **Track test results:** Update in `PROGRESS_TRACKER.md`
+
+---
+
+## 🚀 Quick Start
+
+### Step 1: Approve the Plan
+
+```bash
+# Review the plan
+cat features/CSS_REFACTORING_PLAN.md
+
+# Review requirements
+cat features/CSS_REFACTORING_REQUIREMENTS.md
+
+# Approve or provide feedback
+```
+
+### Step 2: Start Phase 1
+
+```bash
+# Read Phase 1 tasks
+cat features/phases/phase-1-forms.md
+
+# Create feature branch
+git checkout -b feature/css-refactoring
+
+# Capture baseline snapshots
+cd reports-app/frontend
+npm run test:e2e -- --update-snapshots
+
+# Start working on tasks
+```
+
+### Step 3: Track Progress
+
+Update `PROGRESS_TRACKER.md` after completing each task:
+
+```markdown
+#### Task 1.1: Create Feature Branch
+**Status:** ✅ Complete | **Est:** 5 min | **Actual:** 3 min
+```
+
+### Step 4: Commit After Each Phase
+
+```bash
+# See commit message template in each phase-X-*.md file
+git add .
+git commit -m "feat(css): Phase 1 - ..."
+git push origin feature/css-refactoring
+```
+
+---
+
+## 📊 Progress Tracking System
+
+### Task Status Indicators
+
+- ⏸️ **Not Started** - Task not begun
+- 🔄 **In Progress** - Currently working on task
+- ⏸️ **Paused** - Task started but blocked/paused
+- ✅ **Complete** - Task finished and tested
+- ❌ **Blocked** - Cannot proceed (blocker documented)
+
+### Phase Status Indicators
+
+- ⏸️ **Not Started** - Phase awaiting start
+- 🔄 **In Progress** - Active development
+- ⏸️ **Testing** - Implementation complete, testing phase
+- ✅ **Complete** - All tasks complete, tested, committed
+- ❌ **Blocked** - Phase blocked (see PROGRESS_TRACKER.md)
+
+### How to Update Progress
+
+**Option 1: Manual Update (Simple)**
+Edit `PROGRESS_TRACKER.md` directly:
+
+```markdown
+### Phase 1: Standardizare Formulare ⚡
+**Status:** 🔄 In Progress | **Progress:** 5/18 tasks (28%)
+
+<details>
+<summary>View Tasks (5/18 complete)</summary>
+
+#### Setup & Preparation (3/3)
+- [x] Create feature branch
+- [x] Capture Playwright baseline snapshots
+- [x] Review existing forms.css
+
+#### LoginView.vue Refactoring (2/6)
+- [x] Update template: `.field` → `.form-group`
+- [x] Update template: `.field-label` → `.form-label`
+- [ ] Remove custom form CSS
+<!-- ... -->
+```
+
+**Option 2: Automated Script (Advanced)**
+```bash
+# Mark task as complete
+./scripts/update-progress.sh phase-1 task-1.1 complete
+
+# Update phase status
+./scripts/update-progress.sh phase-1 status in-progress
+```
+
+---
+
+## 📋 Phase Overview
+
+### Phase 1: Standardizare Formulare ⚡
+- **Duration:** 10-12 hours
+- **Tasks:** 18
+- **Impact:** ~150 lines eliminated, consistent forms
+- **Risk:** Medium
+- **Dependencies:** None (can start immediately)
+
+### Phase 2: Fundație Pattern-uri Globale 🏗️
+- **Duration:** 8-10 hours
+- **Tasks:** 15
+- **Impact:** Foundation for all other phases
+- **Risk:** Low
+- **Dependencies:** None (parallel with Phase 1)
+
+### Phase 3: PrimeVue Centralizare 🎨
+- **Duration:** 6-8 hours
+- **Tasks:** 12
+- **Impact:** ~150 lines eliminated, 0 `:deep()` overrides
+- **Risk:** Medium
+- **Dependencies:** Phase 2 (needs primevue-overrides.css)
+
+### Phase 4: Card Components 📊
+- **Duration:** 16-20 hours
+- **Tasks:** 22
+- **Impact:** ~800 lines eliminated
+- **Risk:** High
+- **Dependencies:** Phase 2 (needs patterns), Phase 3 (needs PrimeVue)
+
+### Phase 5: DashboardView Major Refactoring 🚀
+- **Duration:** 24-32 hours
+- **Tasks:** 28
+- **Impact:** ~1,710 lines eliminated (85% reduction)
+- **Risk:** ⚠️ VERY HIGH (most critical phase)
+- **Dependencies:** Phases 2, 3, 4 (needs all foundations)
+
+### Phase 6: View-uri Rămase 📄
+- **Duration:** 16-20 hours
+- **Tasks:** 16
+- **Impact:** ~400 lines eliminated
+- **Risk:** Medium
+- **Dependencies:** Phases 1-5 (apply all learnings)
+
+### Phase 7: Documentare & Finalizare 📚
+- **Duration:** 12-16 hours
+- **Tasks:** 12
+- **Impact:** Complete documentation, performance report
+- **Risk:** Low
+- **Dependencies:** Phases 1-6 (documents all work)
+
+---
+
+## 🔧 Tools & Scripts
+
+### Progress Tracking
+```bash
+# View current progress
+cat features/PROGRESS_TRACKER.md
+
+# Update task status (manual)
+vim features/PROGRESS_TRACKER.md
+
+# Generate progress report
+./scripts/generate-progress-report.sh
+```
+
+### Testing
+```bash
+# Run visual regression tests
+cd reports-app/frontend
+npm run test:e2e
+
+# Compare snapshots
+npm run test:e2e:report
+
+# Update snapshots (after approved changes)
+npm run test:e2e -- --update-snapshots
+```
+
+### Metrics
+```bash
+# Count CSS lines in components
+find src/components src/views -name "*.vue" -exec sh -c \
+  'sed -n "/<style/,/<\/style>/p" {} | wc -l' \;
+
+# Check bundle size
+npm run build
+ls -lh dist/assets/*.css
+```
+
+---
+
+## 📝 Document Templates
+
+### Adding a New Phase
+
+1. Create `features/phases/phase-X-name.md`
+2. Use existing phase documents as template
+3. Include:
+   - Objectives
+   - Task breakdown with time estimates
+   - Code examples (before/after)
+   - Acceptance criteria
+   - Testing requirements
+   - Commit message template
+
+### Adding a New Feature
+
+1. Create requirements document: `features/FEATURE_NAME_REQUIREMENTS.md`
+2. Create implementation plan: `features/FEATURE_NAME_PLAN.md`
+3. Create progress tracker: `features/FEATURE_NAME_PROGRESS.md`
+4. Create phase documents in `features/phases/`
+5. Update this README with new feature
+
+---
+
+## ✅ Best Practices
+
+### Documentation
+
+- ✅ Keep PROGRESS_TRACKER.md updated daily
+- ✅ Mark tasks complete immediately when done
+- ✅ Document blockers in PROGRESS_TRACKER.md
+- ✅ Update time estimates with actuals
+- ✅ Commit progress updates separately
+
+### Development
+
+- ✅ Read entire phase document before starting
+- ✅ Follow task order (dependencies matter)
+- ✅ Test after every task
+- ✅ Commit after logical groups of tasks
+- ✅ Update progress tracker after each task
+
+### Testing
+
+- ✅ Capture Playwright snapshots before starting
+- ✅ Run visual regression after each task
+- ✅ Test on real devices (especially mobile)
+- ✅ Browser compatibility check per phase
+- ✅ Document test results in progress tracker
+
+### Communication
+
+- ✅ Update team on phase start/completion
+- ✅ Escalate blockers immediately
+- ✅ Share progress tracker link in daily standup
+- ✅ Demo after major phases (3, 5, 7)
+
+---
+
+## 🆘 Troubleshooting
+
+### Can't find current task?
+→ Check `PROGRESS_TRACKER.md` → Current Phase → View Tasks
+
+### Task is blocked?
+→ Document blocker in PROGRESS_TRACKER.md → Issues & Blockers
+→ Escalate to team lead
+→ Move to next unblocked task
+
+### Test failing?
+→ Check acceptance criteria in phase document
+→ Review code examples
+→ Compare with before/after snippets
+→ Ask team for review
+
+### Lost in documentation?
+→ Start with `CSS_REFACTORING_PLAN.md` (overview)
+→ Find current phase in `PROGRESS_TRACKER.md`
+→ Open that phase's document in `phases/`
+
+---
+
+## 📞 Contact & Support
+
+### For Questions About:
+
+- **Planning & Strategy:** Review `CSS_REFACTORING_PLAN.md`
+- **Requirements:** Review `CSS_REFACTORING_REQUIREMENTS.md`
+- **Current Status:** Check `PROGRESS_TRACKER.md`
+- **Specific Tasks:** Open relevant `phases/phase-X-*.md`
+- **Technical Issues:** Ask team in #frontend-css channel
+
+---
+
+## 📅 Version History
+
+| Version | Date | Description |
+|---------|------|-------------|
+| 1.0 | 2025-11-18 | Initial CSS Refactoring documentation created |
+| | | - 7 phases planned |
+| | | - 123 tasks documented |
+| | | - Complete requirements analysis |
+| | | - Progress tracker setup |
+
+---
+
+## 📜 License & Usage
+
+This documentation is internal to ROA2WEB project.
+
+**Usage Guidelines:**
+- ✅ Use as template for future projects
+- ✅ Share with team members
+- ✅ Adapt for similar refactoring tasks
+- ❌ Do not delete completed phase documents (archive value)
+
+---
+
+**Last Updated:** 2025-11-18
+**Maintained By:** Development Team
+**Status:** Active Planning
--- a/features/phases/phase-1-forms.md
+++ b/features/phases/phase-1-forms.md
@@ -0,0 +1,759 @@
+# Phase 1: Standardizare Formulare ⚡
+
+**Priority:** 🔥 High (User-facing impact)
+**Duration:** 10-12 hours
+**Status:** ⏸️ Not Started
+**Risk Level:** Medium
+
+---
+
+## Obiective
+
+1. **Elimină pattern-uri inconsistente** - 3 pattern-uri diferite → 1 standard
+2. **Utilizează forms.css existent** - 460 linii de sistem complet
+3. **Șterge CSS duplicat** - ~150 linii eliminate
+4. **Crează template** - Pentru formulare viitoare
+
+---
+
+## Situație Actuală
+
+### Problem Statement
+
+Fiecare view reinventează formulare-le diferit:
+
+| View | Field Wrapper | Label Class | Lines CSS | Status |
+|------|--------------|-------------|-----------|--------|
+| LoginView.vue | `.field` | `.field-label` | 70 lines | ❌ Custom |
+| InvoicesView.vue | `.filter-group` | `.filter-label` | 80 lines | ❌ Custom |
+| **forms.css** | `.form-group` | `.form-label` | 460 lines | ✅ Standard NEUTILIZAT |
+
+### Impact
+- User experience inconsistent
+- Duplicate code maintenance
+- forms.css (460 linii) este neutilizat
+- Hardcoded PrimeVue overrides cu `!important`
+
+---
+
+## Task Breakdown (18 tasks)
+
+### 1. Setup & Preparation (3 tasks)
+
+#### Task 1.1: Create Feature Branch
+**Status:** ⏸️ Not Started | **Est:** 5 min
+
+```bash
+# Create and switch to feature branch
+git checkout -b feature/css-refactoring
+
+# Verify clean state
+git status
+```
+
+**Acceptance Criteria:**
+- [ ] Branch created: `feature/css-refactoring`
+- [ ] No uncommitted changes
+- [ ] Pushed to remote
+
+---
+
+#### Task 1.2: Capture Playwright Baseline Snapshots
+**Status:** ⏸️ Not Started | **Est:** 15 min
+
+```bash
+cd reports-app/frontend
+
+# Capture baseline screenshots before any changes
+npm run test:e2e -- --update-snapshots
+
+# Verify snapshots created
+ls -la tests/e2e/**/*.png
+```
+
+**Snapshots to Capture:**
+- Login page (desktop, tablet, mobile)
+- Dashboard page
+- Invoices page
+- All form states (empty, filled, error, valid)
+
+**Acceptance Criteria:**
+- [ ] Baseline snapshots captured for all views
+- [ ] Snapshots committed to git
+- [ ] Test suite passes with snapshots
+
+---
+
+#### Task 1.3: Review Existing forms.css
+**Status:** ⏸️ Not Started | **Est:** 30 min
+
+**File:** `reports-app/frontend/src/assets/css/components/forms.css`
+
+**Review:**
+- [ ] Read all 460 lines
+- [ ] Document available classes:
+  - `.form` - Form container
+  - `.form-group` - Field wrapper
+  - `.form-label` - Label styling
+  - `.form-input` - Input styling
+  - `.form-row` - Horizontal layout
+  - `.form-error` - Error message
+  - `.form-help` - Help text
+- [ ] Note validation states: `.valid`, `.invalid`
+- [ ] Understand responsive behavior
+
+**Acceptance Criteria:**
+- [ ] All available classes documented
+- [ ] Pattern examples identified
+- [ ] Ready to apply to components
+
+---
+
+### 2. LoginView.vue Refactoring (6 tasks)
+
+**File:** `reports-app/frontend/src/views/LoginView.vue`
+
+#### Task 2.1: Update Template - Field Wrapper
+**Status:** ⏸️ Not Started | **Est:** 20 min
+
+**Current (lines 95-106):**
+```vue
+<div class="field">
+  <label for="username" class="field-label">Utilizator</label>
+  <InputText
+    id="username"
+    v-model="credentials.username"
+    placeholder="Introduceți numele de utilizator"
+    :class="{ 'p-invalid': formErrors.username }"
+    class="w-full"
+  />
+</div>
+```
+
+**Updated:**
+```vue
+<div class="form-group">
+  <label for="username" class="form-label required">Utilizator</label>
+  <InputText
+    id="username"
+    v-model="credentials.username"
+    placeholder="Introduceți numele de utilizator"
+    :class="{ 'invalid': formErrors.username }"
+    class="form-input w-full"
+  />
+  <span v-if="formErrors.username" class="form-error">
+    {{ formErrors.username }}
+  </span>
+</div>
+```
+
+**Changes:**
+- `.field` → `.form-group`
+- `.field-label` → `.form-label` (with `.required` for required fields)
+- `p-invalid` → `invalid` (forms.css class)
+- Add `.form-input` to InputText
+- Add `.form-error` for error messages
+
+**Acceptance Criteria:**
+- [ ] All form fields updated
+- [ ] Error messages use `.form-error`
+- [ ] No custom field wrapper classes
+
+---
+
+#### Task 2.2: Update Template - Password Field
+**Status:** ⏸️ Not Started | **Est:** 15 min
+
+**Current:**
+```vue
+<div class="field">
+  <label for="password" class="field-label">Parolă</label>
+  <Password
+    id="password"
+    v-model="credentials.password"
+    :feedback="false"
+    toggleMask
+  />
+</div>
+```
+
+**Updated:**
+```vue
+<div class="form-group">
+  <label for="password" class="form-label required">Parolă</label>
+  <Password
+    id="password"
+    v-model="credentials.password"
+    :feedback="false"
+    toggleMask
+    :class="{ 'invalid': formErrors.password }"
+    class="w-full"
+  />
+  <span v-if="formErrors.password" class="form-error">
+    {{ formErrors.password }}
+  </span>
+</div>
+```
+
+**Acceptance Criteria:**
+- [ ] Password field uses `.form-group`
+- [ ] Label uses `.form-label required`
+- [ ] Error handling consistent
+
+---
+
+#### Task 2.3: Remove Custom Form CSS
+**Status:** ⏸️ Not Started | **Est:** 10 min
+
+**Delete Lines 234-243:**
+```css
+/* DELETE THIS - forms.css provides these */
+.field {
+  margin-bottom: 1.5rem;
+}
+
+.field-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: var(--text-color);
+}
+```
+
+**Acceptance Criteria:**
+- [ ] Lines 234-243 deleted
+- [ ] No `.field` or `.field-label` in scoped styles
+- [ ] Form still renders correctly
+
+---
+
+#### Task 2.4: Remove PrimeVue Deep Overrides
+**Status:** ⏸️ Not Started | **Est:** 15 min
+
+**Delete Lines 269-288:**
+```css
+/* DELETE THIS - Will be moved to global primevue-overrides.css in Phase 3 */
+:deep(.p-inputtext),
+:deep(.p-password input) {
+  border: 2px solid #e5e7eb !important;
+  padding: 12px !important;
+  font-size: 16px !important;
+  transition: all 0.3s ease !important;
+  border-radius: 8px !important;
+}
+
+:deep(.p-inputtext:focus),
+:deep(.p-password input:focus) {
+  border-color: #3b82f6 !important;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
+  outline: none !important;
+}
+
+/* ... more :deep() rules ... */
+```
+
+**Note:** These will be added to global `primevue-overrides.css` in Phase 3.
+
+**Acceptance Criteria:**
+- [ ] All `:deep()` rules removed from LoginView.vue
+- [ ] No `!important` in scoped styles
+- [ ] Form inputs still styled (via forms.css)
+
+---
+
+#### Task 2.5: Test Login Functionality
+**Status:** ⏸️ Not Started | **Est:** 30 min
+
+**Test Checklist:**
+- [ ] Login form renders correctly
+- [ ] All fields are accessible
+- [ ] Validation works on blur
+- [ ] Error messages display correctly
+- [ ] Form submission works
+- [ ] Success login redirects to dashboard
+- [ ] Failed login shows error
+- [ ] Keyboard navigation works (Tab through fields)
+- [ ] Enter key submits form
+
+**Test Scenarios:**
+1. Empty form submission → validation errors
+2. Invalid credentials → API error message
+3. Valid credentials → successful login
+4. Field focus states visible
+5. Error states visible
+
+**Acceptance Criteria:**
+- [ ] All test scenarios pass
+- [ ] No functionality broken
+- [ ] No console errors
+
+---
+
+#### Task 2.6: Visual Regression Test
+**Status:** ⏸️ Not Started | **Est:** 15 min
+
+```bash
+# Run Playwright tests
+npm run test:e2e -- tests/e2e/auth/login.spec.ts
+
+# Check for visual differences
+npm run test:e2e:report
+```
+
+**Visual Checks:**
+- [ ] Login form layout identical
+- [ ] Field spacing correct
+- [ ] Label styling identical
+- [ ] Error message styling identical
+- [ ] Button styling unchanged
+- [ ] Responsive layout works (mobile, tablet)
+
+**Acceptance Criteria:**
+- [ ] Playwright tests pass
+- [ ] No unexpected visual differences
+- [ ] Any differences documented and approved
+
+---
+
+### 3. InvoicesView.vue Refactoring (5 tasks)
+
+**File:** `reports-app/frontend/src/views/InvoicesView.vue`
+
+#### Task 3.1: Update Template - Filter Groups
+**Status:** ⏸️ Not Started | **Est:** 30 min
+
+**Current (lines 45-60):**
+```vue
+<div class="filters-container">
+  <div class="filters-row">
+    <div class="filter-group">
+      <label class="filter-label">Tip Factură</label>
+      <Dropdown
+        v-model="filters.type"
+        :options="invoiceTypes"
+        option-label="label"
+        option-value="value"
+        placeholder="Tip factură"
+        @change="handleFilterChange"
+      />
+    </div>
+  </div>
+</div>
+```
+
+**Updated:**
+```vue
+<div class="form">
+  <div class="form-row">
+    <div class="form-col">
+      <div class="form-group">
+        <label class="form-label">Tip Factură</label>
+        <Dropdown
+          v-model="filters.type"
+          :options="invoiceTypes"
+          option-label="label"
+          option-value="value"
+          placeholder="Tip factură"
+          @change="handleFilterChange"
+          class="w-full"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+**Changes:**
+- `.filters-container` → `.form`
+- `.filters-row` → `.form-row`
+- `.filter-group` → `.form-group` (inside `.form-col`)
+- `.filter-label` → `.form-label`
+
+**Acceptance Criteria:**
+- [ ] All filter fields updated
+- [ ] Grid layout preserved (form-row + form-col)
+- [ ] No custom filter classes
+
+---
+
+#### Task 3.2: Update Date Range Filters
+**Status:** ⏸️ Not Started | **Est:** 20 min
+
+**Current:**
+```vue
+<div class="filter-group">
+  <label class="filter-label">De la</label>
+  <Calendar
+    v-model="filters.dateFrom"
+    dateFormat="dd/mm/yy"
+    placeholder="Data început"
+  />
+</div>
+<div class="filter-group">
+  <label class="filter-label">Până la</label>
+  <Calendar
+    v-model="filters.dateTo"
+    dateFormat="dd/mm/yy"
+    placeholder="Data sfârșit"
+  />
+</div>
+```
+
+**Updated:**
+```vue
+<div class="form-col">
+  <div class="form-group">
+    <label class="form-label">De la</label>
+    <Calendar
+      v-model="filters.dateFrom"
+      dateFormat="dd/mm/yy"
+      placeholder="Data început"
+      class="w-full"
+    />
+  </div>
+</div>
+<div class="form-col">
+  <div class="form-group">
+    <label class="form-label">Până la</label>
+    <Calendar
+      v-model="filters.dateTo"
+      dateFormat="dd/mm/yy"
+      placeholder="Data sfârșit"
+      class="w-full"
+    />
+  </div>
+</div>
+```
+
+**Acceptance Criteria:**
+- [ ] Date pickers use standard form classes
+- [ ] Side-by-side layout preserved
+- [ ] Calendar styling works
+
+---
+
+#### Task 3.3: Remove Custom Filter CSS
+**Status:** ⏸️ Not Started | **Est:** 15 min
+
+**Delete Lines 545-578:**
+```css
+/* DELETE THIS */
+.filters-container {
+  padding: 1rem;
+}
+
+.filters-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.filter-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-color);
+}
+```
+
+**Note:** forms.css provides `.form-row` with grid layout.
+
+**Acceptance Criteria:**
+- [ ] Custom filter CSS deleted
+- [ ] Form layout still correct via forms.css
+- [ ] Grid behavior preserved
+
+---
+
+#### Task 3.4: Remove Filter-Specific Overrides
+**Status:** ⏸️ Not Started | **Est:** 10 min
+
+**Find and remove any filter-specific PrimeVue overrides:**
+
+```bash
+# Search for filter-related :deep() in InvoicesView.vue
+grep -n ":deep" reports-app/frontend/src/views/InvoicesView.vue
+```
+
+Remove any found overrides (will be centralized in Phase 3).
+
+**Acceptance Criteria:**
+- [ ] No `:deep()` for filter components
+- [ ] No hardcoded filter styling
+
+---
+
+#### Task 3.5: Visual Regression Test
+**Status:** ⏸️ Not Started | **Est:** 20 min
+
+```bash
+# Run invoice tests
+npm run test:e2e -- tests/e2e/invoices/
+
+# Check snapshots
+npm run test:e2e:report
+```
+
+**Visual Checks:**
+- [ ] Filter card layout identical
+- [ ] Filter field alignment correct
+- [ ] Grid layout responsive
+- [ ] Date pickers styled correctly
+- [ ] Dropdown styling correct
+
+**Functional Checks:**
+- [ ] All filters work
+- [ ] Filter changes trigger data reload
+- [ ] Clear filters works
+- [ ] Filter combinations work
+
+**Acceptance Criteria:**
+- [ ] Playwright tests pass
+- [ ] No visual regressions
+- [ ] All filters functional
+
+---
+
+### 4. Testing & Validation (3 tasks)
+
+#### Task 4.1: Playwright Snapshot Comparison
+**Status:** ⏸️ Not Started | **Est:** 30 min
+
+```bash
+# Run full test suite
+npm run test:e2e
+
+# Generate report
+npm run test:e2e:report
+
+# Open report
+npx playwright show-report
+```
+
+**Compare:**
+- [ ] Login page (desktop, tablet, mobile)
+- [ ] Invoices filter section
+- [ ] All form states (empty, filled, error, valid)
+
+**Document any differences:**
+- Expected differences: None (should be pixel-perfect)
+- Acceptable differences: Font rendering variations
+- Unacceptable differences: Layout shifts, color changes, missing elements
+
+**Acceptance Criteria:**
+- [ ] All visual regression tests pass
+- [ ] Any differences documented and approved
+- [ ] Screenshots archived
+
+---
+
+#### Task 4.2: Manual Testing All Breakpoints
+**Status:** ⏸️ Not Started | **Est:** 45 min
+
+**Desktop Testing (1920x1080):**
+- [ ] Login form centered and styled
+- [ ] Invoice filters in grid layout
+- [ ] All fields accessible
+- [ ] Hover states work
+- [ ] Focus states visible
+
+**Tablet Testing (768x1024):**
+- [ ] Login form responsive
+- [ ] Filter grid adapts to tablet
+- [ ] Touch targets adequate (min 44px)
+- [ ] No horizontal scroll
+
+**Mobile Testing (375x667):**
+- [ ] Login form full-width
+- [ ] Filters stack vertically
+- [ ] Font size 16px (no zoom on iOS)
+- [ ] Virtual keyboard doesn't break layout
+
+**Acceptance Criteria:**
+- [ ] All breakpoints tested
+- [ ] Forms responsive on all devices
+- [ ] No layout breaks
+
+---
+
+#### Task 4.3: Browser Compatibility Check
+**Status:** ⏸️ Not Started | **Est:** 30 min
+
+**Test on:**
+- [ ] Chrome (latest) - Primary browser
+- [ ] Firefox (latest)
+- [ ] Safari (latest) - macOS/iOS
+- [ ] Edge (latest)
+
+**Check:**
+- Form layout identical
+- CSS variables supported
+- Flexbox/Grid working
+- Focus outlines visible
+- No console errors
+
+**Acceptance Criteria:**
+- [ ] Forms work on all browsers
+- [ ] Visual consistency across browsers
+- [ ] No JavaScript errors
+
+---
+
+### 5. Documentation (1 task)
+
+#### Task 5.1: Create Form Template Documentation
+**Status:** ⏸️ Not Started | **Est:** 1 hour
+
+**Create:** `docs/FORM_TEMPLATE.md`
+
+**Content:**
+1. Standard form structure
+2. Field types (text, password, dropdown, date)
+3. Validation pattern
+4. Error handling
+5. Responsive layout
+6. Accessibility guidelines
+
+**Template Example:**
+```vue
+<template>
+  <form @submit.prevent="handleSubmit" class="form">
+    <!-- Single field -->
+    <div class="form-group">
+      <label for="field" class="form-label required">Label</label>
+      <input
+        id="field"
+        v-model="formData.field"
+        type="text"
+        class="form-input"
+        :class="{ 'invalid': errors.field }"
+      />
+      <span v-if="errors.field" class="form-error">
+        {{ errors.field }}
+      </span>
+    </div>
+
+    <!-- Horizontal fields -->
+    <div class="form-row">
+      <div class="form-col">
+        <!-- Field 1 -->
+      </div>
+      <div class="form-col">
+        <!-- Field 2 -->
+      </div>
+    </div>
+
+    <!-- Form actions -->
+    <div class="form-actions">
+      <button type="submit" class="btn btn-primary">
+        Submit
+      </button>
+    </div>
+  </form>
+</template>
+```
+
+**Acceptance Criteria:**
+- [ ] Template documented with examples
+- [ ] All field types covered
+- [ ] Validation pattern explained
+- [ ] Accessibility notes included
+
+---
+
+## Completion Criteria
+
+### Code Quality
+- [ ] Zero custom form wrapper classes (`.field`, `.filter-group`)
+- [ ] All forms use `.form-group` + `.form-label`
+- [ ] No `:deep()` PrimeVue overrides in components
+- [ ] ~150 lines of CSS eliminated
+
+### Functionality
+- [ ] Login works identically
+- [ ] Invoice filters work identically
+- [ ] All validation works
+- [ ] No console errors
+
+### Testing
+- [ ] Playwright visual regression tests pass
+- [ ] Manual testing complete (all breakpoints)
+- [ ] Browser compatibility verified
+
+### Documentation
+- [ ] Form template created
+- [ ] Pattern documented
+
+---
+
+## Files Modified
+
+1. `reports-app/frontend/src/views/LoginView.vue`
+   - Template: Updated field wrappers and labels
+   - CSS: Deleted lines 234-243, 269-288 (~90 lines)
+
+2. `reports-app/frontend/src/views/InvoicesView.vue`
+   - Template: Updated filter structure
+   - CSS: Deleted lines 545-578 (~80 lines)
+
+3. `docs/FORM_TEMPLATE.md` (new file)
+   - Standard form template and guidelines
+
+**Total:** 2 files modified, 1 file created, ~150 lines deleted
+
+---
+
+## Commit Message
+
+```
+feat(css): Phase 1 - Standardize form patterns across views
+
+BREAKING: None (visual changes only, no API changes)
+
+Changes:
+- Standardize LoginView.vue to use forms.css patterns
+- Standardize InvoicesView.vue filter forms
+- Remove ~150 lines of duplicate form CSS
+- Eliminate custom form wrapper classes
+- Create standard form template documentation
+
+Impact:
+- Consistent form UX across application
+- Reduced CSS duplication (70% → 65%)
+- Cleaner component code
+- forms.css (460 lines) now utilized
+
+Testing:
+- ✅ Playwright visual regression tests pass
+- ✅ Manual testing on desktop/tablet/mobile
+- ✅ Browser compatibility verified (Chrome/Firefox/Safari/Edge)
+- ✅ All form functionality preserved
+
+Files:
+- Modified: LoginView.vue, InvoicesView.vue
+- Created: docs/FORM_TEMPLATE.md
+- CSS eliminated: ~150 lines
+
+Refs: #CSS-REFACTORING Phase 1/7
+```
+
+---
+
+## Next Phase
+
+**Phase 2:** Fundație Pattern-uri Globale
+- Create global pattern files
+- Prepare for major refactoring
+- See: [phase-2-foundation.md](./phase-2-foundation.md)
+
+---
+
+**Created:** 2025-11-18
+**Last Updated:** 2025-11-18
+**Status:** ⏸️ Awaiting Start
--- a/features/phases/phase-2-foundation.md
+++ b/features/phases/phase-2-foundation.md
@@ -0,0 +1,730 @@
+# Phase 2: Fundație Pattern-uri Globale 🏗️
+
+**Priority:** Foundation pentru future phases
+**Duration:** 8-10 hours
+**Status:** ⏸️ Not Started
+**Risk Level:** Low (additive changes only)
+
+---
+
+## Obiective
+
+1. **Creare fișiere pattern globale** - 5 fișiere CSS noi
+2. **Extract pattern-uri repetate** - Loading spinners, trends, breakdowns
+3. **Design tokens extinse** - Card-specific, animations, interactivity
+4. **PrimeVue overrides centralizate** - Pregătire pentru Phase 3
+5. **Zero modificări vizuale** - Setup fără impact
+
+---
+
+## Task Breakdown (15 tasks)
+
+### 1. File Creation (5 tasks)
+
+#### Task 1.1: Create interactive.css
+**Status:** ⏸️ | **Est:** 90 min
+
+**File:** `reports-app/frontend/src/assets/css/patterns/interactive.css`
+
+```css
+/* Interactive Patterns - ROA2WEB */
+
+/* ===== Loading Spinners ===== */
+.loading-spinner {
+  width: var(--spinner-size, 40px);
+  height: var(--spinner-size, 40px);
+  border: 4px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: var(--radius-full);
+  animation: spin 1s linear infinite;
+}
+
+.loading-spinner-sm {
+  --spinner-size: 24px;
+  border-width: 3px;
+}
+
+.loading-spinner-lg {
+  --spinner-size: 56px;
+  border-width: 5px;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ===== Trend Indicators ===== */
+.trend {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+}
+
+.trend-up {
+  color: var(--color-success);
+}
+
+.trend-down {
+  color: var(--color-error);
+}
+
+.trend-neutral {
+  color: var(--color-text-secondary);
+}
+
+.trend-icon {
+  font-size: 0.75rem;
+}
+
+/* ===== Collapse/Expand Patterns ===== */
+.collapsible-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  padding: var(--space-sm);
+  border-radius: var(--radius-sm);
+  transition: background-color var(--transition-fast);
+}
+
+.collapsible-header:hover {
+  background: var(--color-bg-secondary);
+}
+
+.collapse-icon {
+  font-size: 0.625rem;
+  color: var(--color-text-secondary);
+  transition: transform var(--transition-fast);
+  display: inline-block;
+  width: 1rem;
+}
+
+.collapse-icon.expanded {
+  transform: rotate(90deg);
+}
+
+/* ===== Card Hover Effects ===== */
+.card-hover {
+  transition: all var(--transition-fast);
+}
+
+.card-hover:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(var(--hover-lift, -2px));
+  border-color: var(--color-primary);
+}
+
+/* ===== Sparkline Containers ===== */
+.sparkline-container {
+  width: 100%;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: var(--space-sm);
+}
+
+.sparkline-chart {
+  width: 100%;
+  height: var(--sparkline-height, 80px);
+  position: relative;
+}
+
+.sparkline-chart-lg {
+  --sparkline-height: 150px;
+}
+
+.sparkline-canvas {
+  width: 100% !important;
+  height: 100% !important;
+  display: block;
+}
+```
+
+**Acceptance Criteria:**
+- [ ] File created in correct location
+- [ ] All patterns documented with comments
+- [ ] CSS variables used throughout
+- [ ] No hardcoded values
+
+---
+
+#### Task 1.2: Create dashboard.css
+**Status:** ⏸️ | **Est:** 2 hours
+
+**File:** `reports-app/frontend/src/assets/css/patterns/dashboard.css`
+
+```css
+/* Dashboard Patterns - ROA2WEB */
+
+/* ===== Page Headers ===== */
+.page-header {
+  margin-bottom: var(--space-xl);
+  text-align: center;
+}
+
+.page-title {
+  margin: 0 0 var(--space-sm) 0;
+  font-size: var(--text-3xl);
+  font-weight: var(--font-bold);
+  color: var(--color-text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-md);
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: var(--text-base);
+  color: var(--color-text-secondary);
+}
+
+/* ===== Section Structure ===== */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-lg);
+  background: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--color-border);
+  flex-wrap: wrap;
+  gap: var(--space-md);
+}
+
+.section-title {
+  font-size: var(--text-xl);
+  font-weight: var(--font-semibold);
+  color: var(--color-text);
+  margin: 0;
+}
+
+.section-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  flex-wrap: wrap;
+}
+
+/* ===== Metrics Grid ===== */
+.metrics-row {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-lg);
+  margin-bottom: var(--space-xl);
+}
+
+@media (max-width: 1024px) {
+  .metrics-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ===== Breakdown Patterns ===== */
+.breakdown-section {
+  padding-top: var(--space-lg);
+  border-top: 1px solid var(--color-border);
+  margin-top: var(--space-lg);
+}
+
+.breakdown-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-sm) 0;
+}
+
+.breakdown-label {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  font-weight: var(--font-medium);
+}
+
+.breakdown-value {
+  font-size: var(--text-base);
+  color: var(--color-text);
+  font-weight: var(--font-semibold);
+  font-family: var(--font-mono, monospace);
+}
+
+.breakdown-subitems {
+  padding-left: var(--space-lg);
+  margin-top: var(--space-sm);
+}
+
+.breakdown-subitem {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--space-xs) 0;
+}
+
+.breakdown-sublabel {
+  color: var(--color-text-secondary);
+  font-size: var(--text-sm);
+}
+
+.breakdown-subvalue {
+  font-weight: var(--font-medium);
+  font-family: var(--font-mono, monospace);
+  font-size: var(--text-sm);
+}
+```
+
+**Acceptance Criteria:**
+- [ ] All dashboard patterns defined
+- [ ] Responsive grid included
+- [ ] Breakdown patterns complete
+
+---
+
+#### Task 1.3: Create animations.css
+**Status:** ⏸️ | **Est:** 30 min
+
+**File:** `reports-app/frontend/src/assets/css/patterns/animations.css`
+
+```css
+/* Animations - ROA2WEB */
+
+/* Slide Down Animation */
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.slide-down {
+  animation: slideDown var(--duration-fast) ease-out;
+}
+
+/* Fade In Animation */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.fade-in {
+  animation: fadeIn var(--duration-normal) ease-in;
+}
+
+/* Slide In From Right */
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.slide-in-right {
+  animation: slideInRight var(--duration-normal) ease-out;
+}
+
+/* Pulse Animation */
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.pulse {
+  animation: pulse var(--duration-slower) ease-in-out infinite;
+}
+```
+
+**Acceptance Criteria:**
+- [ ] Common animations defined
+- [ ] Duration variables used
+- [ ] Utility classes created
+
+---
+
+#### Task 1.4: Create tokens.css
+**Status:** ⏸️ | **Est:** 45 min
+
+**File:** `reports-app/frontend/src/assets/css/core/tokens.css`
+
+```css
+/* Extended Design Tokens - ROA2WEB */
+
+:root {
+  /* ===== Card Tokens ===== */
+  --card-padding: var(--space-lg);
+  --card-padding-sm: var(--space-md);
+  --card-padding-lg: var(--space-xl);
+  --card-gap: var(--space-md);
+  --card-min-height: 280px;
+
+  /* ===== Typography Tokens ===== */
+  --value-size: 1.5rem;
+  --value-size-lg: 2rem;
+  --label-size: 0.875rem;
+  --sublabel-size: 0.8125rem;
+
+  /* ===== Interactive Tokens ===== */
+  --hover-lift: -2px;
+  --active-lift: 0px;
+  --focus-ring: 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
+
+  /* ===== Animation Durations ===== */
+  --duration-instant: 100ms;
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --duration-slow: 350ms;
+  --duration-slower: 500ms;
+
+  /* ===== Component Sizing ===== */
+  --spinner-size: 40px;
+  --spinner-size-sm: 24px;
+  --spinner-size-lg: 56px;
+  --spinner-border: 4px;
+
+  /* ===== Dashboard Metrics ===== */
+  --metric-gap: 1rem;
+  --sparkline-height: 80px;
+  --sparkline-height-lg: 150px;
+}
+```
+
+**Acceptance Criteria:**
+- [ ] All extended tokens defined
+- [ ] References existing variables
+- [ ] No hardcoded values
+
+---
+
+#### Task 1.5: Create primevue-overrides.css
+**Status:** ⏸️ | **Est:** 2 hours
+
+**File:** `reports-app/frontend/src/assets/css/vendor/primevue-overrides.css`
+
+```css
+/* PrimeVue Component Overrides - ROA2WEB */
+/* Global customization of PrimeVue saga-blue theme */
+
+/* ===== Input Components ===== */
+.p-inputtext,
+.p-password input,
+.p-dropdown,
+.p-calendar input,
+.p-autocomplete input {
+  border: 2px solid var(--color-border) !important;
+  border-radius: var(--radius-md) !important;
+  padding: var(--space-sm) var(--space-md) !important;
+  font-size: var(--text-base) !important;
+  font-family: inherit !important;
+  color: var(--color-text) !important;
+  background: var(--color-bg) !important;
+  transition: all var(--transition-fast) !important;
+  min-height: 44px !important;
+}
+
+/* ===== Focus States ===== */
+.p-inputtext:focus,
+.p-password input:focus,
+.p-dropdown:focus,
+.p-calendar input:focus,
+.p-autocomplete input:focus {
+  outline: none !important;
+  border-color: var(--color-primary) !important;
+  box-shadow: var(--focus-ring) !important;
+}
+
+/* ===== Hover States ===== */
+.p-inputtext:hover:not(:disabled),
+.p-password input:hover:not(:disabled),
+.p-dropdown:hover:not(:disabled) {
+  border-color: var(--color-border-dark, #d1d5db) !important;
+}
+
+/* ===== Disabled States ===== */
+.p-inputtext:disabled,
+.p-password input:disabled,
+.p-dropdown:disabled {
+  background: var(--color-bg-muted, #f3f4f6) !important;
+  color: var(--color-text-muted, #9ca3af) !important;
+  opacity: 0.6 !important;
+  cursor: not-allowed !important;
+}
+
+/* ===== Validation States ===== */
+.p-invalid.p-component,
+.p-inputtext.p-invalid,
+.p-password.p-invalid input {
+  border-color: var(--color-error, #ef4444) !important;
+}
+
+/* ===== Button Overrides ===== */
+.p-button {
+  padding: var(--space-sm) var(--space-md) !important;
+  font-size: var(--text-sm) !important;
+  font-weight: var(--font-medium) !important;
+  border-radius: var(--radius-md) !important;
+  transition: all var(--transition-fast) !important;
+}
+
+.p-button:hover {
+  transform: translateY(-1px) !important;
+  box-shadow: var(--shadow-md) !important;
+}
+
+/* ===== DataTable ===== */
+.p-datatable .p-datatable-thead > tr > th {
+  background: var(--color-bg-muted, #f9fafb) !important;
+  color: var(--color-text) !important;
+  font-weight: var(--font-semibold) !important;
+  border-bottom: 2px solid var(--color-border) !important;
+  padding: var(--space-md) var(--space-lg) !important;
+}
+
+.p-datatable .p-datatable-tbody > tr {
+  transition: background-color var(--transition-fast) !important;
+}
+
+.p-datatable .p-datatable-tbody > tr:hover {
+  background: var(--color-bg-secondary, #f8fafc) !important;
+}
+
+/* ===== Card ===== */
+.p-card {
+  box-shadow: var(--shadow-sm) !important;
+  border: 1px solid var(--color-border) !important;
+  border-radius: var(--card-radius, 8px) !important;
+}
+
+.p-card .p-card-header {
+  background: var(--color-bg-secondary) !important;
+  border-bottom: 1px solid var(--color-border) !important;
+  padding: var(--space-lg) !important;
+}
+
+.p-card .p-card-body {
+  padding: var(--space-lg) !important;
+}
+
+/* ===== Mobile Optimizations ===== */
+@media (max-width: 768px) {
+  .p-inputtext,
+  .p-password input,
+  .p-dropdown,
+  .p-calendar input {
+    font-size: 16px !important; /* Prevent iOS zoom */
+  }
+}
+```
+
+**Acceptance Criteria:**
+- [ ] All common PrimeVue components styled
+- [ ] Design tokens used (not hardcoded)
+- [ ] Mobile optimizations included
+- [ ] Ready for Phase 3 migration
+
+---
+
+### 2. Integration (2 tasks)
+
+#### Task 2.1: Update main.css
+**Status:** ⏸️ | **Est:** 15 min
+
+**File:** `reports-app/frontend/src/assets/css/main.css`
+
+**Add after existing imports:**
+```css
+/* Main CSS Entry Point - ROA2WEB */
+
+/* 1. Core Foundation */
+@import './core/variables.css';
+@import './core/tokens.css';          /* NEW */
+@import './core/reset.css';
+@import './core/typography.css';
+
+/* 2. Layout System */
+@import './layout/grid.css';
+@import './layout/containers.css';
+@import './layout/navigation.css';
+
+/* 3. Component Library */
+@import './components/cards.css';
+@import './components/buttons.css';
+@import './components/tables.css';
+@import './components/forms.css';
+@import './components/stats.css';
+
+/* 4. Patterns */
+@import './patterns/interactive.css';  /* NEW */
+@import './patterns/dashboard.css';   /* NEW */
+@import './patterns/animations.css';  /* NEW */
+
+/* 5. Utilities */
+@import './utilities/spacing.css';
+@import './utilities/display.css';
+@import './utilities/text.css';
+@import './utilities/flex.css';
+
+/* 6. Vendor Overrides */
+@import './vendor/primevue-overrides.css';  /* NEW */
+
+/* 7. Mobile Optimizations */
+@import './mobile.css';
+```
+
+**Acceptance Criteria:**
+- [ ] All new files imported
+- [ ] Import order correct (core → patterns → vendor)
+- [ ] No syntax errors
+
+---
+
+#### Task 2.2: Verify No Visual Changes
+**Status:** ⏸️ | **Est:** 30 min
+
+```bash
+# Build and verify
+npm run build
+
+# Check bundle size
+ls -lh dist/assets/*.css
+
+# Run dev server
+npm run dev
+
+# Visually check pages
+```
+
+**Check all pages:**
+- [ ] Login page unchanged
+- [ ] Dashboard unchanged
+- [ ] Invoices unchanged
+- [ ] No console errors
+- [ ] No CSS warnings
+
+**Acceptance Criteria:**
+- [ ] Zero visual changes
+- [ ] Build successful
+- [ ] No errors in console
+
+---
+
+### 3. Testing & Documentation (3 tasks)
+
+#### Task 3.1: Build Verification
+**Status:** ⏸️ | **Est:** 15 min
+
+```bash
+cd reports-app/frontend
+
+# Clean build
+rm -rf dist/
+npm run build
+
+# Check for errors
+echo $?  # Should be 0
+
+# Verify CSS files
+ls -la dist/assets/*.css
+```
+
+**Acceptance Criteria:**
+- [ ] Build completes without errors
+- [ ] CSS bundle created
+- [ ] No missing imports
+
+---
+
+#### Task 3.2: Pattern Documentation
+**Status:** ⏸️ | **Est:** 45 min
+
+**Create:** `docs/CSS_PATTERNS_REFERENCE.md`
+
+**Content:**
+```markdown
+# ROA2WEB CSS Patterns Reference
+
+## Interactive Patterns
+
+### Loading Spinner
+\`\`\`html
+<div class="loading-spinner"></div>
+<div class="loading-spinner loading-spinner-sm"></div>
+<div class="loading-spinner loading-spinner-lg"></div>
+\`\`\`
+
+### Trend Indicator
+\`\`\`html
+<span class="trend trend-up">
+  <i class="pi pi-arrow-up trend-icon"></i>
+  +15%
+</span>
+\`\`\`
+
+<!-- More patterns... -->
+```
+
+**Acceptance Criteria:**
+- [ ] All patterns documented with examples
+- [ ] HTML examples provided
+- [ ] Use cases explained
+
+---
+
+#### Task 3.3: Commit Phase 2
+**Status:** ⏸️ | **Est:** 10 min
+
+```bash
+git add .
+git commit -m "feat(css): Phase 2 - Add global pattern foundation
+
+- Create interactive.css (loading, trends, collapse)
+- Create dashboard.css (headers, metrics, breakdowns)
+- Create animations.css (slideDown, fadeIn, pulse)
+- Create tokens.css (extended design tokens)
+- Create primevue-overrides.css (centralized PrimeVue styling)
+- Update main.css with new imports
+- Zero visual changes (additive only)
+
+Files created: 5 new CSS files
+Lines added: ~600 lines
+Phase: 2/7 complete
+"
+
+git push origin feature/css-refactoring
+```
+
+**Acceptance Criteria:**
+- [ ] All files committed
+- [ ] Commit message descriptive
+- [ ] Pushed to remote
+
+---
+
+## Completion Criteria
+
+- [ ] 5 new CSS files created
+- [ ] All patterns implemented
+- [ ] main.css updated
+- [ ] Zero visual changes
+- [ ] Build successful
+- [ ] Documentation created
+- [ ] Committed to git
+
+---
+
+## Next Phase
+
+**Phase 3:** PrimeVue Centralizare
+- Migrate all component `:deep()` to global
+- Eliminate `!important` from components
+- See: [phase-3-primevue.md](./phase-3-primevue.md)
+
+---
+
+**Created:** 2025-11-18
+**Status:** ⏸️ Not Started
--- a/features/phases/phase-3-primevue.md
+++ b/features/phases/phase-3-primevue.md
@@ -0,0 +1,359 @@
+# Phase 3: PrimeVue Centralizare 🎨
+
+**Priority:** High - Eliminate anti-patterns
+**Duration:** 6-8 hours
+**Status:** ⏸️ Not Started
+**Risk Level:** Medium
+
+---
+
+## Obiective
+
+1. **Elimină toate `:deep()` din componente** - 50+ instanțe → 0
+2. **Centralizează în primevue-overrides.css** - Single source of truth
+3. **Replace hardcoded values** - #3b82f6 → var(--color-primary)
+4. **Zero `!important` în components** - Only in global overrides
+
+---
+
+## Task Breakdown (12 tasks)
+
+### 1. Audit `:deep()` Usage (1 task)
+
+#### Task 1.1: Find All `:deep()` Instances
+**Status:** ⏸️ | **Est:** 20 min
+
+```bash
+cd reports-app/frontend
+
+# Find all :deep() usage
+grep -rn ":deep(" src/views/ src/components/
+
+# Count instances
+grep -r ":deep(" src/ | wc -l
+
+# Create audit file
+grep -rn ":deep(" src/ > /tmp/deep-overrides-audit.txt
+cat /tmp/deep-overrides-audit.txt
+```
+
+**Document findings:**
+- [ ] LoginView.vue: Lines 269-288 (~20 lines)
+- [ ] InvoicesView.vue: Lines ___
+- [ ] Card components: Lines ___
+- [ ] Total instances: ___
+
+**Acceptance Criteria:**
+- [ ] All `:deep()` instances documented
+- [ ] File/line numbers recorded
+- [ ] Ready for migration
+
+---
+
+### 2. Migrate Component Overrides (6 tasks)
+
+#### Task 2.1: Migrate LoginView.vue
+**Status:** ⏸️ | **Est:** 45 min
+
+**Remove from LoginView.vue (lines 269-288):**
+```vue
+<style scoped>
+/* DELETE ALL :deep() - Already in primevue-overrides.css */
+:deep(.p-inputtext),
+:deep(.p-password input) {
+  /* ... all lines ... */
+}
+</style>
+```
+
+**Verify in primevue-overrides.css:**
+```css
+/* Already exists from Phase 2 */
+.p-inputtext,
+.p-password input {
+  border: 2px solid var(--color-border) !important;
+  /* ... */
+}
+```
+
+**Test:**
+- [ ] Login form inputs styled correctly
+- [ ] Focus states work
+- [ ] Validation states work
+- [ ] No visual regression
+
+**Acceptance Criteria:**
+- [ ] All `:deep()` removed from LoginView.vue
+- [ ] Form still styled correctly
+- [ ] Playwright test passes
+
+---
+
+#### Task 2.2: Migrate InvoicesView.vue
+**Status:** ⏸️ | **Est:** 30 min
+
+**Search and remove:**
+```bash
+# Find PrimeVue overrides
+grep -n "p-" src/views/InvoicesView.vue
+```
+
+**Remove any `:deep()` for:**
+- [ ] Dropdown styling
+- [ ] Calendar styling
+- [ ] DataTable styling
+
+**Acceptance Criteria:**
+- [ ] No `:deep()` in InvoicesView.vue
+- [ ] Filters work correctly
+- [ ] Table styled correctly
+
+---
+
+#### Task 2.3: Migrate Card Components
+**Status:** ⏸️ | **Est:** 1 hour
+
+**Components to check:**
+- [ ] MetricCard.vue
+- [ ] CashFlowMetricCard.vue
+- [ ] ClientiBalanceCard.vue
+- [ ] FurnizoriBalanceCard.vue
+- [ ] TreasuryDualCard.vue
+
+**For each component:**
+```bash
+# Check for :deep()
+grep -n ":deep" src/components/dashboard/cards/*.vue
+```
+
+**Remove and verify:**
+- [ ] Chart.js canvas overrides
+- [ ] PrimeVue Card overrides
+- [ ] Button overrides
+
+**Acceptance Criteria:**
+- [ ] Zero `:deep()` in all card components
+- [ ] Charts render correctly
+- [ ] Cards styled identically
+
+---
+
+#### Task 2.4: Replace Hardcoded Colors
+**Status:** ⏸️ | **Est:** 1 hour
+
+**Find all hardcoded colors:**
+```bash
+# Find hex colors
+grep -rn "#[0-9a-fA-F]\{6\}" src/ --include="*.vue"
+
+# Common culprits
+grep -rn "#3b82f6" src/  # Primary blue
+grep -rn "#e5e7eb" src/  # Border gray
+grep -rn "#10b981" src/  # Success green
+grep -rn "#ef4444" src/  # Error red
+```
+
+**Replace with tokens:**
+- `#3b82f6` → `var(--color-primary)`
+- `#e5e7eb` → `var(--color-border)`
+- `#10b981` → `var(--color-success)`
+- `#ef4444` → `var(--color-error)`
+
+**Acceptance Criteria:**
+- [ ] Zero hardcoded hex colors in components
+- [ ] All use design tokens
+- [ ] Colors consistent across app
+
+---
+
+#### Task 2.5: Remove !important from Components
+**Status:** ⏸️ | **Est:** 30 min
+
+**Find all !important:**
+```bash
+grep -rn "!important" src/views/ src/components/
+```
+
+**Remove from scoped styles:**
+- Only global primevue-overrides.css should use `!important`
+- Component scoped styles should NEVER use it
+
+**Acceptance Criteria:**
+- [ ] Zero `!important` in component <style scoped>
+- [ ] Styling still works via cascade
+
+---
+
+#### Task 2.6: Verify Zero :deep()
+**Status:** ⏸️ | **Est:** 15 min
+
+**Final verification:**
+```bash
+# Should return 0 results
+grep -r ":deep(" src/views/ src/components/ | wc -l
+
+# Verify = 0
+echo "Expected: 0, Actual: $(grep -r ':deep(' src/ | wc -l)"
+```
+
+**Acceptance Criteria:**
+- [ ] Zero `:deep()` in entire codebase
+- [ ] All styling via global CSS
+- [ ] Audit complete
+
+---
+
+### 3. Testing (3 tasks)
+
+#### Task 3.1: Component Testing
+**Status:** ⏸️ | **Est:** 45 min
+
+**Test all PrimeVue components:**
+- [ ] InputText - border, focus, validation
+- [ ] Password - toggle mask, focus
+- [ ] Dropdown - options, selection, styling
+- [ ] Calendar - date picker, focus
+- [ ] DataTable - headers, rows, hover
+- [ ] Card - padding, borders, shadows
+- [ ] Button - variants, hover, disabled
+
+**Test views:**
+- [ ] Login page - all form elements
+- [ ] Dashboard - all cards
+- [ ] Invoices - filters and table
+- [ ] Telegram - buttons and forms
+
+**Acceptance Criteria:**
+- [ ] All components styled correctly
+- [ ] No visual regressions
+- [ ] All states work (hover, focus, disabled)
+
+---
+
+#### Task 3.2: Playwright Visual Regression
+**Status:** ⏸️ | **Est:** 20 min
+
+```bash
+npm run test:e2e
+
+# Check for failures
+npm run test:e2e:report
+```
+
+**Expected:**
+- [ ] All snapshots match (pixel-perfect)
+- [ ] No unexpected differences
+- [ ] Forms identical to Phase 1
+
+**Acceptance Criteria:**
+- [ ] Playwright tests pass
+- [ ] Zero visual differences
+- [ ] Report reviewed
+
+---
+
+#### Task 3.3: Browser Compatibility
+**Status:** ⏸️ | **Est:** 30 min
+
+**Test on:**
+- [ ] Chrome - PrimeVue components render
+- [ ] Firefox - CSS variables work
+- [ ] Safari - Focus states visible
+- [ ] Edge - No degradation
+
+**Acceptance Criteria:**
+- [ ] Consistent across all browsers
+- [ ] No console errors
+- [ ] PrimeVue overrides work everywhere
+
+---
+
+### 4. Documentation & Commit (2 tasks)
+
+#### Task 4.1: Update Guidelines
+**Status:** ⏸️ | **Est:** 20 min
+
+**Update:** `docs/COMPONENT_STYLING.md`
+
+```markdown
+## PrimeVue Styling Guidelines
+
+### ❌ NEVER Do This
+\`\`\`vue
+<style scoped>
+:deep(.p-inputtext) {
+  border: 2px solid #3b82f6 !important;
+}
+</style>
+\`\`\`
+
+### ✅ Always Do This
+PrimeVue components are styled globally in:
+\`assets/css/vendor/primevue-overrides.css\`
+
+Use classes, not overrides:
+\`\`\`vue
+<InputText class="form-input" />
+\`\`\`
+```
+
+**Acceptance Criteria:**
+- [ ] Guidelines documented
+- [ ] Examples provided
+- [ ] Best practices clear
+
+---
+
+#### Task 4.2: Commit Phase 3
+**Status:** ⏸️ | **Est:** 10 min
+
+```bash
+git add .
+git commit -m "feat(css): Phase 3 - Centralize PrimeVue overrides
+
+- Migrate all :deep() to primevue-overrides.css
+- Remove 50+ instances of :deep() from components
+- Replace hardcoded colors with design tokens
+- Remove !important from component scoped styles
+- Update styling guidelines
+
+Impact:
+- Zero :deep() in components
+- Single source of truth for PrimeVue styling
+- Consistent design token usage
+- Cleaner component code
+
+Testing:
+- ✅ All PrimeVue components work
+- ✅ Playwright visual regression pass
+- ✅ Browser compatibility verified
+
+Phase: 3/7 complete
+"
+
+git push origin feature/css-refactoring
+```
+
+---
+
+## Completion Criteria
+
+- [ ] 0 `:deep()` instances in components
+- [ ] 0 hardcoded hex colors
+- [ ] 0 `!important` in scoped styles
+- [ ] All PrimeVue components styled globally
+- [ ] Visual regression tests pass
+- [ ] Documentation updated
+
+---
+
+## Next Phase
+
+**Phase 4:** Card Components Refactoring
+- Extract common patterns (~800 lines)
+- See: [phase-4-cards.md](./phase-4-cards.md)
+
+---
+
+**Created:** 2025-11-18
+**Status:** ⏸️ Not Started
--- a/features/phases/phase-4-cards.md
+++ b/features/phases/phase-4-cards.md
@@ -0,0 +1,584 @@
+# Phase 4: Card Components Refactoring 📊
+
+**Priority:** High - Major duplication area
+**Duration:** 16-20 hours
+**Status:** ⏸️ Not Started
+**Risk Level:** High
+
+---
+
+## Obiective
+
+1. **Extract common patterns** - Base card, sparklines, breakdowns
+2. **Refactor 5 card components** - ~800 lines eliminated
+3. **Standardize metric displays** - Consistent value/label patterns
+4. **Reusable card classes** - For future components
+
+---
+
+## Current State
+
+| Component | Current CSS | Target CSS | Reduction |
+|-----------|-------------|------------|-----------|
+| MetricCard.vue | 331 lines | 80 lines | 251 lines (76%) |
+| CashFlowMetricCard.vue | 179 lines | 60 lines | 119 lines (67%) |
+| ClientiBalanceCard.vue | 260 lines | 90 lines | 170 lines (65%) |
+| FurnizoriBalanceCard.vue | ~260 lines | 90 lines | 170 lines (65%) |
+| TreasuryDualCard.vue | ~200 lines | 60 lines | 140 lines (70%) |
+| **TOTAL** | **~1,230 lines** | **~380 lines** | **~850 lines (69%)** |
+
+---
+
+## Task Breakdown (22 tasks)
+
+### 1. Global Pattern Extraction (5 tasks)
+
+#### Task 1.1: Add Base Card Styles to cards.css
+**Status:** ⏸️ | **Est:** 1 hour
+
+**File:** `reports-app/frontend/src/assets/css/components/cards.css`
+
+**Add at end of file:**
+```css
+/* ===== Dashboard Metric Cards ===== */
+
+.metric-card {
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--card-radius);
+  padding: var(--card-padding);
+  transition: all var(--transition-fast);
+  min-height: var(--card-min-height);
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-gap);
+}
+
+.metric-card:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(var(--hover-lift));
+  border-color: var(--color-primary);
+}
+
+/* Metric display patterns */
+.metric-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  margin-bottom: var(--space-sm);
+}
+
+.metric-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  font-size: var(--text-xl);
+}
+
+.metric-value {
+  font-size: var(--value-size);
+  font-weight: var(--font-bold);
+  line-height: var(--leading-tight);
+  font-family: var(--font-mono, monospace);
+  color: var(--color-text);
+}
+
+.metric-value-lg {
+  font-size: var(--value-size-lg);
+}
+
+.metric-label {
+  font-size: var(--label-size);
+  font-weight: var(--font-medium);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: var(--space-xs);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .metric-card {
+    min-height: calc(var(--card-min-height) - 40px);
+    padding: var(--card-padding-sm);
+  }
+
+  .metric-value {
+    font-size: 1.25rem;
+  }
+}
+```
+
+**Acceptance Criteria:**
+- [ ] Base card patterns added
+- [ ] Metric display patterns defined
+- [ ] Responsive rules included
+- [ ] No visual changes (not used yet)
+
+---
+
+#### Task 1.2: Add Sparkline Patterns to dashboard.css
+**Status:** ⏸️ | **Est:** 30 min
+
+**File:** `reports-app/frontend/src/assets/css/patterns/dashboard.css`
+
+**Add:**
+```css
+/* ===== Enhanced Sparkline Patterns ===== */
+
+.metric-sparkline {
+  margin: var(--space-md) 0;
+}
+
+.sparkline-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-xs);
+}
+
+.sparkline-title {
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  font-weight: var(--font-medium);
+}
+
+.sparkline-value {
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  font-family: var(--font-mono, monospace);
+}
+```
+
+**Acceptance Criteria:**
+- [ ] Sparkline header pattern defined
+- [ ] Title/value layout included
+
+---
+
+#### Task 1.3: Enhanced Breakdown Patterns
+**Status:** ⏸️ | **Est:** 45 min
+
+**File:** `reports-app/frontend/src/assets/css/patterns/dashboard.css`
+
+**Enhance existing breakdown patterns:**
+```css
+/* ===== Enhanced Breakdown Patterns ===== */
+
+.breakdown-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  padding: var(--space-sm);
+  border-radius: var(--radius-sm);
+  transition: background-color var(--transition-fast);
+  margin-bottom: var(--space-xs);
+}
+
+.breakdown-header:hover {
+  background: var(--color-bg-secondary);
+}
+
+.breakdown-header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.breakdown-toggle {
+  color: var(--color-text-secondary);
+  font-size: 0.625rem;
+  transition: transform var(--transition-fast);
+}
+
+.breakdown-toggle.expanded {
+  transform: rotate(90deg);
+}
+
+.breakdown-divider {
+  height: 1px;
+  background: var(--color-border);
+  margin: var(--space-md) 0;
+}
+```
+
+**Acceptance Criteria:**
+- [ ] Breakdown header with toggle
+- [ ] Hover states defined
+- [ ] Animation classes ready
+
+---
+
+#### Task 1.4: Add Color Utilities
+**Status:** ⏸️ | **Est:** 20 min
+
+**File:** `reports-app/frontend/src/assets/css/utilities/colors.css` (NEW)
+
+```css
+/* Color Utilities - ROA2WEB */
+
+/* Background colors for icons */
+.bg-primary { background-color: var(--color-primary); }
+.bg-success { background-color: var(--color-success); }
+.bg-warning { background-color: var(--color-warning); }
+.bg-error { background-color: var(--color-error); }
+.bg-info { background-color: var(--color-info); }
+
+.bg-primary-light { background-color: rgba(var(--color-primary-rgb), 0.1); }
+.bg-success-light { background-color: rgba(var(--color-success-rgb), 0.1); }
+.bg-warning-light { background-color: rgba(var(--color-warning-rgb), 0.1); }
+
+/* Text colors */
+.text-primary { color: var(--color-primary); }
+.text-success { color: var(--color-success); }
+.text-warning { color: var(--color-warning); }
+.text-error { color: var(--color-error); }
+.text-muted { color: var(--color-text-muted); }
+```
+
+**Add to main.css:**
+```css
+@import './utilities/colors.css';
+```
+
+**Acceptance Criteria:**
+- [ ] Color utilities created
+- [ ] Imported in main.css
+- [ ] RGB variants for transparency
+
+---
+
+#### Task 1.5: Test Global Patterns
+**Status:** ⏸️ | **Est:** 15 min
+
+```bash
+# Build and verify
+npm run build
+
+# Check for errors
+npm run dev
+
+# No visual changes expected
+```
+
+**Acceptance Criteria:**
+- [ ] Build successful
+- [ ] No CSS errors
+- [ ] Patterns available (not used yet)
+
+---
+
+### 2. Component Refactoring (15 tasks - 3 per component x 5)
+
+#### MetricCard.vue (Tasks 2.1-2.3)
+
+##### Task 2.1: Update MetricCard Template
+**Status:** ⏸️ | **Est:** 1 hour
+
+**File:** `src/components/dashboard/cards/MetricCard.vue`
+
+**Current template structure:**
+```vue
+<div class="metric-card">
+  <div class="card-header">
+    <div class="icon-wrapper" :style="{ background: iconBg }">
+      <i :class="icon"></i>
+    </div>
+    <!-- ... -->
+  </div>
+</div>
+```
+
+**Updated template:**
+```vue
+<div class="metric-card card-hover">
+  <div class="metric-header">
+    <div class="metric-icon bg-primary-light text-primary">
+      <i :class="icon"></i>
+    </div>
+    <div class="metric-label">{{ label }}</div>
+  </div>
+
+  <div class="metric-value" :class="{ 'trend-up': trend > 0, 'trend-down': trend < 0 }">
+    {{ formattedValue }}
+  </div>
+
+  <div v-if="showSparkline" class="sparkline-container">
+    <canvas ref="sparklineCanvas" class="sparkline-canvas"></canvas>
+  </div>
+
+  <div v-if="hasBreakdown" class="breakdown-section">
+    <div class="breakdown-header" @click="toggleBreakdown">
+      <div class="breakdown-header-left">
+        <i class="pi pi-chevron-right breakdown-toggle" :class="{ expanded: breakdownExpanded }"></i>
+        <span class="breakdown-label">Detalii</span>
+      </div>
+      <span class="breakdown-value">{{ breakdownTotal }}</span>
+    </div>
+
+    <div v-if="breakdownExpanded" class="breakdown-subitems slide-down">
+      <div v-for="item in breakdownItems" :key="item.id" class="breakdown-subitem">
+        <span class="breakdown-sublabel">{{ item.label }}</span>
+        <span class="breakdown-subvalue">{{ item.value }}</span>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+**Acceptance Criteria:**
+- [ ] Template uses global classes
+- [ ] No inline styles for colors
+- [ ] Breakdown uses global pattern
+- [ ] Sparkline uses global container
+
+---
+
+##### Task 2.2: Remove Duplicate CSS from MetricCard
+**Status:** ⏸️ | **Est:** 45 min
+
+**DELETE from <style scoped> (lines to remove ~250):**
+```css
+/* DELETE - now in cards.css */
+.metric-card {
+  background: var(--color-bg, #ffffff);
+  border: 1px solid var(--color-border, #e5e7eb);
+  /* ... 20 more lines ... */
+}
+
+.metric-card:hover {
+  /* ... DELETE ... */
+}
+
+.card-header {
+  /* ... DELETE ... */
+}
+
+/* DELETE - now in dashboard.css */
+.breakdown-header {
+  /* ... DELETE ... */
+}
+
+.breakdown-subitems {
+  /* ... DELETE ... */
+}
+
+/* DELETE - now in animations.css */
+@keyframes slideDown {
+  /* ... DELETE ... */
+}
+```
+
+**KEEP component-specific:**
+```css
+/* Component-specific Chart.js configuration */
+.sparkline-canvas {
+  /* Keep Chart.js specific overrides */
+}
+
+/* Component-specific data formatting */
+.metric-specific-class {
+  /* Only if truly unique to this component */
+}
+```
+
+**Acceptance Criteria:**
+- [ ] 250+ lines deleted
+- [ ] Only component-specific CSS remains
+- [ ] Card renders identically
+- [ ] Functionality preserved
+
+---
+
+##### Task 2.3: Test MetricCard
+**Status:** ⏸️ | **Est:** 30 min
+
+**Visual tests:**
+- [ ] Card layout identical
+- [ ] Hover effect works
+- [ ] Sparkline renders
+- [ ] Breakdown expands/collapses
+- [ ] Trend indicators show correctly
+- [ ] Icon background colors work
+
+**Functional tests:**
+- [ ] Props work (value, label, icon, trend)
+- [ ] Computed properties correct
+- [ ] Chart.js renders
+- [ ] Breakdown data displays
+- [ ] Click interactions work
+
+**Acceptance Criteria:**
+- [ ] No visual regressions
+- [ ] All features work
+- [ ] ~250 lines CSS eliminated
+
+---
+
+#### CashFlowMetricCard.vue (Tasks 2.4-2.6)
+
+##### Task 2.4: Update CashFlowMetricCard Template
+**Status:** ⏸️ | **Est:** 45 min
+
+**Apply same pattern as MetricCard:**
+- [ ] Use `.metric-card` base class
+- [ ] Use `.metric-header`, `.metric-value`, `.metric-label`
+- [ ] Use global breakdown pattern
+- [ ] Remove inline styles
+
+**Acceptance Criteria:**
+- [ ] Template updated
+- [ ] Global classes used
+- [ ] No inline styles
+
+---
+
+##### Task 2.5: Remove Duplicate CSS
+**Status:** ⏸️ | **Est:** 30 min
+
+**Target reduction:** 179 → 60 lines (119 lines deleted)
+
+**Delete:**
+- [ ] Card base styles
+- [ ] Hover effects
+- [ ] Breakdown patterns
+- [ ] Animations
+
+**Keep:**
+- [ ] Component-specific chart config
+- [ ] Unique data formatting
+
+**Acceptance Criteria:**
+- [ ] 119 lines deleted
+- [ ] Component CSS < 60 lines
+
+---
+
+##### Task 2.6: Test CashFlowMetricCard
+**Status:** ⏸️ | **Est:** 20 min
+
+- [ ] Card renders correctly
+- [ ] Dual charts display
+- [ ] Cash flow data accurate
+- [ ] Breakdown works
+- [ ] No visual regressions
+
+---
+
+#### ClientiBalanceCard.vue (Tasks 2.7-2.9)
+##### Task 2.7: Update Template
+**Status:** ⏸️ | **Est:** 45 min
+**Acceptance:** Template uses global patterns
+
+##### Task 2.8: Remove Duplicate CSS
+**Status:** ⏸️ | **Est:** 30 min
+**Target:** 260 → 90 lines (170 deleted)
+
+##### Task 2.9: Test
+**Status:** ⏸️ | **Est:** 20 min
+**Acceptance:** Client balance displays correctly
+
+---
+
+#### FurnizoriBalanceCard.vue (Tasks 2.10-2.12)
+##### Task 2.10: Update Template
+**Status:** ⏸️ | **Est:** 45 min
+
+##### Task 2.11: Remove Duplicate CSS
+**Status:** ⏸️ | **Est:** 30 min
+**Target:** ~260 → 90 lines (170 deleted)
+
+##### Task 2.12: Test
+**Status:** ⏸️ | **Est:** 20 min
+
+---
+
+#### TreasuryDualCard.vue (Tasks 2.13-2.15)
+##### Task 2.13: Update Template
+**Status:** ⏸️ | **Est:** 45 min
+
+##### Task 2.14: Remove Duplicate CSS
+**Status:** ⏸️ | **Est:** 30 min
+**Target:** ~200 → 60 lines (140 deleted)
+
+##### Task 2.15: Test
+**Status:** ⏸️ | **Est:** 20 min
+
+---
+
+### 3. Final Testing (2 tasks)
+
+#### Task 3.1: Test All Cards Together
+**Status:** ⏸️ | **Est:** 1 hour
+
+**Dashboard view:**
+- [ ] All 5 cards display in grid
+- [ ] Hover effects consistent
+- [ ] Sparklines render
+- [ ] Breakdowns work on all cards
+- [ ] Trend indicators correct
+- [ ] Responsive layout works
+
+**Playwright:**
+```bash
+npm run test:e2e -- tests/e2e/dashboard/
+```
+
+**Acceptance Criteria:**
+- [ ] All cards work together
+- [ ] No layout issues
+- [ ] Visual regression tests pass
+
+---
+
+#### Task 3.2: Performance Measurement
+**Status:** ⏸️ | **Est:** 30 min
+
+**Measure:**
+```bash
+# CSS bundle size
+ls -lh dist/assets/*.css
+
+# Component CSS reduction
+grep -c "}" src/components/dashboard/cards/*.vue
+```
+
+**Document:**
+- [ ] Before: ~1,230 lines total card CSS
+- [ ] After: ~380 lines total card CSS
+- [ ] Reduction: ~850 lines (69%)
+- [ ] Bundle size impact: ___ KB
+
+**Acceptance Criteria:**
+- [ ] Target reduction achieved
+- [ ] Metrics documented
+
+---
+
+## Completion Criteria
+
+- [ ] 5 card components refactored
+- [ ] ~850 lines CSS eliminated
+- [ ] All cards use global patterns
+- [ ] Visual regression tests pass
+- [ ] Performance metrics documented
+- [ ] Committed to git
+
+---
+
+## Next Phase
+
+**Phase 5:** DashboardView.vue Major Refactoring
+- THE BIG ONE: 2,010 → 300 lines
+- See: [phase-5-dashboard.md](./phase-5-dashboard.md)
+
+---
+
+**Created:** 2025-11-18
+**Status:** ⏸️ Not Started
--- a/features/phases/phase-5-dashboard.md
+++ b/features/phases/phase-5-dashboard.md
@@ -0,0 +1,934 @@
+# Phase 5: DashboardView.vue - Major Refactoring 🚀
+
+**Priority:** 🔥 CRITICAL - Biggest impact
+**Duration:** 24-32 hours
+**Status:** ⏸️ Not Started
+**Risk Level:** ⚠️ VERY HIGH
+
+---
+
+## Obiective
+
+1. **Reduce 2,010 lines → 300 lines** - 85% reduction (1,710 lines eliminated)
+2. **Replace custom CSS with global patterns** - Use Phase 2-4 work
+3. **Consolidate responsive breakpoints** - 4 breakpoints → 1
+4. **Eliminate table duplication** - Use tables.css
+5. **MAINTAIN IDENTICAL FUNCTIONALITY** - Zero breaking changes
+
+---
+
+## RISK MITIGATION
+
+**⚠️ THIS IS THE MOST CRITICAL PHASE**
+
+**Mitigation Strategies:**
+1. **Full backup before starting**
+2. **Incremental changes with commits**
+3. **Test after every section**
+4. **Playwright snapshots before/after each step**
+5. **Real device testing mandatory**
+6. **Rollback plan ready**
+
+---
+
+## Current State Analysis
+
+**File:** `src/views/DashboardView.vue`
+**Total lines:** 4,010
+**CSS lines:** 2,010 (lines 787-2797)
+**CSS percentage:** 50% of file
+
+### CSS Breakdown:
+
+| Section | Lines | Can Delete? | Replacement |
+|---------|-------|-------------|-------------|
+| Dashboard header | 50 | ✅ Yes | dashboard.css `.page-header` |
+| Section headers | 100 | ✅ Yes | dashboard.css `.section-header` |
+| Card containers | 80 | ✅ Yes | cards.css (Phase 4) |
+| Table styles | 400 | ✅ Yes | tables.css |
+| Stats/metrics | 200 | ✅ Yes | dashboard.css metrics |
+| Loading spinner | 40 | ✅ Yes | interactive.css |
+| Breakdowns | 120 | ✅ Yes | dashboard.css breakdowns |
+| Animations | 60 | ✅ Yes | animations.css |
+| Responsive (4 breakpoints) | 600 | ⚠️ Partial | Consolidate to 1 |
+| Component-specific | 360 | ❌ Keep | Unique logic |
+| **TOTAL** | **2,010** | **1,650** | **~300 remain** |
+
+---
+
+## Task Breakdown (28 tasks)
+
+### 1. Preparation & Backup (2 tasks)
+
+#### Task 1.1: Full Backup
+**Status:** ⏸️ | **Est:** 10 min
+
+```bash
+# Create backup
+cp src/views/DashboardView.vue src/views/DashboardView.vue.phase5.backup
+
+# Commit current state
+git add .
+git commit -m "chore: Backup DashboardView before Phase 5 refactoring"
+
+# Create restore script
+cat > /tmp/restore-dashboard.sh <<'EOF'
+#!/bin/bash
+cp src/views/DashboardView.vue.phase5.backup src/views/DashboardView.vue
+echo "DashboardView restored from backup"
+EOF
+chmod +x /tmp/restore-dashboard.sh
+```
+
+**Acceptance Criteria:**
+- [ ] Backup file created
+- [ ] Committed to git
+- [ ] Restore script ready
+
+---
+
+#### Task 1.2: Detailed CSS Analysis
+**Status:** ⏸️ | **Est:** 30 min
+
+**Analyze all 2,010 CSS lines:**
+
+```bash
+# Extract CSS section
+sed -n '787,2797p' src/views/DashboardView.vue > /tmp/dashboard-css-analysis.css
+
+# Count by pattern
+grep -c "\.dashboard-" /tmp/dashboard-css-analysis.css
+grep -c "\.section-" /tmp/dashboard-css-analysis.css
+grep -c "@media" /tmp/dashboard-css-analysis.css
+```
+
+**Document:**
+- [ ] All class names used
+- [ ] Media query breakpoints
+- [ ] Duplicate patterns
+- [ ] Component-specific needs
+
+**Acceptance Criteria:**
+- [ ] Full CSS inventory
+- [ ] Deletion plan documented
+- [ ] Keep list documented
+
+---
+
+### 2. Page Structure Refactoring (4 tasks)
+
+#### Task 2.1: Convert Page Header
+**Status:** ⏸️ | **Est:** 45 min
+
+**BEFORE (template lines ~50-70):**
+```vue
+<div class="dashboard-header">
+  <h1 class="dashboard-title">
+    <i class="pi pi-chart-bar"></i>
+    Dashboard Financiar
+  </h1>
+  <p class="dashboard-subtitle">
+    Companie: {{ selectedCompany?.nume }}
+  </p>
+</div>
+```
+
+**AFTER:**
+```vue
+<div class="page-header">
+  <h1 class="page-title">
+    <i class="pi pi-chart-bar"></i>
+    Dashboard Financiar
+  </h1>
+  <p class="page-subtitle">
+    Companie: {{ selectedCompany?.nume }}
+  </p>
+</div>
+```
+
+**DELETE CSS (lines 789-840):**
+```css
+/* DELETE - now in dashboard.css */
+.dashboard-header {
+  text-align: center;
+  margin-bottom: var(--space-lg);
+  /* ... */
+}
+
+.dashboard-title {
+  font-size: 2.5rem;
+  /* ... */
+}
+
+.dashboard-subtitle {
+  /* ... */
+}
+```
+
+**Test:**
+- [ ] Header renders identically
+- [ ] Icon displays
+- [ ] Company name shows
+
+**Acceptance Criteria:**
+- [ ] Template updated
+- [ ] ~50 lines CSS deleted
+- [ ] Visual identical
+
+---
+
+#### Task 2.2: Convert Section Headers
+**Status:** ⏸️ | **Est:** 1 hour
+
+**Find all section headers (~4-5 instances):**
+```vue
+<!-- BEFORE -->
+<div class="dashboard-section">
+  <div class="section-header">
+    <h2 class="section-title">Vânzări</h2>
+    <div class="section-controls">
+      <!-- Buttons -->
+    </div>
+  </div>
+</div>
+```
+
+**AFTER:**
+```vue
+<!-- Use global pattern -->
+<div class="card">
+  <div class="section-header">
+    <h2 class="section-title">Vânzări</h2>
+    <div class="section-controls">
+      <!-- Buttons -->
+    </div>
+  </div>
+</div>
+```
+
+**DELETE CSS (~100 lines):**
+```css
+/* DELETE - dashboard.css provides these */
+.dashboard-section {
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  /* ... */
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  /* ... */
+}
+
+.section-title {
+  font-size: var(--text-xl);
+  /* ... */
+}
+
+.section-controls {
+  /* ... */
+}
+```
+
+**Test each section:**
+- [ ] Vânzări section
+- [ ] Achiziții section
+- [ ] Trezorerie section
+- [ ] Clienți section
+- [ ] Furnizori section
+
+**Acceptance Criteria:**
+- [ ] All sections use global pattern
+- [ ] ~100 lines deleted
+- [ ] Layout identical
+
+---
+
+#### Task 2.3: Simplify Container Layout
+**Status:** ⏸️ | **Est:** 30 min
+
+**DELETE:**
+```css
+/* DELETE - use containers.css */
+.dashboard-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: var(--space-xl);
+}
+
+.dashboard-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xl);
+}
+```
+
+**REPLACE with:**
+```vue
+<div class="container-fluid">
+  <div class="page-header">...</div>
+  <!-- Content -->
+</div>
+```
+
+**Acceptance Criteria:**
+- [ ] Container uses global class
+- [ ] ~30 lines deleted
+- [ ] Width/padding correct
+
+---
+
+#### Task 2.4: Remove Card Container Duplicates
+**Status:** ⏸️ | **Est:** 30 min
+
+**Already using card components from Phase 4:**
+```vue
+<!-- These should already be refactored -->
+<MetricCard />
+<CashFlowMetricCard />
+<ClientiBalanceCard />
+<!-- etc -->
+```
+
+**DELETE any card wrapper CSS:**
+```css
+/* DELETE - cards handle their own styling */
+.metrics-container {
+  /* ... */
+}
+
+.card-wrapper {
+  /* ... */
+}
+```
+
+**Acceptance Criteria:**
+- [ ] Cards render from Phase 4
+- [ ] No wrapper CSS needed
+- [ ] ~80 lines deleted
+
+---
+
+### 3. Table Styles Replacement (3 tasks)
+
+#### Task 3.1: Replace Dashboard Tables
+**Status:** ⏸️ | **Est:** 2 hours
+
+**BEFORE:**
+```vue
+<table class="dashboard-table">
+  <thead>
+    <tr>
+      <th>Dată</th>
+      <th>Document</th>
+      <th>Valoare</th>
+    </tr>
+  </thead>
+  <tbody>
+    <!-- ... -->
+  </tbody>
+</table>
+```
+
+**AFTER:**
+```vue
+<table class="table table-bordered table-hover table-sm">
+  <thead>
+    <tr>
+      <th>Dată</th>
+      <th>Document</th>
+      <th class="text-right">Valoare</th>
+    </tr>
+  </thead>
+  <tbody>
+    <!-- ... -->
+  </tbody>
+</table>
+```
+
+**DELETE CSS (lines 899-1300 - ~400 lines!):**
+```css
+/* DELETE ALL - tables.css provides */
+.dashboard-table {
+  width: 100%;
+  border-collapse: collapse;
+  /* ... 400 lines ... */
+}
+
+.dashboard-table th {
+  /* ... */
+}
+
+.dashboard-table td {
+  /* ... */
+}
+
+.dashboard-table tbody tr:hover {
+  /* ... */
+}
+
+/* ... many more table rules ... */
+```
+
+**Test tables:**
+- [ ] Vânzări table
+- [ ] Achiziții table
+- [ ] Recent transactions table
+- [ ] All styling correct
+- [ ] Hover effects work
+- [ ] Responsive behavior
+
+**Acceptance Criteria:**
+- [ ] All tables use tables.css
+- [ ] ~400 lines deleted
+- [ ] Tables look identical
+
+---
+
+#### Task 3.2: Add Table Utilities
+**Status:** ⏸️ | **Est:** 20 min
+
+**Use utility classes:**
+```vue
+<td class="text-right">{{ value }}</td>
+<td class="text-center">{{ status }}</td>
+<td class="font-mono">{{ number }}</td>
+```
+
+**Acceptance Criteria:**
+- [ ] Numeric values right-aligned
+- [ ] Status centered
+- [ ] Numbers use monospace
+
+---
+
+#### Task 3.3: Test Table Responsiveness
+**Status:** ⏸️ | **Est:** 30 min
+
+**Mobile behavior:**
+- [ ] Tables scroll horizontally on mobile
+- [ ] Headers sticky
+- [ ] Touch-friendly row height
+
+**Acceptance Criteria:**
+- [ ] Tables work on mobile
+- [ ] No layout breaks
+- [ ] Usable on small screens
+
+---
+
+### 4. Stats & Metrics (3 tasks)
+
+#### Task 4.1: Use Metric Card Patterns
+**Status:** ⏸️ | **Est:** 1 hour
+
+**Already done in Phase 4:**
+```vue
+<!-- These use global patterns now -->
+<MetricCard :value="totalSales" label="Vânzări" />
+```
+
+**DELETE any remaining stat CSS:**
+```css
+/* DELETE - card components handle this */
+.stat-display {
+  /* ... */
+}
+
+.stat-value {
+  /* ... */
+}
+
+.stat-label {
+  /* ... */
+}
+```
+
+**Acceptance Criteria:**
+- [ ] All stats use metric cards
+- [ ] ~200 lines deleted
+- [ ] Displays identical
+
+---
+
+#### Task 4.2: Remove Duplicate Trends
+**Status:** ⏸️ | **Est:** 20 min
+
+**DELETE:**
+```css
+/* DELETE - interactive.css provides */
+.trend-up {
+  color: var(--color-success);
+}
+
+.trend-down {
+  color: var(--color-error);
+}
+```
+
+**USE:**
+```vue
+<span class="trend trend-up">
+  <i class="pi pi-arrow-up trend-icon"></i>
+  +15%
+</span>
+```
+
+**Acceptance Criteria:**
+- [ ] All trends use global classes
+- [ ] ~30 lines deleted
+
+---
+
+#### Task 4.3: Test All Metrics
+**Status:** ⏸️ | **Est:** 30 min
+
+- [ ] All metric values display correctly
+- [ ] Trend indicators show
+- [ ] Charts render
+- [ ] Breakdowns expand
+
+---
+
+### 5. Responsive Consolidation (6 tasks)
+
+**CRITICAL: Currently 4 separate breakpoints (600 lines total)**
+
+#### Task 5.1: Audit Responsive Rules
+**Status:** ⏸️ | **Est:** 1 hour
+
+**Current breakpoints:**
+```css
+@media (max-width: 1200px) { /* 166 lines */ }
+@media (max-width: 1024px) { /* 143 lines */ }
+@media (max-width: 768px) { /* 224 lines */ }
+@media (max-width: 480px) { /* 245 lines */ }
+```
+
+**Analyze:**
+- [ ] What's different at each breakpoint?
+- [ ] Which rules are duplicate?
+- [ ] Which can use global responsive CSS?
+- [ ] Which are truly component-specific?
+
+**Acceptance Criteria:**
+- [ ] All breakpoint rules documented
+- [ ] Consolidation plan created
+
+---
+
+#### Task 5.2: Extract Global Responsive to CSS
+**Status:** ⏸️ | **Est:** 1 hour
+
+**Add to dashboard.css:**
+```css
+/* Dashboard responsive rules */
+@media (max-width: 768px) {
+  .metrics-row {
+    grid-template-columns: 1fr;
+  }
+
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .page-title {
+    font-size: var(--text-2xl);
+  }
+}
+```
+
+**Acceptance Criteria:**
+- [ ] Common responsive rules in global CSS
+- [ ] Apply to all dashboard views
+
+---
+
+#### Task 5.3: Consolidate to Single Breakpoint
+**Status:** ⏸️ | **Est:** 2 hours
+
+**BEFORE (4 breakpoints):**
+```css
+@media (max-width: 1200px) {
+  .dashboard-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 1024px) {
+  .dashboard-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+  /* ... 200 more lines ... */
+}
+
+@media (max-width: 480px) {
+  /* ... 245 lines ... */
+}
+```
+
+**AFTER (1 breakpoint):**
+```css
+@media (max-width: 768px) {
+  /* Only truly component-specific mobile rules */
+  .dashboard-specific-class {
+    /* Component-specific adjustment */
+  }
+}
+```
+
+**Acceptance Criteria:**
+- [ ] 4 breakpoints → 1 breakpoint
+- [ ] ~500 lines deleted
+- [ ] Responsive behavior identical
+
+---
+
+#### Task 5.4: Test Desktop Breakpoints
+**Status:** ⏸️ | **Est:** 30 min
+
+**Test at:**
+- [ ] 1920x1080 (Full HD)
+- [ ] 1366x768 (Laptop)
+- [ ] 1280x720 (Small desktop)
+
+**Acceptance Criteria:**
+- [ ] Layout adapts correctly
+- [ ] No horizontal scroll
+- [ ] All content visible
+
+---
+
+#### Task 5.5: Test Tablet
+**Status:** ⏸️ | **Est:** 30 min
+
+**Test at:**
+- [ ] 768x1024 (iPad portrait)
+- [ ] 1024x768 (iPad landscape)
+
+**Acceptance Criteria:**
+- [ ] Cards adapt to width
+- [ ] Tables usable
+- [ ] Touch targets adequate
+
+---
+
+#### Task 5.6: Test Mobile (CRITICAL)
+**Status:** ⏸️ | **Est:** 1 hour
+
+**Test at:**
+- [ ] 375x667 (iPhone SE)
+- [ ] 414x896 (iPhone 11)
+- [ ] 360x640 (Android)
+
+**Real device testing:**
+- [ ] Test on actual iPhone
+- [ ] Test on actual Android
+- [ ] Virtual keyboard doesn't break layout
+- [ ] Scrolling smooth
+
+**Acceptance Criteria:**
+- [ ] Perfect mobile experience
+- [ ] No layout breaks
+- [ ] All features accessible
+
+---
+
+### 6. Loading & Animations (3 tasks)
+
+#### Task 6.1: Replace Loading Spinner
+**Status:** ⏸️ | **Est:** 15 min
+
+**DELETE:**
+```css
+/* DELETE - interactive.css provides */
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  /* ... */
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+```
+
+**USE:**
+```vue
+<div class="loading-spinner"></div>
+```
+
+**Acceptance Criteria:**
+- [ ] ~40 lines deleted
+- [ ] Spinner looks identical
+
+---
+
+#### Task 6.2: Use Global Animations
+**Status:** ⏸️ | **Est:** 15 min
+
+**DELETE:**
+```css
+/* DELETE - animations.css provides */
+@keyframes slideDown {
+  /* ... */
+}
+
+@keyframes fadeIn {
+  /* ... */
+}
+```
+
+**USE:**
+```vue
+<div class="slide-down">...</div>
+<div class="fade-in">...</div>
+```
+
+**Acceptance Criteria:**
+- [ ] ~20 lines deleted
+- [ ] Animations work
+
+---
+
+#### Task 6.3: Test Loading States
+**Status:** ⏸️ | **Est:** 15 min
+
+- [ ] Initial load shows spinner
+- [ ] Data fetching shows loading
+- [ ] Transitions smooth
+
+---
+
+### 7. Testing & Validation (5 tasks)
+
+#### Task 7.1: Playwright Visual Regression
+**Status:** ⏸️ | **Est:** 1 hour
+
+**CRITICAL TEST:**
+```bash
+# Capture before Phase 5
+npm run test:e2e -- tests/e2e/dashboard/ --update-snapshots
+
+# After each major change, compare
+npm run test:e2e -- tests/e2e/dashboard/
+
+# Review differences
+npm run test:e2e:report
+```
+
+**Acceptance Criteria:**
+- [ ] Zero unexpected differences
+- [ ] All snapshots match
+- [ ] Any differences approved
+
+---
+
+#### Task 7.2: Desktop Testing (All Sizes)
+**Status:** ⏸️ | **Est:** 1 hour
+
+**Resolutions:**
+- [ ] 1920x1080
+- [ ] 1600x900
+- [ ] 1366x768
+- [ ] 1280x1024
+
+**Check:**
+- [ ] Grid layouts
+- [ ] Card displays
+- [ ] Tables
+- [ ] Charts
+- [ ] Spacing
+
+**Acceptance Criteria:**
+- [ ] Perfect on all desktop sizes
+- [ ] No layout shifts
+
+---
+
+#### Task 7.3: Tablet Testing
+**Status:** ⏸️ | **Est:** 45 min
+
+- [ ] iPad portrait (768x1024)
+- [ ] iPad landscape (1024x768)
+- [ ] Surface (1366x768)
+
+**Acceptance Criteria:**
+- [ ] Responsive layout works
+- [ ] Touch interactions smooth
+
+---
+
+#### Task 7.4: Mobile Testing (Real Devices)
+**Status:** ⏸️ | **Est:** 1 hour
+
+**Test on real devices:**
+- [ ] iPhone (any model)
+- [ ] Android phone
+
+**Test all features:**
+- [ ] Dashboard loads
+- [ ] Cards display
+- [ ] Tables scroll
+- [ ] Charts tap/zoom
+- [ ] Breakdowns expand
+- [ ] Filters work
+- [ ] Virtual keyboard doesn't break
+
+**Acceptance Criteria:**
+- [ ] 100% functional on mobile
+- [ ] No usability issues
+
+---
+
+#### Task 7.5: Measure Reduction
+**Status:** ⏸️ | **Est:** 15 min
+
+**Measure:**
+```bash
+# Before
+wc -l src/views/DashboardView.vue.phase5.backup
+# CSS lines: 2,010
+
+# After
+wc -l src/views/DashboardView.vue
+# Expected total: ~2,300 (4,010 - 1,710)
+
+# Count CSS lines in scoped section
+sed -n '/^<style scoped>/,/^<\/style>/p' src/views/DashboardView.vue | wc -l
+# Target: ~300
+```
+
+**Document:**
+- [ ] Before: 2,010 CSS lines
+- [ ] After: ___ CSS lines
+- [ ] Eliminated: ___ lines
+- [ ] Target: 1,710 lines (85%)
+- [ ] Actual reduction: ___%
+
+**Acceptance Criteria:**
+- [ ] At least 1,500 lines eliminated (75%)
+- [ ] Target: 1,710 lines (85%)
+- [ ] Metrics documented
+
+---
+
+### 8. Validation & Commit (2 tasks)
+
+#### Task 8.1: Final Validation
+**Status:** ⏸️ | **Est:** 30 min
+
+**Checklist:**
+- [ ] All dashboard features work
+- [ ] All charts render
+- [ ] All tables display
+- [ ] All cards functional
+- [ ] Responsive on all sizes
+- [ ] No console errors
+- [ ] No CSS warnings
+- [ ] Playwright tests pass
+- [ ] Performance acceptable
+- [ ] Target reduction achieved
+
+**Acceptance Criteria:**
+- [ ] All checks pass
+- [ ] Ready for commit
+
+---
+
+#### Task 8.2: Commit Phase 5
+**Status:** ⏸️ | **Est:** 15 min
+
+```bash
+git add .
+git commit -m "feat(css): Phase 5 - DashboardView major refactoring
+
+CRITICAL REFACTORING - 85% CSS reduction
+
+Changes:
+- Reduce DashboardView.vue CSS from 2,010 to ~300 lines
+- Eliminate 1,710 lines of duplicate CSS (85% reduction)
+- Replace custom patterns with global CSS
+- Consolidate 4 responsive breakpoints to 1
+- Use tables.css for all table styling (400 lines eliminated)
+- Use dashboard.css patterns (300 lines eliminated)
+- Use interactive.css patterns (100 lines eliminated)
+- Component now uses Phase 2-4 foundations
+
+Impact:
+- Cleaner, more maintainable code
+- Consistent with rest of application
+- Better performance (smaller bundle)
+- Easier future modifications
+
+Testing:
+- ✅ Playwright visual regression (pixel-perfect)
+- ✅ Desktop testing (1920x1080, 1366x768, 1280x720)
+- ✅ Tablet testing (iPad portrait/landscape)
+- ✅ Mobile testing (iPhone, Android - real devices)
+- ✅ All features functional
+- ✅ Zero breaking changes
+
+Before/After:
+- Total lines: 4,010 → ~2,300
+- CSS lines: 2,010 → ~300
+- Reduction: 1,710 lines (85%)
+- Component CSS %: 50% → 13%
+
+Phase: 5/7 complete (CRITICAL MILESTONE)
+"
+
+git push origin feature/css-refactoring
+```
+
+---
+
+## Completion Criteria
+
+- [ ] 1,710 CSS lines eliminated (target: 85%)
+- [ ] All global patterns used
+- [ ] 4 responsive breakpoints → 1
+- [ ] All tables use tables.css
+- [ ] Playwright tests pass
+- [ ] Real device testing complete
+- [ ] Zero functionality broken
+- [ ] Performance improved
+
+---
+
+## Rollback Plan
+
+If critical issues arise:
+
+```bash
+# Immediate rollback
+/tmp/restore-dashboard.sh
+
+# Or from git
+git checkout src/views/DashboardView.vue.phase5.backup
+
+# Test
+npm run dev
+```
+
+---
+
+## Next Phase
+
+**Phase 6:** View-uri Rămase
+- Apply learnings to remaining views
+- See: [phase-6-views.md](./phase-6-views.md)
+
+---
+
+**Created:** 2025-11-18
+**Status:** ⏸️ Not Started
+**⚠️ WARNING:** Most complex phase - proceed with caution
--- a/features/phases/phase-6-views.md
+++ b/features/phases/phase-6-views.md
@@ -0,0 +1,298 @@
+# Phase 6: View-uri Rămase 📄
+
+**Priority:** Complete standardization
+**Duration:** 16-20 hours
+**Status:** ⏸️ Not Started
+**Risk Level:** Medium
+
+---
+
+## Obiective
+
+Apply Phase 1-5 learnings to remaining views:
+1. TelegramView.vue
+2. BankCashRegisterView.vue (if exists)
+3. CacheStatsView.vue (if exists)
+4. Any other custom views
+
+**Target:** ~400 lines CSS eliminated
+
+---
+
+## Task Breakdown (16 tasks)
+
+### TelegramView.vue (5 tasks)
+
+#### Task 1.1: Analyze Current CSS
+**Status:** ⏸️ | **Est:** 30 min
+
+```bash
+# Check current state
+wc -l src/views/TelegramView.vue
+grep -c "^  " src/views/TelegramView.vue  # Estimate CSS lines
+```
+
+**Document:**
+- [ ] Total lines: ___
+- [ ] CSS lines: ~218 (from analysis)
+- [ ] Custom patterns identified
+- [ ] Duplicates identified
+
+---
+
+#### Task 1.2: Convert Page Header
+**Status:** ⏸️ | **Est:** 20 min
+
+**Use global pattern:**
+```vue
+<div class="page-header">
+  <h1 class="page-title">
+    <i class="pi pi-telegram"></i>
+    Integrare Telegram
+  </h1>
+  <p class="page-subtitle">...</p>
+</div>
+```
+
+**DELETE custom header CSS (~30 lines)**
+
+---
+
+#### Task 1.3: Replace Custom Buttons
+**Status:** ⏸️ | **Est:** 45 min
+
+**BEFORE:**
+```vue
+<button class="generate-btn">
+  Generează Cod
+</button>
+
+<style scoped>
+.generate-btn {
+  min-width: 200px;
+  padding: 12px 24px;
+  background: #6366f1;  /* Hardcoded! */
+  /* ... 15 more lines ... */
+}
+</style>
+```
+
+**AFTER:**
+```vue
+<button class="btn btn-primary btn-lg">
+  Generează Cod
+</button>
+
+<style scoped>
+/* No button styles needed - buttons.css provides */
+</style>
+```
+
+**DELETE ~60 lines of custom button CSS**
+
+---
+
+#### Task 1.4: Use Standard Card Patterns
+**Status:** ⏸️ | **Est:** 30 min
+
+**Replace custom cards:**
+```vue
+<Card class="info-card">
+  <!-- Content -->
+</Card>
+```
+
+**DELETE custom card CSS (~50 lines)**
+
+---
+
+#### Task 1.5: Test TelegramView
+**Status:** ⏸️ | **Est:** 45 min
+
+**Test:**
+- [ ] Page renders correctly
+- [ ] Code generation works
+- [ ] QR code displays
+- [ ] Link/unlink flow works
+- [ ] All buttons styled correctly
+
+**Target:** 218 → ~80 lines (138 eliminated)
+
+---
+
+### Other Views (8 tasks - 4 per view x 2 views)
+
+#### BankCashRegisterView.vue (if exists)
+
+##### Task 2.1: Audit View
+**Status:** ⏸️ | **Est:** 30 min
+
+```bash
+# Check if exists
+ls src/views/BankCashRegisterView.vue
+
+# Analyze
+grep -n "class=" src/views/BankCashRegisterView.vue
+```
+
+---
+
+##### Task 2.2: Apply Global Patterns
+**Status:** ⏸️ | **Est:** 1-2 hours
+
+- [ ] Page header
+- [ ] Section headers
+- [ ] Forms (use Phase 1 pattern)
+- [ ] Tables (use tables.css)
+- [ ] Cards (use cards.css)
+
+---
+
+##### Task 2.3: Remove Duplicate CSS
+**Status:** ⏸️ | **Est:** 30 min
+
+**Target:** ~50% reduction
+
+---
+
+##### Task 2.4: Test
+**Status:** ⏸️ | **Est:** 30 min
+
+- [ ] All features work
+- [ ] Visual regression pass
+
+---
+
+#### CacheStatsView.vue (if exists)
+
+##### Task 3.1-3.4: Same Pattern
+**Status:** ⏸️ | **Est:** 2-3 hours
+
+Follow same approach:
+1. Audit
+2. Apply patterns
+3. Remove duplicates
+4. Test
+
+---
+
+### Final Integration Testing (3 tasks)
+
+#### Task 4.1: Test All Views Together
+**Status:** ⏸️ | **Est:** 1 hour
+
+**Navigate through all views:**
+- [ ] Login → Dashboard
+- [ ] Dashboard → Invoices
+- [ ] Dashboard → Telegram
+- [ ] Dashboard → Bank/Cash (if exists)
+- [ ] Check navigation consistency
+- [ ] Check styling consistency
+
+**Acceptance Criteria:**
+- [ ] All views use consistent patterns
+- [ ] Navigation smooth
+- [ ] No layout shifts between views
+
+---
+
+#### Task 4.2: Playwright Full Suite
+**Status:** ⏸️ | **Est:** 30 min
+
+```bash
+# Run all tests
+npm run test:e2e
+
+# Check results
+npm run test:e2e:report
+```
+
+**Acceptance Criteria:**
+- [ ] All E2E tests pass
+- [ ] No visual regressions
+- [ ] All features functional
+
+---
+
+#### Task 4.3: Performance Measurement
+**Status:** ⏸️ | **Est:** 20 min
+
+**Measure:**
+```bash
+# CSS bundle size
+ls -lh dist/assets/*.css
+
+# Total CSS in components
+find src/ -name "*.vue" -exec grep -l "<style" {} \; | \
+  xargs -I {} sh -c 'sed -n "/<style/,/<\/style>/p" {} | wc -l'
+```
+
+**Document:**
+- [ ] Phase 6 CSS eliminated: ~400 lines
+- [ ] Total project CSS eliminated: ~3,260 lines
+- [ ] Bundle size reduction: ___KB
+- [ ] Performance impact: ___%
+
+**Acceptance Criteria:**
+- [ ] Target reduction achieved
+- [ ] Metrics documented
+
+---
+
+## Completion Criteria
+
+- [ ] All views refactored
+- [ ] ~400 lines eliminated
+- [ ] Consistent patterns across all views
+- [ ] All tests pass
+- [ ] Performance metrics positive
+
+---
+
+## Commit
+
+```bash
+git add .
+git commit -m "feat(css): Phase 6 - Refactor remaining views
+
+Views refactored:
+- TelegramView.vue: 218 → 80 lines (138 eliminated)
+- BankCashRegisterView.vue: TBD
+- CacheStatsView.vue: TBD
+
+Total Phase 6 elimination: ~400 lines
+
+Impact:
+- All views now use global patterns
+- Consistent styling across application
+- Reduced maintenance burden
+
+Testing:
+- ✅ All view features functional
+- ✅ Playwright full suite pass
+- ✅ Performance improved
+
+Cumulative Progress:
+- Phases 1-6 complete
+- Total CSS eliminated: ~2,860 lines
+- One phase remaining (Documentation)
+
+Phase: 6/7 complete
+"
+
+git push origin feature/css-refactoring
+```
+
+---
+
+## Next Phase
+
+**Phase 7:** Documentation & Finalization
+- Create comprehensive documentation
+- Performance report
+- See: [phase-7-documentation.md](./phase-7-documentation.md)
+
+---
+
+**Created:** 2025-11-18
+**Status:** ⏸️ Not Started
--- a/features/phases/phase-7-documentation.md
+++ b/features/phases/phase-7-documentation.md
@@ -0,0 +1,893 @@
+# Phase 7: Documentare & Finalizare 📚
+
+**Priority:** Long-term maintainability
+**Duration:** 12-16 hours
+**Status:** ⏸️ Not Started
+**Risk Level:** Low
+
+---
+
+## Obiective
+
+1. **Complete pattern documentation** - CSS Patterns Library
+2. **Developer guidelines** - How to use the new system
+3. **Performance report** - Before/after metrics
+4. **Onboarding guide** - For new developers
+
+---
+
+## Task Breakdown (12 tasks)
+
+### 1. Pattern Documentation (4 tasks)
+
+#### Task 1.1: Create CSS Patterns Library
+**Status:** ⏸️ | **Est:** 2 hours
+
+**File:** `docs/CSS_PATTERNS.md`
+
+**Content structure:**
+```markdown
+# ROA2WEB CSS Patterns Library
+
+## Table of Contents
+1. Card Patterns
+2. Form Patterns
+3. Button Patterns
+4. Table Patterns
+5. Dashboard Patterns
+6. Interactive Patterns
+7. Layout Patterns
+8. Utility Classes
+
+## 1. Card Patterns
+
+### Basic Card
+\`\`\`html
+<div class="card">
+  <div class="card-header">
+    <h3>Title</h3>
+  </div>
+  <div class="card-body">
+    Content
+  </div>
+</div>
+\`\`\`
+
+### Metric Card
+\`\`\`html
+<div class="metric-card card-hover">
+  <div class="metric-header">
+    <div class="metric-icon bg-primary-light text-primary">
+      <i class="pi pi-chart-bar"></i>
+    </div>
+    <div class="metric-label">Sales</div>
+  </div>
+  <div class="metric-value">$10,000</div>
+</div>
+\`\`\`
+
+<!-- ... more patterns ... -->
+```
+
+**Include:**
+- [ ] All card patterns with examples
+- [ ] All form patterns
+- [ ] All button variants
+- [ ] Table patterns
+- [ ] Dashboard-specific patterns
+- [ ] Interactive elements (spinners, trends, collapse)
+- [ ] Layout patterns
+- [ ] Utility classes
+
+**Acceptance Criteria:**
+- [ ] Comprehensive examples
+- [ ] Live code snippets
+- [ ] Use cases documented
+- [ ] Screenshots included
+
+---
+
+#### Task 1.2: Form Template & Guidelines
+**Status:** ⏸️ | **Est:** 1 hour
+
+**File:** `docs/FORM_TEMPLATE.md`
+
+**Content:**
+```markdown
+# Form Template & Guidelines
+
+## Standard Form Structure
+
+\`\`\`vue
+<template>
+  <form @submit.prevent="handleSubmit" class="form">
+
+    <!-- Single Field -->
+    <div class="form-group">
+      <label for="field-id" class="form-label required">Label</label>
+      <input
+        id="field-id"
+        v-model="formData.field"
+        type="text"
+        class="form-input"
+        :class="{ 'invalid': errors.field }"
+        @blur="validateField('field')"
+      />
+      <span v-if="errors.field" class="form-error">
+        <i class="pi pi-exclamation-circle"></i>
+        {{ errors.field }}
+      </span>
+      <span v-else class="form-help">
+        Help text
+      </span>
+    </div>
+
+    <!-- Horizontal Fields -->
+    <div class="form-row">
+      <div class="form-col">
+        <!-- Field 1 -->
+      </div>
+      <div class="form-col">
+        <!-- Field 2 -->
+      </div>
+    </div>
+
+    <!-- PrimeVue Component -->
+    <div class="form-group">
+      <label class="form-label">Dropdown</label>
+      <Dropdown
+        v-model="formData.selected"
+        :options="options"
+        option-label="label"
+        placeholder="Select"
+        class="w-full"
+      />
+    </div>
+
+    <!-- Form Actions -->
+    <div class="form-actions">
+      <button type="button" class="btn btn-secondary" @click="handleCancel">
+        Cancel
+      </button>
+      <button type="submit" class="btn btn-primary" :disabled="isSubmitting">
+        <i v-if="isSubmitting" class="pi pi-spin pi-spinner"></i>
+        Submit
+      </button>
+    </div>
+  </form>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const formData = ref({ field: '', selected: null })
+const errors = ref({})
+const isSubmitting = ref(false)
+
+const validateField = (field) => {
+  // Validation logic
+}
+
+const handleSubmit = async () => {
+  // Submit logic
+}
+</script>
+
+<style scoped>
+/* NO FORM STYLES NEEDED - ALL PROVIDED BY forms.css */
+/* Only add component-specific layout if absolutely necessary */
+</style>
+\`\`\`
+
+## Validation Patterns
+
+## Accessibility Guidelines
+
+## Common Mistakes to Avoid
+
+## Examples
+- Login form
+- Filter forms
+- Multi-step forms
+```
+
+**Acceptance Criteria:**
+- [ ] Complete template
+- [ ] Validation examples
+- [ ] Accessibility notes
+- [ ] Common pitfalls documented
+
+---
+
+#### Task 1.3: Component Styling Guidelines
+**Status:** ⏸️ | **Est:** 1.5 hours
+
+**File:** `docs/COMPONENT_STYLING.md`
+
+**Content:**
+```markdown
+# Component Styling Guidelines
+
+## When to Use Scoped Styles vs Global CSS
+
+### ✅ Use Global CSS When:
+- Pattern is used in 2+ components
+- Styling follows established design system
+- PrimeVue component customization
+- Layout patterns
+- Utility classes
+
+### ✅ Use Scoped Styles When:
+- Truly component-specific logic
+- Complex component state styling
+- Third-party library integration (Chart.js, etc.)
+- One-off unique components
+
+### ❌ NEVER Do:
+- Duplicate existing patterns
+- Override PrimeVue with :deep() in components
+- Hardcode colors/sizes (use design tokens)
+- Use !important in scoped styles
+- Create custom form/button/card base styles
+
+## Decision Tree
+
+\`\`\`
+Need to style a component?
+│
+├─ Does this pattern exist in another component?
+│  ├─ YES → Use global CSS
+│  └─ NO → Continue
+│
+├─ Is this a form/button/card/table?
+│  ├─ YES → Use global CSS (components/forms.css, etc.)
+│  └─ NO → Continue
+│
+├─ Is this a PrimeVue component?
+│  ├─ YES → Check vendor/primevue-overrides.css
+│  └─ NO → Continue
+│
+└─ Truly unique to this component?
+   ├─ YES → Scoped styles OK
+   └─ NO → Extract to global pattern
+\`\`\`
+
+## Examples
+
+### ❌ Bad: Duplicate Pattern
+\`\`\`vue
+<style scoped>
+.my-card {
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  /* ... duplicating cards.css ... */
+}
+</style>
+\`\`\`
+
+### ✅ Good: Use Global
+\`\`\`vue
+<template>
+  <div class="card">
+    <!-- Content -->
+  </div>
+</template>
+
+<style scoped>
+/* No card styles needed */
+</style>
+\`\`\`
+
+### ❌ Bad: PrimeVue Override
+\`\`\`vue
+<style scoped>
+:deep(.p-inputtext) {
+  border: 2px solid #3b82f6 !important;
+}
+</style>
+\`\`\`
+
+### ✅ Good: Global Override
+All PrimeVue styling in vendor/primevue-overrides.css
+
+### ✅ Good: Component-Specific
+\`\`\`vue
+<style scoped>
+/* Chart.js canvas sizing (truly component-specific) */
+.chart-canvas {
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>
+\`\`\`
+
+## Code Review Checklist
+- [ ] No duplicate patterns from global CSS
+- [ ] Design tokens used (no hardcoded values)
+- [ ] No :deep() for PrimeVue
+- [ ] No !important (except vendor overrides)
+- [ ] Scoped styles < 50 lines (rule of thumb)
+- [ ] Responsive handled globally when possible
+```
+
+**Acceptance Criteria:**
+- [ ] Clear decision tree
+- [ ] Good/bad examples
+- [ ] Code review checklist
+- [ ] Best practices documented
+
+---
+
+#### Task 1.4: Styling Best Practices
+**Status:** ⏸️ | **Est:** 1 hour
+
+**File:** `docs/STYLING_GUIDELINES.md`
+
+**Content:**
+- Design token usage
+- Naming conventions
+- File organization
+- Performance considerations
+- Accessibility requirements
+- Browser compatibility
+- Testing guidelines
+
+**Acceptance Criteria:**
+- [ ] Comprehensive guidelines
+- [ ] Examples provided
+- [ ] References to pattern library
+
+---
+
+### 2. Code Documentation (2 tasks)
+
+#### Task 2.1: Add JSDoc Comments to CSS Files
+**Status:** ⏸️ | **Est:** 2 hours
+
+**Add to all CSS files in assets/css/:**
+
+```css
+/**
+ * Interactive Patterns - ROA2WEB
+ *
+ * Reusable interactive UI patterns including loading states,
+ * trend indicators, collapsible sections, and animations.
+ *
+ * @file interactive.css
+ * @version 2.0.0
+ * @since Phase 2 - CSS Refactoring
+ */
+
+/**
+ * Loading Spinner
+ *
+ * Displays an animated loading indicator.
+ *
+ * @class loading-spinner
+ * @modifier loading-spinner-sm - Small variant (24px)
+ * @modifier loading-spinner-lg - Large variant (56px)
+ *
+ * @example
+ * <div class="loading-spinner"></div>
+ * <div class="loading-spinner loading-spinner-lg"></div>
+ */
+.loading-spinner {
+  /* ... */
+}
+```
+
+**Add comments to:**
+- [ ] patterns/interactive.css
+- [ ] patterns/dashboard.css
+- [ ] patterns/animations.css
+- [ ] components/cards.css (additions)
+- [ ] vendor/primevue-overrides.css
+- [ ] core/tokens.css
+
+**Acceptance Criteria:**
+- [ ] All major patterns documented
+- [ ] Usage examples in comments
+- [ ] Version/phase noted
+
+---
+
+#### Task 2.2: Design Token Documentation
+**Status:** ⏸️ | **Est:** 1 hour
+
+**File:** `docs/DESIGN_TOKENS.md`
+
+**Document all tokens:**
+```markdown
+# Design Tokens Reference
+
+## Spacing Scale
+
+| Token | Value | Use Case |
+|-------|-------|----------|
+| --space-xs | 0.25rem (4px) | Tight spacing, icon gaps |
+| --space-sm | 0.5rem (8px) | Default gap between related items |
+| --space-md | 1rem (16px) | Standard component padding |
+| --space-lg | 1.5rem (24px) | Section padding |
+| --space-xl | 2rem (32px) | Page margins |
+| --space-2xl | 3rem (48px) | Large separations |
+| --space-3xl | 4rem (64px) | Hero sections |
+
+## Typography Scale
+
+## Color Palette
+
+## Shadows
+
+## Border Radius
+
+## Transitions
+```
+
+**Acceptance Criteria:**
+- [ ] All tokens documented
+- [ ] Use cases provided
+- [ ] Visual examples
+
+---
+
+### 3. Performance Report (3 tasks)
+
+#### Task 3.1: Before/After Metrics
+**Status:** ⏸️ | **Est:** 1.5 hours
+
+**File:** `docs/PERFORMANCE_REPORT.md`
+
+**Measure and document:**
+
+```markdown
+# CSS Refactoring Performance Report
+
+## Executive Summary
+
+**Project:** ROA2WEB Frontend CSS Refactoring
+**Duration:** [Start Date] - [End Date]
+**Total Effort:** X hours
+**Status:** ✅ Complete
+
+## Code Reduction Metrics
+
+### Overall Statistics
+
+| Metric | Before | After | Change |
+|--------|--------|-------|--------|
+| Total Vue component CSS | ~6,000 lines | ~2,500 lines | -58% ✅ |
+| DashboardView.vue CSS | 2,010 lines | 300 lines | -85% ✅ |
+| Card components CSS | 1,230 lines | 380 lines | -69% ✅ |
+| Form CSS duplicates | 3 patterns | 1 pattern | -67% ✅ |
+| PrimeVue :deep() overrides | 50+ instances | 0 instances | -100% ✅ |
+| Hardcoded values | ~150 instances | ~20 instances | -87% ✅ |
+| CSS files in assets/css/ | 17 files | 22 files | +5 files |
+| Global CSS lines | ~2,000 lines | ~2,600 lines | +30% |
+
+### By Phase
+
+| Phase | CSS Eliminated | Time Spent |
+|-------|----------------|------------|
+| Phase 1: Forms | 150 lines | Xh |
+| Phase 2: Foundation | 0 lines (setup) | Xh |
+| Phase 3: PrimeVue | 150 lines | Xh |
+| Phase 4: Cards | 850 lines | Xh |
+| Phase 5: Dashboard | 1,710 lines | Xh |
+| Phase 6: Views | 400 lines | Xh |
+| Phase 7: Docs | 0 lines | Xh |
+| **TOTAL** | **3,260 lines** | **Xh** |
+
+## Performance Metrics
+
+### Bundle Size
+
+| Asset | Before | After | Change |
+|-------|--------|-------|--------|
+| CSS bundle | X KB | Y KB | -Z KB (-W%) |
+| Gzipped CSS | X KB | Y KB | -Z KB (-W%) |
+
+### Load Performance
+
+| Metric | Before | After | Change |
+|--------|--------|-------|--------|
+| First Contentful Paint | X ms | Y ms | -Z ms |
+| Largest Contentful Paint | X ms | Y ms | -Z ms |
+| Total Blocking Time | X ms | Y ms | -Z ms |
+| Cumulative Layout Shift | X | Y | -Z |
+| Lighthouse Performance | X/100 | Y/100 | +Z |
+
+### Page-Specific Metrics
+
+#### Dashboard Page
+- Load time: X ms → Y ms (-Z%)
+- CSS parse time: X ms → Y ms (-Z%)
+- Render time: X ms → Y ms (-Z%)
+
+#### Invoices Page
+- Load time: X ms → Y ms (-Z%)
+
+## Quality Improvements
+
+### Code Quality
+
+✅ Eliminated all :deep() PrimeVue overrides
+✅ Removed all hardcoded colors/sizes
+✅ Standardized form patterns across app
+✅ Consistent card components
+✅ Centralized responsive breakpoints
+
+### Maintainability
+
+✅ New component creation time: 2h → 30min
+✅ Pattern documentation complete
+✅ Developer guidelines established
+✅ Onboarding time reduced
+
+## Testing Results
+
+### Visual Regression
+- Total Playwright tests: X
+- Passing: X (100%)
+- Visual regressions: 0
+
+### Browser Compatibility
+- ✅ Chrome
+- ✅ Firefox
+- ✅ Safari
+- ✅ Edge
+
+### Device Testing
+- ✅ Desktop (multiple resolutions)
+- ✅ Tablet (iPad)
+- ✅ Mobile (iPhone, Android)
+
+## Lessons Learned
+
+### What Went Well
+1. Phased approach reduced risk
+2. Playwright snapshots caught regressions early
+3. Design token system very effective
+4. Team collaboration excellent
+
+### Challenges
+1. DashboardView complexity
+2. PrimeVue override coordination
+3. Responsive consolidation tricky
+
+### Recommendations for Future
+1. Enforce pattern usage in code reviews
+2. Regular CSS audits (quarterly)
+3. Update Playwright snapshots with releases
+4. Onboard new developers with pattern library
+
+## ROI Analysis
+
+### Time Investment
+- Total hours: X hours
+- Estimated future savings: Y hours/year
+- ROI period: Z months
+
+### Benefits
+- Faster feature development
+- Reduced bugs
+- Better performance
+- Easier maintenance
+- Consistent UX
+```
+
+**Acceptance Criteria:**
+- [ ] All metrics collected
+- [ ] Before/after documented
+- [ ] ROI calculated
+
+---
+
+#### Task 3.2: Lighthouse Comparison
+**Status:** ⏸️ | **Est:** 30 min
+
+**Run Lighthouse before/after:**
+
+```bash
+# Install lighthouse CLI
+npm install -g lighthouse
+
+# Run reports
+lighthouse http://localhost:3000 --output html --output-path ./before-report.html
+lighthouse http://localhost:3000 --output html --output-path ./after-report.html
+
+# Compare
+```
+
+**Document:**
+- [ ] Performance score
+- [ ] First Contentful Paint
+- [ ] Largest Contentful Paint
+- [ ] Total Blocking Time
+- [ ] Cumulative Layout Shift
+
+**Acceptance Criteria:**
+- [ ] Reports generated
+- [ ] Comparison documented
+- [ ] Improvements highlighted
+
+---
+
+#### Task 3.3: Bundle Analysis
+**Status:** ⏸️ | **Est:** 30 min
+
+```bash
+# Build with analysis
+npm run build
+
+# Check bundle sizes
+ls -lh dist/assets/*.css
+du -sh dist/assets/
+
+# Compare with baseline
+```
+
+**Acceptance Criteria:**
+- [ ] Bundle sizes compared
+- [ ] CSS reduction quantified
+- [ ] Gzip sizes measured
+
+---
+
+### 4. Final Deliverables (3 tasks)
+
+#### Task 4.1: Developer Onboarding Guide
+**Status:** ⏸️ | **Est:** 1.5 hours
+
+**File:** `docs/ONBOARDING_CSS.md`
+
+**Content:**
+```markdown
+# CSS System Onboarding Guide
+
+## Welcome to ROA2WEB CSS Architecture
+
+This guide will help you understand our CSS system and start contributing quickly.
+
+## Quick Start (5 minutes)
+
+1. **Read the pattern library:**
+   `docs/CSS_PATTERNS.md`
+
+2. **Understand the structure:**
+   - `assets/css/core/` - Design tokens, reset
+   - `assets/css/patterns/` - Reusable patterns
+   - `assets/css/components/` - Component styles
+   - `assets/css/vendor/` - Third-party overrides
+
+3. **Golden rules:**
+   - ✅ Use global patterns
+   - ❌ Don't duplicate CSS
+   - ✅ Use design tokens
+   - ❌ No hardcoded values
+   - ✅ Scoped styles for unique logic only
+
+## Your First Component (15 minutes)
+
+### Example: Creating a Status Badge
+
+1. **Check if pattern exists:**
+   ```bash
+   grep -r "badge" src/assets/css/
+   ```
+
+2. **If not exists, check similarity:**
+   - Similar to buttons? Use button patterns
+   - Similar to tags? Create new pattern
+
+3. **Create component:**
+   ```vue
+   <template>
+     <span class="badge badge-success">Active</span>
+   </template>
+
+   <style scoped>
+   /* No badge styles needed - assuming badges.css exists */
+   /* Only component-specific layout if needed */
+   </style>
+   ```
+
+## Common Tasks
+
+### Adding a New Form
+→ See `docs/FORM_TEMPLATE.md`
+
+### Creating a Dashboard Card
+→ See `docs/CSS_PATTERNS.md` - Card Patterns
+
+### Styling a Table
+→ Use `tables.css` classes
+
+### Customizing PrimeVue
+→ Edit `vendor/primevue-overrides.css` (NEVER in components)
+
+## Code Review Checklist
+
+Before submitting PR:
+- [ ] No CSS duplication
+- [ ] Design tokens used
+- [ ] No :deep() in components
+- [ ] Pattern library consulted
+- [ ] Responsive tested
+- [ ] Playwright tests pass
+
+## Need Help?
+
+- **Pattern Library:** `docs/CSS_PATTERNS.md`
+- **Guidelines:** `docs/COMPONENT_STYLING.md`
+- **Tokens Reference:** `docs/DESIGN_TOKENS.md`
+- **Ask the team:** #frontend-css channel
+```
+
+**Acceptance Criteria:**
+- [ ] Quick start guide
+- [ ] First component tutorial
+- [ ] Common tasks documented
+- [ ] Resources linked
+
+---
+
+#### Task 4.2: Update Main README
+**Status:** ⏸️ | **Est:** 30 min
+
+**Update:** `reports-app/frontend/README.md`
+
+**Add section:**
+```markdown
+## CSS Architecture
+
+ROA2WEB uses a structured CSS system with design tokens and reusable patterns.
+
+### Documentation
+- **[CSS Patterns Library](../../docs/CSS_PATTERNS.md)** - All available patterns with examples
+- **[Component Styling Guidelines](../../docs/COMPONENT_STYLING.md)** - When to use global vs scoped CSS
+- **[Form Template](../../docs/FORM_TEMPLATE.md)** - Standard form structure
+- **[Design Tokens](../../docs/DESIGN_TOKENS.md)** - Available CSS variables
+- **[Onboarding Guide](../../docs/ONBOARDING_CSS.md)** - Quick start for new developers
+
+### Quick Reference
+
+**CSS Structure:**
+```
+src/assets/css/
+├── core/         # Design tokens, typography
+├── patterns/     # Interactive, dashboard, animations
+├── components/   # Cards, forms, buttons, tables
+├── vendor/       # PrimeVue overrides
+└── utilities/    # Spacing, text, flex, colors
+```
+
+**Golden Rules:**
+- ✅ Use global patterns (check `docs/CSS_PATTERNS.md` first)
+- ✅ Use design tokens (`var(--color-primary)` not `#3b82f6`)
+- ❌ No `:deep()` PrimeVue overrides in components
+- ❌ No CSS duplication
+- ❌ No hardcoded values
+
+### Before You Code
+1. Check if pattern exists in `docs/CSS_PATTERNS.md`
+2. Use design tokens from `core/variables.css` and `core/tokens.css`
+3. PrimeVue customization goes in `vendor/primevue-overrides.css`
+4. Keep scoped styles minimal (< 50 lines)
+
+### Testing
+```bash
+npm run test:e2e  # Visual regression tests
+```
+```
+
+**Acceptance Criteria:**
+- [ ] README updated
+- [ ] Links to documentation
+- [ ] Quick reference included
+
+---
+
+#### Task 4.3: Project Completion Report
+**Status:** ⏸️ | **Est:** 1 hour
+
+**File:** `features/CSS_REFACTORING_COMPLETION.md`
+
+**Final report with:**
+- [ ] Executive summary
+- [ ] All phases completed
+- [ ] Final metrics
+- [ ] Lessons learned
+- [ ] Future recommendations
+- [ ] Team acknowledgments
+
+**Acceptance Criteria:**
+- [ ] Comprehensive completion report
+- [ ] Stakeholder-ready
+- [ ] Archived for reference
+
+---
+
+## Final Commit & Merge
+
+```bash
+# Commit Phase 7
+git add .
+git commit -m "docs(css): Phase 7 - Complete documentation and performance report
+
+Documentation created:
+- docs/CSS_PATTERNS.md - Complete pattern library
+- docs/FORM_TEMPLATE.md - Standard form template
+- docs/COMPONENT_STYLING.md - Styling guidelines
+- docs/STYLING_GUIDELINES.md - Best practices
+- docs/DESIGN_TOKENS.md - Token reference
+- docs/PERFORMANCE_REPORT.md - Before/after metrics
+- docs/ONBOARDING_CSS.md - Developer onboarding
+
+Code documentation:
+- JSDoc comments added to all CSS files
+- Usage examples in comments
+- Version tracking
+
+Performance report:
+- 3,260 CSS lines eliminated (58% reduction)
+- Bundle size reduced by X%
+- Lighthouse score improved by +Y points
+- Load time improved by Z%
+
+Final deliverables:
+- Complete pattern library
+- Developer onboarding guide
+- Performance analysis
+- Code review checklist
+
+PHASE 7/7 COMPLETE ✅
+PROJECT COMPLETE ✅
+"
+
+git push origin feature/css-refactoring
+
+# Create PR
+gh pr create \
+  --title "CSS Architecture Refactoring - Complete (7 Phases)" \
+  --body "$(cat features/CSS_REFACTORING_COMPLETION.md)" \
+  --base main
+
+# Await review and merge
+```
+
+---
+
+## Project Completion Criteria
+
+- [ ] All 7 phases complete
+- [ ] ~3,260 CSS lines eliminated
+- [ ] Complete documentation
+- [ ] Performance report generated
+- [ ] Developer onboarding ready
+- [ ] PR created and approved
+- [ ] Merged to main
+- [ ] Deployed to production
+
+---
+
+## Celebration! 🎉
+
+**You've completed a major CSS refactoring project:**
+- 7 phases over 5-6 weeks
+- 92-120 hours of work
+- 58% CSS reduction
+- Complete documentation
+- Improved performance
+- Better maintainability
+
+**Impact:**
+- Faster development
+- Easier onboarding
+- Consistent UX
+- Better performance
+- Reduced technical debt
+
+---
+
+**Created:** 2025-11-18
+**Status:** ⏸️ Not Started (Final Phase)