/* Base Flatpickr theme.
 *
 * This overrides flatpickr's structure, not just its colours. The stock
 * stylesheet sizes the calendar with fixed pixels (a 307.875px day container,
 * 39px cells, separate widths on three nested wrappers), so a theme that only
 * repaints it stays cramped and clips the moment anything changes. The weekday
 * and day rows are laid out with grid here, which removes that maths and lets
 * the card size itself.
 */

/* ---- Card ---- */

.flatpickr-calendar {
  width: auto;
  min-width: 328px;
  max-width: none;
  padding: 10px;
  background: var(--card-bg, #1e293b);
  color: var(--text-color, #f8fafc);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

body.theme-light .flatpickr-calendar {
  background: #ffffff;
  color: var(--text-color, #333333);
  border-color: var(--border-color, #e2e8f0);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
}

/* The stock pointer is drawn with borders that ignore the card radius. */
.flatpickr-calendar:before,
.flatpickr-calendar:after {
  display: none;
}

/* Three nested wrappers each carry their own width; all defer to the card so
   the grids below can do the sizing. */
.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar .flatpickr-rContainer,
.flatpickr-calendar .flatpickr-days,
.flatpickr-calendar .dayContainer {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar .flatpickr-days {
  overflow: visible;
  border: none;
}

/* ---- Header ---- */

.flatpickr-calendar .flatpickr-months {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  height: 40px;
  margin-bottom: 4px;
  background: transparent;
}

.flatpickr-calendar .flatpickr-month {
  height: auto;
  color: inherit;
  background: transparent;
}

.flatpickr-calendar .flatpickr-current-month {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: auto;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
}

/* The month select and the year input are two different native controls sitting
   side by side; without this they read as two fields rather than one title. */
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month input.cur-year {
  padding: 4px 6px;
  font-size: 15px;
  font-weight: 700;
  color: inherit;
  background: transparent;
  border: none !important;
  border-radius: 8px;
  box-shadow: none !important;
  background-image: none !important;
  appearance: none;
  cursor: pointer;
}

.flatpickr-calendar
  .flatpickr-current-month
  .flatpickr-monthDropdown-months:hover,
.flatpickr-calendar .flatpickr-current-month input.cur-year:hover {
  background: color-mix(in srgb, var(--primary-blue) 10%, transparent);
}

/* A select paints its own options panel directly under the control, so a tinted
   background or a coloured ring on the control reads as a band cut across the top
   of that panel. The year input keeps a ring because it has no panel. */
.flatpickr-calendar .flatpickr-current-month input.cur-year:focus {
  outline: 2px solid color-mix(in srgb, var(--primary-blue) 45%, transparent);
  outline-offset: -2px;
}

.flatpickr-calendar
  .flatpickr-current-month
  .flatpickr-monthDropdown-months:focus,
.flatpickr-calendar
  .flatpickr-current-month
  .flatpickr-monthDropdown-months:focus-visible,
.flatpickr-calendar
  .flatpickr-current-month
  .flatpickr-monthDropdown-months:active {
  outline: none;
  background: transparent !important;
}

/* The year's spinner arrows overlap the digits at this size. */
.flatpickr-calendar .numInputWrapper span {
  display: none;
}

/* The year input inherits a global field style (a tinted background) and stretches
   to fill its wrapper, which is what turned the title into two grey boxes. Both
   need !important: the global rule targets the element type, so it is not weaker
   than this one, only earlier. */
.flatpickr-calendar .numInputWrapper,
.flatpickr-calendar .flatpickr-current-month input.cur-year {
  width: auto !important;
  max-width: 68px;
  background: transparent !important;
  text-align: center;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
  width: auto !important;
  min-width: 0;
  background: transparent !important;
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--muted-text, rgba(148, 163, 184, 0.9));
  border-radius: 10px;
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover {
  color: var(--primary-blue);
  background: color-mix(in srgb, var(--primary-blue) 10%, transparent);
}

/* ---- Weekday row ---- */

.flatpickr-calendar .flatpickr-weekdays {
  height: auto;
  margin-bottom: 2px;
  background: transparent;
}

.flatpickr-calendar .flatpickr-weekdaycontainer {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
}

.flatpickr-calendar .flatpickr-weekday {
  width: auto;
  height: 26px;
  line-height: 26px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted-text, rgba(148, 163, 184, 0.9));
  background: transparent;
}

/* ---- Days ---- */

.flatpickr-calendar .dayContainer {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 0;
  justify-content: initial;
}

.flatpickr-calendar .flatpickr-day {
  width: auto;
  max-width: none;
  height: 38px;
  line-height: 38px;
  margin: 0;
  flex-basis: auto;
  font-size: 14px;
  color: inherit;
  border: none;
  border-radius: 10px;
}

.flatpickr-calendar .flatpickr-day:hover {
  background: color-mix(in srgb, var(--primary-blue) 14%, transparent);
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange {
  font-weight: 700;
  color: #ffffff;
  background: var(--primary-blue);
  box-shadow: 0 3px 10px -3px var(--primary-blue);
}

/* Today competing with the selection is the usual flatpickr complaint: both draw
   a full accent treatment. A dot marks it, and steps aside once it is selected. */
.flatpickr-calendar .flatpickr-day.today:not(.selected) {
  position: relative;
  border: none;
}

.flatpickr-calendar .flatpickr-day.today:not(.selected)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--primary-blue);
}

.flatpickr-calendar .flatpickr-day.inRange {
  background: color-mix(in srgb, var(--primary-blue) 16%, transparent);
  box-shadow: none;
}

.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay {
  color: var(--muted-text, rgba(148, 163, 184, 0.75));
  opacity: 0.55;
}

.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover {
  color: var(--muted-text, rgba(148, 163, 184, 0.6));
  background: transparent;
  opacity: 0.4;
}

.flatpickr-calendar .flatpickr-day:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: -2px;
}

/* ---- Time picker, when a caller enables it ---- */

.flatpickr-calendar .flatpickr-time input,
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm,
.flatpickr-calendar .flatpickr-time .flatpickr-time-separator {
  color: inherit;
  background: transparent;
}

.flatpickr-calendar .flatpickr-time input:hover,
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm:hover {
  background: color-mix(in srgb, var(--primary-blue) 10%, transparent);
}