/*
 * ls-datepicker.css
 * Flatpickr → Bootstrap 5 theme — dùng CSS custom properties của BS5,
 * tự động đổi theo dark/light mode và màu primary của từng tenant.
 */

/* ── Calendar container ──────────────────────────────────────────────────── */
.flatpickr-calendar {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bs-box-shadow);
  font-family: var(--bs-body-font-family);
  font-size: .8125rem;
  padding: .5rem .5rem .375rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  width: 288px;
}

.flatpickr-calendar.open { z-index: 9999; }
.flatpickr-calendar::before,
.flatpickr-calendar::after { display: none; }  /* bỏ arrow mặc định */

/* ── Header — tháng / năm ────────────────────────────────────────────────── */
.flatpickr-months {
  align-items: center;
  padding: 0 0 .375rem;
}

.flatpickr-month {
  height: 36px;
  background: transparent;
  color: var(--bs-body-color);
  fill: var(--bs-body-color);
}

.flatpickr-current-month {
  font-size: .875rem;
  font-weight: 600;
  padding-top: 6px;
  color: var(--bs-body-color);
}

.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-size: .875rem;
  font-weight: 600;
  color: var(--bs-body-color);
  background: transparent;
  border: none;
  border-radius: var(--bs-border-radius-sm);
  padding: 0 .25rem;
  cursor: pointer;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month input.cur-year:hover {
  background: var(--bs-tertiary-bg);
}

/* ── Prev / Next arrows ──────────────────────────────────────────────────── */
.flatpickr-prev-month,
.flatpickr-next-month {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--bs-border-radius);
  fill: var(--bs-secondary-color);
  color: var(--bs-secondary-color);
  transition: background .12s, fill .12s;
  padding: 0;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  background: var(--bs-tertiary-bg);
  fill: var(--bs-primary);
  color: var(--bs-primary);
}

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

/* ── Weekday header ──────────────────────────────────────────────────────── */
.flatpickr-weekdays { margin-bottom: .125rem; }

.flatpickr-weekday {
  font-size: .6875rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Day cells ───────────────────────────────────────────────────────────── */
.flatpickr-day {
  border-radius: var(--bs-border-radius);
  color: var(--bs-body-color);
  font-size: .8125rem;
  height: 34px;
  line-height: 34px;
  max-width: 34px;
  transition: background .1s, color .1s;
  border: 1px solid transparent;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  border-color: transparent;
  outline: none;
}

/* Hôm nay */
.flatpickr-day.today {
  border-color: var(--bs-primary) !important;
  font-weight: 600;
  color: var(--bs-primary);
}

.flatpickr-day.today:hover {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}

/* Ngày được chọn */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange,
.flatpickr-day.endRange:hover {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
  font-weight: 600;
}

/* Range: giữa */
.flatpickr-day.inRange {
  background: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  box-shadow: -5px 0 0 var(--bs-primary-bg-subtle), 5px 0 0 var(--bs-primary-bg-subtle);
}

/* Ngày bị disable */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--bs-tertiary-color);
  opacity: .5;
}

.flatpickr-day.flatpickr-disabled { cursor: not-allowed; }

/* ── Time picker (khi dùng enableTime) ──────────────────────────────────── */
.flatpickr-time {
  border-top: 1px solid var(--bs-border-color);
  margin-top: .375rem;
  padding-top: .375rem;
  height: 40px;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  color: var(--bs-body-color);
  font-size: .875rem;
  font-weight: 500;
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus {
  background: var(--bs-tertiary-bg);
}

/* ── altInput (hiển thị cho user, input gốc ẩn) ─────────────────────────── */
.flatpickr-input[readonly] {
  cursor: pointer;
  background: var(--bs-body-bg) !important;
}

/* Ẩn input gốc (hidden) — class do flatpickr tự thêm */
.flatpickr-input.flatpickr-input.form-control.form-control-sm:not(.ls-dp-display) {
  /* altInput sẽ nhận class từ original, giữ nguyên */
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .flatpickr-calendar {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.5);
}

[data-bs-theme="dark"] .flatpickr-day:hover {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .flatpickr-day.selected,
[data-bs-theme="dark"] .flatpickr-day.selected:hover {
  background: var(--bs-primary);
  color: #fff;
}