/* ============================================
   Flatpickr 自定義樣式
   方形設計 + 區域分明 + 確認/取消按鈕
   ============================================ */

/* 整體容器 */
.flatpickr-calendar {
    border-radius: 4px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
    border: 1px solid #ccc !important;
    font-family: 'Noto Sans TC', sans-serif !important;
    z-index: 99999 !important;
    background: #fff !important;
}

/* ── 頂部：年月導航 ── */
.flatpickr-months {
    background: #f0f4f8 !important;
    border-bottom: 1px solid #ddd !important;
    border-radius: 4px 4px 0 0 !important;
    padding: 4px 0 !important;
}

.flatpickr-months .flatpickr-month {
    height: 36px !important;
}

.flatpickr-current-month {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    padding-top: 6px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-weight: 600 !important;
    color: #333 !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 6px 10px !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: #555 !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #1a73e8 !important;
}

/* ── 星期標題行 ── */
.flatpickr-weekdays {
    background: #e8ecf0 !important;
    border-bottom: 1px solid #ddd !important;
}

span.flatpickr-weekday {
    color: #555 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* ── 日期區域 ── */
.flatpickr-innerContainer {
    background: #fff !important;
}

.dayContainer {
    padding: 4px 0 !important;
}

/* 日期格子：方形 */
.flatpickr-day {
    border-radius: 3px !important;
    max-width: 36px !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: 13px !important;
    color: #333 !important;
    margin: 1px !important;
}

.flatpickr-day:hover {
    background: #e3edf7 !important;
    border-color: #c5d8ea !important;
}

/* 選中日期 */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: #1a73e8 !important;
    border-color: #1a73e8 !important;
    color: #fff !important;
    border-radius: 3px !important;
}

/* 今天 */
.flatpickr-day.today {
    border-color: #1a73e8 !important;
    background: transparent !important;
    color: #1a73e8 !important;
    font-weight: 700 !important;
}

.flatpickr-day.today:hover {
    background: #1a73e8 !important;
    color: #fff !important;
}

/* 範圍內日期 */
.flatpickr-day.inRange {
    background: #e3edf7 !important;
    border-color: #e3edf7 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* 非當月日期 */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #bbb !important;
}

/* 禁用日期 */
.flatpickr-day.flatpickr-disabled {
    color: #ddd !important;
}

/* ── 時間選擇器 ── */
.flatpickr-time {
    border-top: 1px solid #ddd !important;
    background: #f8f9fa !important;
    max-height: 44px !important;
}

.flatpickr-time input {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
}

.flatpickr-time .flatpickr-am-pm {
    font-size: 13px !important;
}

/* 防止出現重複的時間行 */
.flatpickr-calendar.hasTime .flatpickr-time ~ .flatpickr-time {
    display: none !important;
}

/* ── 確認/取消按鈕區域 ── */
.flatpickr-confirm-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 8px 10px 10px;
    border-top: 1px solid #ddd;
    background: #f0f4f8;
    border-radius: 0 0 4px 4px;
}

.flatpickr-confirm-buttons .fp-btn {
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    outline: none;
    font-family: 'Noto Sans TC', sans-serif;
    transition: background 0.15s, border-color 0.15s;
}

.flatpickr-confirm-buttons .fp-btn-cancel {
    background: #fff;
    color: #666;
}

.flatpickr-confirm-buttons .fp-btn-cancel:hover {
    background: #f0f0f0;
    border-color: #bbb;
}

.flatpickr-confirm-buttons .fp-btn-confirm {
    background: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
}

.flatpickr-confirm-buttons .fp-btn-confirm:hover {
    background: #1557b0;
    border-color: #1557b0;
}

/* ── 週數 ── */
.flatpickr-weekwrapper .flatpickr-weekday {
    color: #999 !important;
}

.flatpickr-weekwrapper .flatpickr-weeks {
    background: #fafafa !important;
    border-right: 1px solid #eee !important;
}

/* ── 隱藏純日期模式下多餘的第6行（下月日期溢出） ── */
.flatpickr-calendar:not(.hasTime) .dayContainer {
    max-height: 228px;
    overflow: hidden;
}