/*
 * 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 {
  /* Lưới 7 cột dùng chung 1 pitch cho cả header thứ và ô ngày — xem .flatpickr-day
     và .flatpickr-weekday bên dưới. Đổi --ls-dp-cell sẽ tự resize toàn bộ lưới. */
  --ls-dp-cell: 38px;
  --ls-dp-grid: calc(var(--ls-dp-cell) * 7);
  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);
  /* box-sizing: content-box (override flatpickr.min.css border-box) nên width
     dưới đây CHÍNH LÀ content box = lưới 7 cột (--ls-dp-grid). Padding và
     border cộng thêm ra ngoài, không ăn vào lưới — không phụ thuộc độ dày
     border/padding, tránh .flatpickr-innerContainer{overflow:hidden} cắt cột cuối. */
  box-sizing: content-box;
  width: var(--ls-dp-grid);
}

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

/* rContainer/innerContainer/days/dayContainer mặc định của flatpickr.min.css
   cứng 307.875px — ép về đúng --ls-dp-grid để không bị .flatpickr-innerContainer
   {overflow:hidden} cắt mất cột cuối, và để dayContainer chia đều 7 ô = --ls-dp-cell. */
.flatpickr-rContainer { width: var(--ls-dp-grid); }

.flatpickr-days { width: var(--ls-dp-grid); }

.dayContainer {
  width: var(--ls-dp-grid);
  min-width: var(--ls-dp-grid);
  max-width: var(--ls-dp-grid);
  justify-content: flex-start;
}

/* ── 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 ──────────────────────────────────────────────────────── */
/* Header phải cùng pitch --ls-dp-cell/cột với .flatpickr-day bên dưới, nếu không
   tên thứ và số ngày sẽ lệch cột do 2 lưới co giãn khác thuật toán (flex:1 vs
   width:14.2857%). span.flatpickr-weekday có specificity 0,0,1,1 — .flatpickr-weekday
   (0,0,1,0) load sau vẫn thua nên phải giữ đúng selector element+class này. */
.flatpickr-weekdays {
  margin-bottom: .125rem;
  width: var(--ls-dp-grid);
}

.flatpickr-weekdays .flatpickr-weekdaycontainer {
  width: var(--ls-dp-grid);
  flex: 0 0 var(--ls-dp-grid);
}

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

span.flatpickr-weekday {
  flex: 0 0 var(--ls-dp-cell);
  width: var(--ls-dp-cell);
  max-width: var(--ls-dp-cell);
}

/* ── Day cells ───────────────────────────────────────────────────────────── */
.flatpickr-day {
  border-radius: var(--bs-border-radius);
  color: var(--bs-body-color);
  font-size: .8125rem;
  height: var(--ls-dp-cell);
  line-height: var(--ls-dp-cell);
  /* flatpickr.min.css đặt flex-basis:14.2857143% (tính theo dayContainer 307.875px)
     nên chỉ override max-width là không đủ — phải override cả flex-basis/width
     để pitch ô ngày = --ls-dp-cell, khớp với span.flatpickr-weekday. */
  flex: 0 0 var(--ls-dp-cell);
  width: var(--ls-dp-cell);
  max-width: var(--ls-dp-cell);
  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.
   PHẢI liệt kê cả biến thể .today.inRange / .prevMonthDay.today.inRange /
   .nextMonthDay.today.inRange: flatpickr.min.css gom chúng vào 1 rule đặt nền xám
   #e6e6e6 với specificity (0,0,3,0), thắng .flatpickr-day.inRange (0,0,2,0) — hậu quả
   là ô "hôm nay" nằm giữa dải bị xám, phá liền mạch của range. */
.flatpickr-day.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.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;
  width: var(--ls-dp-grid);
}

.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;
}

/* ══════════════════════════════════════════════════════════════════════════
   Date RANGE picker — ls-daterangepicker.js
   Calendar container nhận thêm class .ls-dp-range; panel preset được JS
   append vào cuối .flatpickr-calendar nên phải nằm dưới lưới ngày.
   ══════════════════════════════════════════════════════════════════════════ */

.flatpickr-calendar.ls-dp-range .ls-dp-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem;
  /* Khớp đúng lưới 7 cột — .flatpickr-calendar là content-box nên không cộng padding */
  width: var(--ls-dp-grid);
  margin-top: .375rem;
  padding-top: .5rem;
  border-top: 1px solid var(--bs-border-color);
}

.ls-dp-preset {
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-radius: var(--bs-border-radius);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.2;
  padding: .3125rem .375rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .12s, border-color .12s, color .12s;
}

.ls-dp-preset:hover {
  background: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary);
  color: var(--bs-primary-text-emphasis);
}

.ls-dp-preset:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 1px;
}

.ls-dp-preset-clear {
  grid-column: 1 / -1;
  border-color: transparent;
  background: transparent;
  color: var(--bs-secondary-color);
  font-weight: 400;
}

.ls-dp-preset-clear:hover {
  background: var(--bs-danger-bg-subtle);
  border-color: transparent;
  color: var(--bs-danger-text-emphasis);
}

/* Range: bo góc chỉ ở 2 đầu để dải ngày liền mạch.
   Phải set CẢ 4 góc (không chỉ zero 2 góc trong): flatpickr.min.css đặt
   .flatpickr-day.startRange{border-radius:50px 0 0 50px} — specificity (0,0,2,0) thắng
   .flatpickr-day{border-radius:var(--bs-border-radius)} (0,0,1,0), nên góc ngoài sẽ bị
   bo 50px kiểu viên thuốc, lệch hẳn với bo góc chung của theme. Selector dưới đây
   (0,0,3,0) thắng và giành lại cả 4 góc. */
.flatpickr-day.startRange:not(.endRange) {
  border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
}

.flatpickr-day.endRange:not(.startRange) {
  border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}

.flatpickr-day.inRange { border-radius: 0; }

/* Nối liền startRange → endRange khi 2 ngày sát nhau (flatpickr dùng màu xanh cứng
   #569ff7 của nó, phải trả về màu primary của tenant) */
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 var(--bs-primary);
}

/* Đầu/cuối hàng (CN → T7) phải bỏ box-shadow tràn ra ngoài lưới */
.flatpickr-day.inRange:nth-child(7n+1) { box-shadow: 5px 0 0 var(--bs-primary-bg-subtle); }
.flatpickr-day.inRange:nth-child(7n+7) { box-shadow: -5px 0 0 var(--bs-primary-bg-subtle); }

/* Chọn 1 ngày (from = to) → bo góc đầy đủ như single picker */
.flatpickr-day.startRange.endRange { border-radius: var(--bs-border-radius); }

/* ── Dark mode ───────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .ls-dp-preset {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}

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

[data-bs-theme="dark"] .ls-dp-preset-clear {
  background: transparent;
  border-color: transparent;
}