/* flatpickr ships light-only CSS. Map its calendar to daisyUI v5 theme tokens
   (--color-base-*, --color-primary*) so it follows the app's light/dark toggle
   automatically — the tokens recolor when theme_toggle.js flips data-theme. */

.flatpickr-calendar {
  background: var(--color-base-100);
  color: var(--color-base-content);
  border: 1px solid var(--color-base-300);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.2);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
  border-bottom-color: var(--color-base-100);
}
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  border-top-color: var(--color-base-100);
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month input.cur-year {
  color: var(--color-base-content);
  fill: var(--color-base-content);
}
.flatpickr-monthDropdown-months {
  background: var(--color-base-100);
  color: var(--color-base-content);
}
/* Shrink the header — flatpickr defaults the month/year to 135%. The dropdown
   and year input inherit this size, so setting it here covers both. */
.flatpickr-current-month {
  font-size: 1rem;
}

/* flatpickr's own rule is `span.flatpickr-weekday` (element+class), which
   out-specifies a bare `.flatpickr-weekday` — so match that specificity here or
   the override silently loses to flatpickr's default dark color. Full
   base-content = same brightness as the month/day labels, legible in both
   themes. */
span.flatpickr-weekday {
  color: var(--color-base-content);
  opacity: 0.55;
}

.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  color: var(--color-base-content);
  fill: var(--color-base-content);
  opacity: 0.55;
}

/* Year up/down spinner (numInputWrapper). flatpickr builds the ▲▼ from CSS
   border colors (dark, so they vanish on a dark background) — recolor the
   triangles to base-content and theme the hover/divider. NOTE: this is styling
   only. The arrows can only actually change the year when the allowed range
   spans multiple years; a single-year min/max (e.g. an event within one year)
   makes flatpickr disable year navigation regardless of styling. */
.numInputWrapper span {
  border-color: var(--color-base-300);
}
.numInputWrapper:hover {
  background: var(--color-base-200);
}
.numInputWrapper span.arrowUp::after {
  border-bottom-color: var(--color-base-content);
}
.numInputWrapper span.arrowDown::after {
  border-top-color: var(--color-base-content);
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: var(--color-base-content);
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: var(--color-primary);
}

.flatpickr-day {
  color: var(--color-base-content);
  border-color: transparent;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--color-base-200);
  border-color: var(--color-base-200);
}
.flatpickr-day.today {
  border-color: var(--color-primary);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-content);
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--color-base-content);
  opacity: 0.95;
}
/* flatpickr's default `.flatpickr-day.prevMonthDay:hover` (specificity 0,3,0)
   out-specifies the plain `.flatpickr-day:hover` above (0,2,0), so adjacent-month
   days keep flatpickr's bright light-gray hover. Match that specificity to reuse
   the themed hover, so hovering any day looks identical regardless of month. */
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day.nextMonthDay:focus {
  background: var(--color-base-200);
  border-color: var(--color-base-200);
}

.flatpickr-day.flatpickr-disabled {
  color: var(--color-base-content);
  opacity: 0.35;
}



/* Time picker (24h) */
.flatpickr-calendar .flatpickr-time {
  border-top: 1px solid var(--color-base-300);
}
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  color: var(--color-base-content);
}
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
  background: var(--color-base-200);
}

/* Affordance icons inside the input boxes. Keyed on [data-flatpickr] alone
   (NOT the .flatpickr-input class flatpickr adds on init) so the icon shows
   regardless of enhancement timing — in particular it survives the htmx error
   re-render, where the re-attach can lag and the .flatpickr-input class isn't
   reliably present. Safe now that fields always render type="text" (no native
   picker icon to double up with). Icon color is a mid-gray (slate-400) that
   reads on both light and dark input backgrounds; inputs can't take
   ::before/::after, so it's a background-image. */
input[data-flatpickr],
input[data-flatpickr-time],
input[data-flatpickr-time-12h] {
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.85rem 0.85rem;
  padding-right: 2rem;
}
input[data-flatpickr] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
}
input[data-flatpickr-time],
input[data-flatpickr-time-12h] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}
/* Smaller placeholder in the (narrower) time field so "HH:MM" doesn't crowd. */
input[data-flatpickr-time]::placeholder,
input[data-flatpickr-time-12h]::placeholder {
  font-size: 0.75rem;
}