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/Detail.tsx

@@ -21,6 +21,7 @@ import { showErrorToast, showSuccessToast, getPageLoadErrorMessage } from '@/lib
 import { ErrorCard } from '@/components/ErrorCard';
 import { InlineLoadingState } from '@/components/LoadingState';
 import { __ } from '@/lib/i18n';
+import { usePageHeader } from '@/contexts/PageHeaderContext';
 
 function Money({ value, currency, symbol }: { value?: number; currency?: string; symbol?: string }) {
   return <>{formatMoney(value, { currency, symbol })}</>;
@@ -44,6 +45,7 @@ export default function OrderShow() {
   const { id } = useParams<{ id: string }>();
   const qc = useQueryClient();
   const siteTitle = (window as any).wnw?.siteTitle || 'WooNooW';
+  const { setPageHeader, clearPageHeader } = usePageHeader();
 
   const [params, setParams] = useSearchParams();
   const mode = params.get('mode'); // undefined | 'label' | 'invoice'
@@ -140,6 +142,36 @@ export default function OrderShow() {
     retryPaymentMutation.mutate();
   }
 
+  // Set page header with actions
+  useEffect(() => {
+    if (!order || isPrintMode) {
+      clearPageHeader();
+      return;
+    }
+
+    const actions = (
+      <div className="flex gap-2">
+        <Button size="sm" variant="outline" onClick={printInvoice}>
+          <FileText className="w-4 h-4 mr-1" />
+          {__('Invoice')}
+        </Button>
+        <Link to={`/orders/${id}/edit`}>
+          <Button size="sm">
+            <Pencil className="w-4 h-4 mr-1" />
+            {__('Edit')}
+          </Button>
+        </Link>
+      </div>
+    );
+
+    setPageHeader(
+      order.number ? `${__('Order')} #${order.number}` : __('Order'),
+      actions
+    );
+
+    return () => clearPageHeader();
+  }, [order, isPrintMode, id, setPageHeader, clearPageHeader]);
+
   useEffect(() => {
     if (!isPrintMode || !qrRef.current || !order) return;
     (async () => {