/* ==========================================================================
   Flatpickr theme overrides — compact, brand-themed calendar
   Matches Planner design tokens
   ========================================================================== */

/* --- Base calendar --- */
.flatpickr-calendar {
  z-index: 99999 !important;
  font-family: var(--font-outfit, "Outfit", sans-serif);
  font-size: 13px;
  border-radius: 12px;
  border: 1px solid var(--color-gray-200, #e0dfdc);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  background: #fff;
  width: 280px;
  padding: 4px;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  display: none;
}

/* --- Months header --- */
.flatpickr-months {
  padding: 4px 2px 0;
  height: 36px;
  align-items: center;
}

.flatpickr-months .flatpickr-month {
  height: 32px;
}

.flatpickr-current-month {
  font-size: 14px;
  font-weight: 600;
  padding-top: 4px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: 600;
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0 4px;
}

.flatpickr-current-month input.cur-year {
  font-weight: 600;
  font-size: 14px;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  height: 28px;
  width: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.15s;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: var(--color-gray-100, #eeedeb);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}

/* --- Weekdays row --- */
.flatpickr-weekdays {
  height: 28px;
  padding: 0 2px;
}

span.flatpickr-weekday {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-gray-400, #a5a29d);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* --- Day cells --- */
.flatpickr-days {
  width: 100% !important;
}

.dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  padding: 0 2px 4px;
}

.flatpickr-day {
  height: 34px;
  line-height: 34px;
  max-width: 36px;
  font-size: 13px;
  font-weight: 400;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  color: var(--color-gray-800, #2a2826);
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--color-brand-50, #fff1ec);
  border-color: var(--color-brand-50, #fff1ec);
  color: var(--color-brand-700, #a93b27);
}

.flatpickr-day.today {
  border-color: var(--color-brand-300, #ffa085);
  font-weight: 600;
}

.flatpickr-day.today:hover {
  background: var(--color-brand-500, #e8644b);
  border-color: var(--color-brand-500, #e8644b);
  color: #fff;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: var(--color-brand-500, #e8644b);
  border-color: var(--color-brand-500, #e8644b);
  color: #fff;
  font-weight: 600;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: var(--color-gray-300, #cccac6);
  background: transparent;
  border-color: transparent;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--color-gray-300, #cccac6);
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  color: var(--color-gray-500, #7a7772);
  background: var(--color-gray-50, #f7f6f4);
  border-color: var(--color-gray-50, #f7f6f4);
}

/* --- Alt input (visible formatted input) --- */
.flatpickr-alt-input {
  cursor: pointer;
}

/* =============================================
   DARK MODE
   ============================================= */
.dark .flatpickr-calendar {
  background: var(--color-gray-800, #2a2826);
  border-color: var(--color-gray-700, #413f3b);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25);
}

.dark .flatpickr-months,
.dark .flatpickr-weekdays,
.dark span.flatpickr-weekday {
  background: transparent;
  color: var(--color-gray-500, #7a7772);
}

.dark .flatpickr-months .flatpickr-month {
  background: transparent;
  color: var(--color-gray-200, #e0dfdc);
}

.dark .flatpickr-current-month .flatpickr-monthDropdown-months,
.dark .flatpickr-current-month input.cur-year {
  color: var(--color-gray-200, #e0dfdc);
}

.dark .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: var(--color-gray-700, #413f3b);
}

.dark .flatpickr-months .flatpickr-prev-month,
.dark .flatpickr-months .flatpickr-next-month {
  color: var(--color-gray-400, #a5a29d);
  fill: var(--color-gray-400, #a5a29d);
}

.dark .flatpickr-months .flatpickr-prev-month:hover,
.dark .flatpickr-months .flatpickr-next-month:hover {
  color: var(--color-gray-200, #e0dfdc);
  fill: var(--color-gray-200, #e0dfdc);
  background: var(--color-gray-700, #413f3b);
}

.dark .flatpickr-day {
  color: var(--color-gray-200, #e0dfdc);
}

.dark .flatpickr-day:hover,
.dark .flatpickr-day:focus {
  background: var(--color-gray-700, #413f3b);
  border-color: var(--color-gray-700, #413f3b);
  color: var(--color-brand-300, #ffa085);
}

.dark .flatpickr-day.today {
  border-color: var(--color-brand-500, #e8644b);
}

.dark .flatpickr-day.today:hover {
  background: var(--color-brand-500, #e8644b);
  border-color: var(--color-brand-500, #e8644b);
  color: #fff;
}

.dark .flatpickr-day.selected,
.dark .flatpickr-day.selected:hover {
  background: var(--color-brand-500, #e8644b);
  border-color: var(--color-brand-500, #e8644b);
  color: #fff;
}

.dark .flatpickr-day.flatpickr-disabled,
.dark .flatpickr-day.flatpickr-disabled:hover {
  color: var(--color-gray-600, #5d5b56);
  background: transparent;
  border-color: transparent;
}

.dark .flatpickr-day.prevMonthDay,
.dark .flatpickr-day.nextMonthDay {
  color: var(--color-gray-600, #5d5b56);
}

.dark .flatpickr-day.prevMonthDay:hover,
.dark .flatpickr-day.nextMonthDay:hover {
  color: var(--color-gray-400, #a5a29d);
  background: var(--color-gray-700, #413f3b);
  border-color: var(--color-gray-700, #413f3b);
}

/* --- Month dropdown in dark mode --- */
.dark .flatpickr-monthDropdown-months option {
  background: var(--color-gray-800, #2a2826);
  color: var(--color-gray-200, #e0dfdc);
}