fix(layout): migrate date pickers to useViewportTier mobile-only

Final Bucket 1 visual-audit follow-up. Audit of all 4 useIsMobile
callers:
- pipeline-chart.tsx + pipeline-funnel-chart.tsx → keep useIsMobile
  (short x-axis stage labels apply on tablet too — bar charts can't
  fit full "Reservation" / "Deposit Paid" text at narrow widths).
- date-picker.tsx + date-time-picker.tsx → migrate to useViewportTier.
  Tablet (768-1023) has plenty of room for the desktop Popover
  Calendar; only the smallest phone widths now fall back to the
  native datepicker input.

1454/1454 vitest, tsc clean.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/ui/date-picker.tsx

@@ -8,7 +8,7 @@ import { Button, type ButtonProps } from '@/components/ui/button';
 import { Calendar } from '@/components/ui/calendar';
 import { Input } from '@/components/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { useIsMobile } from '@/hooks/use-is-mobile';
+import { useViewportTier } from '@/hooks/use-is-mobile';
 import { cn } from '@/lib/utils';
 
 export interface DatePickerProps {
@@ -76,8 +76,11 @@ export function DatePicker({
   name,
   forceVariant,
 }: DatePickerProps) {
-  const isMobile = useIsMobile();
-  const variant = forceVariant ?? (isMobile ? 'mobile' : 'desktop');
+  // Strict mobile only — tablet (768-1023) has room for the desktop
+  // Popover Calendar; only the smallest phone widths fall back to the
+  // native datepicker input.
+  const tier = useViewportTier();
+  const variant = forceVariant ?? (tier === 'mobile' ? 'mobile' : 'desktop');
   const [open, setOpen] = React.useState(false);
   const selected = parseIso(value);
 

src/components/ui/date-time-picker.tsx

@@ -8,7 +8,7 @@ import { Button, type ButtonProps } from '@/components/ui/button';
 import { Calendar } from '@/components/ui/calendar';
 import { Input } from '@/components/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { useIsMobile } from '@/hooks/use-is-mobile';
+import { useViewportTier } from '@/hooks/use-is-mobile';
 import { cn } from '@/lib/utils';
 
 export interface DateTimePickerProps {
@@ -63,8 +63,10 @@ export function DateTimePicker({
   name,
   forceVariant,
 }: DateTimePickerProps) {
-  const isMobile = useIsMobile();
-  const variant = forceVariant ?? (isMobile ? 'mobile' : 'desktop');
+  // Strict mobile only — tablet has room for the desktop Popover; only
+  // the smallest phone widths fall back to the native datetime-local input.
+  const tier = useViewportTier();
+  const variant = forceVariant ?? (tier === 'mobile' ? 'mobile' : 'desktop');
   const [open, setOpen] = React.useState(false);
   const { date, time } = parseDateTime(value);
   const displayTime = time || '09:00';