/* ═════════════════════════════════════════════════════
   ★ flatpickr-theme.css — ผูกธีม flatpickr เข้ากับระบบธีมของเว็บ
   (light = ใช้ default ของ flatpickr / dark = override ผ่าน CSS vars)

   ★ สำคัญ: ใช้ [data-theme="dark"] ตามปุ่มสลับธีมของเว็บ
     (ไม่ใช้ prefers-color-scheme เพราะไม่ผูกกับปุ่ม toggle)
   ═════════════════════════════════════════════════════ */

/* ── Light theme: ปรับเล็กน้อยให้เข้ากับ Bootstrap 5 ── */
.flatpickr-calendar {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    font-family: inherit;
}

/* ★★ altInput (ช่องที่ user เห็น) — บังคับสีตามธีม กันโดน readonly-style ทำให้จาง
   flatpickr ใส่ readonly ให้ altInput เมื่อ allowInput:false
   → โดนกฎ .form-control:read-only ของ site.css (สีจาง + opacity .65)
   ★ specificity ต้องสูงกว่ากฎ dark ของ site.css [data-theme](0,3,0) → ใช้ double-class (0,3,0)+
   ★ fp-time ไม่มี altInput (input ตัวเดิมคือตัวโชว์) — ครอบด้วย selector เดียวกัน */
input.form-control.fp-date,
input.form-control.fp-datetime,
input.form-control.fp-time,
input.form-control.fp-date[readonly],
input.form-control.fp-datetime[readonly],
input.form-control.fp-time[readonly] {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    background-color: var(--bg-secondary) !important;
    cursor: pointer;
}
/* ★ ธีมมืด — ต้องชนะกฎ [data-theme="dark"] .form-control:read-only ของ site.css */
[data-theme="dark"] input.form-control.fp-date,
[data-theme="dark"] input.form-control.fp-datetime,
[data-theme="dark"] input.form-control.fp-time,
[data-theme="dark"] input.form-control.fp-date[readonly],
[data-theme="dark"] input.form-control.fp-datetime[readonly],
[data-theme="dark"] input.form-control.fp-time[readonly] {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    background-color: var(--bg-secondary) !important;
}
input.form-control.fp-date:focus,
input.form-control.fp-datetime:focus,
input.form-control.fp-time:focus {
    cursor: text;
}

/* ── Dark theme (ตามปุ่มสลับธีมของเว็บ) ── */
[data-theme="dark"] .flatpickr-calendar {
    background: var(--bg-secondary, #2b3035);
    color: var(--text-primary, #e9ecef);
    box-shadow: 1px 0 0 var(--border-color, #495057), -1px 0 0 var(--border-color, #495057), 0 4px 16px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .flatpickr-calendar.arrowTop::before {
    border-bottom-color: var(--border-color, #495057);
}
[data-theme="dark"] .flatpickr-calendar.arrowTop::after {
    border-bottom-color: var(--bg-secondary, #2b3035);
}
[data-theme="dark"] .flatpickr-calendar.arrowBottom::before {
    border-top-color: var(--border-color, #495057);
}
[data-theme="dark"] .flatpickr-calendar.arrowBottom::after {
    border-top-color: var(--bg-secondary, #2b3035);
}

/* เดือน/ปี + dropdown เดือน */
[data-theme="dark"] .flatpickr-current-month .numInputWrapper,
[data-theme="dark"] .flatpickr-months .flatpickr-month,
[data-theme="dark"] .flatpickr-current-month {
    color: var(--text-primary, #e9ecef);
}
[data-theme="dark"] .flatpickr-monthDropdown-months,
[data-theme="dark"] .flatpickr-current-month input.cur-year,
[data-theme="dark"] .numInputWrapper span {
    color: var(--text-primary, #e9ecef);
    background: transparent;
}
[data-theme="dark"] .flatpickr-current-month input.cur-year,
[data-theme="dark"] .flatpickr-monthDropdown-months {
    color: var(--text-primary, #e9ecef);
}
[data-theme="dark"] .flatpickr-monthDropdown-month {
    background: var(--bg-secondary, #2b3035);
    color: var(--text-primary, #e9ecef);
}

/* วันในปฏิทิน */
[data-theme="dark"] .flatpickr-day {
    color: var(--text-primary, #e9ecef);
}
[data-theme="dark"] .flatpickr-day:hover,
[data-theme="dark"] .flatpickr-day:focus {
    background: var(--bg-primary, #3a4148);
    border-color: var(--border-color, #495057);
}
[data-theme="dark"] .flatpickr-day.today {
    border-color: #0d6efd;
}
[data-theme="dark"] .flatpickr-day.selected {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: var(--text-muted, #6c757d);
}
[data-theme="dark"] .flatpickr-day.disabled,
[data-theme="dark"] .flatpickr-day.disabled:hover {
    color: var(--text-muted, #6c757d);
    opacity: 0.45;
}

/* ปุ่มเดือนก่อนหน้า/ถัดไป */
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month {
    color: var(--text-primary, #e9ecef);
    fill: var(--text-primary, #e9ecef);
}
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover svg,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover svg {
    fill: #0d6efd;
}

/* แถบ weekday */
[data-theme="dark"] span.flatpickr-weekday {
    color: var(--text-secondary, #adb5bd);
}

/* Time picker */
[data-theme="dark"] .flatpickr-time input,
[data-theme="dark"] .flatpickr-time .flatpickr-time-separator,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
    color: var(--text-primary, #e9ecef);
}
[data-theme="dark"] .flatpickr-time input:hover,
[data-theme="dark"] .flatpickr-time input:focus,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:focus {
    background: var(--bg-primary, #3a4148);
}
[data-theme="dark"] .flatpickr-time .numInputWrapper span:hover {
    background: var(--bg-primary, #3a4148);
}
[data-theme="dark"] .flatpickr-time .numInputWrapper span:active {
    background: #0d6efd;
}