/* Narrow-viewport sizing for the vendored Air Datepicker.
 *
 * Loaded AFTER air-datepicker.css (layouts/application.html.erb) on purpose: several of
 * these rules tie the vendored ones on specificity and win on source order, and keeping
 * them out of that file leaves the vendored artifact byte-identical to the upstream build
 * so it can be re-vendored without merging local edits back in.
 *
 * The datetime_picker controller passes isMobile when the viewport is <= 30rem, which is
 * what puts `-is-mobile-` on the popup: a centered fixed panel with a dismiss overlay
 * instead of the 246px dropdown. Upstream's mobile metrics stop at 38px cells / 40px nav
 * and a 12px slider thumb, all under the ~44px minimum tap target, so this raises them.
 *
 * EVERY selector below is scoped to `.air-datepicker.-is-mobile-`, so nothing here can
 * reach the desktop popup or any other control on the page.
 */

.air-datepicker.-is-mobile- {
  /* Consumed by the vendored `-is-mobile-` rule, which maps them onto the generic
     --adp-* metrics. 7 columns of >= 44px plus padding still fit a 375px viewport. */
  --adp-mobile-width: min(22rem, calc(100vw - 1.5rem));
  --adp-mobile-day-cell-height: 44px;
  --adp-mobile-month-cell-height: 56px;
  --adp-mobile-nav-height: 48px;
  /* Upstream's --adp-mobile-year-cell-height is already 64px, so it is left alone. */
  --adp-padding: 8px;
  /* Drives both the thumb box below and the vendored negative margin that centers it. */
  --adp-time-thumb-size: 28px;

  /* Scroll the panel rather than push the timepicker off screen when the viewport is too
     short for it (~490px and under, measured). NOT for phones: a phone in any orientation
     matches the controller's `(hover: none) and (pointer: coarse)` bail-out and never builds
     this widget at all. The population that reaches this is a FINE pointer in a small window
     — a desktop window dragged under 30rem wide, devtools, or a mouse-attached tablet. */
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

/* Fixed 17px track row leaves a 12px thumb floating in a ~17px target. */
.air-datepicker.-is-mobile- .air-datepicker-time--row {
  height: 44px;
}

/* Thumb dimensions are hardcoded upstream (not var-driven), so each vendor-prefixed
   pseudo-element has to be restated to grow the drag target. */
.air-datepicker.-is-mobile- .air-datepicker-time--row input[type="range"]::-webkit-slider-thumb {
  width: var(--adp-time-thumb-size);
  height: var(--adp-time-thumb-size);
  border-radius: 50%;
}
.air-datepicker.-is-mobile- .air-datepicker-time--row input[type="range"]::-moz-range-thumb {
  width: var(--adp-time-thumb-size);
  height: var(--adp-time-thumb-size);
  border-radius: 50%;
}