/* Dark skin for flatpickr, matching the dashboard's own zinc/brand palette
   (design tokens from app.css) instead of flatpickr's stock dark.css theme,
   which uses an unrelated grey palette. Loaded after flatpickr.min.css. */

.flatpickr-calendar {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-1);
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.6);
  font-family: inherit;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--color-border-1); }

.flatpickr-months { padding: 0.5rem 0.25rem 0; }
.flatpickr-months .flatpickr-month {
  background: transparent;
  color: var(--zinc-100);
  fill: var(--zinc-100);
  height: 2.25rem;
}
.flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
/* `background: transparent` here used to just show whatever's behind — fine
   over the calendar's own dark background, except this <select> is a real
   native form control, and some browsers paint native select backgrounds
   opaque regardless of an ancestor's color, ignoring color-scheme in that
   case. Explicit dark background + enough width so "Сентябрь" (the longest
   Russian month name) doesn't clip — reported live as "July isn't fully
   visible". */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: var(--color-black);
  color: var(--zinc-100);
  border: 1px solid transparent;
  border-radius: 0.35rem;
  padding: 0.15rem 0.3rem;
  min-width: 7rem;
  text-align: center;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: var(--color-surface-2); }
.flatpickr-current-month input.cur-year {
  color: var(--zinc-100);
  background: var(--color-black);
  min-width: 4.5rem;
  border-radius: 0.35rem;
  padding: 0.15rem 0.3rem;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { fill: var(--color-text-2); }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { fill: var(--brand-400); }

span.flatpickr-weekday {
  background: transparent;
  color: var(--color-text-2);
  font-weight: 500;
}

.flatpickr-day { color: var(--zinc-200); }
.flatpickr-day.today { border-color: var(--brand-500); }
.flatpickr-day.today:hover, .flatpickr-day.today:focus { background: var(--brand-500); color: #fff; }
.flatpickr-day:hover { background: var(--color-surface-2); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay { color: var(--zinc-600); }

.flatpickr-day.inRange {
  background: rgba(139, 92, 246, 0.16);
  border-color: transparent;
  box-shadow: -5px 0 0 rgba(139, 92, 246, 0.16), 5px 0 0 rgba(139, 92, 246, 0.16);
}

.flatpickr-time { border-top: 1px solid var(--color-border-1); }
.flatpickr-time input { color: var(--zinc-100); background: transparent; }
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm { color: var(--zinc-100); }
.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover { background: var(--color-surface-2); }

/* alt input (the human-readable dd.mm.yyyy field) reuses the app's own input
   styling — nothing to override here, this file only skins the popup panel. */