/* ── Flatpickr: green brand theme ── */

.flatpickr-calendar {
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
    border: 1px solid var(--border-color) !important;
    background: var(--calendar-background) !important;
    font-family: var(--font-family) !important;
    overflow: hidden;
}

/* Header bar */
.flatpickr-months .flatpickr-month {
    background-color: var(--button-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    height: 44px;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    display: flex;
    padding-top: 0;
    padding-bottom: 0;
    justify-content: center;
    align-items: center;
    fill: #fff !important;
    color: #fff !important;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    opacity: 1;
    background: transparent !important;
    fill: #fff !important;
}

/* Month/year label */
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after,
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-bottom-color: #fff;
    border-top-color: #fff;
}

/* Weekday headers */
.flatpickr-weekdays,
span.flatpickr-weekday {
    background: var(--button-bg);
    color: rgba(255,255,255,0.8);
    font-weight: 600;
    font-size: 12px;
}

.flatpickr-weekwrapper .flatpickr-weekday {
    background: var(--button-bg);
    color: rgba(255,255,255,0.8);
}

/* Day cells */
.flatpickr-day {
    border-radius: 10px !important;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.flatpickr-day:hover {
    background: var(--hover-bg) !important;
    border-color: transparent !important;
    color: var(--text-color);
}

/* Today highlight */
.flatpickr-day.today {
    background: color-mix(in srgb, var(--button-bg) 15%, transparent) !important;
    border-color: var(--button-bg) !important;
    color: var(--button-bg) !important;
    font-weight: 700;
}

.flatpickr-day.today:hover {
    background: color-mix(in srgb, var(--button-bg) 25%, transparent) !important;
}

/* Selected day */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--button-bg) !important;
    border-color: var(--button-bg) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--button-bg) 50%, transparent);
}

/* Disabled / out-of-month */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    opacity: 0.3;
}

/* Month select plugin */
.flatpickr-monthSelect-month.selected,
.flatpickr-monthSelect-month.startRange,
.flatpickr-monthSelect-month.endRange {
    background-color: var(--button-bg);
    border-color: var(--button-bg-active);
    color: #fff;
    border-radius: 10px;
}

.flatpickr-monthSelect-month:hover {
    background: var(--hover-bg);
    border-radius: 10px;
}

/* Time picker */
.flatpickr-time {
    background: var(--calendar-background) !important;
    border-top: 1px solid var(--border-color) !important;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
    color: var(--text-color) !important;
    background: transparent !important;
    font-size: 16px;
    font-weight: 600;
}

.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
    background: var(--input-bg) !important;
}

/* Center the calendar popup */
.flatpickr-calendar {
    left: 0 !important;
    right: 0 !important;
    margin: auto;
}