@getmicdrop/svelte-components 2.0.13 → 2.1.0

package/dist/components/Calendar/Calendar.svelte

@@ -1,1115 +0,0 @@
-<script>
-  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
-  import { browser } from '../../__LIB_ENVIRONMENT__.js';
-  import { Calendar } from '@fullcalendar/core';
-  import dayGridPlugin from '@fullcalendar/daygrid';
-  import interactionPlugin from '@fullcalendar/interaction';
-  import Icon from '../Icons/Icon.svelte';
-  import Button from '../Button/Button.svelte';
-
-  // Props
-  export let variant = 'availability'; // 'availability' | 'scheduler' | 'display' | 'public'
-  export let view = 'dayGridMonth';
-  export let events = [];
-  export let selectedDates = []; // For availability - array of date strings like "2025-03-22"
-  export let showMonths = 1;
-  export let compact = false;
-  export let showNavigation = true;
-  export let showViewSwitcher = false;
-  export let readOnly = false;
-  export let saveStatus = ''; // 'saving' | 'saved' | ''
-  export let showLegend = true; // Show legend for availability variant
-
-  const dispatch = createEventDispatcher();
-
-  let calendarEl;
-  let calendar = null;
-  let currentDate = new Date();
-
-  // Haptic feedback helper
-  function triggerHaptic(style = 'light') {
-    if (typeof window === 'undefined') return;
-
-    if (window.webkit?.messageHandlers?.haptic) {
-      window.webkit.messageHandlers.haptic.postMessage(style);
-      return;
-    }
-
-    if (window.TapticEngine) {
-      if (style === 'light') {
-        window.TapticEngine.impact({ style: 'light' });
-      } else if (style === 'medium') {
-        window.TapticEngine.impact({ style: 'medium' });
-      }
-      return;
-    }
-
-    if (navigator.vibrate) {
-      const duration = style === 'light' ? 10 : 20;
-      navigator.vibrate(duration);
-    }
-  }
-
-  // Check if a date is in the past
-  function isPastDate(date) {
-    // Get today's date in local time as YYYY-MM-DD
-    const today = new Date();
-    const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
-
-    // Get the check date as YYYY-MM-DD string
-    const checkDateStr = formatDateString(date);
-
-    // Compare as strings (YYYY-MM-DD format sorts correctly)
-    return checkDateStr < todayStr;
-  }
-
-  // Format date to YYYY-MM-DD string
-  function formatDateString(date) {
-    // If it's already a string in YYYY-MM-DD format, return it directly
-    if (typeof date === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(date)) {
-      return date;
-    }
-
-    // For Date objects, use UTC methods to avoid timezone shifting
-    // FullCalendar passes dates that represent the calendar day in UTC
-    const d = new Date(date);
-    const year = d.getUTCFullYear();
-    const month = String(d.getUTCMonth() + 1).padStart(2, '0');
-    const day = String(d.getUTCDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
-  }
-
-  // Check if a date is in a different month than currently displayed
-  function isOtherMonth(date) {
-    if (!calendar) return false;
-    const displayedDate = calendar.getDate();
-    const clickedDate = new Date(date);
-    return displayedDate.getMonth() !== clickedDate.getUTCMonth() ||
-           displayedDate.getFullYear() !== clickedDate.getUTCFullYear();
-  }
-
-  // Handle date click for availability variant
-  function handleDateClick(info) {
-    if (variant !== 'availability' || readOnly) return;
-
-    // Ignore clicks on days from other months (prev/next month overflow)
-    if (isOtherMonth(info.date)) return;
-
-    const dateStr = formatDateString(info.date);
-
-    if (isPastDate(info.date)) return;
-
-    const isSelected = selectedDates.includes(dateStr);
-
-    if (isSelected) {
-      triggerHaptic('medium');
-      dispatch('dateSelect', { date: dateStr, selected: false });
-    } else {
-      triggerHaptic('light');
-      dispatch('dateSelect', { date: dateStr, selected: true });
-    }
-  }
-
-  // Handle event click
-  function handleEventClick(info) {
-    dispatch('eventClick', { event: info.event });
-  }
-
-  // Animated month change function
-  // direction: 1 = next, -1 = prev
-  function animateMonthChange(direction) {
-    if (!calendar || !calendarEl || isAnimating) return;
-
-    isAnimating = true;
-    const containerWidth = calendarEl.offsetWidth || 320;
-
-    // Clone the current calendar content
-    const clone = calendarEl.cloneNode(true);
-    clone.classList.add('calendar-clone');
-    clone.style.position = 'absolute';
-    clone.style.top = '0';
-    clone.style.left = '0';
-    clone.style.width = '100%';
-    clone.style.transform = 'translateX(0)';
-    clone.style.transition = 'none';
-    clone.style.pointerEvents = 'none';
-    clone.style.zIndex = '1';
-
-    // Insert clone into the slide container
-    const slideContainer = calendarEl.parentElement;
-    slideContainer.insertBefore(clone, calendarEl);
-
-    // Change month immediately
-    if (direction > 0) {
-      calendar.next();
-    } else {
-      calendar.prev();
-    }
-    currentDate = calendar.getDate();
-
-    // Update day cell classes immediately after month change, before animation
-    updateDayCells();
-
-    triggerHaptic('medium');
-
-    // Position new calendar off-screen on opposite side
-    const enterFrom = direction > 0 ? containerWidth : -containerWidth;
-    calendarEl.style.transition = 'none';
-    calendarEl.style.transform = `translateX(${enterFrom}px)`;
-
-    // Force reflow
-    calendarEl.offsetHeight;
-
-    // Animate clone out and new calendar in
-    const duration = 0.3;
-    const easing = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
-
-    clone.style.transition = `transform ${duration}s ${easing}`;
-    clone.style.transform = `translateX(${direction > 0 ? -containerWidth : containerWidth}px)`;
-
-    calendarEl.style.transition = `transform ${duration}s ${easing}`;
-    calendarEl.style.transform = 'translateX(0)';
-
-    // Animate header text
-    if (monthDisplayEl) {
-      monthDisplayEl.style.transition = 'none';
-      monthDisplayEl.style.transform = `translateX(${enterFrom * 0.3}px)`;
-      monthDisplayEl.style.opacity = '0';
-      monthDisplayEl.offsetHeight;
-      monthDisplayEl.style.transition = `transform ${duration}s ${easing}, opacity ${duration}s ${easing}`;
-      monthDisplayEl.style.transform = 'translateX(0)';
-      monthDisplayEl.style.opacity = '1';
-    }
-
-    // Clean up after animation
-    setTimeout(() => {
-      if (clone.parentElement) {
-        clone.remove();
-      }
-      calendarEl.style.transition = '';
-      calendarEl.style.transform = '';
-      if (monthDisplayEl) {
-        monthDisplayEl.style.transition = '';
-        monthDisplayEl.style.transform = '';
-        monthDisplayEl.style.opacity = '';
-      }
-      isAnimating = false;
-    }, duration * 1000 + 50);
-  }
-
-  // Navigation handlers
-  function handlePrev() {
-    animateMonthChange(-1);
-  }
-
-  function handleNext() {
-    animateMonthChange(1);
-  }
-
-  function handleToday() {
-    if (!calendar || !calendarEl || isAnimating) return;
-
-    const today = new Date();
-    const current = calendar.getDate();
-
-    // Determine direction: if today is before current, go left (-1), else go right (1)
-    // Compare year and month
-    const todayYM = today.getFullYear() * 12 + today.getMonth();
-    const currentYM = current.getFullYear() * 12 + current.getMonth();
-
-    if (todayYM === currentYM) {
-      // Already on today's month, just trigger haptic
-      triggerHaptic('light');
-      return;
-    }
-
-    const direction = todayYM > currentYM ? 1 : -1;
-
-    isAnimating = true;
-    const containerWidth = calendarEl.offsetWidth || 320;
-
-    // Clone the current calendar content
-    const clone = calendarEl.cloneNode(true);
-    clone.classList.add('calendar-clone');
-    clone.style.position = 'absolute';
-    clone.style.top = '0';
-    clone.style.left = '0';
-    clone.style.width = '100%';
-    clone.style.transform = 'translateX(0)';
-    clone.style.transition = 'none';
-    clone.style.pointerEvents = 'none';
-    clone.style.zIndex = '1';
-
-    const slideContainer = calendarEl.parentElement;
-    slideContainer.insertBefore(clone, calendarEl);
-
-    // Go to today
-    calendar.today();
-    currentDate = calendar.getDate();
-
-    // Update day cell classes immediately after month change, before animation
-    updateDayCells();
-
-    triggerHaptic('light');
-
-    // Position new calendar off-screen
-    const enterFrom = direction > 0 ? containerWidth : -containerWidth;
-    calendarEl.style.transition = 'none';
-    calendarEl.style.transform = `translateX(${enterFrom}px)`;
-    calendarEl.offsetHeight;
-
-    const duration = 0.3;
-    const easing = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
-
-    clone.style.transition = `transform ${duration}s ${easing}`;
-    clone.style.transform = `translateX(${direction > 0 ? -containerWidth : containerWidth}px)`;
-
-    calendarEl.style.transition = `transform ${duration}s ${easing}`;
-    calendarEl.style.transform = 'translateX(0)';
-
-    if (monthDisplayEl) {
-      monthDisplayEl.style.transition = 'none';
-      monthDisplayEl.style.transform = `translateX(${enterFrom * 0.3}px)`;
-      monthDisplayEl.style.opacity = '0';
-      monthDisplayEl.offsetHeight;
-      monthDisplayEl.style.transition = `transform ${duration}s ${easing}, opacity ${duration}s ${easing}`;
-      monthDisplayEl.style.transform = 'translateX(0)';
-      monthDisplayEl.style.opacity = '1';
-    }
-
-    setTimeout(() => {
-      if (clone.parentElement) clone.remove();
-      calendarEl.style.transition = '';
-      calendarEl.style.transform = '';
-      if (monthDisplayEl) {
-        monthDisplayEl.style.transition = '';
-        monthDisplayEl.style.transform = '';
-        monthDisplayEl.style.opacity = '';
-      }
-      isAnimating = false;
-    }, duration * 1000 + 50);
-  }
-
-  // Smooth swipe with momentum
-  let touchStartX = 0;
-  let touchStartY = 0;
-  let touchStartTime = 0;
-  let lastTouchX = 0;
-  let lastTouchTime = 0;
-  let velocityX = 0;
-  let isSwiping = false;
-  let isAnimating = false;
-  let swipeOffset = 0;
-
-  // Threshold for triggering month change (percentage of calendar width)
-  const SWIPE_THRESHOLD = 0.15;
-  // Velocity threshold (pixels per ms)
-  const VELOCITY_THRESHOLD = 0.3;
-
-  function handleTouchStart(e) {
-    if (isAnimating) return;
-
-    touchStartX = e.touches[0].clientX;
-    touchStartY = e.touches[0].clientY;
-    touchStartTime = Date.now();
-    lastTouchX = touchStartX;
-    lastTouchTime = touchStartTime;
-    velocityX = 0;
-    isSwiping = false;
-    swipeOffset = 0;
-  }
-
-  function handleTouchMove(e) {
-    if (!touchStartX || isAnimating) return;
-
-    const touchCurrentX = e.touches[0].clientX;
-    const touchCurrentY = e.touches[0].clientY;
-    const diffX = touchStartX - touchCurrentX;
-    const diffY = touchStartY - touchCurrentY;
-    const now = Date.now();
-
-    // Determine if this is a horizontal swipe
-    if (!isSwiping && Math.abs(diffX) > 10) {
-      if (Math.abs(diffX) > Math.abs(diffY)) {
-        isSwiping = true;
-      } else {
-        // Vertical scroll - don't handle
-        touchStartX = 0;
-        return;
-      }
-    }
-
-    if (isSwiping) {
-      e.preventDefault(); // Prevent page scroll during swipe
-
-      // Calculate velocity (pixels per ms)
-      const dt = now - lastTouchTime;
-      if (dt > 0) {
-        velocityX = (lastTouchX - touchCurrentX) / dt;
-      }
-      lastTouchX = touchCurrentX;
-      lastTouchTime = now;
-
-      // Update swipe offset with resistance at edges
-      swipeOffset = -diffX * 0.8; // 0.8 adds slight resistance
-
-      // Apply transform to calendar wrapper
-      if (calendarEl) {
-        calendarEl.style.transform = `translateX(${swipeOffset}px)`;
-        calendarEl.style.transition = 'none';
-      }
-    }
-  }
-
-  // Reference to month display for header animation
-  let monthDisplayEl;
-
-  function handleTouchEnd(e) {
-    if (!touchStartX || !isSwiping || isAnimating) {
-      touchStartX = 0;
-      touchStartY = 0;
-      isSwiping = false;
-      return;
-    }
-
-    const containerWidth = calendarEl?.offsetWidth || 320;
-    const swipePercent = Math.abs(swipeOffset) / containerWidth;
-
-    // Determine if we should change month based on:
-    // 1. Swipe distance threshold OR
-    // 2. Velocity threshold (for quick flicks)
-    const shouldChange = swipePercent > SWIPE_THRESHOLD || Math.abs(velocityX) > VELOCITY_THRESHOLD;
-    const direction = swipeOffset > 0 ? -1 : 1; // -1 = prev, 1 = next
-
-    isAnimating = true;
-
-    if (shouldChange) {
-      // Clone the current calendar content
-      const clone = calendarEl.cloneNode(true);
-      clone.classList.add('calendar-clone');
-      clone.style.position = 'absolute';
-      clone.style.top = '0';
-      clone.style.left = '0';
-      clone.style.width = '100%';
-      clone.style.transform = `translateX(${swipeOffset}px)`;
-      clone.style.transition = 'none';
-      clone.style.pointerEvents = 'none';
-      clone.style.zIndex = '1';
-
-      // Insert clone into the slide container (parent of calendar wrapper)
-      const slideContainer = calendarEl.parentElement;
-      slideContainer.insertBefore(clone, calendarEl);
-
-      // Change month immediately (but calendar is hidden/positioned off-screen)
-      if (direction > 0) {
-        if (calendar) {
-          calendar.next();
-          currentDate = calendar.getDate();
-        }
-      } else {
-        if (calendar) {
-          calendar.prev();
-          currentDate = calendar.getDate();
-        }
-      }
-
-      // Update day cell classes immediately after month change, before animation
-      updateDayCells();
-
-      triggerHaptic('medium');
-
-      // Position new calendar off-screen on opposite side
-      const enterFrom = direction > 0 ? containerWidth : -containerWidth;
-      calendarEl.style.transition = 'none';
-      calendarEl.style.transform = `translateX(${enterFrom}px)`;
-
-      // Force reflow
-      calendarEl.offsetHeight;
-
-      // Animate clone out and new calendar in
-      const duration = 0.3;
-      const easing = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
-
-      clone.style.transition = `transform ${duration}s ${easing}`;
-      clone.style.transform = `translateX(${direction > 0 ? -containerWidth : containerWidth}px)`;
-
-      calendarEl.style.transition = `transform ${duration}s ${easing}`;
-      calendarEl.style.transform = 'translateX(0)';
-
-      // Animate header text
-      if (monthDisplayEl) {
-        monthDisplayEl.style.transition = 'none';
-        monthDisplayEl.style.transform = `translateX(${enterFrom * 0.3}px)`;
-        monthDisplayEl.style.opacity = '0';
-        monthDisplayEl.offsetHeight; // Force reflow
-        monthDisplayEl.style.transition = `transform ${duration}s ${easing}, opacity ${duration}s ${easing}`;
-        monthDisplayEl.style.transform = 'translateX(0)';
-        monthDisplayEl.style.opacity = '1';
-      }
-
-      // Clean up after animation
-      setTimeout(() => {
-        if (clone.parentElement) {
-          clone.remove();
-        }
-        calendarEl.style.transition = '';
-        calendarEl.style.transform = '';
-        if (monthDisplayEl) {
-          monthDisplayEl.style.transition = '';
-          monthDisplayEl.style.transform = '';
-          monthDisplayEl.style.opacity = '';
-        }
-        isAnimating = false;
-      }, duration * 1000 + 50);
-    } else {
-      // Snap back to original position
-      if (calendarEl) {
-        calendarEl.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
-        calendarEl.style.transform = 'translateX(0)';
-      }
-
-      setTimeout(() => {
-        calendarEl.style.transition = '';
-        calendarEl.style.transform = '';
-        isAnimating = false;
-      }, 300);
-    }
-
-    // Reset touch state
-    touchStartX = 0;
-    touchStartY = 0;
-    isSwiping = false;
-    swipeOffset = 0;
-    velocityX = 0;
-  }
-
-  // Custom day cell rendering for availability variant
-  function dayCellDidMount(info) {
-    if (variant !== 'availability') return;
-
-    const dateStr = formatDateString(info.date);
-    const isSelected = selectedDates.includes(dateStr);
-    const isPast = isPastDate(info.date);
-
-    // Add classes to the cell itself (for full-box highlighting)
-    if (isSelected && !isPast) {
-      info.el.classList.add('day-selected');
-    }
-    if (isPast) {
-      info.el.classList.add('day-past');
-    }
-    if (isPast && isSelected) {
-      info.el.classList.add('day-past-selected');
-    }
-  }
-
-  // Update day cell classes when selectedDates change or month changes
-  function updateDayCells() {
-    if (!calendar || !calendarEl) return;
-
-    const dayCells = calendarEl.querySelectorAll('.fc-daygrid-day');
-    dayCells.forEach((cell) => {
-      const dateStr = cell.getAttribute('data-date');
-      if (!dateStr) return;
-
-      const isSelected = selectedDates.includes(dateStr);
-      // Pass the date string directly - formatDateString will handle it
-      const isPast = isPastDate(dateStr);
-
-      // Remove previous classes
-      cell.classList.remove('day-selected', 'day-past-selected', 'day-past');
-
-      // Add past class
-      if (isPast) {
-        cell.classList.add('day-past');
-      }
-
-      // Add selection classes
-      if (isSelected && !isPast) {
-        cell.classList.add('day-selected');
-      }
-      if (isPast && isSelected) {
-        cell.classList.add('day-past-selected');
-      }
-    });
-  }
-
-  // Watch for selectedDates changes
-  $: if (browser && calendar && selectedDates) {
-    updateDayCells();
-  }
-
-  // Track current breakpoint (set on mount, no resize listener)
-  let currentBreakpoint = 'mobile';
-
-  function getBreakpoint(width) {
-    if (width >= 1024) return 'desktop';
-    if (width >= 768) return 'tablet';
-    return 'mobile';
-  }
-
-  onMount(() => {
-    if (!browser) return;
-
-    const plugins = [dayGridPlugin];
-
-    if (variant === 'availability' || variant === 'scheduler') {
-      plugins.push(interactionPlugin);
-    }
-
-    calendar = new Calendar(calendarEl, {
-      plugins,
-      initialView: view,
-      initialDate: currentDate,
-      headerToolbar: false, // We build our own header
-      dayMaxEvents: true,
-      selectable: variant === 'availability' && !readOnly,
-      editable: variant === 'scheduler' && !readOnly,
-      dateClick: handleDateClick,
-      eventClick: handleEventClick,
-      dayCellDidMount: dayCellDidMount,
-      firstDay: 0, // Sunday
-      dayHeaderFormat: { weekday: 'short' },
-      height: 'auto',
-      showNonCurrentDates: true, // Always show other month days
-      fixedWeekCount: true, // Always show 6 weeks for consistent height
-      events: variant === 'availability' ? [] : events,
-    });
-
-    calendar.render();
-
-    // Set initial breakpoint - no resize listener needed
-    // CSS handles the sizing via media queries, and FullCalendar's updateSize()
-    // causes rendering glitches during resize. The calendar renders correctly
-    // on initial load at each breakpoint.
-    currentBreakpoint = getBreakpoint(window.innerWidth);
-  });
-
-  onDestroy(() => {
-    if (calendar) {
-      calendar.destroy();
-    }
-  });
-
-  // Format current month/year for header
-  $: headerText = new Intl.DateTimeFormat('en', {
-    month: 'long',
-    year: 'numeric'
-  }).format(currentDate);
-</script>
-
-<div
-  class="calendar-container"
-  class:compact
-  on:touchstart={handleTouchStart}
-  on:touchmove={handleTouchMove}
-  on:touchend={handleTouchEnd}
->
-  {#if showNavigation}
-    <header class="calendar-header">
-      <button
-        on:click={handlePrev}
-        class="nav-btn"
-        aria-label="Previous month"
-      >
-        <Icon name="ChevronLeft" size="16" />
-      </button>
-
-      <div class="month-display" bind:this={monthDisplayEl}>
-        <div class="month-content">
-          <div class="month-row">
-            <h2 class="month-title">{headerText.split(' ')[0]}</h2>
-            {#if saveStatus}
-              <span class="save-indicator">
-                {#if saveStatus === 'saving'}
-                  <span class="animate-spin save-icon">
-                    <Icon name="Reload" size="18" />
-                  </span>
-                {:else if saveStatus === 'saved'}
-                  <span class="save-icon save-icon--success">
-                    <Icon name="CheckCircle" size="18" />
-                  </span>
-                {/if}
-              </span>
-            {/if}
-          </div>
-          <span class="year-text">{headerText.split(' ')[1]}</span>
-        </div>
-      </div>
-
-      <button
-        on:click={handleNext}
-        class="nav-btn"
-        aria-label="Next month"
-      >
-        <Icon name="ChevronRight" size="16" />
-      </button>
-    </header>
-  {/if}
-
-  <div class="calendar-slide-container">
-    <div class="calendar-wrapper" bind:this={calendarEl}></div>
-  </div>
-
-  {#if variant === 'availability'}
-    <div class="action-buttons">
-      <Button
-        variant="blue-outline"
-        type="button"
-        size="lg"
-        on:click={handleToday}
-      >
-        Today
-      </Button>
-    </div>
-
-    {#if showLegend}
-      <div class="calendar-legend">
-        <div class="legend-item">
-          <span class="legend-dot legend-dot--available"></span>
-          <span class="legend-label">Available</span>
-        </div>
-        <div class="legend-item">
-          <span class="legend-dot legend-dot--unavailable"></span>
-          <span class="legend-label">Unavailable</span>
-        </div>
-      </div>
-    {/if}
-  {/if}
-</div>
-
-<style>
-  .calendar-container {
-    /* Mobile: full width - parent container handles gutters */
-    width: 100%;
-    margin: 0 auto;
-    text-align: center;
-    touch-action: pan-y pinch-zoom; /* Allow vertical scroll and zoom, handle horizontal ourselves */
-    overflow: hidden; /* Clip calendar during swipe animation */
-  }
-
-  /* Tablet: larger fixed size */
-  @media (min-width: 768px) {
-    .calendar-container {
-      width: 600px;
-      max-width: 600px;
-    }
-  }
-
-  /* Desktop: even larger */
-  @media (min-width: 1024px) {
-    .calendar-container {
-      width: 700px;
-      max-width: 700px;
-    }
-  }
-
-  .calendar-container.compact {
-    width: 280px;
-  }
-
-  .calendar-header {
-    display: grid;
-    grid-template-columns: 40px minmax(0, 1fr) 40px;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 1.5rem;
-    padding: 0 0.5rem;
-    position: sticky;
-    top: 0;
-    background: hsl(var(--BG-Primary));
-    z-index: 10;
-    -moz-user-select: none;
-         user-select: none;
-    -webkit-user-select: none;
-  }
-
-  .nav-btn {
-    width: 40px;
-    height: 40px;
-    padding: 0.75rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid hsl(var(--Stroke-Secondary));
-    border-radius: 0.5rem;
-    color: hsl(var(--Text-Tartiary));
-    background: hsl(var(--BG-Primary));
-    transition: opacity 0.15s ease;
-    -webkit-tap-highlight-color: transparent;
-    cursor: pointer;
-  }
-
-  .nav-btn:active {
-    opacity: 0.4;
-  }
-
-  .month-display {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 48px;
-  }
-
-  .month-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .month-row {
-    display: flex;
-    align-items: center;
-    position: relative;
-  }
-
-  .month-title {
-    font-size: 1.125rem;
-    font-weight: 500;
-    color: hsl(var(--Text-Primary));
-    line-height: 1.2;
-    margin: 0;
-  }
-
-  .year-text {
-    font-size: 0.75rem;
-    color: hsl(var(--Text-Tartiary));
-    font-weight: 400;
-    line-height: 1;
-    margin-top: 2px;
-  }
-
-  .save-indicator {
-    position: absolute;
-    left: 100%;
-    margin-left: 0.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .save-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: hsl(var(--primary-700));
-  }
-
-  .save-icon--success {
-    color: hsl(142 76% 36%); /* green-600 */
-  }
-
-  .calendar-slide-container {
-    position: relative;
-    overflow: hidden;
-  }
-
-  .calendar-wrapper {
-    border: 1px solid hsl(var(--Stroke-Secondary));
-    border-radius: 0.75rem;
-    overflow: hidden;
-    will-change: transform;
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-    position: relative;
-    z-index: 2;
-    background: hsl(var(--BG-Primary));
-  }
-
-  :global(.calendar-clone) {
-    border: 1px solid hsl(var(--Stroke-Secondary));
-    border-radius: 0.75rem;
-    overflow: hidden;
-    background: hsl(var(--BG-Primary));
-  }
-
-  /*
-   * Fix FullCalendar column sync issues during resize
-   * Source: https://stackoverflow.com/questions/64178435/is-it-possible-to-adjust-the-width-of-the-fullcalendar
-   * The default FullCalendar sets various elements to fixed pixel widths (817px).
-   * Setting them to 100% keeps header and body columns in sync.
-   */
-  :global(.calendar-wrapper .fc-col-header),
-  :global(.calendar-wrapper .fc-scrollgrid-sync-table),
-  :global(.calendar-wrapper .fc-daygrid-body) {
-    width: 100% !important;
-  }
-
-  /* Force equal column widths across all FullCalendar tables */
-  :global(.calendar-wrapper .fc table) {
-    table-layout: fixed !important;
-    width: 100% !important;
-    border-collapse: collapse;
-  }
-
-  :global(.calendar-wrapper .fc-scrollgrid) {
-    border-collapse: collapse !important;
-    border-right: none !important;
-  }
-
-  :global(.calendar-wrapper .fc-scrollgrid-section > td) {
-    padding: 0;
-  }
-
-  :global(.calendar-wrapper .fc th),
-  :global(.calendar-wrapper .fc td) {
-    width: 14.2857% !important; /* 100% / 7 columns */
-    min-width: 0 !important;
-    max-width: none !important;
-  }
-
-  /* Remove right border from last column to prevent double border */
-  :global(.calendar-wrapper .fc th:last-child),
-  :global(.calendar-wrapper .fc td:last-child) {
-    border-right: none !important;
-  }
-
-  :global(.calendar-wrapper .fc colgroup) {
-    display: none; /* Hide colgroup to prevent width conflicts */
-  }
-
-  .action-buttons {
-    display: flex;
-    justify-content: center;
-    margin-top: 1rem;
-  }
-
-  /* Legend */
-  .calendar-legend {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 1.5rem;
-    padding-top: 1rem;
-  }
-
-  .legend-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .legend-dot {
-    width: 1.25rem;
-    height: 1.25rem;
-    border-radius: 4px;
-  }
-
-  .legend-dot--available {
-    background-color: hsl(var(--primary-700));
-    border: 1px solid hsl(var(--primary-700));
-  }
-
-  .legend-dot--unavailable {
-    background-color: hsl(var(--BG-Secondary));
-    border: 2px solid hsl(var(--Text-Tartiary));
-  }
-
-  .legend-label {
-    font-size: 0.875rem;
-    color: hsl(var(--Text-Primary));
-  }
-
-  /* FullCalendar CSS overrides */
-  :global(.fc) {
-    --fc-bg-color: hsl(var(--BG-Primary));
-    --fc-border-color: hsl(var(--Stroke-Secondary));
-    --fc-text-color: hsl(var(--Text-Primary));
-    --fc-today-bg-color: transparent;
-    --fc-highlight-color: hsl(var(--primary-50));
-    --fc-page-bg-color: hsl(var(--BG-Primary));
-    --fc-neutral-bg-color: hsl(var(--BG-Secondary));
-    --fc-neutral-text-color: hsl(var(--Text-Tartiary));
-  }
-
-  :global(.fc .fc-daygrid-day-frame) {
-    /* Mobile: compact cells */
-    min-height: 48px;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-    /* Center the day number vertically */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* Tablet: taller cells */
-  @media (min-width: 768px) {
-    :global(.fc .fc-daygrid-day-frame) {
-      min-height: 56px;
-    }
-  }
-
-  /* Desktop: even taller cells */
-  @media (min-width: 1024px) {
-    :global(.fc .fc-daygrid-day-frame) {
-      min-height: 64px;
-    }
-  }
-
-  :global(.fc .fc-daygrid-day:hover:not(.fc-day-other)) {
-    background: hsl(var(--BG-Secondary));
-  }
-
-  :global(.fc .fc-day-other),
-  :global(.fc .fc-day-other.day-selected),
-  :global(.fc .fc-day-other.day-past-selected),
-  :global(.fc .fc-day-other.day-past) {
-    background: hsl(var(--BG-Secondary) / 0.5) !important;
-    cursor: default;
-    pointer-events: none;
-  }
-
-  :global(.fc .fc-day-other .fc-daygrid-day-number) {
-    visibility: hidden;
-  }
-
-  :global(.fc .fc-col-header-cell) {
-    padding: 0.75rem 0;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: hsl(var(--Text-Tartiary));
-    background: hsl(var(--BG-Primary));
-    border-bottom: 1px solid hsl(var(--Stroke-Secondary));
-  }
-
-  :global(.fc .fc-col-header-cell-cushion) {
-    color: hsl(var(--Text-Tartiary));
-    text-decoration: none;
-  }
-
-  :global(.fc .fc-scrollgrid) {
-    border: none !important;
-  }
-
-  :global(.fc .fc-scrollgrid-section > td) {
-    border: none;
-  }
-
-  /* Custom day number styling */
-  :global(.fc .fc-daygrid-day-number) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: hsl(var(--Text-Primary));
-    padding: 0.5rem;
-    text-decoration: none;
-    width: 100%;
-    height: 100%;
-    /* Fast tap animation - under 100ms feels instantaneous */
-    transition: transform 0.08s ease-out;
-  }
-
-  /* Tap feedback animation - quick scale pulse */
-  :global(.fc .fc-daygrid-day:not(.fc-day-other):not(.day-past):active .fc-daygrid-day-number) {
-    transform: scale(0.85);
-  }
-
-  /* Add a brief background flash on the cell itself for more visible feedback */
-  :global(.fc .fc-daygrid-day:not(.fc-day-other):not(.day-past)) {
-    transition: background-color 0.08s ease-out;
-  }
-
-  :global(.fc .fc-daygrid-day:not(.fc-day-other):not(.day-past):not(.day-selected):active) {
-    background-color: hsl(var(--primary-100)) !important;
-  }
-
-  :global(.fc .fc-daygrid-day.day-selected:active) {
-    background-color: hsl(var(--primary-800)) !important;
-  }
-
-  /* Full-cell highlighting for selected days with glow animation */
-  :global(.fc .fc-daygrid-day.day-selected),
-  :global(.fc .fc-daygrid-day.fc-day-today.day-selected) {
-    background: hsl(var(--primary-700)) !important;
-    animation: selection-glow 0.3s ease-out;
-  }
-
-  @keyframes selection-glow {
-    0% {
-      background: hsl(var(--primary-100)) !important;
-      box-shadow: 0 0 0 3px hsla(var(--primary-500) / 0.3) inset;
-    }
-    50% {
-      background: hsl(var(--primary-400)) !important;
-      box-shadow: 0 0 0 2px hsla(var(--primary-500) / 0.2) inset;
-    }
-    100% {
-      background: hsl(var(--primary-700)) !important;
-      box-shadow: none;
-    }
-  }
-
-  :global(.fc .fc-daygrid-day.day-selected .fc-daygrid-day-number),
-  :global(.fc .fc-daygrid-day.fc-day-today.day-selected .fc-daygrid-day-number) {
-    color: white;
-  }
-
-  /* Ensure today doesn't have special background when not selected (but allow hover) */
-  :global(.fc .fc-daygrid-day.fc-day-today:not(.day-selected):not(:hover)) {
-    background: transparent !important;
-  }
-
-  /* Past day styling */
-  :global(.fc .fc-daygrid-day.day-past .fc-daygrid-day-number) {
-    color: hsl(var(--Text-Tartiary) / 0.5);
-  }
-
-  :global(.fc .fc-daygrid-day.day-past-selected) {
-    background: hsl(var(--BG-Quaternary)) !important;
-  }
-
-  :global(.fc .fc-daygrid-day.day-past-selected .fc-daygrid-day-number) {
-    color: hsl(var(--Text-Tartiary));
-  }
-
-  /* Active/press state for non-selected, non-past days */
-  :global(.fc .fc-daygrid-day:not(.day-past):not(.day-selected):active) {
-    background: hsl(var(--primary-100)) !important;
-  }
-
-  :global(.fc .fc-daygrid-day.day-selected:active) {
-    opacity: 0.8;
-  }
-
-  /* Other month days - must come AFTER selected/past rules to override them */
-  :global(.fc .fc-daygrid-day.fc-day-other),
-  :global(.fc .fc-daygrid-day.fc-day-other.day-selected),
-  :global(.fc .fc-daygrid-day.fc-day-other.day-past),
-  :global(.fc .fc-daygrid-day.fc-day-other.day-past-selected) {
-    background: hsl(var(--BG-Secondary) / 0.5) !important;
-  }
-
-  /* Hide default FullCalendar elements we don't need */
-  :global(.fc .fc-daygrid-day-top) {
-    justify-content: center;
-  }
-
-  :global(.fc .fc-daygrid-day-events) {
-    display: none;
-  }
-
-  :global(.fc .fc-daygrid-day-bg) {
-    display: none;
-  }
-
-  /* Animation */
-  .animate-spin {
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .nav-btn,
-    :global(.fc .fc-daygrid-day-number) {
-      transition: none;
-    }
-  }
-</style>