/* Air Datepicker themed to match the app: the palette's accent, rounded cards, and
   larger touch targets in the mobile (modal) mode. Colors come from the app's
   palette variables (with light fallbacks), so dark mode applies here too. */
:root .air-datepicker {
  --adp-background-color: var(--color-white, #fff);
  --adp-background-color-hover: var(--color-gray-100, #f3f4f6);
  --adp-background-color-active: var(--color-gray-200, #e5e7eb);
  --adp-border-color-inner: var(--color-gray-200, #e5e7eb);
  --adp-color-secondary: var(--color-gray-500, #6b7280);
  --adp-color-other-month: var(--color-gray-300, #d1d5db);
  --adp-color-other-month-hover: var(--color-gray-400, #9ca3af);
  --adp-color-disabled: var(--color-gray-400, #9ca3af);
  --adp-time-track-color: var(--color-gray-300, #d1d5db);
  --adp-accent-color: var(--color-accent, #2f6b5f);
  --adp-color: var(--color-gray-800, #1f2937);
  --adp-color-current-date: var(--color-accent, #2f6b5f);
  --adp-day-name-color: var(--color-gray-500, #6b7280);
  --adp-cell-background-color-selected: var(--color-accent, #2f6b5f);
  --adp-cell-background-color-selected-hover: var(--color-accent-hover, #3b7d70);
  --adp-background-color-selected-other-month: var(--color-accent-soft, #e2eeea);
  --adp-background-color-selected-other-month-focused: var(--color-accent-soft, #e2eeea);
  --adp-border-color: rgba(255, 255, 255, 0.4);
  --adp-border-radius: 16px;
  --adp-cell-border-radius: 12px;
  --adp-btn-border-radius: 12px;
  --adp-padding: 8px;
  --adp-time-thumb-size: 16px;
  --adp-time-track-height: 2px;
  --adp-mobile-width: min(360px, calc(100vw - 32px));
  --adp-mobile-nav-height: 48px;
  --adp-mobile-day-cell-height: 44px;
  --adp-mobile-month-cell-height: 56px;
  --adp-mobile-year-cell-height: 64px;
}

:root .air-datepicker.-is-mobile- {
  --adp-time-thumb-size: 24px;
  --adp-btn-height: 44px;
}

:root .air-datepicker-time--row input[type=range]::-webkit-slider-thumb {
  width: var(--adp-time-thumb-size);
  height: var(--adp-time-thumb-size);
  border-radius: 9999px;
  border-color: var(--adp-accent-color);
  background: var(--adp-accent-color);
}

:root .air-datepicker-time--row input[type=range]::-moz-range-thumb {
  width: var(--adp-time-thumb-size);
  height: var(--adp-time-thumb-size);
  border-radius: 9999px;
  border-color: var(--adp-accent-color);
  background: var(--adp-accent-color);
}

:root .air-datepicker--pointer:after {
  background: var(--adp-background-color);
}

/* The library writes white text on the selected day; in dark mode the accent is light, so use the
   palette's on-accent color instead. */
:root .air-datepicker-cell.-selected-,
:root .air-datepicker-cell.-selected-.-current- {
  color: var(--color-on-accent, #fff);
}

:root .-selected-.air-datepicker-cell.-day-.-other-month- {
  color: var(--color-accent, #2f6b5f);
}