/* Flatpickr Month Navigation Fixes */

/* Ensure month navigation buttons are visible and clickable */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    position: relative !important;
    opacity: 1 !important;
    cursor: pointer !important;
    display: inline-block !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 9999 !important;
    background-color: #f0f0f0 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    line-height: 40px !important;
    text-align: center !important;
    color: #333 !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background-color: #007bff !important;
    color: white !important;
    border-color: #007bff !important;
}

/* Make the arrows more visible */
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: currentColor !important;
    width: 20px !important;
    height: 20px !important;
}

/* Fix month dropdown visibility */
.flatpickr-monthDropdown-months {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    z-index: 10000 !important;
    background-color: white !important;
    border: 1px solid #ddd !important;
}

/* Ensure flatpickr dropdowns are not converted to Select2 */
.flatpickr-calendar select {
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: menulist !important;
}

/* Hide any Select2 elements inside flatpickr */
.flatpickr-calendar .select2-container {
    display: none !important;
}

/* Show the original select element in flatpickr */
.flatpickr-calendar select.select2-hidden-accessible {
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    display: inline-block !important;
}

/* Ensure year input is visible */
.numInputWrapper {
    opacity: 1 !important;
    visibility: visible !important;
}

.numInputWrapper input {
    cursor: pointer !important;
}

/* Fix for Hebrew locale month selector */
.flatpickr-calendar.hasTime .flatpickr-time {
    border-top: 1px solid rgba(72, 72, 72, 0.2);
}

/* Make month text larger and clearer */
.flatpickr-current-month {
    font-size: 1.2rem !important;
    font-weight: bold !important;
    padding: 10px !important;
}

/* Ensure the month is displayed as text, not dropdown */
.flatpickr-current-month .cur-month {
    font-weight: 700 !important;
    color: #333 !important;
}

/* Ensure month navigation area is clickable */
.flatpickr-months {
    position: relative !important;
    z-index: 1000 !important;
}

/* Fix potential overlay issues */
.flatpickr-calendar {
    z-index: 9999 !important;
}

/* Ensure month name is clickable when dropdown is enabled */
.flatpickr-current-month {
    cursor: pointer !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    display: inline-block !important;
}

/* Fix mobile touch targets */
@media (max-width: 768px) {
    .flatpickr-months .flatpickr-prev-month,
    .flatpickr-months .flatpickr-next-month {
        width: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
    }
    
    .flatpickr-current-month {
        padding: 10px !important;
    }
}