/* Make loading overlay transparent */
#table-load-spinner > div {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Center spinner nicely */
#table-load-spinner .dash-spinner {
    z-index: 9999;
}

/* Optional: subtle shadow so spinner is visible */
#table-load-spinner .dash-spinner * {
    box-shadow: none !important;
}

/* ============================================================
   DatePickerRange — override react-dates teal with brand indigo
   ============================================================ */

/* Selected start/end date cells */
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
    background: #4B4BCC !important;
    border-color: #4B4BCC !important;
    color: #fff !important;
}

/* The highlighted span between start and end */
.CalendarDay__selected_span,
.CalendarDay__selected_span:active {
    background: #ddddf8 !important;
    border-color: #c7c7f0 !important;
    color: #1a1a5e !important;
}

.CalendarDay__selected_span:hover {
    background: #7171D8 !important;
    border-color: #7171D8 !important;
    color: #fff !important;
}

/* Hovered range preview */
.CalendarDay__hovered_span,
.CalendarDay__hovered_span:hover {
    background: #ebebfc !important;
    border-color: #b5b5ea !important;
    color: #1a1a5e !important;
}

/* Input underline (focused) */
.DateInput_input__focused {
    border-bottom-color: #4B4BCC !important;
}

/* Nav arrow buttons */
.DayPickerNavigation_button:hover {
    border-color: #4B4BCC !important;
}

/* Today marker */
.CalendarDay__today {
    font-weight: bold;
    color: #4B4BCC;
}