/* ========== Flatpickr 主题定制 ========== */

/* 日历容器 */
.flatpickr-calendar {
    background: white;
    border: 2px solid var(--color-secondary);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    font-family: inherit;
}

.flatpickr-calendar.open {
    z-index: 9999;
}

/* 月份导航 */
.flatpickr-months {
    background: var(--color-button);
    border-radius: 14px 14px 0 0;
    padding: 15px 10px;
    position: relative;
}

.flatpickr-month {
    color: var(--color-button-text);
    fill: var(--color-button-text);
}

.flatpickr-current-month {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--color-button-text);
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--color-button-text);
    border: none;
    font-weight: 700;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: rgba(255, 255, 255, 0.3);
}

.flatpickr-current-month input.cur-year {
    color: var(--color-button-text);
    font-weight: 700;
}

/* 上一月/下一月按钮 */
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
    fill: var(--color-button-text);
    transition: all 0.3s;
    top: 50%;
    transform: translateY(-50%);
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: rgba(255, 255, 255, 0.2);
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: var(--color-button-text);
}

/* 星期标题 */
.flatpickr-weekdays {
    background: var(--color-secondary);
    padding: 16px 0;
}

span.flatpickr-weekday {
    color: var(--color-paragraph);
    font-weight: 600;
    font-size: 0.9em;
}

/* 日期单元格 */
/* .flatpickr-days {
    padding: 10px;
} */

.flatpickr-day {
    color: var(--color-headline);
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
    border: none;
    margin: 2px;
}

.flatpickr-day:hover {
    background: var(--color-tertiary);
    border-color: var(--color-tertiary);
}

/* 今天 */
.flatpickr-day.today {
    border: 2px solid var(--color-button);
    background: transparent;
    color: var(--color-button);
}

.flatpickr-day.today:hover {
    background: var(--color-button);
    color: var(--color-button-text);
}

/* 选中的日期 */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--color-button);
    border-color: var(--color-button);
    color: var(--color-button-text);
    font-weight: 700;
}

.flatpickr-day.selected:hover {
    background: #e6c203;
    border-color: #e6c203;
}

/* 禁用的日期 */
.flatpickr-day.disabled {
    color: #ccc;
}

/* 其他月份的日期 */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #bbb;
}

/* 时间选择器 */
.flatpickr-time {
    border-top: 2px solid var(--color-secondary);
    background: var(--color-secondary);
    border-radius: 0 0 14px 14px;
    /* padding: 15px 10px; */
}

.flatpickr-time input {
    color: var(--color-headline);
    font-weight: 700;
    font-size: 1.1em;
    /* background: white; */
    /* border-radius: 6px; */
    /* padding: 8px 4px; */
}

.flatpickr-time input:hover {
    background: rgba(255, 216, 3, 0.1);
}

.flatpickr-time input:focus {
    background: rgba(255, 216, 3, 0.2);
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-second {
    color: var(--color-paragraph);
    font-weight: 700;
}

.flatpickr-time .flatpickr-am-pm {
    color: var(--color-headline);
    font-weight: 700;
    transition: all 0.2s;
    background: white;
    border-radius: 6px;
}

.flatpickr-time .flatpickr-am-pm:hover {
    background: var(--color-button);
    color: var(--color-button-text);
}

/* 增减按钮 */
.flatpickr-time .arrowUp,
.flatpickr-time .arrowDown {
    border-color: var(--color-paragraph);
}

.flatpickr-time .arrowUp:hover,
.flatpickr-time .arrowDown:hover {
    border-color: var(--color-button);
}

/* 时间输入框容器 */
.flatpickr-time .numInputWrapper {
    padding: 0 2px;
}

.flatpickr-time .numInputWrapper:hover {
    background: transparent;
}

/* 清除按钮 */
.flatpickr-calendar .flatpickr-clear {
    background: transparent;
    color: var(--color-error);
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s;
}

.flatpickr-calendar .flatpickr-clear:hover {
    background: var(--color-error);
    color: white;
}

/* 动画效果 */
.flatpickr-calendar.animate.open {
    animation: fpFadeInDown 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes fpFadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}