/* Dark Mode Custom Styles for HomeSpend */

/* Smooth transitions for theme changes */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Dark mode body and html */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] html {
    background-color: #212529 !important;
    color: #ffffff !important;
}

/* Dark mode chart backgrounds and plotly styling */
[data-bs-theme="dark"] .js-plotly-plot {
    background-color: transparent !important;
}

[data-bs-theme="dark"] .plotly .modebar {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Plotly chart paper and plot background */
[data-bs-theme="dark"] .js-plotly-plot .plotly .main-svg {
    background-color: transparent !important;
}

[data-bs-theme="dark"] .js-plotly-plot .bg {
    fill: transparent !important;
}

/* Dark mode loading spinner */
[data-bs-theme="dark"] ._dash-loading {
    color: #ffffff !important;
}

/* Dark mode table styling */
[data-bs-theme="dark"] .table {
    --bs-table-bg: var(--bs-dark);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
}

/* Dark mode card enhancements */
[data-bs-theme="dark"] .card {
    border: 1px solid rgba(255, 255, 255, 0.125);
}

/* Dark mode form controls and dropdowns */
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-control {
    background-color: #495057 !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .form-control:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    background-color: #495057 !important;
}

/* Dash dropdown styling */
[data-bs-theme="dark"] .Select-control {
    background-color: #495057 !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .Select-menu-outer {
    background-color: #495057 !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

[data-bs-theme="dark"] .Select-option {
    background-color: #495057 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .Select-option:hover {
    background-color: #6c757d !important;
}

[data-bs-theme="dark"] .Select-value-label {
    color: #ffffff !important;
}

/* Enhanced DatePickerRange styling */
[data-bs-theme="dark"] .DateInput {
    background-color: #495057 !important;
}

[data-bs-theme="dark"] .DateInput_input {
    background-color: #495057 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

[data-bs-theme="dark"] .DateRangePickerInput {
    background-color: #495057 !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

[data-bs-theme="dark"] .DateRangePickerInput_arrow {
    color: #ffffff !important;
}

/* DatePicker calendar styling */
[data-bs-theme="dark"] .DateRangePicker_picker {
    background-color: #495057 !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    z-index: 10000 !important;
}

[data-bs-theme="dark"] .Calendar {
    background-color: #495057 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .Calendar__month {
    background-color: #495057 !important;
}

[data-bs-theme="dark"] .Calendar__monthText {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .Calendar__yearText {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .Calendar__day {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .Calendar__day:hover {
    background-color: #6c757d !important;
}

[data-bs-theme="dark"] .Calendar__day--selected {
    background-color: #007bff !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .Calendar__day--in-range {
    background-color: rgba(0, 123, 255, 0.3) !important;
}

[data-bs-theme="dark"] .Calendar__day--blocked {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Theme toggle button animation */
#theme-toggle {
    transition: transform 0.3s ease !important;
}

#theme-toggle:hover {
    transform: scale(1.1);
}

/* Enhanced KPI cards for dark mode */
[data-bs-theme="dark"] .shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.075) !important;
}

/* Better contrast for text in dark mode */
[data-bs-theme="dark"] .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Enhanced navbar in dark mode */
[data-bs-theme="dark"] .navbar-dark {
    background-color: #212529 !important;
}

/* CRITICAL: Widget stability improvements */
.Select-control {
    transition: all 0.2s ease !important;
    position: relative !important;
}

.Select-control:hover {
    border-color: #007bff !important;
}

/* Prevent widget flickering - CRITICAL FIX */
.Select-menu-outer {
    z-index: 10000 !important;
    position: absolute !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}

/* DatePicker stability - CRITICAL FIX */
.DateInput {
    transition: all 0.2s ease !important;
    position: relative !important;
}

.DateRangePickerInput {
    transition: all 0.2s ease !important;
    position: relative !important;
}

/* Prevent dropdown menus from disappearing - CRITICAL FIX */
.Select-menu {
    max-height: 200px !important;
    overflow-y: auto !important;
    z-index: 10000 !important;
}

/* Ensure proper z-index for all dropdowns - CRITICAL FIX */
.Select-menu-outer,
.DateRangePicker_picker,
.DateInput_fang,
.DateRangePicker_picker__ranges,
.DateRangePicker_picker__nav,
.DateRangePicker_picker__nav--next,
.DateRangePicker_picker__nav--prev {
    z-index: 10000 !important;
}

/* Improve dropdown positioning - CRITICAL FIX */
.Select-menu-outer {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Dark mode dropdown positioning */
[data-bs-theme="dark"] .Select-menu-outer {
    background-color: #495057 !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}

/* Prevent layout shifts */
.Select-placeholder,
.Select-value-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* CRITICAL: Fix for sidebar interference */
.offcanvas {
    z-index: 1045 !important;
}

.offcanvas-backdrop {
    z-index: 1040 !important;
}

/* Ensure widgets work properly when sidebar is open */
.offcanvas-open .Select-menu-outer,
.offcanvas-open .DateRangePicker_picker {
    z-index: 10001 !important;
}

/* Fix for DatePicker navigation arrows */
.DateRangePicker_picker__nav {
    background-color: transparent !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 10003 !important;
}

.DateRangePicker_picker__nav--next,
.DateRangePicker_picker__nav--prev {
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
    cursor: pointer !important;
    z-index: 10003 !important;
    pointer-events: auto !important;
}

[data-bs-theme="light"] .DateRangePicker_picker__nav--next,
[data-bs-theme="light"] .DateRangePicker_picker__nav--prev {
    color: #000000 !important;
}

/* Fix for DatePicker month/year navigation */
.DateRangePicker_picker__nav--next:hover,
.DateRangePicker_picker__nav--prev:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    cursor: pointer !important;
}

[data-bs-theme="light"] .DateRangePicker_picker__nav--next:hover,
[data-bs-theme="light"] .DateRangePicker_picker__nav--prev:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Ensure DatePicker calendar is fully interactive */
.DateRangePicker_picker {
    z-index: 10002 !important;
    pointer-events: auto !important;
}

.DateRangePicker_picker .Calendar {
    pointer-events: auto !important;
}

.DateRangePicker_picker .Calendar__month {
    pointer-events: auto !important;
}

.DateRangePicker_picker .Calendar__day {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Fix for DatePicker month navigation buttons */
.DateRangePicker_picker__nav--next,
.DateRangePicker_picker__nav--prev {
    position: relative !important;
    z-index: 10004 !important;
    pointer-events: auto !important;
}

/* Ensure proper stacking context */
.container, .row, .col {
    position: relative !important;
}

/* Fix for widget containers */
.card-body {
    position: relative !important;
    z-index: 1 !important;
}

/* Prevent interference from other elements */
.navbar, .offcanvas {
    z-index: 1030 !important;
}

/* Ensure dropdowns are always on top */
.Select-control.is-open .Select-menu-outer {
    z-index: 10002 !important;
}

/* Fix for DatePicker when open */
.DateRangePicker_picker.is-open {
    z-index: 10002 !important;
}

/* HTML5 Date Input styling */
input[type="date"] {
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #495057 !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

input[type="date"]:focus {
    border-color: #86b7fe !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Dark mode date input styling */
[data-bs-theme="dark"] input[type="date"] {
    background-color: #495057 !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] input[type="date"]:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Date input calendar icon styling */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0) !important;
    cursor: pointer !important;
}

[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) !important;
}