/* Date input UI for timeline_edit_v2.html (Flatpickr + manual input) */

.event_date_item .event_date_input_wrap {
  position: relative;
}

.event_date_item .event_date_input_wrap input[type="text"] {
  padding-right: 42px;
}

.event_date_precision_hint {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(76, 92, 109, 0.38);
  pointer-events: none;
  white-space: nowrap;
  font: inherit;
  line-height: 1;
}

.event_date_precision_hint[hidden] {
  display: none !important;
}

.event_date_input_measure {
  position: fixed;
  top: -9999px;
  left: -9999px;
  visibility: hidden;
  white-space: pre;
}

.event_date_picker_btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #4c5c6d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
}

.event_date_picker_btn:hover {
  background: rgba(40, 79, 118, 0.1);
}

.event_date_picker_btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.event_date_row_end {
  margin-top: 8px;
}

.event_date_row.is-hidden {
  display: none !important;
}

.year_choice_pack[hidden] {
  display: none !important;
}

/* Flatpickr skin hooks (safe defaults, easy to tweak) */
.flatpickr-calendar {
  width: 295px;
  min-width: 295px;
  border-radius: 10px;
  border: 1px solid #d8e1ea;
  box-shadow: 0 8px 26px rgba(14, 34, 54, 0.14);
  box-sizing: border-box;
}

.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar .flatpickr_year_choice_panel,
.flatpickr-calendar .flatpickr_month_choice_panel {
  width: 100%;
  box-sizing: border-box;
}

.flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.flatpickr-current-month .numInputWrapper,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 12px 7px 12px;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.flatpickr-current-month .numInputWrapper:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  border-color: #d8e1ea;
  background: #fff;
}

.flatpickr-calendar.is-year-panel-open .flatpickr-current-month .numInputWrapper {
  border-color: #d8e1ea;
  background: #fff;
}

.flatpickr-calendar.is-month-panel-open .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar.is-month-panel-open .flatpickr-current-month .cur-month {
  border-color: #d8e1ea;
  background: #fff;
}

.flatpickr-current-month .numInputWrapper {
  order: 1;
  width: auto;
  white-space: nowrap;
  cursor: pointer;
  font-weight: 700;
}

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

.flatpickr-current-month .cur-year {
  width: 4ch;
  padding-right: 0;
  border: 0;
  background: transparent;
  color: #2d3134;
  font-weight: 700;
  text-align: right;
  pointer-events: none;
}

.flatpickr-current-month .numInputWrapper::after {
  content: "년";
  display: inline-block;
  margin-left: 0;
  white-space: nowrap;
  color: inherit;
  font-weight: inherit;
}

.flatpickr-current-month .cur-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  order: 2;
}

.flatpickr-innerContainer.is-hidden {
  display: none !important;
}

.flatpickr_year_choice_panel {
  padding: 10px;
}

.flatpickr_month_choice_panel {
  padding: 10px;
}

.flatpickr_year_choice_panel.is-hidden {
  display: none !important;
}

.flatpickr_month_choice_panel.is-hidden {
  display: none !important;
}

.flatpickr_year_choice_panel .year_choice_pack {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.flatpickr_month_choice_panel .month_choice_pack {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.flatpickr_year_choice_panel .year_unit,
.flatpickr_month_choice_panel .month_unit {
  border: 1px solid #d8e1ea;
  border-radius: 6px;
  text-align: center;
  font-size: 12px;
  line-height: 1;
  padding: 8px 4px;
  color: #516170;
  cursor: pointer;
  user-select: none;
  background: #f7f9fb;
}

.flatpickr_year_choice_panel .year_unit:hover,
.flatpickr_month_choice_panel .month_unit:hover {
  border-color: #83a8cb;
  background: #edf4fb;
}

.flatpickr_year_choice_panel .year_unit.is-active,
.flatpickr_month_choice_panel .month_unit.is-active {
  border-color: #418fde;
  background: #418fde;
  color: #fff;
  font-weight: 700;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: #418fde;
  border-color: #418fde;
}