refine: Polish mobile Orders UI based on feedback

Addressed all three feedback points from user testing.

1. OrderCard Layout Improvements
   Problem: Card felt too dense, cramped spacing

   Changes:
   - Increased icon size: 10x10 → 12x12
   - Increased icon padding: w-10 h-10 → w-12 h-12
   - Rounded corners: rounded-lg → rounded-xl
   - Added shadow-sm for depth
   - Increased gap between elements: gap-3 → gap-4
   - Added space-y-2 for vertical rhythm
   - Made order number bolder: font-semibold → font-bold
   - Increased order number size: text-base → text-lg
   - Made customer name font-medium (was muted)
   - Made total amount bolder and colored: font-semibold → font-bold text-primary
   - Increased total size: text-base → text-lg
   - Better status badge: px-2 py-0.5 → px-2.5 py-1, font-medium → font-semibold
   - Larger checkbox: default → w-5 h-5
   - Centered chevron vertically: mt-2 → self-center

   Result: More breathing room, better hierarchy, easier to scan

2. FilterBottomSheet Z-Index & Padding
   Problem: Bottom sheet covered by FAB and bottom nav

   Changes:
   - Increased backdrop z-index: z-40 → z-[60]
   - Increased sheet z-index: z-50 → z-[70] (above FAB z-50)
   - Made sheet flexbox: added flex flex-col
   - Made content scrollable: added flex-1 overflow-y-auto
   - Added bottom padding: pb-24 (space for bottom nav)

   Result: Sheet now covers FAB, content scrolls, bottom nav visible

3. Contextual Headers for Order Pages
   Problem: Order Detail, New, Edit pages are actionable but had no headers

   Solution: Added contextual headers to all three pages

   Order Detail:
   - Header: "Order #337"
   - Actions: [Invoice] [Edit] buttons
   - Shows order number dynamically
   - Hides in print mode

   New Order:
   - Header: "New Order"
   - No actions (form has submit)

   Edit Order:
   - Header: "Edit Order #337"
   - No actions (form has submit)
   - Shows order number dynamically

   Implementation:
   - Import usePageHeader
   - useEffect to set/clear header
   - Order Detail: Custom action buttons
   - New/Edit: Simple title only

Files Modified:
- routes/Orders/components/OrderCard.tsx
- routes/Orders/components/FilterBottomSheet.tsx
- routes/Orders/Detail.tsx
- routes/Orders/New.tsx
- routes/Orders/Edit.tsx

Result:
✅ Cards feel spacious and scannable
✅ Filter sheet properly layered
✅ Order pages have contextual headers
✅ Consistent mobile UX across all order flows
✅ Professional, polished feel! 🎯

admin-spa/src/routes/Orders/Edit.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import OrderForm from '@/routes/Orders/partials/OrderForm';
@@ -8,12 +8,14 @@ import { ErrorCard } from '@/components/ErrorCard';
 import { LoadingState } from '@/components/LoadingState';
 import { ArrowLeft } from 'lucide-react';
 import { __, sprintf } from '@/lib/i18n';
+import { usePageHeader } from '@/contexts/PageHeaderContext';
 
 export default function OrdersEdit() {
   const { id } = useParams();
   const orderId = Number(id);
   const nav = useNavigate();
   const qc = useQueryClient();
+  const { setPageHeader, clearPageHeader } = usePageHeader();
 
   const countriesQ = useQuery({ queryKey: ['countries'], queryFn: OrdersApi.countries });
   const paymentsQ  = useQuery({ queryKey: ['payments'], queryFn: OrdersApi.payments });
@@ -56,6 +58,16 @@ export default function OrdersEdit() {
 
   const order = orderQ.data || {};
 
+  // Set page header
+  useEffect(() => {
+    if (order.number) {
+      setPageHeader(sprintf(__('Edit Order #%s'), order.number));
+    } else {
+      setPageHeader(__('Edit Order'));
+    }
+    return () => clearPageHeader();
+  }, [order.number, setPageHeader, clearPageHeader]);
+
   return (
     <div className="space-y-4">
       <div className="flex flex-wrap items-center gap-2">