/* Date Range Calendar CSS */
.daterange-calendar-field-wrapper {
    position: relative;
    width: 100%;
}

.daterange-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.daterange-input-wrapper .calendar-icon {
    position: absolute;
    left: 15px;
    color: #666;
    pointer-events: none;
    z-index: 2;
}

.pf-daterange-picker {
    padding-left: 45px !important; /* Make room for the icon */
    background-color: #fff !important;
    cursor: pointer !important;
}

.daterange-summary-display {
    margin-top: 15px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 15px;
    animation: fadeIn 0.3s ease-in-out;
}

.daterange-summary-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.daterange-summary-content .material-symbols-outlined {
    color: #4f46e5; /* Primary color */
    background: #e0e7ff;
    padding: 10px;
    border-radius: 50%;
    font-size: 24px;
}

.daterange-text {
    display: flex;
    flex-direction: column;
}

.daterange-label {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 4px;
}

.daterange-dates {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Flatpickr custom styling to match dark theme screenshot */
.daterange-input-wrapper input,
.daterange-input-wrapper .calendar-icon {
    display: none !important; /* Hide input entirely when using inline calendar */
}

.flatpickr-calendar.inline {
    background: #2d3748 !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    padding: 10px !important;
    width: 300px !important;
    color: #fff !important;
}

.flatpickr-month {
    color: #fff !important;
    fill: #fff !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #fff !important;
}

span.flatpickr-weekday {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
}

.flatpickr-day {
    color: #fff !important;
}

.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
    color: #64748b !important;
}

.flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
    background: #475569 !important;
    border-color: #475569 !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: #3b82f6 !important; /* Blue color for selection */
    border-color: #3b82f6 !important;
    color: #fff !important;
}

.flatpickr-day.inRange {
    background: #1e293b !important;
    border-color: #1e293b !important;
    box-shadow: -5px 0 0 #1e293b, 5px 0 0 #1e293b !important;
}