/*
 * Calendar touch scroll ownership
 * Keep one horizontal scroller for the month grid at every viewport size.
 * iPad Safari can otherwise pan the older overflow-enabled panel body during
 * the gesture, then rubber-band it back when the finger is released.
 */
#app .premium-app .ironflow-calendar-page
  .calendar-shell.calendar-mode-month
  .calendar-month-panel > .body {
  overflow-x: hidden !important;
}

#app .premium-app .ironflow-calendar-page .calendar-month-scroll-v4 {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  touch-action: pan-x pan-y !important;
  -webkit-overflow-scrolling: touch;
}

#app .premium-app .ironflow-calendar-page
  .calendar-shell.calendar-mode-month
  .month-calendar-grid-v4 {
  overflow: visible !important;
  overscroll-behavior: auto !important;
  touch-action: auto !important;
}

@media (max-width: 760px) {
  html:has(#app .calendar-month-scroll-v4),
  body:has(#app .calendar-month-scroll-v4),
  #app:has(.calendar-month-scroll-v4),
  #app .premium-app:has(.calendar-month-scroll-v4),
  #app .premium-app:has(.calendar-month-scroll-v4) > main,
  #app .premium-app:has(.calendar-month-scroll-v4) > main > .content {
    touch-action: pan-x pan-y !important;
  }

  #app .premium-app:has(.calendar-month-scroll-v4) > main > .content {
    padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)) !important;
    overscroll-behavior-y: auto !important;
  }

  #app .premium-app .ironflow-calendar-page .calendar-month-scroll-v4 {
    overscroll-behavior-y: auto !important;
  }

  #app .premium-app .ironflow-calendar-page
    .calendar-shell.calendar-mode-month
    .month-calendar-grid-v4
    :is(.month-day, .month-events) {
    overscroll-behavior: auto !important;
  }
}