feat: Complete mobile UX/UI overhaul

Major improvements:
- New CSS design system with custom properties (tokens)
- Consistent spacing scale (4px base)
- Touch-friendly sizing (44px min targets)
- Improved Carousel with better touch handling and rubber-band effect
- Enhanced FilterControls (auto-collapse on mobile)
- Better stat card styling with change indicators
- Refined chart cards and toggle switches
- Smoother transitions and micro-interactions
- Better RTL support
- Print styles
- Responsive breakpoints for tablet (1024px), mobile (768px), and small mobile (375px)
- Cleaner typography hierarchy
- Subtle shadows and depth

Components updated:
- App.css: Complete rewrite with design tokens
- Carousel.jsx: Better touch gestures with velocity detection
- StatCard.jsx: Improved change indicator styling
- FilterControls.jsx: Auto-collapse on mobile
- EmptyState.jsx: Better accessibility
- ChartExport.js: Cleaned up unused imports

src/locales/en.json

@@ -0,0 +1,155 @@
+{
+  "app": {
+    "name": "HiHala Data",
+    "loading": "Loading data...",
+    "error": "Unable to load data",
+    "retry": "Retry"
+  },
+  "nav": {
+    "dashboard": "Dashboard",
+    "comparison": "Comparison",
+    "compare": "Compare",
+    "slides": "Slides",
+    "labels": "Labels",
+    "labelsOn": "Labels On",
+    "labelsOff": "Labels Off",
+    "labelsTooltip": "Show values on charts"
+  },
+  "toggle": {
+    "on": "On",
+    "off": "Off"
+  },
+  "dataSources": {
+    "museums": "Museums",
+    "coffees": "Coffees",
+    "ecommerce": "eCommerce",
+    "soon": "soon"
+  },
+  "filters": {
+    "title": "Filters",
+    "year": "Year",
+    "district": "District",
+    "museum": "Museum",
+    "quarter": "Quarter",
+    "allYears": "All Years",
+    "allDistricts": "All Districts",
+    "allMuseums": "All Museums",
+    "allQuarters": "All Quarters",
+    "reset": "Reset Filters"
+  },
+  "metrics": {
+    "revenue": "Revenue",
+    "totalRevenue": "Total Revenue",
+    "visitors": "Visitors",
+    "totalVisitors": "Total Visitors",
+    "tickets": "Tickets",
+    "totalTickets": "Total Tickets",
+    "avgRevenue": "Avg Rev/Visitor",
+    "avgRevenuePerVisitor": "Avg Revenue/Visitor",
+    "pilgrims": "Pilgrims",
+    "captureRate": "Capture Rate"
+  },
+  "dashboard": {
+    "title": "Dashboard",
+    "subtitle": "Real-time museum analytics from Google Sheets",
+    "noData": "No data found",
+    "noDataMessage": "No records match your current filters. Try adjusting your selection.",
+    "quarterlyComparison": "Quarterly Comparison: 2024 vs 2025",
+    "revenueTrends": "Revenue Trends",
+    "visitorsByMuseum": "Visitors by Museum",
+    "revenueByMuseum": "Revenue by Museum",
+    "quarterlyRevenue": "Quarterly Revenue (YoY)",
+    "districtPerformance": "District Performance",
+    "captureRateChart": "Capture Rate vs Umrah Pilgrims"
+  },
+  "table": {
+    "quarter": "Quarter",
+    "rev2024": "Rev 2024",
+    "rev2025": "Rev 2025",
+    "change": "Change",
+    "visitors2024": "Visitors 2024",
+    "visitors2025": "Visitors 2025",
+    "capture2024": "Capture 2024",
+    "capture2025": "Capture 2025"
+  },
+  "time": {
+    "daily": "Daily",
+    "weekly": "Weekly",
+    "monthly": "Monthly",
+    "q1": "Q1",
+    "q2": "Q2",
+    "q3": "Q3",
+    "q4": "Q4",
+    "h1": "H1",
+    "h2": "H2",
+    "fullYear": "Full Year"
+  },
+  "months": {
+    "january": "January",
+    "february": "February",
+    "march": "March",
+    "april": "April",
+    "may": "May",
+    "june": "June",
+    "july": "July",
+    "august": "August",
+    "september": "September",
+    "october": "October",
+    "november": "November",
+    "december": "December"
+  },
+  "comparison": {
+    "title": "Period Comparison",
+    "subtitle": "Select a period and year — automatically compares with the same period in the previous year",
+    "selectPeriod": "Select Period",
+    "period": "Period",
+    "from": "From",
+    "to": "To",
+    "custom": "Custom",
+    "previousPeriod": "Previous Period",
+    "currentPeriod": "Current Period",
+    "vs": "vs",
+    "noData": "No data for this period",
+    "noDataMessage": "No records found for the selected date range and filters.",
+    "trend": "Trend",
+    "byMuseum": "By Museum",
+    "pendingData": "Data not published yet"
+  },
+  "slides": {
+    "title": "Presentation Builder",
+    "subtitle": "Create slides with charts and export as HTML or PDF",
+    "addSlide": "Add Slide",
+    "preview": "Preview",
+    "exportHtml": "Export HTML",
+    "slidesCount": "Slides",
+    "noSlides": "No slides yet",
+    "addFirst": "Add your first slide",
+    "slideTitle": "Slide Title",
+    "chartType": "Chart Type",
+    "metric": "Metric",
+    "startDate": "Start Date",
+    "endDate": "End Date",
+    "showYoY": "Show Year-over-Year Comparison",
+    "exit": "Exit",
+    "revenueTrend": "Revenue Trend",
+    "byMuseum": "By Museum",
+    "kpiSummary": "KPI Summary",
+    "yoyComparison": "YoY Comparison"
+  },
+  "charts": {
+    "revenueTrend": "Revenue Trend",
+    "visitors": "Visitors",
+    "revenue": "Revenue",
+    "quarterly": "Quarterly",
+    "district": "District",
+    "captureRate": "Capture Rate"
+  },
+  "language": {
+    "switch": "عربي"
+  },
+  "export": {
+    "exportAll": "Export All Charts",
+    "exportSlides": "Export for Slides",
+    "exporting": "Exporting..."
+  }
+}