@ticketboothapp/booking 0.1.22 → 1.2.24

package/src/components/booking/Calendar.module.css

@@ -1,616 +0,0 @@
-/**
- * Calendar component styles
- *
- * QUICK REFERENCE - Where to change what:
- * ───────────────────────────────────────
- * Header row (SUN, MON, TUE...)     → --cal-header-*
- * Date range trigger + dropdown     → --cal-range-*, --cal-dropdown-*
- * Dropdown panel (popover)          → --cal-dropdown-bg, --cal-dropdown-border, etc.
- * Dropdown day cells                → --cal-dropdown-day-*
- * Nav arrows (< >)                  → --cal-nav-*
- * Day cells (available/selected)    → --cal-cell-*
- * Time pills (3:00 AM, etc.)        → --cal-time-*
- * Sold out / discount badges        → --cal-soldout-*, --cal-discount-*
- * Grid borders                      → --cal-grid-border, --cal-outer-border
- *
- * Edit the variables in the .calendar block below.
- */
-
-/* ============ CALENDAR COLOR VARIABLES (edit these to customize) ============ */
-.calendar {
-  /* Header row (SUN, MON, TUE...) */
-  --cal-header-bg: var(--booking-stone-100, #f5f5f4);
-  --cal-header-text: var(--booking-stone-600, #57534e);
-  --cal-header-border: var(--booking-stone-300, #d6d3d1);
-
-  /* Date range dropdown (e.g. "May 31 - Jun 13, 2026") */
-  --cal-range-text: var(--booking-stone-700, #44403c);
-  --cal-range-text-hover: var(--booking-stone-900, #1c1917);
-  --cal-range-bg-hover: var(--booking-stone-100, #f5f5f4);
-
-  /* Nav arrows (< >) */
-  --cal-nav-icon: var(--booking-stone-600, #57534e);
-  --cal-nav-bg-hover: var(--booking-stone-100, #f5f5f4);
-
-  /* Day cell - available (not selected) */
-  --cal-cell-available-bg: var(--booking-stone-50, #fafaf9);
-  --cal-cell-available-text: var(--booking-stone-900, #1c1917);
-  --cal-cell-available-bg-hover: var(--booking-stone-100, #f5f5f4);
-
-  /* Day cell - selected */
-  --cal-cell-selected-bg: var(--booking-emerald-600, #059669);
-  --cal-cell-selected-text: #fff;
-  --cal-cell-selected-bg-hover: var(--booking-emerald-700, #047857);
-
-  /* Day cell - disabled (no availability) */
-  --cal-cell-disabled-bg: var(--booking-stone-100, #f5f5f4);
-  --cal-cell-disabled-text: var(--booking-stone-400, #a8a29e);
-
-  /* Day number (e.g. "31" in top-left of cell) */
-  --cal-day-number-text: var(--booking-stone-900, #1c1917);
-  --cal-day-number-selected: #fff;
-
-  /* Time pill - available */
-  --cal-time-available-bg: var(--booking-emerald-600, #059669);
-  --cal-time-available-text: #fff;
-  --cal-time-available-selected: rgba(255, 255, 255, 0.3);
-
-  /* Time pill - low availability (< 5 spots) */
-  --cal-time-low-bg: #d97706;
-  --cal-time-low-text: #fff;
-
-  /* Time pill - sold out */
-  --cal-time-soldout-bg: #f87171;
-  --cal-time-soldout-text: #fff;
-
-  /* Sold out badge */
-  --cal-soldout-bg: #fef2f2;
-  --cal-soldout-text: #b91c1c;
-  --cal-soldout-border: #fecaca;
-  --cal-soldout-selected-bg: rgba(239, 68, 68, 0.3);
-  --cal-soldout-selected-border: rgba(248, 113, 113, 0.5);
-
-  /* Discount badge */
-  --cal-discount-bg: #fef2f2;
-  --cal-discount-text: #b91c1c;
-  --cal-discount-tag-bg: rgba(239, 68, 68, 0.9);
-  --cal-discount-tag-text: #fff;
-
-  /* Today ring */
-  --cal-today-ring: var(--booking-emerald-600, #059669);
-
-  /* Grid borders */
-  --cal-grid-border: var(--booking-stone-300, #d6d3d1);
-  --cal-outer-border: var(--booking-stone-300, #d6d3d1);
-}
-
-/* ============ LAYOUT (structure) ============ */
-.calendar {
-  width: 100%;
-  max-width: 36rem;
-  margin-left: auto;
-  margin-right: auto;
-  position: relative;
-}
-
-
-.calendarHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.375rem;
-}
-
-.calendarNav {
-  padding: 0.375rem;
-  border-radius: 0.5rem;
-  transition: background-color 0.2s;
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-.calendarNav:hover {
-  background-color: var(--cal-nav-bg-hover);
-}
-.calendarNav:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-.calendarNav:disabled:hover {
-  background-color: transparent;
-}
-.calendarNav:focus-visible {
-  outline: 2px solid var(--booking-emerald-600, #059669);
-  outline-offset: 2px;
-}
-
-.calendarNavIcon {
-  width: 1rem;
-  height: 1rem;
-  color: var(--cal-nav-icon);
-}
-
-.calendarRangeTrigger {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--cal-range-text);
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  transition: color 0.2s, background-color 0.2s;
-  cursor: pointer;
-  background: none;
-  border: none;
-}
-.calendarRangeTrigger:focus-visible {
-  outline: 2px solid var(--booking-emerald-600, #059669);
-  outline-offset: 2px;
-}
-.calendarRangeTrigger:hover {
-  color: var(--cal-range-text-hover);
-  background-color: var(--cal-range-bg-hover);
-}
-.calendarRangeTrigger svg {
-  color: inherit;
-}
-
-/* ============ DATE RANGE DROPDOWN PANEL ============ */
-/* Variables defined here so dropdown works when portaled to document.body (outside .calendar) */
-.calendarDropdown {
-  --cal-dropdown-bg: #fff;
-  --cal-dropdown-border: var(--booking-stone-300, #d6d3d1);
-  --cal-dropdown-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  --cal-dropdown-radius: 0.5rem;
-  --cal-dropdown-padding: 0.75rem;
-  --cal-dropdown-min-width: 280px;
-  --cal-dropdown-max-height: 400px;
-  --cal-dropdown-header-text: var(--booking-stone-700, #44403c);
-  --cal-dropdown-nav-bg-hover: var(--booking-stone-100, #f5f5f4);
-  --cal-dropdown-nav-icon: var(--booking-stone-600, #57534e);
-  --cal-dropdown-nav-disabled-opacity: 0.3;
-  --cal-dropdown-dow-text: var(--booking-stone-500, #78716c);
-  --cal-dropdown-dow-size: 10px;
-  --cal-dropdown-day-text: var(--booking-stone-900, #1c1917);
-  --cal-dropdown-day-text-muted: var(--booking-stone-300, #d6d3d1);
-  --cal-dropdown-day-available-bg: var(--booking-emerald-50, #ecfdf5);
-  --cal-dropdown-day-available-bg-hover: var(--booking-emerald-100, #d1fae5);
-  --cal-dropdown-day-selected-bg: var(--booking-emerald-600, #059669);
-  --cal-dropdown-day-selected-bg-hover: var(--booking-emerald-700, #047857);
-  --cal-dropdown-day-soldout-bg: #f87171;
-  --cal-dropdown-day-soldout-bg-hover: #ef4444;
-  --cal-dropdown-day-today-ring: var(--booking-emerald-500, #10b981);
-
-  position: fixed;
-  background-color: var(--cal-dropdown-bg);
-  border: 1px solid var(--cal-dropdown-border);
-  border-radius: var(--cal-dropdown-radius);
-  box-shadow: var(--cal-dropdown-shadow);
-  z-index: 9999;
-  padding: var(--cal-dropdown-padding);
-  min-width: var(--cal-dropdown-min-width);
-  max-height: var(--cal-dropdown-max-height);
-  overflow-y: auto;
-}
-
-.calendarDropdownGridWrapper {
-  position: relative;
-}
-
-.calendarDropdownLoading {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(4px);
-  border-radius: 0.25rem;
-  z-index: 1;
-}
-
-.calendarDropdownHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.5rem;
-}
-
-.calendarDropdownNav {
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-  background: none;
-  border: none;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.calendarDropdownNav:hover:not(:disabled) {
-  background-color: var(--cal-dropdown-nav-bg-hover);
-}
-
-.calendarDropdownNav:disabled {
-  opacity: var(--cal-dropdown-nav-disabled-opacity);
-  cursor: not-allowed;
-}
-
-.calendarDropdownNav:disabled:hover {
-  background-color: transparent;
-}
-
-.calendarDropdownNavIcon {
-  width: 1rem;
-  height: 1rem;
-  color: var(--cal-dropdown-nav-icon);
-}
-
-.calendarDropdownMonth {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--cal-dropdown-header-text);
-}
-
-.calendarDropdownDaysOfWeek {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
-.calendarDropdownDow {
-  font-size: var(--cal-dropdown-dow-size);
-  font-weight: 600;
-  color: var(--cal-dropdown-dow-text);
-  text-align: center;
-  padding: 0.25rem 0;
-}
-
-.calendarDropdownDays {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 0.25rem;
-}
-
-.calendarDropdownDay {
-  aspect-ratio: 1;
-  font-size: 0.75rem;
-  border-radius: 0.25rem;
-  transition: background-color 0.2s, color 0.2s;
-  border: none;
-  cursor: pointer;
-}
-
-.calendarDropdownDayMuted {
-  color: var(--cal-dropdown-day-text-muted);
-  cursor: not-allowed;
-}
-
-.calendarDropdownDayAvailable {
-  color: var(--cal-dropdown-day-text);
-  background-color: var(--cal-dropdown-day-available-bg);
-}
-
-.calendarDropdownDayAvailable:hover {
-  background-color: var(--cal-dropdown-day-available-bg-hover);
-}
-
-.calendarDropdownDaySelected {
-  background-color: var(--cal-dropdown-day-selected-bg);
-  color: #fff;
-}
-
-.calendarDropdownDaySelected:hover {
-  background-color: var(--cal-dropdown-day-selected-bg-hover);
-}
-
-.calendarDropdownDaySoldOut {
-  background-color: var(--cal-dropdown-day-soldout-bg);
-  color: #fff;
-  cursor: not-allowed;
-}
-
-.calendarDropdownDaySoldOutAdmin {
-  background-color: var(--cal-dropdown-day-soldout-bg);
-  color: #fff;
-  cursor: pointer;
-}
-
-.calendarDropdownDaySoldOutAdmin:hover {
-  background-color: var(--cal-dropdown-day-soldout-bg-hover);
-}
-
-.calendarDropdownDayToday {
-  box-shadow: inset 0 0 0 1px var(--cal-dropdown-day-today-ring);
-}
-
-.calendarGrid {
-  border: 1px solid var(--cal-outer-border);
-  border-radius: 0.5rem;
-  overflow: hidden;
-  background-color: #fff;
-}
-
-.calendarGridInner {
-  width: 100%;
-  min-width: 0;
-  padding-bottom: 0; /* No bottom padding - eliminates gap below calendar cells */
-}
-
-.calendarHeaderRow {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  background-color: var(--cal-header-bg);
-  border-bottom: 1px solid var(--cal-header-border);
-}
-
-.calendarHeaderCell {
-  padding: 0.25rem 0;
-  text-align: center;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--cal-header-text);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  border-right: 1px solid var(--cal-header-border);
-}
-.calendarHeaderCell:last-child {
-  border-right: none;
-}
-
-.calendarDaysGrid {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  align-items: stretch;
-}
-
-/* Mobile: rows size to content to eliminate bottom gap */
-@media (max-width: 639px) {
-  .calendarDaysGrid {
-    grid-auto-rows: minmax(min-content, max-content);
-  }
-}
-
-/* ============ DAY CELL (base) ============ */
-.calendarDayCell {
-  padding: 0 0.5rem;
-  transition: all 0.2s;
-  text-align: left;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 5.5rem; /* Desktop: enough room for time pills */
-  cursor: pointer;
-}
-
-/* Admin (showCapacity): extra line under each time pill — taller cells on sm+ only */
-@media (min-width: 640px) {
-  .calendar .calendarDayCell.calendarDayCellWithAdminCapacity {
-    min-height: 7.5rem;
-  }
-  .calendar .calendarDayCell.calendarDayCellWithAdminCapacity.calendarDayCellWithAdminCapacityTall {
-    min-height: 9rem;
-  }
-}
-
-/* Inner flex container - use CSS module to avoid Tailwind overrides */
-.calendarDayCellInner {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-}
-.calendar .calendarDayCell.calendarDayCellMobile .calendarDayCellInnerMobile,
-.calendar .calendarDayCell.calendarDayCellMobileTall .calendarDayCellInnerMobile {
-  justify-content: flex-start !important;
-  padding-top: 0.25rem;
-}
-
-/* Mobile: compact - content aligns to top, minimal bottom gap */
-.calendarDayCell.calendarDayCellMobile {
-  min-width: 0;
-  min-height: 3.75rem;
-  padding: 0.5rem 0.5rem 0.125rem;
-}
-.calendarDayCell.calendarDayCellMobileTall {
-  min-width: 0;
-  min-height: 4.25rem;
-  padding: 0.5rem 0.5rem 0.125rem;
-}
-
-.calendarDayCell:disabled {
-  cursor: not-allowed;
-}
-
-/* Day cell variants */
-.calendarDayCellAvailable {
-  background-color: var(--cal-cell-available-bg);
-  color: var(--cal-cell-available-text);
-}
-.calendarDayCellAvailable:hover {
-  background-color: var(--cal-cell-available-bg-hover);
-}
-
-/* Higher specificity to override .booking-flow-preflight button { background-color: transparent } */
-.calendar button.calendarDayCellSelected,
-.calendar .calendarDayCellSelected {
-  background-color: var(--cal-cell-selected-bg);
-  color: var(--cal-cell-selected-text);
-}
-.calendar button.calendarDayCellSelected:hover,
-.calendar .calendarDayCellSelected:hover {
-  background-color: var(--cal-cell-selected-bg-hover);
-}
-
-.calendarDayCellDisabled {
-  background-color: var(--cal-cell-disabled-bg);
-  color: var(--cal-cell-disabled-text);
-  cursor: not-allowed;
-}
-
-.calendarDayCellToday {
-  box-shadow: inset 0 0 0 1px var(--cal-today-ring);
-}
-
-/* Day number */
-.calendarDayNumber {
-  font-size: 10px;
-  font-weight: 500;
-  position: absolute;
-  top: 0.25rem;
-  left: 0.25rem;
-  color: var(--cal-day-number-text);
-}
-.calendarDayCellSelected .calendarDayNumber {
-  color: var(--cal-day-number-selected);
-}
-
-/* ============ BADGES & PILLS ============ */
-.calendarDiscountTag {
-  position: absolute;
-  top: 0.25rem;
-  right: 0.25rem;
-  display: flex;
-  align-items: center;
-  gap: 0.125rem;
-  background-color: var(--cal-discount-tag-bg);
-  color: var(--cal-discount-tag-text);
-  font-size: 9px;
-  font-weight: 700;
-  padding: 0.125rem 0.25rem;
-  border-radius: 0.25rem;
-}
-/* Mobile: position discount below day number (top-left) so it doesn't overlap */
-.calendarDiscountTagMobile {
-  top: 1rem;
-  left: 0.25rem;
-  right: auto;
-}
-
-.calendarSoldOutBadge {
-  font-size: 10px;
-  font-weight: 600;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--cal-soldout-bg);
-  color: var(--cal-soldout-text);
-  border: 1px solid var(--cal-soldout-border);
-}
-.calendarDayCellSelected .calendarSoldOutBadge {
-  background-color: var(--cal-soldout-selected-bg);
-  color: var(--cal-cell-selected-text);
-  border-color: var(--cal-soldout-selected-border);
-}
-
-.calendarTimePill {
-  font-size: 10px;
-  padding: 0.25rem 0.375rem;
-  border-radius: 0.25rem;
-  font-weight: 500;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0;
-  background-color: var(--cal-time-available-bg);
-  color: var(--cal-time-available-text);
-}
-.calendarDayCellSelected .calendarTimePill {
-  background-color: var(--cal-time-available-selected);
-  color: var(--cal-cell-selected-text);
-}
-
-.calendarTimePillLow {
-  background-color: var(--cal-time-low-bg);
-  color: var(--cal-time-low-text);
-}
-.calendarDayCellSelected .calendarTimePillLow {
-  background-color: rgba(217, 119, 6, 0.8);
-}
-
-.calendarTimePillSoldOut {
-  background-color: var(--cal-time-soldout-bg);
-  color: var(--cal-time-soldout-text);
-  opacity: 0.6;
-}
-
-.calendarDiscountBadge {
-  font-size: 9px;
-  font-weight: 600;
-  padding: 0.125rem 0.25rem;
-  border-radius: 0.125rem;
-  text-align: center;
-  background-color: var(--cal-discount-bg);
-  color: var(--cal-discount-text);
-}
-.calendarDayCellSelected .calendarDiscountBadge {
-  background-color: rgba(255, 255, 255, 0.2);
-  color: var(--cal-cell-selected-text);
-}
-
-/* Mobile: compact green dot + time list */
-.calendarMobileTimeList {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.0625rem;
-  width: 100%;
-}
-/* Mobile: push time slots lower when discount tag is present */
-.calendarMobileTimeListWithDiscount {
-  margin-top: 1.25rem;
-}
-
-.calendarMobileTimeDot {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 9px;
-  font-weight: 500;
-  color: inherit;
-  line-height: 1.2;
-}
-
-.calendarMobileTimeDotBullet {
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  background-color: var(--cal-time-available-bg);
-}
-.calendarDayCellSelected .calendarMobileTimeDotBullet {
-  background-color: rgba(255, 255, 255, 0.9);
-}
-
-.calendarMobileTimeDotSoldOut .calendarMobileTimeDotBullet {
-  background-color: var(--cal-time-soldout-bg);
-}
-
-.calendarMobileTimeDotLow .calendarMobileTimeDotBullet {
-  background-color: var(--cal-time-low-bg);
-}
-
-.calendarLowAvailabilityBadge {
-  font-size: 10px;
-  font-weight: 600;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  display: flex;
-  align-items: center;
-  gap: 0.125rem;
-  justify-content: center;
-  background-color: var(--cal-soldout-bg);
-  color: var(--cal-soldout-text);
-  border: 1px solid var(--cal-soldout-border);
-}
-.calendarDayCellSelected .calendarLowAvailabilityBadge {
-  background-color: var(--cal-soldout-selected-bg);
-  color: var(--cal-cell-selected-text);
-  border-color: var(--cal-soldout-selected-border);
-}