/* ===========================
   Forms & Inputs
=========================== */

/* Dropdown Styles */
.dropdown {
    font-size: 1.2rem;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding: 5px;
    min-width: 200px;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.dropdown:hover {
    border-color: var(--border-light);
}

/* React-Select / dcc.Dropdown Styles - Support both class formats */
/* Main dropdown control */
.Select__control,
.Select-control,
#bank-selection-dropdown .Select__control,
#bank-selection-dropdown .Select-control {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-ui) !important;
    color: var(--text-primary) !important;
}

.Select__control:hover,
.Select-control:hover {
    border-color: var(--brand-purple) !important;
}

.Select__control--is-focused,
.Select-control.is-focused {
    border-color: var(--brand-purple) !important;
    box-shadow: 0 0 0 1px var(--brand-purple) !important;
}

/* Dropdown menu */
.Select__menu,
.Select-menu,
.Select__menu-list,
.Select-menu-outer {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-ui) !important;
}

/* Menu options */
.Select__option,
.Select-option,
.VirtualizedSelectOption {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.Select__option:hover,
.Select-option:hover,
.VirtualizedSelectFocusedOption {
    background-color: var(--bg-hover) !important;
}

.Select__option--is-selected,
.Select-option.is-selected {
    background-color: var(--brand-purple) !important;
    color: white !important;
}

/* Multi-value chips (selected items) */
.Select__multi-value,
.Select-multi-value,
.Select__value-container .Select__multi-value {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-ui) !important;
    border-radius: 4px !important;
}

.Select__multi-value__label,
.Select-multi-value-label {
    color: var(--brand-purple) !important;
    background-color: transparent !important;
    font-weight: 600 !important;
}

.Select__multi-value__remove,
.Select-multi-value-remove {
    color: var(--text-secondary) !important;
    background-color: transparent !important;
}

.Select__multi-value__remove:hover,
.Select-multi-value-remove:hover {
    background-color: var(--error-red) !important;
    color: white !important;
}

/* Input and placeholder */
.Select__input,
.Select-input {
    color: var(--text-primary) !important;
}

.Select__placeholder,
.Select-placeholder {
    color: var(--text-secondary) !important;
}

/* Selected value text (single-select dropdowns) */
.Select__single-value,
.Select-single-value,
.Select-value-label,
.Select-value {
    color: var(--text-primary) !important;
}

/* Value container */
.Select__value-container {
    background-color: transparent !important;
}

/* Indicators (dropdown arrow, clear button) */
.Select__indicator,
.Select__dropdown-indicator,
.Select__clear-indicator {
    color: var(--text-secondary) !important;
}

.Select__indicator:hover,
.Select__dropdown-indicator:hover,
.Select__clear-indicator:hover {
    color: var(--text-primary) !important;
}

/* Dash Dropdown Container */
#bank-selection-dropdown,
.dash-dropdown,
div[id$="-dropdown"] {
    background-color: transparent !important;
}

/* Inner containers */
.Select__indicators-container,
.Select__value-container--is-multi,
.Select__value-container--has-value {
    background-color: transparent !important;
}

/* Auth Form Elements */
.auth-input {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease, color 0.3s ease;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-ui);
}

.auth-input::placeholder {
    color: var(--gray-500) !important;
}

.auth-input:focus {
    border-color: var(--brand-purple) !important;
    box-shadow: 0 0 0 3px rgba(180, 100, 255, 0.15) !important;
}

/* Simulation Page Inputs */
.simulation-input,
.simulation-input input {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-ui) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}

.simulation-input::placeholder,
.simulation-input input::placeholder {
    color: var(--text-secondary) !important;
}

.simulation-input:focus,
.simulation-input input:focus {
    border-color: var(--brand-purple) !important;
    box-shadow: 0 0 0 3px rgba(180, 100, 255, 0.15) !important;
    background-color: var(--bg-secondary) !important;
}

/* Auth Button Effects */
.auth-button {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
    box-shadow: 0 4px 8px rgba(180, 41, 255, 0.2);
}

.auth-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(180, 41, 255, 0.3);
}

.auth-button:active {
    transform: translateY(0);
}

/* Social Login Buttons */
.social-button {
    transition: all 0.2s ease;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
}

.social-button:hover {
    background-color: var(--bg-tertiary);
    transform: translateY(-1px);
}

/* Upload Box */
.upload-box {
    border: 2px dashed var(--border-primary);
    border-radius: 10px;
    background-color: var(--bg-secondary);
    text-align: center;
    margin: 20px 0;
    padding: 15px;
    cursor: pointer;
    height: 120px;
    line-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* Ensure inner content is centered on desktop */
.upload-box > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

/* Mobile responsive adjustments for upload box */
@media (max-width: 768px) {
    .upload-box {
        height: auto;
        min-height: 100px;
        line-height: 1.4;
        padding: 12px;
    }
    
    .upload-box > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }
    
    .upload-box i {
        font-size: 28px !important;
        margin-right: 0 !important;
    }
    
    .upload-box span {
        font-size: 14px !important;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        text-align: center;
        line-height: 1.4;
        max-width: 100%;
    }
}

.upload-box:hover {
    border-color: var(--border-light);
    background-color: var(--bg-tertiary);
}

/* Tabs */
.nav-link.active {
    color: var(--brand-purple) !important;
}

.nav-link {
    color: var(--text-primary) !important;
}

/* ===========================
   Date Range Picker Styling (Purple Theme - Pill/Badge Style)
=========================== */

/* Container for pill effect */
.DateRangePickerInput {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    flex-wrap: nowrap !important;
}

/* Input Fields - Pill/Badge Style (More Compact) */
.DateInput_input {
    background-color: var(--bg-tertiary) !important;
    color: var(--brand-purple) !important;
    border: 1px solid var(--border-ui) !important;
    border-radius: 20px !important;
    font-size: 15px !important;
    padding: 6px 10px !important;
    font-weight: 700 !important;
    text-align: center !important;
    min-width: auto !important;
    width: auto !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.DateInput_input:hover {
    background-color: var(--bg-hover) !important;
    border-color: var(--brand-purple) !important;
    box-shadow: 0 2px 4px rgba(180, 100, 255, 0.15) !important;
}

.DateInput_input:focus {
    background-color: var(--bg-hover) !important;
    border-color: var(--brand-purple) !important;
    box-shadow: 0 0 0 3px rgba(180, 100, 255, 0.2) !important;
    outline: none !important;
}

.DateInput_input::placeholder {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

/* Individual date input container */
.DateInput {
    background: transparent !important;
    border: none !important;
    width: auto !important;
}

/* Remove default container styling */
.DateRangePickerInput__withBorder {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Ensure proper alignment */
.DateRangePicker {
    display: inline-block !important;
}

/* Optional: Add subtle animation on date change */
.DateInput_input {
    animation: none !important;
}

.DateInput_input:active {
    transform: scale(0.98) !important;
}

/* Arrow between pills */
.DateRangePickerInput_arrow {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 2px !important;
}

.DateRangePickerInput_arrow svg {
    fill: var(--gray-400) !important;
    width: 16px !important;
    height: 16px !important;
}

/* Clear dates button (X) - styled as pill */
.DateRangePickerInput_clearDates {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-ui) !important;
    border-radius: 50% !important;
    padding: 4px !important;
    margin: 0 0 0 2px !important;
    transition: all 0.2s ease !important;
}

.DateRangePickerInput_clearDates:hover {
    background-color: var(--bg-hover) !important;
    border-color: var(--error-red) !important;
}

.DateRangePickerInput_clearDates svg {
    fill: var(--text-secondary) !important;
    width: 12px !important;
    height: 12px !important;
}

.DateRangePickerInput_clearDates:hover svg {
    fill: var(--error-red) !important;
}

/* Calendar Icon - More Compact */
.DateRangePickerInput_calendarIcon {
    padding: 6px 8px !important;
    margin: 0 0 0 2px !important;
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-ui) !important;
    border-radius: 20px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.DateRangePickerInput_calendarIcon:hover {
    background-color: var(--bg-hover) !important;
    border-color: var(--brand-purple) !important;
    box-shadow: 0 2px 4px rgba(180, 100, 255, 0.15) !important;
}

.DateRangePickerInput_calendarIcon svg {
    fill: var(--brand-purple) !important;
    width: 18px !important;
    height: 18px !important;
}

/* Selected Date Range */
.CalendarDay__selected_span {
    background: var(--brand-purple-light) !important;
    border: 1px solid var(--brand-purple-light) !important;
    color: var(--brand-purple-dark) !important;
}

.CalendarDay__selected {
    background: var(--brand-purple) !important;
    border: 1px solid var(--brand-purple) !important;
    color: white !important;
}

.CalendarDay__selected:hover {
    background: var(--brand-purple-hover) !important;
    border: 1px solid var(--brand-purple-hover) !important;
}

/* Hovered Span (when selecting range) */
.CalendarDay__hovered_span,
.CalendarDay__hovered_span:hover {
    background: var(--brand-purple-light) !important;
    border: 1px solid var(--brand-purple-light) !important;
    color: var(--brand-purple-dark) !important;
}

/* Selected Span (middle dates in range) */
.CalendarDay__selected_span:active,
.CalendarDay__selected_span:hover {
    background: var(--brand-purple-light) !important;
    border: 1px solid var(--brand-purple) !important;
}

/* Today's Date */
.CalendarDay__today {
    background: transparent !important;
    border: 1px solid var(--brand-purple) !important;
    color: var(--brand-purple-dark) !important;
}

/* Regular Day Hover */
.CalendarDay__default:hover {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--brand-purple-light) !important;
    color: var(--text-primary) !important;
}

/* Calendar Background */
.DayPicker {
    background: var(--bg-primary) !important;
    box-shadow: 0 4px 12px var(--shadow-medium) !important;
}

/* Month Navigation Arrows */
.DayPickerNavigation_button {
    border: 1px solid var(--border-primary) !important;
}

.DayPickerNavigation_button:hover {
    border: 1px solid var(--brand-purple) !important;
}

.DayPickerNavigation_svg__horizontal {
    fill: var(--brand-purple) !important;
}

/* Weekday Headers */
.CalendarMonth_caption,
.CalendarMonth_caption *,
.CalendarMonth_caption strong {
    color: #1a202c !important;
    font-weight: bold !important;
}

.DayPicker_weekHeader {
    color: var(--text-muted) !important;
}

/* Blocked/Outside Days */
.CalendarDay__blocked_out_of_range {
    color: var(--text-muted) !important;
    opacity: 0.5 !important;
}

/* ===========================
   Responsive - Mobile Pill Adjustments
=========================== */
@media (max-width: 991px) {
    /* Compact pills on tablet */
    .DateInput_input {
        font-size: 14px !important;
        padding: 5px 8px !important;
        min-width: auto !important;
        font-weight: 700 !important;
    }
    
    .DateRangePickerInput_calendarIcon {
        padding: 5px 6px !important;
    }
    
    .DateRangePickerInput_calendarIcon svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* Tighter spacing */
    .DateRangePickerInput {
        gap: 4px !important;
    }
    
    .DateRangePickerInput_arrow {
        margin: 0 2px !important;
    }
    
    .DateRangePickerInput_arrow svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* Tablet and mobile - stack vertically at earlier breakpoint */
@media (max-width: 768px) {
    .DateRangePickerInput {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    /* Rotate arrow to point down */
    .DateRangePickerInput_arrow {
        transform: rotate(90deg) !important;
        margin: 0 !important;
    }
    
    .DateInput_input {
        min-width: auto !important;
        width: auto !important;
        max-width: none !important;
    }
    
    /* Make DateRangePicker take full available width */
    .DateRangePicker {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
} 
/* Dash Slider Styles for Dark Mode */
.rc-slider-mark-text {
    color: var(--text-primary) !important;
}

.rc-slider-track {
    background-color: var(--brand-purple) !important;
}

.rc-slider-rail {
    background-color: var(--border-ui) !important;
}

.rc-slider-handle {
    border-color: var(--brand-purple) !important;
    background-color: var(--bg-primary) !important;
}

.rc-slider-handle:hover,
.rc-slider-handle:active,
.rc-slider-handle:focus {
    border-color: var(--brand-purple-active) !important;
    box-shadow: 0 0 0 5px rgba(180, 100, 255, 0.2) !important;
}

.rc-slider-dot {
    border-color: var(--border-ui) !important;
    background-color: var(--bg-primary) !important;
}

.rc-slider-dot-active {
    border-color: var(--brand-purple) !important;
}