/* ============================================================================
 * exdigm datepicker — flowbite-datepicker JS 기반, Flowbite 디자인 참조 + 자체 토큰
 *
 * 모든 셀렉터는 .datepicker* / .dow / .week / .calendar-weeks 등 datepicker
 * JS가 부착하는 클래스만 대상으로 하므로 페이지의 다른 요소(checkbox, radio,
 * file input 등)에는 영향 없음. preflight 없음.
 * ========================================================================== */

/* ---------- 컨테이너 표시/위치 ------------------------------------------- */
.datepicker {
  display: none;
}
.datepicker.active {
  display: block;
}
/* Picker.hide()는 .active를 유지한 채 .hidden을 추가하므로 .hidden이 .active를 이겨야 함.
 * Tailwind .hidden 유틸이 있어야 작동하는데 우리 빌드엔 없어 직접 정의. */
.datepicker.hidden {
  display: none !important;
}
.datepicker-dropdown {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  padding-top: 4px;
}
.datepicker-dropdown.datepicker-orient-top {
  padding-top: 0;
  padding-bottom: 4px;
}

/* ---------- 픽커 카드 ---------------------------------------------------- */
.datepicker-picker {
  display: inline-block;
  background: #fff;
  border-radius: 12px;
  box-shadow:
    0 4px 6px -1px rgb(15 23 42 / 0.10),
    0 2px 4px -2px rgb(15 23 42 / 0.05);
  border: 1px solid #E2E8F0;
  padding: 12px;
  font-family: inherit;
}
.datepicker-main {
  padding: 0;
}

/* ---------- 헤더: 월/년 타이틀 + 좌우 화살표 ---------------------------- */
.datepicker-header .datepicker-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.datepicker-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.datepicker-controls .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  padding: 6px 10px;
  transition: background-color 0.15s;
}
.datepicker-controls .button:hover {
  background: #F1F5F9;
}
.datepicker-controls .button:focus,
.datepicker-controls .button:active {
  outline: none;
}
.datepicker-controls .button:focus-visible {
  outline: 2px solid #334155;
  outline-offset: 1px;
}
.datepicker-controls .button[disabled] {
  cursor: not-allowed;
  color: #CBD5E1;
}
.datepicker-controls .prev-btn,
.datepicker-controls .next-btn {
  font-size: 16px;
  padding: 6px 8px;
  min-width: 32px;
}
.datepicker-controls .prev-btn.disabled,
.datepicker-controls .next-btn.disabled {
  visibility: hidden;
}
.datepicker-controls .view-switch {
  flex: 1;
  text-align: center;
}

/* ---------- 요일 행 ----------------------------------------------------- */
.datepicker-view .days-of-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 4px;
}
.datepicker-view .dow {
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---------- 날짜/월/년 그리드 ------------------------------------------ */
.datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: 252px;
  gap: 1px;
}
.datepicker-view .days .datepicker-cell,
.datepicker-view.datepicker-grid .datepicker-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #1E293B;
  background: transparent;
  transition: background-color 0.12s, color 0.12s;
  user-select: none;
}
/* months & years grid 셀 — 4열 1행 칸이 더 큼 */
.datepicker-view.datepicker-grid {
  width: 252px;
}
.datepicker-view.datepicker-grid.months,
.datepicker-view.datepicker-grid.years,
.datepicker-view.datepicker-grid.decades {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.datepicker-view.datepicker-grid.months .datepicker-cell,
.datepicker-view.datepicker-grid.years .datepicker-cell,
.datepicker-view.datepicker-grid.decades .datepicker-cell {
  height: 56px;
}

/* ---------- 셀 상태 ---------------------------------------------------- */
.datepicker-cell:not(.disabled):hover {
  background: #F1F5F9;
}
.datepicker-cell.focused:not(.selected) {
  background: #E2E8F0;
}
.datepicker-cell.selected,
.datepicker-cell.selected:hover {
  background: #334155;
  color: #fff;
}
.datepicker-cell.disabled {
  color: #CBD5E1;
  cursor: not-allowed;
}
.datepicker-cell.prev:not(.disabled),
.datepicker-cell.next:not(.disabled) {
  color: #94A3B8;
}
.datepicker-cell.prev.selected,
.datepicker-cell.next.selected {
  color: #fff;
}
.datepicker-cell.today:not(.selected) {
  position: relative;
  font-weight: 700;
  color: #334155;
}
.datepicker-cell.today:not(.selected)::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #334155;
  transform: translateX(-50%);
}
.datepicker-cell.today:not(.selected):not(.disabled):hover {
  background: #F1F5F9;
}
.datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
  background: #F8FAFC;
}
.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover {
  background: #F1F5F9;
}
.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused {
  background: #E2E8F0;
}
.datepicker-cell.range,
.datepicker-cell.range:hover {
  background: #F1F5F9;
}
.datepicker-cell.range.focused {
  background: #E2E8F0;
}
.datepicker-cell.range.selected,
.datepicker-cell.range.selected:hover {
  background: #334155;
  color: #fff;
}
.datepicker-cell.range-start:not(.disabled),
.datepicker-cell.range-end:not(.disabled) {
  background: #334155;
  color: #fff;
}

/* ---------- 푸터 (Today / Clear 버튼) ---------------------------------- */
.datepicker-footer {
  margin-top: 8px;
}
.datepicker-footer .datepicker-controls {
  display: flex;
  gap: 8px;
}
.datepicker-footer .datepicker-controls .button {
  flex: 1;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 13px;
  border-radius: 8px;
}
.datepicker-footer .datepicker-controls .today-btn {
  background: #334155;
  color: #fff;
}
.datepicker-footer .datepicker-controls .today-btn:hover {
  background: #1E293B;
}
.datepicker-footer .datepicker-controls .clear-btn {
  background: #fff;
  color: #334155;
  border: 1px solid #E2E8F0;
}
.datepicker-footer .datepicker-controls .clear-btn:hover {
  background: #F1F5F9;
}

/* ---------- 주간 표시 모드 (옵션) -------------------------------------- */
.datepicker .calendar-weeks {
  display: flex;
}
.datepicker .calendar-weeks + .days {
  flex: 1;
}
.datepicker .calendar-weeks .days-of-week {
  visibility: hidden;
}
.datepicker .calendar-weeks .week {
  width: 32px;
  font-size: 12px;
  color: #94A3B8;
  text-align: center;
  line-height: 36px;
  font-weight: 500;
}

/* ---------- input 옆 캘린더 아이콘 (선택) ----------------------------- */
.datepicker-input-wrap {
  position: relative;
}
.datepicker-input-wrap > svg.datepicker-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #94A3B8;
  pointer-events: none;
}
.datepicker-input-wrap > input[datepicker] {
  padding-left: 36px;
}

/* ---------- timepicker: datepicker와 같은 톤의 시간 선택 팝업 ----------- */
.timepicker-dropdown {
  position: fixed;
  z-index: 60;
  display: none;
  width: 304px;
  padding-top: 4px;
}
input[data-timepicker] {
  cursor: pointer;
}
.timepicker-dropdown.active {
  display: block;
}
.timepicker-dropdown.timepicker-orient-top {
  padding-top: 0;
  padding-bottom: 4px;
}
.timepicker-picker {
  background: #fff;
  border-radius: 12px;
  box-shadow:
    0 4px 6px -1px rgb(15 23 42 / 0.10),
    0 2px 4px -2px rgb(15 23 42 / 0.05);
  border: 1px solid #E2E8F0;
  padding: 12px;
  font-family: inherit;
}
.timepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #334155;
}
.timepicker-title {
  font-size: 14px;
  font-weight: 700;
}
.timepicker-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #64748B;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.timepicker-close:hover {
  background: #F1F5F9;
  color: #334155;
}
.timepicker-close:focus-visible,
.timepicker-cell:focus-visible {
  outline: 2px solid #334155;
  outline-offset: 1px;
}
.timepicker-section + .timepicker-section {
  margin-top: 10px;
}
.timepicker-label {
  margin-bottom: 6px;
  color: #64748B;
  font-size: 12px;
  font-weight: 600;
}
.timepicker-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
}
.timepicker-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #1E293B;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.12s, color 0.12s;
  user-select: none;
}
.timepicker-cell:hover {
  background: #F1F5F9;
}
.timepicker-cell.selected,
.timepicker-cell.selected:hover {
  background: #334155;
  color: #fff;
}

@media (max-width: 480px) {
  .timepicker-dropdown {
    left: 12px !important;
    width: min(304px, calc(100dvw - 24px)) !important;
  }
}