@ticketboothapp/booking 0.1.11 → 0.1.12

package/src/components/{Calendar.tsx → booking/Calendar.tsx}

@@ -1,19 +1,20 @@
 'use client';
 
 import { useState, useMemo, useRef, useEffect, useCallback, memo } from 'react';
+import { createPortal } from 'react-dom';
 import { startOfWeek, addDays, addWeeks, subWeeks, isSameDay, parseISO, startOfMonth, endOfMonth, eachDayOfInterval, addMonths, subMonths } from 'date-fns';
-import { formatInTimeZone } from 'date-fns-tz';
+import { formatInTimeZone, fromZonedTime } from 'date-fns-tz';
 import { enUS, fr } from 'date-fns/locale';
-import type { Availability } from '@/lib/api';
-import { useTranslations, useLocale } from '@/lib/i18n';
+import type { Availability } from '@/lib/booking-api';
+import { useTranslations, useLocale } from '@/lib/booking/i18n';
 import {
   MINI_CALENDAR_START_MONTH,
   MINI_CALENDAR_END_MONTH,
-  MINI_CALENDAR_START_DATE,
-  MINI_CALENDAR_END_DATE,
   VISIBLE_RANGE_BUFFER_WEEKS,
-} from '@/lib/constants';
-import { cn } from '@/lib/utils';
+} from '@/lib/booking-constants';
+import { getSundayOfWeek } from '@/lib/booking/sunday-week';
+import { cn } from '@/lib/booking/utils';
+import styles from './Calendar.module.css';
 
 // ============ Types ============
 
@@ -28,8 +29,8 @@ export interface DateAvailability {
   startTimes?: string[]; // Array of start times for this date (e.g., ["09:00", "10:00", "14:00"])
   soldOutTimes?: Set<string>; // Set of sold out time strings (e.g., ["09:00", "14:00"])
   totalDiscountPercent?: number; // Total discount percentage from all negative adjustments (deals + dynamic pricing)
-  /** Per-time booked/total capacity (for admin calendar: show "booked/total" on each slot) */
-  timeCapacityMap?: Record<string, { booked: number; total: number }>;
+  /** Per-time capacity (admin): vacancies by default; booked/total only when the slot is sold out */
+  timeCapacityMap?: Record<string, { booked: number; total: number; vacancies: number }>;
 }
 
 interface CalendarProps {
@@ -40,14 +41,29 @@ interface CalendarProps {
   earliestDate: Date | null;
   onVisibleRangeChange?: (startDate: Date, endDate: Date) => void;
   currency: string; // Currency code (e.g., "CAD", "USD") for discount calculations
-  /** When true (admin), show booked/total capacity on each time slot */
+  /** When true (admin), show capacity on each time slot (vacancies unless sold out) */
   showCapacity?: boolean;
+  /** When true, show loading spinner in the date dropdown (e.g. when fetching availability for a new month) */
+  isLoading?: boolean;
+  /** Controls date-cell content style: detailed times vs simple availability status */
+  displayMode?: 'times' | 'status';
+  /** Optional extra discount percent added to the day-level discount badge. */
+  extraDiscountPercent?: number;
+  /** When true, cap day discount badges to the currently selected date's discount percent. */
+  capDiscountToSelectedDate?: boolean;
+  /**
+   * When true (e.g. change-booking flow), scroll the visible grid once to the week containing
+   * `selectedDate` after the parent sets it from the current booking. Otherwise the grid stays
+   * anchored to the earliest available date.
+   */
+  syncVisibleWeekToSelectedDate?: boolean;
 }
 
 // ============ Constants ============
 
 const DAYS_OF_WEEK_KEYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'] as const;
-const WEEKS_TO_SHOW = 2;
+const WEEKS_TO_SHOW_DESKTOP = 2;
+const WEEKS_TO_SHOW_MOBILE = 2;
 
 // Date-fns locale map
 const dateFnsLocales = {
@@ -111,6 +127,20 @@ function calculateTotalDiscountPercent(
   return net > 0 ? Math.round(net) : undefined;
 }
 
+/**
+ * Create a Date representing noon on the given date string in the target timezone.
+ * Using noon avoids day-boundary issues when formatting across timezones.
+ */
+function dateStrToNoonInTz(dateStr: string, timezone: string): Date {
+  return fromZonedTime(parseISO(`${dateStr}T12:00:00`), timezone);
+}
+
+function parseAvailabilityDateTime(value: string): Date {
+  // If API omits timezone offset, treat it as UTC to prevent user-local shifts.
+  const hasExplicitOffset = /(?:Z|[+-]\d{2}:?\d{2})$/i.test(value);
+  return parseISO(hasExplicitOffset ? value : `${value}Z`);
+}
+
 // ============ Date Cell Component ============
 
 interface DateCellProps {
@@ -121,7 +151,9 @@ interface DateCellProps {
   isToday: boolean;
   showCapacity?: boolean;
   timezone: string;
+  displayMode: 'times' | 'status';
   onClick: () => void;
+  isMobile?: boolean;
 }
 
 const DateCell = memo(function DateCell({
@@ -131,7 +163,9 @@ const DateCell = memo(function DateCell({
   isToday,
   showCapacity,
   timezone,
+  displayMode,
   onClick,
+  isMobile = false,
 }: DateCellProps) {
   const { t } = useTranslations();
   const { locale } = useLocale();
@@ -141,40 +175,48 @@ const DateCell = memo(function DateCell({
   const hasAvailability = availability !== null && (!availability.isSoldOut || showCapacity);
   const isDisabled = !hasAvailability;
 
-  // Format time for display (e.g., "09:00" -> "9:00 AM" or "9:00" in 24h format)
-  // Memoized to prevent recreation on every render
+  // Format time for display. timeStr (e.g. "09:00") is already in company timezone (MDT).
+  // Create a Date with those components, interpret as company timezone, then format.
   const formatTime = useCallback((timeStr: string) => {
     try {
       const [hours, minutes] = timeStr.split(':').map(Number);
-      const date = new Date();
-      date.setHours(hours, minutes, 0, 0);
-      // Use 12-hour format for English, 24-hour format for French
-      const format = locale === 'fr' ? 'HH:mm' : 'h:mm a';
-      return formatInTimeZone(date, timezone, format, { locale: dateFnsLocale });
+      const dateWithTime = new Date(2000, 0, 1, hours, minutes, 0);
+      const dateInTz = fromZonedTime(dateWithTime, timezone);
+      if (locale === 'fr') {
+        return formatInTimeZone(dateInTz, timezone, minutes === 0 ? 'HH' : 'HH:mm', { locale: dateFnsLocale });
+      }
+      return formatInTimeZone(dateInTz, timezone, minutes === 0 ? 'ha' : 'h:mma', { locale: dateFnsLocale });
     } catch {
       return timeStr;
     }
   }, [locale, timezone, dateFnsLocale]);
 
-  // Two heights: tall when >2 time slots (discount + times); otherwise short. No aspect on outer so cell can stretch to row.
-  const needsTallerCell = (availability?.startTimes?.length ?? 0) > 2;
+  // Two heights: tall when >2 time slots (discount + times); otherwise short. Mobile uses compact dot+time cells.
+  // Admin capacity line under each time pill needs extra vertical room (provider dashboard only).
+  const slotCount = availability?.startTimes?.length ?? 0;
+  const needsTallerCell = !isMobile && slotCount > 2;
+  const mobileNeedsTaller = isMobile && slotCount > 2;
+  const adminCapacityTallCells =
+    Boolean(showCapacity) && !isMobile && slotCount > 0 && displayMode === 'times';
   const buttonClassName = useMemo(() => cn(
-    'h-full w-full min-h-0',
-    needsTallerCell ? 'min-w-0 min-h-[7.75rem]' : 'min-h-[6.25rem]',
-    'px-2 py-0 border-r border-b border-stone-200 last:border-r-0',
-    'transition-all text-left relative',
+    styles.calendarDayCell,
+    isMobile && (mobileNeedsTaller ? styles.calendarDayCellMobileTall : styles.calendarDayCellMobile),
+    !isMobile && (
+      adminCapacityTallCells
+        ? needsTallerCell
+          ? cn('min-w-0', styles.calendarDayCellWithAdminCapacity, styles.calendarDayCellWithAdminCapacityTall)
+          : styles.calendarDayCellWithAdminCapacity
+        : needsTallerCell
+          ? 'min-w-0 min-h-[7rem]'
+          : 'min-h-[6rem]'
+    ),
     isDisabled
-      ? 'bg-stone-50 text-stone-300 cursor-not-allowed'
+      ? styles.calendarDayCellDisabled
       : isSelected
-      ? 'bg-emerald-600 text-white hover:bg-emerald-700 cursor-pointer'
-      : 'bg-white text-stone-900 hover:bg-stone-50 cursor-pointer',
-    isToday && hasAvailability && !isSelected && 'ring-1 ring-emerald-500 ring-inset'
-  ), [isDisabled, isSelected, isToday, hasAvailability, needsTallerCell]);
-
-  const dayNumberClassName = useMemo(() => cn(
-    'text-[10px] font-medium absolute top-1 left-1',
-    isSelected && hasAvailability ? 'text-white' : 'text-stone-900'
-  ), [isSelected, hasAvailability]);
+      ? styles.calendarDayCellSelected
+      : styles.calendarDayCellAvailable,
+    isToday && hasAvailability && !isSelected && styles.calendarDayCellToday
+  ), [isDisabled, isSelected, isToday, hasAvailability, needsTallerCell, isMobile, mobileNeedsTaller, adminCapacityTallCells]);
 
   const ariaLabel = useMemo(() => {
     const parts = [dayNumber];
@@ -190,15 +232,15 @@ const DateCell = memo(function DateCell({
       className={buttonClassName}
       aria-label={ariaLabel}
     >
-      <div className="flex flex-col h-full items-center justify-center">
-        {/* Day Number */}
-        <div className={dayNumberClassName}>
+      <div className={cn(styles.calendarDayCellInner, isMobile && styles.calendarDayCellInnerMobile)}>
+        {/* Day Number - on mobile, in a top row with discount below to avoid overlap */}
+        <div className={styles.calendarDayNumber}>
           {dayNumber}
         </div>
 
-        {/* Discount Tag Icon - Top Right Corner */}
+        {/* Discount Tag - top-right on desktop; below day number on mobile to avoid overlap */}
         {availability?.totalDiscountPercent && availability.totalDiscountPercent > 0 && (
-          <div className="absolute top-1 right-1 flex items-center gap-0.5 bg-red-500/90 text-white text-[9px] font-bold px-1 py-0.5 rounded">
+          <div className={cn(styles.calendarDiscountTag, isMobile && styles.calendarDiscountTagMobile)}>
             <svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 20 20">
               <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
             </svg>
@@ -211,83 +253,100 @@ const DateCell = memo(function DateCell({
           <div className="flex flex-col items-center justify-center space-y-0 w-full px-0.5">
             {/* Sold Out Badge - Centered */}
             {availability.isSoldOut ? (
-              <div className={cn(
-                'text-[10px] font-semibold px-2 py-1 rounded flex items-center justify-center',
-                isSelected 
-                  ? 'bg-red-500/30 text-white border border-red-400/50' 
-                  : 'bg-red-100 text-red-700 border border-red-300'
-              )}>
+              <div className={styles.calendarSoldOutBadge}>
                 {t('calendar.soldOut')}
               </div>
             ) : hasAvailability ? (
               <>
-                {/* Start Times as Pills - Yellow/Orange if < 5 spots, Red if sold out, Green otherwise */}
-                {availability.startTimes && availability.startTimes.length > 0 ? (
-                  <div className="flex flex-wrap gap-0.5 justify-center">
-                    {availability.startTimes.slice(0, 3).map((time) => {
-                      const isTimeSoldOut = availability.soldOutTimes?.has(time) || false;
-                      const isLowAvailability = !isTimeSoldOut && availability.totalVacancies !== undefined && availability.totalVacancies < 5;
-                      // Check if this is daily availability (midnight/00:00 time)
-                      const isDailyAvailability = time === '00:00';
-                      return (
-                        <div
-                          key={time}
-                          className={cn(
-                            'text-[10px] px-1.5 py-1 rounded font-medium flex flex-col items-center gap-0',
-                            isTimeSoldOut
-                              ? isSelected
-                                ? 'bg-red-500/30 text-white opacity-60'
-                                : 'bg-red-400 text-white opacity-60'
-                              : isLowAvailability
-                              ? isSelected 
-                                ? 'bg-amber-600 text-white' 
-                                : 'bg-amber-500 text-white'
-                              : isSelected
-                              ? 'bg-white/30 text-white' 
-                              : 'bg-emerald-500 text-white'
-                          )}
-                        >
-                          <div>{isDailyAvailability ? 'Available' : formatTime(time)}</div>
-                          {showCapacity && availability.timeCapacityMap?.[time] && (
-                            <div className="text-[9px] -mt-0.5 tabular-nums opacity-90">
-                              {availability.timeCapacityMap[time].booked}/{availability.timeCapacityMap[time].total}
-                            </div>
-                          )}
-                          {isTimeSoldOut ? (
-                            <div className="text-[9px] -mt-0.5">
-                              {t('calendar.soldOut')}
-                            </div>
-                          ) : isLowAvailability && !showCapacity && (
-                            <div className="flex items-center gap-0.5 text-[9px] -mt-0.5">
-                              <svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 20 20">
-                                <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-                              </svg>
-                              <span>{t('calendar.left', { count: availability.totalVacancies ?? 0 })}</span>
-                            </div>
-                          )}
-                        </div>
-                      );
-                    })}
-                    {availability.startTimes.length > 3 && (
-                      <div className={cn(
-                        'text-[10px] px-1.5 py-1 rounded font-medium',
-                        isSelected 
-                          ? 'bg-white/30 text-white' 
-                          : 'bg-emerald-500 text-white'
-                      )}>
-                        +{availability.startTimes.length - 3}
-                      </div>
-                    )}
+                {/* Mobile: green dot + time (compact). Desktop: full time pills */}
+                {displayMode === 'status' ? (
+                  <div className={styles.calendarTimePill}>
+                    {t('calendar.available')}
                   </div>
+                ) : availability.startTimes && availability.startTimes.length > 0 ? (
+                  isMobile ? (
+                    <div className={cn(
+                      styles.calendarMobileTimeList,
+                      availability.totalDiscountPercent && availability.totalDiscountPercent > 0 && styles.calendarMobileTimeListWithDiscount
+                    )}>
+                      {availability.startTimes.slice(0, 3).map((time) => {
+                        const isTimeSoldOut = availability.soldOutTimes?.has(time) || false;
+                        const isLowAvailability = !isTimeSoldOut && availability.totalVacancies !== undefined && availability.totalVacancies < 5;
+                        const isDailyAvailability = time === '00:00';
+                        return (
+                          <div
+                            key={time}
+                            className={cn(
+                              styles.calendarMobileTimeDot,
+                              isTimeSoldOut && styles.calendarMobileTimeDotSoldOut,
+                              isLowAvailability && !isTimeSoldOut && styles.calendarMobileTimeDotLow
+                            )}
+                          >
+                            <span className={styles.calendarMobileTimeDotBullet} aria-hidden />
+                            <span>{isDailyAvailability ? t('calendar.available') : formatTime(time)}</span>
+                          </div>
+                        );
+                      })}
+                      {availability.startTimes.length > 3 && (
+                        <div className={styles.calendarMobileTimeDot}>
+                          <span className={styles.calendarMobileTimeDotBullet} aria-hidden />
+                          <span>+{availability.startTimes.length - 3}</span>
+                        </div>
+                      )}
+                    </div>
+                  ) : (
+                    <div className="flex flex-wrap gap-0.5 justify-center">
+                      {availability.startTimes.slice(0, 3).map((time) => {
+                        const isTimeSoldOut = availability.soldOutTimes?.has(time) || false;
+                        const isLowAvailability = !isTimeSoldOut && availability.totalVacancies !== undefined && availability.totalVacancies < 5;
+                        const isDailyAvailability = time === '00:00';
+                        return (
+                          <div
+                            key={time}
+                            className={cn(
+                              styles.calendarTimePill,
+                              isTimeSoldOut && styles.calendarTimePillSoldOut,
+                              isLowAvailability && !isTimeSoldOut && styles.calendarTimePillLow
+                            )}
+                          >
+                            <div>{isDailyAvailability ? t('calendar.available') : formatTime(time)}</div>
+                            {showCapacity && availability.timeCapacityMap?.[time] && (() => {
+                              const cap = availability.timeCapacityMap[time];
+                              const vac = cap.vacancies;
+                              return (
+                                <div className="text-[9px] -mt-0.5 tabular-nums opacity-90">
+                                  {isTimeSoldOut
+                                    ? `${cap.booked}/${cap.total}`
+                                    : t('calendar.spotsAvailable', { count: vac })}
+                                </div>
+                              );
+                            })()}
+                            {isTimeSoldOut ? (
+                              <div className="text-[9px] -mt-0.5">
+                                {t('calendar.soldOut')}
+                              </div>
+                            ) : isLowAvailability && !showCapacity && (
+                              <div className="flex items-center gap-0.5 text-[9px] -mt-0.5">
+                                <svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 20 20">
+                                  <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                                </svg>
+                                <span>{t('calendar.left', { count: availability.totalVacancies ?? 0 })}</span>
+                              </div>
+                            )}
+                          </div>
+                        );
+                      })}
+                      {availability.startTimes.length > 3 && (
+                        <div className={styles.calendarTimePill}>
+                          +{availability.startTimes.length - 3}
+                        </div>
+                      )}
+                    </div>
+                  )
                 ) : (
                   /* Fallback: Low Availability Badge (when no start times) */
                   availability.totalVacancies !== undefined && availability.totalVacancies < 5 && (
-                    <div className={cn(
-                      'text-[10px] font-semibold px-2 py-1 rounded flex items-center gap-0.5 justify-center',
-                      isSelected 
-                        ? 'bg-red-500/30 text-white border border-red-400/50' 
-                        : 'bg-red-100 text-red-700 border border-red-300'
-                    )}>
+                    <div className={styles.calendarLowAvailabilityBadge}>
                       <svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 20 20">
                         <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                       </svg>
@@ -296,14 +355,9 @@ const DateCell = memo(function DateCell({
                   )
                 )}
 
-                {/* Discount Badge */}
-                {availability.hasDiscount && availability.discountPercent && (availability.totalVacancies === undefined || availability.totalVacancies >= 5) && (
-                  <div className={cn(
-                    'text-[9px] font-semibold px-1 py-0.5 rounded text-center',
-                    isSelected 
-                      ? 'bg-white/20 text-white' 
-                      : 'bg-red-100 text-red-700'
-                  )}>
+                {/* Discount Badge - desktop only (mobile uses corner tag) */}
+                {!isMobile && availability.hasDiscount && availability.discountPercent && (availability.totalVacancies === undefined || availability.totalVacancies >= 5) && (
+                  <div className={styles.calendarDiscountBadge}>
                     -{availability.discountPercent}%
                   </div>
                 )}
@@ -327,48 +381,64 @@ export function Calendar({
   onVisibleRangeChange,
   currency,
   showCapacity = false,
+  isLoading = false,
+  displayMode = 'times',
+  extraDiscountPercent = 0,
+  capDiscountToSelectedDate = false,
+  syncVisibleWeekToSelectedDate = false,
 }: CalendarProps) {
   const { t } = useTranslations();
   const { locale } = useLocale();
   const dateFnsLocale = dateFnsLocales[locale] || enUS;
   
-  // Initialize currentStartDate only once on mount, don't reset when earliestDate changes
-  // Use a ref to track if we've initialized to prevent reset on prop changes
+  // Store the Sunday (week start) as a date string in company timezone.
+  // This ensures the calendar grid is always correct regardless of user's timezone.
   const hasInitializedRef = useRef(false);
-  const [currentStartDate, setCurrentStartDate] = useState(() => {
+  const [currentStartDateStr, setCurrentStartDateStr] = useState(() => {
     hasInitializedRef.current = true;
     if (earliestDate) {
-      return startOfWeek(earliestDate, { weekStartsOn: 0 });
+      const dateStr = formatInTimeZone(earliestDate, timezone, 'yyyy-MM-dd');
+      return getSundayOfWeek(dateStr, timezone);
     }
-    return startOfWeek(new Date(), { weekStartsOn: 0 });
+    const nowStr = formatInTimeZone(new Date(), timezone, 'yyyy-MM-dd');
+    return getSundayOfWeek(nowStr, timezone);
   });
-  
-  // Only update currentStartDate if earliestDate changes AND we haven't initialized yet
-  // This prevents resetting the calendar position when new availabilities are fetched
+
+  // Only update if earliestDate changes AND we haven't initialized yet
   useEffect(() => {
     if (!hasInitializedRef.current && earliestDate) {
-      const weekStart = startOfWeek(earliestDate, { weekStartsOn: 0 });
-      setCurrentStartDate(weekStart);
+      const dateStr = formatInTimeZone(earliestDate, timezone, 'yyyy-MM-dd');
+      setCurrentStartDateStr(getSundayOfWeek(dateStr, timezone));
       hasInitializedRef.current = true;
     }
-  }, [earliestDate]);
+  }, [earliestDate, timezone]);
   const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 640);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+  
+  const WEEKS_TO_SHOW = isMobile ? WEEKS_TO_SHOW_MOBILE : WEEKS_TO_SHOW_DESKTOP;
   
-  // Initialize picker month to match the currently visible month in the main calendar
+  // Initialize picker month to match the currently visible month in the main calendar (in company timezone)
   const [pickerMonth, setPickerMonth] = useState(() => {
-    // Start with the month that contains the current start date
-    return startOfMonth(currentStartDate);
+    const [y, m] = currentStartDateStr.split('-').map(Number);
+    return dateStrToNoonInTz(`${y}-${String(m).padStart(2, '0')}-01`, timezone);
   });
-  
+
   // Update picker month when main calendar navigates to keep them in sync
   useEffect(() => {
-    const currentMonth = startOfMonth(currentStartDate);
-    // Only update if the month actually changed and it's within the allowed range
-    if (currentMonth.getTime() >= MINI_CALENDAR_START_MONTH.getTime() && 
+    const [y, m] = currentStartDateStr.split('-').map(Number);
+    const currentMonth = dateStrToNoonInTz(`${y}-${String(m).padStart(2, '0')}-01`, timezone);
+    if (currentMonth.getTime() >= MINI_CALENDAR_START_MONTH.getTime() &&
         currentMonth.getTime() <= MINI_CALENDAR_END_MONTH.getTime()) {
       setPickerMonth(currentMonth);
     }
-  }, [currentStartDate]);
+  }, [currentStartDateStr, timezone]);
   
   // Ensure pickerMonth stays within bounds
   useEffect(() => {
@@ -383,7 +453,29 @@ export function Calendar({
   const datePickerTriggerRef = useRef<HTMLButtonElement>(null); // Ref for the trigger button
   const [pickerPosition, setPickerPosition] = useState<{ top: number; left: number } | null>(null);
   
-  // Get all available dates for dropdown (must be defined before useMemo hooks that use it)
+  // Capture the month when dropdown opens (already fetched from main calendar - don't show spinner for it)
+  const [initialMonthOnOpen, setInitialMonthOnOpen] = useState<Date | null>(null);
+  useEffect(() => {
+    if (isDatePickerOpen) {
+      setInitialMonthOnOpen((prev) => (prev === null ? pickerMonth : prev));
+    } else {
+      setInitialMonthOnOpen(null);
+    }
+  }, [isDatePickerOpen, pickerMonth]);
+  
+  // Only show spinner when loading a month they navigated to (not the initial month which is already fetched)
+  const [showSpinnerInDropdown, setShowSpinnerInDropdown] = useState(false);
+  const isInitialMonth = initialMonthOnOpen === null || startOfMonth(pickerMonth).getTime() === startOfMonth(initialMonthOnOpen).getTime();
+  useEffect(() => {
+    if (!isLoading || !isDatePickerOpen || isInitialMonth) {
+      setShowSpinnerInDropdown(false);
+      return;
+    }
+    const timer = setTimeout(() => setShowSpinnerInDropdown(true), 400);
+    return () => clearTimeout(timer);
+  }, [isLoading, isDatePickerOpen, pickerMonth, isInitialMonth]);
+  
+  // Get all available dates for dropdown - use company timezone for consistent navigation worldwide
   const availableDates = useMemo(() => {
     return Object.keys(availabilitiesByDate)
       .filter(dateStr => {
@@ -391,16 +483,8 @@ export function Calendar({
         return availabilities && availabilities.length > 0 && !availabilities.every(avail => avail.vacancies === 0);
       })
       .sort()
-      .map(dateStr => {
-        try {
-          const [year, month, day] = dateStr.split('-').map(Number);
-          return new Date(year, month - 1, day);
-        } catch {
-          return null;
-        }
-      })
-      .filter((date): date is Date => date !== null);
-  }, [availabilitiesByDate]);
+      .map(dateStr => dateStrToNoonInTz(dateStr, timezone));
+  }, [availabilitiesByDate, timezone]);
   
   // Check if we can navigate months in mini calendar (hardcoded to June-October 2026)
   const canNavigatePickerMonthBack = useMemo(() => {
@@ -415,31 +499,74 @@ export function Calendar({
     return currentMonthTime < endMonthTime;
   }, [pickerMonth]);
 
-  // Generate mini calendar days - memoized to avoid recalculation
+  // Mini calendar allowed range in company timezone (June 1 - Oct 12 inclusive)
+  // Must use company TZ - constants use local TZ which breaks for users in other timezones
+  const miniCalendarBoundsInTz = useMemo(() => ({
+    start: fromZonedTime(new Date(2026, 5, 1, 0, 0, 0, 0), timezone),
+    end: fromZonedTime(new Date(2026, 9, 12, 23, 59, 59, 999), timezone),
+  }), [timezone]);
+
+  // Generate mini calendar days in company timezone (same fix as main grid - avoids wrong day-of-week for users in other TZs)
   const miniCalendarData = useMemo(() => {
-    const monthStart = startOfMonth(pickerMonth);
-    const monthEnd = endOfMonth(pickerMonth);
-    const calendarStart = startOfWeek(monthStart, { weekStartsOn: 0 });
-    const calendarEnd = startOfWeek(monthEnd, { weekStartsOn: 0 });
-    // Show 6 weeks (42 days) to ensure full calendar grid
-    const days = eachDayOfInterval({ start: calendarStart, end: addDays(calendarEnd, 6) });
+    const yearMonth = formatInTimeZone(pickerMonth, timezone, 'yyyy-MM');
+    const [y, m] = yearMonth.split('-').map(Number);
+    const firstOfMonthStr = `${y}-${String(m).padStart(2, '0')}-01`;
+    const sundayStr = getSundayOfWeek(firstOfMonthStr, timezone);
+    const sundayDate = dateStrToNoonInTz(sundayStr, timezone);
+    const days: Date[] = [];
+    for (let i = 0; i < 42; i++) {
+      days.push(addDays(sundayDate, i));
+    }
+    const monthStart = dateStrToNoonInTz(firstOfMonthStr, timezone);
+    const lastDay = new Date(y, m, 0).getDate();
+    const monthEnd = dateStrToNoonInTz(`${y}-${String(m).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`, timezone);
     return { days, monthStart, monthEnd };
-  }, [pickerMonth]);
+  }, [pickerMonth, timezone]);
   
   // Calculate position for date picker and close when clicking outside
+  const PICKER_MIN_WIDTH = 280;
+  const PICKER_MAX_HEIGHT = 400;
+  const MOBILE_BREAKPOINT = 640;
+  const VIEWPORT_PADDING = 16;
+  const VIEWPORT_PADDING_MOBILE = 24;
+
   useEffect(() => {
     if (!isDatePickerOpen) {
       setPickerPosition(null);
       return;
     }
     
-    // Calculate position from trigger button
+    // Calculate position from trigger button (fixed = viewport coords, no scroll offset)
     if (datePickerTriggerRef.current) {
       const rect = datePickerTriggerRef.current.getBoundingClientRect();
-      setPickerPosition({
-        top: rect.bottom + window.scrollY + 4,
-        left: rect.left + window.scrollX,
-      });
+      const padding = window.innerWidth < MOBILE_BREAKPOINT ? VIEWPORT_PADDING_MOBILE : VIEWPORT_PADDING;
+      let left: number;
+      let top = rect.bottom + 4;
+
+      // On mobile, center the dropdown for better visibility and to avoid going off-screen
+      if (window.innerWidth < MOBILE_BREAKPOINT) {
+        left = (window.innerWidth - PICKER_MIN_WIDTH) / 2;
+        left = Math.max(padding, Math.min(left, window.innerWidth - PICKER_MIN_WIDTH - padding));
+      } else {
+        left = rect.left;
+        // Keep dropdown within viewport horizontally on desktop
+        if (left + PICKER_MIN_WIDTH > window.innerWidth - padding) {
+          left = window.innerWidth - PICKER_MIN_WIDTH - padding;
+        }
+        if (left < padding) {
+          left = padding;
+        }
+      }
+
+      // Keep dropdown within viewport vertically
+      if (top + PICKER_MAX_HEIGHT > window.innerHeight - padding) {
+        top = Math.max(padding, window.innerHeight - PICKER_MAX_HEIGHT - padding);
+      }
+      if (top < padding) {
+        top = padding;
+      }
+
+      setPickerPosition({ top, left });
     }
     
     const handleClickOutside = (event: MouseEvent) => {
@@ -464,6 +591,12 @@ export function Calendar({
       document.removeEventListener('click', handleClickOutside, true);
     };
   }, [isDatePickerOpen]);
+
+  // Derive Date from stored string (for comparisons and addDays) - uses company timezone
+  const currentStartDate = useMemo(
+    () => dateStrToNoonInTz(currentStartDateStr, timezone),
+    [currentStartDateStr, timezone]
+  );
   
   // Check if we can navigate backwards/forwards
   const canNavigateBack = useMemo(() => {
@@ -478,34 +611,59 @@ export function Calendar({
     const currentEndDate = addDays(currentStartDate, WEEKS_TO_SHOW * 7 - 1);
     return lastAvailableDate > currentEndDate;
   }, [availableDates, currentStartDate]);
-  
+
+  const lastReportedRangeRef = useRef<{ start: Date; end: Date } | null>(null);
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const hasSyncedChangeFlowWeekRef = useRef(false);
+
   const handleDateJump = useCallback((date: Date) => {
-    const weekStart = startOfWeek(date, { weekStartsOn: 0 });
     const dateStr = formatInTimeZone(date, timezone, 'yyyy-MM-dd');
-    
-    // Calculate the visible range directly without creating unnecessary array
-    const visibleStart = weekStart;
-    const visibleEnd = addDays(weekStart, WEEKS_TO_SHOW * 7 - 1);
+    const weekStartStr = getSundayOfWeek(dateStr, timezone);
+    const visibleStart = dateStrToNoonInTz(weekStartStr, timezone);
+    const visibleEnd = addDays(visibleStart, WEEKS_TO_SHOW * 7 - 1);
     const bufferStart = subWeeks(visibleStart, VISIBLE_RANGE_BUFFER_WEEKS);
     const bufferEnd = addWeeks(visibleEnd, VISIBLE_RANGE_BUFFER_WEEKS);
     
-    // Clear any pending debounced callbacks
     if (debounceTimeoutRef.current) {
       clearTimeout(debounceTimeoutRef.current);
       debounceTimeoutRef.current = null;
     }
     
-    // Update the ref BEFORE calling the callback to prevent the useEffect from calling it again
     lastReportedRangeRef.current = { start: bufferStart, end: bufferEnd };
-    
-    // Update state and immediately notify parent (bypass debounce for date jumps)
-    setCurrentStartDate(weekStart);
+    setCurrentStartDateStr(weekStartStr);
     if (onVisibleRangeChange) {
       onVisibleRangeChange(bufferStart, bufferEnd);
     }
     
     onDateSelect(dateStr);
-  }, [timezone, onVisibleRangeChange, onDateSelect]);
+  }, [timezone, onVisibleRangeChange, onDateSelect, WEEKS_TO_SHOW]);
+
+  useEffect(() => {
+    if (!syncVisibleWeekToSelectedDate || !selectedDate || hasSyncedChangeFlowWeekRef.current) {
+      return;
+    }
+    hasSyncedChangeFlowWeekRef.current = true;
+    const weekStartStr = getSundayOfWeek(selectedDate, timezone);
+    const visibleStart = dateStrToNoonInTz(weekStartStr, timezone);
+    const visibleEnd = addDays(visibleStart, WEEKS_TO_SHOW * 7 - 1);
+    const bufferStart = subWeeks(visibleStart, VISIBLE_RANGE_BUFFER_WEEKS);
+    const bufferEnd = addWeeks(visibleEnd, VISIBLE_RANGE_BUFFER_WEEKS);
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+      debounceTimeoutRef.current = null;
+    }
+    lastReportedRangeRef.current = { start: bufferStart, end: bufferEnd };
+    setCurrentStartDateStr(weekStartStr);
+    if (onVisibleRangeChange) {
+      onVisibleRangeChange(bufferStart, bufferEnd);
+    }
+  }, [
+    syncVisibleWeekToSelectedDate,
+    selectedDate,
+    timezone,
+    WEEKS_TO_SHOW,
+    onVisibleRangeChange,
+  ]);
 
   // Generate calendar days (2 weeks = 14 days)
   const calendarDays = useMemo(() => {
@@ -517,35 +675,49 @@ export function Calendar({
   }, [currentStartDate]);
 
   // Notify parent of visible date range changes (with buffer weeks before/after)
-  // Debounce to avoid excessive API calls during rapid navigation
-  const lastReportedRangeRef = useRef<{ start: Date; end: Date } | null>(null);
-  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  
+  // When dropdown is open, expand range to include the visible month so we fetch availability for it
   useEffect(() => {
     if (!onVisibleRangeChange || calendarDays.length === 0) return;
     
     const visibleStart = calendarDays[0];
     const visibleEnd = calendarDays[calendarDays.length - 1];
     // Add buffer weeks before and after
-    const bufferStart = subWeeks(visibleStart, VISIBLE_RANGE_BUFFER_WEEKS);
-    const bufferEnd = addWeeks(visibleEnd, VISIBLE_RANGE_BUFFER_WEEKS);
+    let reportStart = subWeeks(visibleStart, VISIBLE_RANGE_BUFFER_WEEKS);
+    let reportEnd = addWeeks(visibleEnd, VISIBLE_RANGE_BUFFER_WEEKS);
+    
+    // When dropdown is open, expand range to include the picker month so we fetch availability for future months
+    if (isDatePickerOpen) {
+      const pickerMonthStart = startOfMonth(pickerMonth);
+      const pickerMonthEnd = endOfMonth(pickerMonth);
+      reportStart = reportStart < pickerMonthStart ? reportStart : pickerMonthStart;
+      reportEnd = reportEnd > pickerMonthEnd ? reportEnd : pickerMonthEnd;
+    }
     
     // Only report if range actually changed (more than a day difference)
     const currentReported = lastReportedRangeRef.current;
-    if (!currentReported || 
-        Math.abs(bufferStart.getTime() - currentReported.start.getTime()) > 24 * 60 * 60 * 1000 ||
-        Math.abs(bufferEnd.getTime() - currentReported.end.getTime()) > 24 * 60 * 60 * 1000) {
-      
-      // Clear existing timeout
-      if (debounceTimeoutRef.current) {
-        clearTimeout(debounceTimeoutRef.current);
+    const rangeChanged = !currentReported || 
+        Math.abs(reportStart.getTime() - currentReported.start.getTime()) > 24 * 60 * 60 * 1000 ||
+        Math.abs(reportEnd.getTime() - currentReported.end.getTime()) > 24 * 60 * 60 * 1000;
+    
+    if (rangeChanged) {
+      if (isDatePickerOpen) {
+        // Report immediately when dropdown is open - user may close before debounce fires
+        if (debounceTimeoutRef.current) {
+          clearTimeout(debounceTimeoutRef.current);
+          debounceTimeoutRef.current = null;
+        }
+        lastReportedRangeRef.current = { start: reportStart, end: reportEnd };
+        onVisibleRangeChange(reportStart, reportEnd);
+      } else {
+        // Debounce when main calendar navigates
+        if (debounceTimeoutRef.current) {
+          clearTimeout(debounceTimeoutRef.current);
+        }
+        debounceTimeoutRef.current = setTimeout(() => {
+          lastReportedRangeRef.current = { start: reportStart, end: reportEnd };
+          onVisibleRangeChange(reportStart, reportEnd);
+        }, 300);
       }
-      
-      // Debounce the callback
-      debounceTimeoutRef.current = setTimeout(() => {
-        lastReportedRangeRef.current = { start: bufferStart, end: bufferEnd };
-        onVisibleRangeChange(bufferStart, bufferEnd);
-      }, 300); // 300ms debounce
     }
     
     return () => {
@@ -553,7 +725,7 @@ export function Calendar({
         clearTimeout(debounceTimeoutRef.current);
       }
     };
-  }, [calendarDays, onVisibleRangeChange]);
+  }, [calendarDays, onVisibleRangeChange, isDatePickerOpen, pickerMonth]);
 
   // Calculate date availability info
   // Use plain object instead of Map so React can detect changes properly
@@ -596,7 +768,7 @@ export function Calendar({
           let timeStr: string | null = null;
           try {
             // Parse ISO datetime and extract time portion
-            const dateTime = parseISO(avail.dateTime);
+            const dateTime = parseAvailabilityDateTime(avail.dateTime);
             timeStr = formatInTimeZone(dateTime, timezone, 'HH:mm');
           } catch {
             const timeMatch = avail.dateTime.match(/T(\d{2}:\d{2})/);
@@ -623,6 +795,16 @@ export function Calendar({
             }
           }
         });
+
+        const timeCapacityMapWithVacancies: Record<string, { booked: number; total: number; vacancies: number }> = {};
+        for (const [ts, cap] of Object.entries(timeCapacityMap)) {
+          const agg = timeAvailabilityMap.get(ts);
+          timeCapacityMapWithVacancies[ts] = {
+            booked: cap.booked,
+            total: cap.total,
+            vacancies: agg?.vacancies ?? Math.max(0, cap.total - cap.booked),
+          };
+        }
         
         const startTimes = Array.from(timeAvailabilityMap.keys()).sort();
         const soldOutTimes = new Set(
@@ -632,7 +814,9 @@ export function Calendar({
         );
         
         // Calculate total discount percentage from all negative adjustments
-        const totalDiscountPercent = calculateTotalDiscountPercent(availabilities, currency);
+        const dynamicDiscountPercent = calculateTotalDiscountPercent(availabilities, currency) ?? 0;
+        const totalDiscountPercent =
+          dynamicDiscountPercent + Math.max(0, extraDiscountPercent);
         
         map[dateStr] = {
           date: dateStr,
@@ -642,14 +826,31 @@ export function Calendar({
           totalVacancies,
           startTimes: startTimes.length > 0 ? startTimes : undefined,
           soldOutTimes: soldOutTimes.size > 0 ? soldOutTimes : undefined,
-          totalDiscountPercent,
-          timeCapacityMap: Object.keys(timeCapacityMap).length > 0 ? timeCapacityMap : undefined,
+          totalDiscountPercent: totalDiscountPercent > 0 ? totalDiscountPercent : undefined,
+          timeCapacityMap:
+            Object.keys(timeCapacityMapWithVacancies).length > 0 ? timeCapacityMapWithVacancies : undefined,
         };
       }
     });
     
+    if (capDiscountToSelectedDate && selectedDate) {
+      const selectedDiscount = map[selectedDate]?.totalDiscountPercent;
+      if (selectedDiscount != null && selectedDiscount > 0) {
+        const capped: Record<string, DateAvailability> = {};
+        for (const [dateStr, availability] of Object.entries(map)) {
+          const raw = availability.totalDiscountPercent;
+          const adjusted = raw != null ? Math.min(raw, selectedDiscount) : undefined;
+          capped[dateStr] = {
+            ...availability,
+            totalDiscountPercent: adjusted,
+          };
+        }
+        return capped;
+      }
+    }
+
     return map;
-  }, [availabilitiesByDate, timezone, currency]);
+  }, [availabilitiesByDate, timezone, currency, extraDiscountPercent, capDiscountToSelectedDate, selectedDate]);
 
   // Get display range for header
   const displayRange = useMemo(() => {
@@ -661,13 +862,15 @@ export function Calendar({
     };
   }, [calendarDays, timezone, dateFnsLocale]);
 
-  // Navigation handlers
+  // Navigation handlers - add/subtract weeks in company timezone
   const handlePrevious = () => {
-    setCurrentStartDate(subWeeks(currentStartDate, WEEKS_TO_SHOW));
+    const prevSunday = addDays(currentStartDate, -WEEKS_TO_SHOW * 7);
+    setCurrentStartDateStr(formatInTimeZone(prevSunday, timezone, 'yyyy-MM-dd'));
   };
 
   const handleNext = () => {
-    setCurrentStartDate(addWeeks(currentStartDate, WEEKS_TO_SHOW));
+    const nextSunday = addDays(currentStartDate, WEEKS_TO_SHOW * 7);
+    setCurrentStartDateStr(formatInTimeZone(nextSunday, timezone, 'yyyy-MM-dd'));
   };
 
   const handleDateClick = (date: Date) => {
@@ -681,17 +884,17 @@ export function Calendar({
   };
 
   return (
-    <div className="w-full max-w-2xl mx-auto relative">
+    <div className={styles.calendar}>
       {/* Calendar Header with Navigation */}
-      <div className="flex items-center justify-between mb-1.5">
+      <div className={styles.calendarHeader}>
         <button
           onClick={handlePrevious}
           disabled={!canNavigateBack}
-          className="p-1.5 rounded-lg hover:bg-stone-100 transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent"
+          className={styles.calendarNav}
           aria-label={t('calendar.previousWeeks')}
         >
           <svg
-            className="w-4 h-4 text-stone-600"
+            className={styles.calendarNavIcon}
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -707,12 +910,16 @@ export function Calendar({
         <div className="relative">
           <button
             ref={datePickerTriggerRef}
-            onClick={() => setIsDatePickerOpen(!isDatePickerOpen)}
-            className="text-xs font-medium text-stone-700 hover:text-stone-900 px-2 py-1 rounded hover:bg-stone-100 transition-colors cursor-pointer flex items-center gap-1"
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsDatePickerOpen((prev) => !prev);
+            }}
+            className={styles.calendarRangeTrigger}
           >
             <span>{displayRange.start} - {displayRange.end}</span>
             <svg 
-              className={`w-3 h-3 text-stone-600 transition-transform ${isDatePickerOpen ? 'rotate-180' : ''}`}
+              className={cn('w-3 h-3 transition-transform', isDatePickerOpen && 'rotate-180')}
               fill="none" 
               stroke="currentColor" 
               viewBox="0 0 24 24"
@@ -720,18 +927,18 @@ export function Calendar({
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
             </svg>
           </button>
-          {isDatePickerOpen && pickerPosition && (
+          {isDatePickerOpen && pickerPosition && typeof document !== 'undefined' && createPortal(
             <div 
               ref={datePickerRef}
-              className="fixed bg-white border border-stone-300 rounded-lg shadow-lg z-50 p-3 min-w-[280px] max-h-[400px] overflow-y-auto"
+              className={styles.calendarDropdown}
               style={{ 
                 top: `${pickerPosition.top}px`,
                 left: `${pickerPosition.left}px`,
               }}
               onClick={(e) => e.stopPropagation()}
             >
-              {/* Mini Calendar Header */}
-              <div className="flex items-center justify-between mb-2">
+              {/* Mini Calendar Header - always visible so users can change months while loading */}
+              <div className={styles.calendarDropdownHeader}>
                 <button
                   type="button"
                   onClick={(e) => {
@@ -745,13 +952,13 @@ export function Calendar({
                     }
                   }}
                   disabled={!canNavigatePickerMonthBack}
-                  className="p-1 rounded hover:bg-stone-100 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-colors"
+                  className={styles.calendarDropdownNav}
                 >
-                  <svg className="w-4 h-4 text-stone-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className={styles.calendarDropdownNavIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                   </svg>
                 </button>
-                <div className="text-sm font-semibold text-stone-700">
+                <div className={styles.calendarDropdownMonth}>
                   {formatInTimeZone(pickerMonth, timezone, 'MMMM yyyy', { locale: dateFnsLocale })}
                 </div>
                 <button
@@ -767,41 +974,60 @@ export function Calendar({
                     }
                   }}
                   disabled={!canNavigatePickerMonthForward}
-                  className="p-1 rounded hover:bg-stone-100 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-colors"
+                  className={styles.calendarDropdownNav}
                 >
-                  <svg className="w-4 h-4 text-stone-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className={styles.calendarDropdownNavIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                   </svg>
                 </button>
               </div>
               
-              {/* Mini Calendar Days of Week */}
-              <div className="grid grid-cols-7 gap-1 mb-1">
+              {/* Grid area - overlay only covers this, not the header */}
+              <div className={styles.calendarDropdownGridWrapper}>
+                {showSpinnerInDropdown && (
+                  <div className={styles.calendarDropdownLoading} aria-hidden>
+                    <div className="booking-calendar-dropdown-spinner" />
+                  </div>
+                )}
+                {/* Mini Calendar Days of Week */}
+                <div className={styles.calendarDropdownDaysOfWeek}>
                 {DAYS_OF_WEEK_KEYS.map((dayKey) => (
-                  <div key={dayKey} className="text-[10px] font-semibold text-stone-500 text-center py-1">
+                  <div key={dayKey} className={styles.calendarDropdownDow}>
                     {t(`calendar.days.${dayKey}`)[0]}
                   </div>
                 ))}
               </div>
               
               {/* Mini Calendar Grid */}
-              <div className="grid grid-cols-7 gap-1">
+              <div className={styles.calendarDropdownDays}>
                 {miniCalendarData.days.map((day) => {
                     const dateStr = formatInTimeZone(day, timezone, 'yyyy-MM-dd');
                     const dayNumber = formatInTimeZone(day, timezone, 'd');
                     const availability = dateAvailabilityMap[dateStr] || null;
                     const isSelected = selectedDate === dateStr;
                     const isCurrentMonth = day >= miniCalendarData.monthStart && day <= miniCalendarData.monthEnd;
-                    // Check if day is within allowed range (June 1 - October 12, 2026)
-                    const isInAllowedRange = day >= MINI_CALENDAR_START_DATE && day <= MINI_CALENDAR_END_DATE;
+                    // Check if day is within allowed range (June 1 - October 12, 2026) in company timezone
+                    const isInAllowedRange = day >= miniCalendarBoundsInTz.start && day <= miniCalendarBoundsInTz.end;
                     
-                    // If we have availability data and it's sold out, show as sold out
-                    // Otherwise, if in allowed range, show as available (even if not fetched yet)
+                    // Only treat as available if we have actual availability data for this date
+                    const hasAvailabilityData = availability !== null;
                     const isSoldOut = availability?.isSoldOut === true;
                     // When showCapacity (admin), sold-out days are still selectable for overbooking
-                    const isAvailable = isInAllowedRange && (!isSoldOut || showCapacity);
+                    const isAvailable = hasAvailabilityData && isInAllowedRange && (!isSoldOut || showCapacity);
                     const isToday = isSameDay(day, new Date());
                     
+                    const dayClass = cn(
+                      styles.calendarDropdownDay,
+                      !isCurrentMonth && styles.calendarDropdownDayMuted,
+                      isSoldOut && !showCapacity && styles.calendarDropdownDaySoldOut,
+                      isSoldOut && showCapacity && styles.calendarDropdownDaySoldOutAdmin,
+                      !isSoldOut && !isInAllowedRange && styles.calendarDropdownDayMuted,
+                      !hasAvailabilityData && isInAllowedRange && styles.calendarDropdownDayMuted,
+                      isAvailable && isSelected && styles.calendarDropdownDaySelected,
+                      isAvailable && !isSelected && styles.calendarDropdownDayAvailable,
+                      isToday && isAvailable && !isSelected && styles.calendarDropdownDayToday
+                    );
+                    
                     return (
                       <button
                         key={dateStr}
@@ -812,37 +1038,26 @@ export function Calendar({
                           }
                         }}
                         disabled={!isAvailable}
-                        className={cn(
-                          'aspect-square text-xs rounded transition-colors',
-                          !isCurrentMonth && 'text-stone-300',
-                          isSoldOut && !showCapacity
-                            ? 'bg-red-400 text-white cursor-not-allowed'
-                            : isSoldOut && showCapacity
-                            ? 'bg-red-400 text-white cursor-pointer hover:bg-red-500'
-                            : !isInAllowedRange
-                            ? 'text-stone-300 cursor-not-allowed'
-                            : isSelected
-                            ? 'bg-emerald-600 text-white hover:bg-emerald-700'
-                            : 'bg-emerald-50 text-stone-900 hover:bg-emerald-100 cursor-pointer',
-                          isToday && isAvailable && !isSelected && 'ring-1 ring-emerald-500'
-                        )}
+                        className={dayClass}
                       >
                         {dayNumber}
                       </button>
                     );
                   })}
               </div>
-            </div>
+              </div>
+            </div>,
+            document.body
           )}
         </div>
         <button
           onClick={handleNext}
           disabled={!canNavigateForward}
-          className="p-1.5 rounded-lg hover:bg-stone-100 transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent"
+          className={styles.calendarNav}
           aria-label={t('calendar.nextWeeks')}
         >
           <svg
-            className="w-4 h-4 text-stone-600"
+            className={styles.calendarNavIcon}
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -857,15 +1072,15 @@ export function Calendar({
         </button>
       </div>
 
-      {/* Calendar Grid: on mobile scroll horizontally; on sm+ fit container so no scroll to see Saturday */}
-      <div className="border border-stone-200 rounded-lg overflow-hidden bg-white overflow-x-auto sm:overflow-visible">
-        <div className="min-w-[700px] sm:min-w-0 sm:w-full pb-3 sm:pb-0">
+      {/* Calendar Grid */}
+      <div className={styles.calendarGrid}>
+        <div className={styles.calendarGridInner}>
           {/* Day Headers */}
-          <div className="grid grid-cols-7 bg-stone-50 border-b border-stone-200">
+          <div className={cn(styles.calendarHeaderRow, 'calendar-header-grid')}>
             {DAYS_OF_WEEK_KEYS.map((dayKey) => (
               <div
                 key={dayKey}
-                className="py-1 text-center text-xs font-semibold text-stone-600 uppercase tracking-wide"
+                className={styles.calendarHeaderCell}
               >
                 {t(`calendar.days.${dayKey}`)}
               </div>
@@ -873,7 +1088,7 @@ export function Calendar({
           </div>
 
           {/* Calendar Days Grid - row height = tallest cell in row; all cells stretch to that height */}
-          <div className="grid grid-cols-7 items-stretch">
+          <div className={cn(styles.calendarDaysGrid, 'calendar-days-grid')}>
           {calendarDays.map((date) => {
             const dateStr = formatInTimeZone(date, timezone, 'yyyy-MM-dd');
             const availability = dateAvailabilityMap[dateStr] || null;
@@ -894,7 +1109,9 @@ export function Calendar({
                 isToday={isToday}
                 showCapacity={showCapacity}
                 timezone={timezone}
+                displayMode={displayMode}
                 onClick={() => handleDateClick(date)}
+                isMobile={isMobile}
               />
             );
           })}