feat(unified-mobile-material-design): Complete US-117 - Actualizare CLAUDE.md cu reguli Mobile Development

Implemented by Ralph autonomous loop.
Iteration: 6

Co-Authored-By: Claude <noreply@anthropic.com>

CLAUDE.md

@@ -90,6 +90,45 @@ See `docs/ARCHITECTURE-DECISIONS.md` for:
 - Filter buttons on separate row below filters
 - Export ALL data, not just current page
 
+### Mobile Development Rules ⚠️
+
+**Before writing mobile UI**: Read `docs/MOBILE_PATTERNS.md`
+
+#### Required Components
+All mobile pages **MUST** use these shared components:
+- **MobileTopBar**: Required for all mobile views (title, actions, back navigation)
+- **MobileBottomNav**: Required for all mobile views (persistent navigation)
+- **BottomSheet**: Required for filters on mobile (NEVER inline filters)
+- **MobileSelectionFooter**: Required when items are selectable (batch actions)
+
+```javascript
+// Import from shared components
+import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue'
+import MobileBottomNav from '@shared/components/mobile/MobileBottomNav.vue'
+import BottomSheet from '@shared/components/mobile/BottomSheet.vue'
+import MobileSelectionFooter from '@shared/components/mobile/MobileSelectionFooter.vue'
+```
+
+#### Layout Rules
+1. **Filters → BottomSheet**: Pe mobil, filtrele se pun ÎNTOTDEAUNA în BottomSheet, NU inline
+2. **Selection Actions → Footer**: Când sunt elemente selectate, acțiunile apar în MobileSelectionFooter, NU în header
+3. **Touch Targets**: Minimum **44x44px** pentru toate elementele interactive (butoane, linkuri, checkbox-uri)
+4. **Content Padding**: Conținutul trebuie să aibă `padding-top: 56px` și `padding-bottom: 56px` pentru barele fixe
+
+#### Mobile Code Review Checklist ✓
+
+```markdown
+□ Folosește MobileTopBar cu props corecte (title, showBack/showMenu, actions)
+□ Folosește MobileBottomNav pentru navigare
+□ Filtrele sunt în BottomSheet (nu inline pe pagină)
+□ Selecția afișează MobileSelectionFooter (nu butoane în header)
+□ Touch targets ≥ 44x44px
+□ Padding pentru bare fixe (top: 56px, bottom: 56px)
+□ Testat în dark mode
+□ Folosește design tokens (nu valori hardcodate)
+□ Nu duplică CSS din componentele mobile
+```
+
 ### Backend Development
 - Place logic in **services**, not routers
 - Use `@cached` decorator for ALL database queries
@@ -122,6 +161,7 @@ class YourService:
 | **CSS Quick Start** | `docs/ONBOARDING_CSS.md` | START HERE for frontend |
 | **CSS Patterns** | `docs/CSS_PATTERNS.md` | Cards, forms, buttons, tables |
 | **Design Tokens** | `docs/DESIGN_TOKENS.md` | Colors, spacing, dark mode |
+| **Mobile Patterns** | `docs/MOBILE_PATTERNS.md` | Mobile components, touch UX |
 | **Data Entry** | `docs/data-entry/DATA-ENTRY-MODULE.md` | SQLModel, workflow |
 | **Telegram** | `docs/telegram/README.md` | Bot development |
 | **Deployment** | `deployment/linux/README.md` | Deploy from LXC |