@ticketboothapp/booking 0.1.11 → 0.1.12

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

@@ -0,0 +1,616 @@
+/**
+ * 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);
+}