/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Premium Design System — CSS Variables & Typography */
@import url("/assets/design-system-b0904582.css");

/* Premium UI Components — Buttons, Inputs, Cards, Badges */
@import url("/assets/components-572e43f3.css");

/* Premium Animations — Keyframes, Transitions, Micro-interactions */
@import url("/assets/animations-a52c16cd.css");

/* Flatpickr Date Picker */
@import url("https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css");

/* =========================================
   FLATPICKR — ОПЫТ-025
   Календарь в стиле Toshl с дизайном приложения
   ========================================= */

/* Calendar Container - премиальный дизайн */
/* ИСПРАВЛЕНИЕ-006: z-index для корректного отображения поверх модалей и панелей */
.flatpickr-calendar {
  z-index: 99999 !important;
  /* margin-top: 8px !important; — убрано, конфликтует с position: fixed (ИСПРАВЛЕНИЕ-006) */
  padding: 16px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px !important;
  border: 1px solid var(--color-neutral-200) !important;
  min-width: 320px !important;
  background: var(--color-white) !important;
}

/* Navigation Arrows */
.flatpickr-months {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 4px !important;
  margin-bottom: 8px !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  fill: var(--color-neutral-500) !important;
  border-radius: 50% !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  fill: var(--color-emerald-700) !important;
  background: var(--color-emerald-50) !important;
}

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

/* Month/Year Container — центрирование */
.flatpickr-current-month {
  padding: 8px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: auto !important;
  position: relative !important;
  left: 0 !important;
  flex: 1 !important;
  height: auto !important;
}

/* Wrapper для месяца — центрирует контейнер */
.flatpickr-month {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

/* Month Dropdown */
.flatpickr-current-month select.flatpickr-monthDropdown-months {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: transparent !important;
  border: none !important;
  padding: 6px 8px !important;
  margin: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--color-neutral-900) !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  width: auto !important;
  min-width: 90px !important;
  text-align: center !important;
  transition: background 0.15s ease !important;
}

.flatpickr-current-month select.flatpickr-monthDropdown-months:hover {
  background-color: var(--color-neutral-100) !important;
}

/* Month Dropdown Options */
.flatpickr-monthDropdown-months option {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  color: var(--color-neutral-900) !important;
  background: white !important;
}

.flatpickr-monthDropdown-months option:checked {
  background-color: var(--color-emerald-100) !important;
  color: var(--color-emerald-700) !important;
  font-weight: 600 !important;
}

/* Year Input/Select */
.flatpickr-current-month input.cur-year,
.flatpickr-current-month select.cur-year {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: transparent !important;
  border: none !important;
  padding: 6px 8px !important;
  margin: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--color-neutral-900) !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  width: auto !important;
  min-width: 70px !important;
  text-align: center !important;
  transition: background 0.15s ease !important;
}

.flatpickr-current-month input.cur-year:hover,
.flatpickr-current-month select.cur-year:hover {
  background-color: var(--color-neutral-100) !important;
}

/* Focus/active states */
.flatpickr-calendar .flatpickr-current-month select.cur-year:focus,
.flatpickr-calendar .flatpickr-current-month select.cur-year:active,
.flatpickr-calendar .flatpickr-current-month input.cur-year:focus {
  background-color: var(--color-neutral-100) !important;
}

/* Year dropdown options */
.flatpickr-current-month select.cur-year option {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  color: var(--color-neutral-900) !important;
  background: white !important;
}

.flatpickr-current-month select.cur-year option:checked {
  background-color: var(--color-emerald-100) !important;
  color: var(--color-emerald-700) !important;
  font-weight: 600 !important;
}

/* Hide year spinner arrows */
.flatpickr-current-month input.cur-year::-webkit-inner-spin-button,
.flatpickr-current-month input.cur-year::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  display: none !important;
}

.flatpickr-current-month input.cur-year {
  -moz-appearance: textfield !important;
}

/* Hide year wrapper arrows */
.flatpickr-current-month .numInputWrapper {
  display: inline-block !important;
  width: auto !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
  display: none !important;
}

/* Weekdays — Пн Вт Ср ... центрировано */
.flatpickr-weekdays {
  margin-top: 12px !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
}

.flatpickr-weekdaycontainer {
  display: flex !important;
  justify-content: center !important;
  min-width: 280px !important;
  max-width: 280px !important;
}

.flatpickr-weekday {
  color: var(--color-neutral-500) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  width: 36px !important;
  max-width: 36px !important;
  margin: 0 2px !important;
  text-align: center !important;
}

/* Days Grid — круглое выделение как в Toshl */
.flatpickr-days {
  padding: 4px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.flatpickr-days .dayContainer {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  min-width: 280px !important;
  max-width: 280px !important;
}

.flatpickr-day {
  border-radius: 50% !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--color-neutral-800) !important;
  transition: all 0.1s ease !important;
  width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  margin: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.flatpickr-day:hover:not(.flatpickr-disabled):not(.selected) {
  background: var(--color-neutral-100) !important;
  border-color: transparent !important;
}

/* Selected day — emerald круг */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--color-emerald-700) !important;
  border-color: var(--color-emerald-700) !important;
  color: white !important;
  font-weight: 600 !important;
}

/* Today — обводка без заливки */
.flatpickr-day.today:not(.selected) {
  border: 2px solid var(--color-emerald-400) !important;
  background: transparent !important;
  color: var(--color-emerald-700) !important;
  font-weight: 600 !important;
}

.flatpickr-day.today.selected {
  background: var(--color-emerald-700) !important;
  border-color: var(--color-emerald-700) !important;
  color: white !important;
}

/* Disabled days */
.flatpickr-day.flatpickr-disabled {
  color: var(--color-neutral-300) !important;
}

/* Other month days */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--color-neutral-400) !important;
}

/* Input field — формат ДД.ММ.ГГГГ с tabular-nums */
input.flatpickr-input + input.flatpickr-input {
  font-family: var(--font-sans) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.5px !important;
}