/* Date Picker Styles */

/* Modern Date Picker Styles */
.modern-date-picker {
    border: 2px solid var(--border-primary) !important;
    border-radius: 10px !important;
    padding: 12px !important;
    background: var(--input-bg) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.3s ease !important;
}

.modern-date-picker:hover {
    border-color: var(--border-focus) !important;
    box-shadow: var(--shadow-md) !important;
}

.modern-date-picker:focus {
    border-color: var(--border-focus) !important;
    box-shadow: var(--input-focus-shadow) !important;
}

.modern-date-picker:hover {
    border-color: #667eea !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15) !important;
    transform: translateY(-1px);
}

.modern-date-picker:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    outline: none !important;
}

/* Date Range Display Styles */
#selected-date-range {
    font-size: 1.1rem !important;
    letter-spacing: 0.025em !important;
}

/* Enhanced Date Picker Styles */
.DatePickerRange {
    font-family: var(--font-family-base) !important;
}

.DatePickerRange .DateInput_input {
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    background: white !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.DatePickerRange .DateInput_input:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.1) !important;
}

.DatePickerRange .DateInput_input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
}

.DatePickerRange .DateRangePickerInput {
    border: none !important;
    background: transparent !important;
}

.DatePickerRange .DateRangePickerInput__arrow {
    color: #6b7280 !important;
    margin: 0 8px !important;
}

.DatePickerRange .DateRangePickerInput__arrow:hover {
    color: #3b82f6 !important;
}

/* Calendar Display Fixes */
.DateRangePicker {
    position: relative !important;
    z-index: 1050 !important;
}

.DateRangePicker__picker {
    position: absolute !important;
    z-index: 1050 !important;
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    overflow: visible !important;
    margin-top: 8px !important;
}

.DateRangePicker__picker--horizontal {
    left: 0 !important;
    right: auto !important;
}

.DateRangePicker__picker--horizontal.DateRangePicker__picker--direction-left {
    left: auto !important;
    right: 0 !important;
}

.DateRangePicker__picker--horizontal.DateRangePicker__picker--direction-right {
    left: 0 !important;
    right: auto !important;
}

.DateRangePicker__picker--horizontal.DateRangePicker__picker--direction-up {
    bottom: 100% !important;
    top: auto !important;
}

.DateRangePicker__picker--horizontal.DateRangePicker__picker--direction-down {
    top: 100% !important;
    bottom: auto !important;
}

/* Ensure calendar is not clipped by parent containers */
.DateRangePicker__picker * {
    overflow: visible !important;
}

.DateRangePicker__picker .CalendarMonth {
    overflow: visible !important;
}

.DateRangePicker__picker .CalendarMonthGrid {
    overflow: visible !important;
}

.DateRangePicker__picker .CalendarMonthGrid__month {
    overflow: visible !important;
}

/* Dark theme fixes */
.theme-dark .DatePickerRange .DateInput_input {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

.theme-dark .DatePickerRange .DateInput_input:hover {
    border-color: #60a5fa !important;
}

.theme-dark .DatePickerRange .DateInput_input:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

.theme-dark .DatePickerRange .DateRangePickerInput__arrow {
    color: #9ca3af !important;
}

.theme-dark .DatePickerRange .DateRangePickerInput__arrow:hover {
    color: #60a5fa !important;
}

.theme-dark .DateRangePicker__picker {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

.theme-dark .DateRangePicker__picker .CalendarMonth {
    background: #374151 !important;
    color: #f9fafb !important;
}

.theme-dark .DateRangePicker__picker .CalendarMonth__caption {
    color: #f9fafb !important;
}

.theme-dark .DateRangePicker__picker .CalendarDay {
    color: #f9fafb !important;
}

.theme-dark .DateRangePicker__picker .CalendarDay:hover {
    background: #4b5563 !important;
    color: #f9fafb !important;
}

.theme-dark .DateRangePicker__picker .CalendarDay--selected {
    background: #3b82f6 !important;
    color: white !important;
}

.theme-dark .DateRangePicker__picker .CalendarDay--hovered {
    background: #60a5fa !important;
    color: white !important;
}

/* Dark theme support for modern date picker */
.theme-dark .modern-date-picker {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

.theme-dark .modern-date-picker:hover {
    border-color: #667eea !important;
    background-color: #4b5563 !important;
}

.theme-dark .modern-date-picker:focus {
    border-color: #667eea !important;
    background-color: #4b5563 !important;
}