/* ============================================================================
   Flatpickr — Tabler theme bridge
   Maps Flatpickr's calendar/time surfaces onto Tabler CSS variables so the
   pickers match Tabler and follow light/dark automatically via data-bs-theme
   (the --tblr-* vars flip with the theme). Loaded after flatpickr.min.css.
   ============================================================================ */

/* Input-group toggle button (calendar/clock icon) — soften the strong
   btn-outline-secondary so it reads as a quiet addon that matches the field
   border instead of competing with it. */
.flatpickr-wrap .btn {
  border-color: var(--tblr-border-color, #dadfe5);
  color: var(--tblr-secondary, #667382);
  background-color: transparent;
}
.flatpickr-wrap .btn:hover,
.flatpickr-wrap .btn:focus,
.flatpickr-wrap .btn:active {
  background-color: transparent;
  border-color: var(--tblr-border-color, #dadfe5);
  color: var(--tblr-primary, #066fd1);
  box-shadow: none;
}

/* Popup container */
.flatpickr-calendar {
  background: var(--tblr-bg-surface, #fff);
  color: var(--tblr-body-color, #1d273b);
  border: 1px solid var(--tblr-border-color, #dadfe5);
  border-radius: var(--tblr-border-radius, 6px);
  box-shadow: var(--tblr-box-shadow-dropdown, 0 1rem 3rem rgba(0,0,0,.175));
  font-size: .875rem;
}
/* pointer arrow */
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowBottom:before { border-bottom-color: var(--tblr-border-color, #dadfe5); border-top-color: var(--tblr-border-color, #dadfe5); }
.flatpickr-calendar.arrowTop:after { border-bottom-color: var(--tblr-bg-surface, #fff); }
.flatpickr-calendar.arrowBottom:after { border-top-color: var(--tblr-bg-surface, #fff); }

/* Month header */
.flatpickr-months .flatpickr-month,
.flatpickr-current-month input.cur-year,
.flatpickr-monthDropdown-months {
  color: var(--tblr-body-color, #1d273b);
  fill: var(--tblr-body-color, #1d273b);
  background: transparent;
}
.flatpickr-weekday { color: var(--tblr-secondary, #667382); font-weight: 600; }

/* Header — normalize Flatpickr's oversized month/year controls to a Tabler size.
   The month picker is a native <select> (kept for quick month jumps); shrinking its
   font also shrinks the OS option list so it no longer looks out of harmony. */
.flatpickr-current-month { font-size: .9375rem; font-weight: 600; padding-top: .4rem; }
.flatpickr-current-month input.cur-year { font-size: .9375rem; font-weight: 600; }
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-size: .9375rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--tblr-body-color, #1d273b);
  background: transparent;
  border-radius: var(--tblr-border-radius, 6px);
  padding: .1rem .25rem;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: var(--tblr-active-bg, rgba(6,111,209,.06));
}
.flatpickr-monthDropdown-month {
  font-size: .875rem;
  background: var(--tblr-bg-surface, #fff);
  color: var(--tblr-body-color, #1d273b);
}

/* Prev/next arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { fill: var(--tblr-secondary, #667382); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--tblr-primary, #066fd1); }

/* Day cells */
.flatpickr-day {
  color: var(--tblr-body-color, #1d273b);
  border-radius: var(--tblr-border-radius, 6px);
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--tblr-active-bg, rgba(6,111,209,.06));
  border-color: transparent;
}
.flatpickr-day.today { border-color: var(--tblr-primary, #066fd1); }
.flatpickr-day.today:hover { background: var(--tblr-primary, #066fd1); color: #fff; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: var(--tblr-primary, #066fd1);
  border-color: var(--tblr-primary, #066fd1);
  color: #fff;
}
.flatpickr-day.inRange {
  background: var(--tblr-active-bg, rgba(6,111,209,.12));
  border-color: transparent;
  box-shadow: none;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--tblr-secondary, #97a2b0); opacity: .5; }

/* Time inputs (time + datetime modes) */
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  color: var(--tblr-body-color, #1d273b);
  background: transparent;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus { background: var(--tblr-active-bg, rgba(6,111,209,.06)); }
.flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: var(--tblr-secondary, #667382); }
.flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: var(--tblr-secondary, #667382); }
.flatpickr-calendar.hasTime .flatpickr-time { border-top: 1px solid var(--tblr-border-color, #dadfe5); }

/* Dark refinements — the vars above already flip, these cover Flatpickr's
   hard-coded greys on the month dropdown / time separators. */
[data-bs-theme="dark"] .flatpickr-calendar { box-shadow: 0 1rem 3rem rgba(0,0,0,.5); }
[data-bs-theme="dark"] .flatpickr-monthDropdown-month { background: var(--tblr-bg-surface, #1a2234); }
[data-bs-theme="dark"] .flatpickr-time input,
[data-bs-theme="dark"] .flatpickr-time .flatpickr-am-pm { color: var(--tblr-body-color, #c9d1da); }