/* Custom styles for Flatpickr to match theme overrides */

/* Input Group Styling */
.filter-calender .input-group-text {
    background-color: #fff;
    border-right: none;
    color: var(--primary-color);
}

.filter-calender .form-control {
    border-left: none;
    font-size: 15px;
    color: #172636;
    background-color: #fff !important; /* Flatpickr adds readonly which grays it out by default */
}

.filter-calender .form-control:focus {
    box-shadow: none;
    border-color: #ced4da;
}

.filter-calender .input-group:hover .input-group-text,
.filter-calender .input-group:hover .form-control {
    border-color: #b0b8c1;
}

/* Flatpickr Customization */
.flatpickr-calendar {
    font-family: var(--inter-font) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !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, 
.flatpickr-day.selected.prevMonthDay, 
.flatpickr-day.startRange.prevMonthDay, 
.flatpickr-day.endRange.prevMonthDay, 
.flatpickr-day.selected.nextMonthDay, 
.flatpickr-day.startRange.nextMonthDay, 
.flatpickr-day.endRange.nextMonthDay {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.flatpickr-months .flatpickr-prev-month, 
.flatpickr-months .flatpickr-next-month {
    fill: var(--primary-color) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 600 !important;
}

/* Fix for input group icon alignment if needed */
.input-group-text svg {
    width: 18px;
    height: 18px;
}