/* Override UA popover defaults when flatpickr calendar is promoted to top layer.
   The calendar stays inside the dialog DOM (not inert) but uses showPopover()
   to escape overflow clipping. See flatpickr_controller.js */
.flatpickr-calendar[popover] {
  position: fixed !important;
  inset: auto;
  margin: 0;
}

/* Show red border on input-group when input is invalid */
.input-group:has(input[aria-invalid="true"]) {
  border-color: var(--color-red);
}

/* Dark mode overrides for flatpickr */
html[data-theme="dark"] {
  .flatpickr-calendar {
    background: var(--color-surface);
    border-color: var(--color-gray);
    box-shadow: 0 0.4em 2em oklch(var(--lch-always-black) / 0.5);
  }

  .flatpickr-months .flatpickr-month,
  .flatpickr-current-month .flatpickr-monthDropdown-months,
  .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month,
  span.flatpickr-weekday {
    background: var(--color-surface);
    color: var(--color-ink);
  }

  .flatpickr-months .flatpickr-prev-month svg,
  .flatpickr-months .flatpickr-next-month svg { fill: var(--color-ink); }

  .flatpickr-current-month input.cur-year { color: var(--color-ink); }

  .flatpickr-day { color: var(--color-ink); }
  .flatpickr-day.prevMonthDay,
  .flatpickr-day.nextMonthDay { color: var(--color-ink-muted); }
  .flatpickr-day:hover { background: var(--color-gray-light); border-color: var(--color-gray-light); }
  .flatpickr-day.selected { background: var(--color-blue); border-color: var(--color-blue); color: var(--color-always-white); }
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    .flatpickr-calendar {
      background: var(--color-surface);
      border-color: var(--color-gray);
      box-shadow: 0 0.4em 2em oklch(var(--lch-always-black) / 0.5);
    }

    .flatpickr-months .flatpickr-month,
    .flatpickr-current-month .flatpickr-monthDropdown-months,
    .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month,
    span.flatpickr-weekday {
      background: var(--color-surface);
      color: var(--color-ink);
    }

    .flatpickr-months .flatpickr-prev-month svg,
    .flatpickr-months .flatpickr-next-month svg { fill: var(--color-ink); }

    .flatpickr-current-month input.cur-year { color: var(--color-ink); }

    .flatpickr-day { color: var(--color-ink); }
    .flatpickr-day.prevMonthDay,
    .flatpickr-day.nextMonthDay { color: var(--color-ink-muted); }
    .flatpickr-day:hover { background: var(--color-gray-light); border-color: var(--color-gray-light); }
    .flatpickr-day.selected { background: var(--color-blue); border-color: var(--color-blue); color: var(--color-always-white); }
  }
}