/* Calendar wrapper */
.flatpickr-calendar {
    font-family: inherit;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    border: 1px solid #1a237e;
}

/* ── Header ─────────────────────────────── */
.flatpickr-months {
    background-color: #1a237e;
    border-radius: 8px 8px 0 0;
    padding: 4px 0;
}

.flatpickr-month {
    background-color: #1a237e;
    color: #ffffff;
    height: 40px;
}

.flatpickr-current-month {
    color: #ffffff;
    font-size: 14px;
    padding-top: 6px;
}

    /* Month dropdown */
    .flatpickr-current-month .flatpickr-monthDropdown-months {
        background-color: #1a237e !important;
        color: #ffffff !important;
        border: none;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
    }

        .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
            background-color: #283593 !important;
        }

    /* Year input */
    .flatpickr-current-month input.cur-year {
        background-color: #1a237e !important;
        color: #ffffff !important;
        border: none;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        width: 60px !important;
        padding-right: 20px !important;
    }

        .flatpickr-current-month input.cur-year:hover {
            background-color: #283593 !important;
        }

    /* Year spinner wrapper */
    .flatpickr-current-month .numInputWrapper {
        width: 80px !important;
        position: relative;
    }

        .flatpickr-current-month .numInputWrapper span {
            right: 0 !important;
            border: none !important;
            padding: 0 2px !important;
            opacity: 1 !important;
        }

        .flatpickr-current-month .numInputWrapper:hover span {
            opacity: 1 !important;
        }

        .flatpickr-current-month .numInputWrapper span.arrowUp {
            top: 0 !important;
        }

        .flatpickr-current-month .numInputWrapper span.arrowDown {
            top: 50% !important;
        }

        .flatpickr-current-month .numInputWrapper span svg {
            fill: #ffffff !important;
            width: 10px !important;
            height: 10px !important;
        }

        .flatpickr-current-month .numInputWrapper span.arrowUp,
        .flatpickr-current-month .numInputWrapper span.arrowDown {
            border-color: #ffffff !important;
        }


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

/* ── Prev / Next arrows ─────────────────── */
.flatpickr-prev-month,
.flatpickr-next-month {
    color: #ffffff !important;
    fill: #ffffff !important;
    padding: 8px !important;
}

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

/* ── Weekday headers ────────────────────── */
.flatpickr-weekdays {
    background-color: #283593;
}

.flatpickr-weekday {
    background-color: #283593;
    color: #e8eaf6 !important;
    font-weight: 600;
    font-size: 12px;
}

/* ── Day cells ──────────────────────────── */
.flatpickr-day {
    border-radius: 4px;
    color: #2d3748;
    font-size: 13px;
}

    .flatpickr-day:hover {
        background-color: #bbdefb;
        border-color: #bbdefb;
        color: #0d1b6e;
    }

    /* Selected */
    .flatpickr-day.selected,
    .flatpickr-day.selected:hover {
        background-color: #1a237e;
        border-color: #1a237e;
        color: #ffffff;
        font-weight: 600;
    }

    /* Today */
    .flatpickr-day.today {
        border-color: #1a237e;
        color: #1a237e;
        font-weight: 700;
    }

        .flatpickr-day.today:hover {
            background-color: #1a237e;
            color: #ffffff;
        }

    /* Disabled */
    .flatpickr-day.disabled,
    .flatpickr-day.disabled:hover {
        color: #b0bec5;
        background: transparent;
        cursor: not-allowed;
    }