/*
 * The admin's date picker as a flyout under its field.
 *
 * Django's calendar is a <dialog> that Unfold pins to the middle of the
 * screen behind a blurred backdrop. date_picker_flyout.js puts the dialog's
 * place under its field in the two custom properties, and the backdrop goes
 * clear, so the page stays in view. The !important matches Unfold's own on
 * the same properties, which these override; the fallbacks keep the dialog
 * on the screen should the script not have run.
 */
dialog.calendarbox {
  top: var(--date-picker-flyout-top, 50%) !important;
  left: var(--date-picker-flyout-left, 50%) !important;
  right: auto;
  bottom: auto;
  margin: 0;
  translate: none;
}

dialog.calendarbox::backdrop {
  background: transparent;
  backdrop-filter: none;
}

/* Unfold shows its page-wide overlay (a blur and a dark wash) while the
   dialog is open; a flyout keeps the page in view. */
body:has(dialog.calendarbox[open]) #modal-overlay {
  display: none !important;
}