/* Local Inter font — loaded from woff-hinted/ subdirectory */
@font-face {
    font-family: 'Inter';
    src: url('woff-hinted/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
}
@font-face {
    font-family: 'Inter';
    src: url('woff-hinted/Inter-Bold.woff2') format('woff2');
    font-weight: 700;
}
@font-face {
    font-family: 'Inter';
    src: url('woff-hinted/Inter-ExtraBold.woff2') format('woff2');
    font-weight: 800;
}
@font-face {
    font-family: 'Inter';
    src: url('woff-hinted/Inter-Black.woff2') format('woff2');
    font-weight: 900;
}



/* Hide ALL marks under the date range slider only */
#date-range-slider .rc-slider-mark,
#date-range-slider .rc-slider-mark-text,
#date-range-slider ~ .rc-slider-mark,
#date-range-slider ~ .rc-slider-mark-text {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Nuclear option — hide all slider marks everywhere */
.rc-slider-mark {
    display: none !important;
}

.rc-slider-mark-text {
    display: none !important;
}

.rc-slider-dot {
    display: none !important;
}

/* ============================================================
   Dark theme for dcc.DatePickerSingle (.date-picker-dark)
   ============================================================ */

.date-picker-dark {
    display: inline-block;
    font-size: 11px !important;
}

/* Outer input wrapper — rounded dark button */
.date-picker-dark .SingleDatePickerInput {
    background: #1A2744 !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 6px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
    cursor: pointer !important;
}

.date-picker-dark .DateInput {
    background: transparent !important;
    width: auto !important;
}

/* Input text */
div.date-picker-dark input.DateInput_input,
div.date-picker-dark input.DateInput_input::-webkit-input-placeholder,
div.date-picker-dark input.DateInput_input::placeholder {
    background: transparent !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
    height: 24px !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
    border: none !important;
    cursor: pointer !important;
    text-align: center !important;
}

div.date-picker-dark input.DateInput_input__focused {
    border-bottom: 2px solid #5b9cf6 !important;
    color: #5b9cf6 !important;
}

/* Show the dropdown arrow icon */
.date-picker-dark .SingleDatePickerInput_calendarIcon {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 2px 0 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
}

.date-picker-dark .SingleDatePickerInput_calendarIcon svg {
    display: none !important;
}

/* Inject a ∨ chevron in place of the calendar icon */
.date-picker-dark .SingleDatePickerInput_calendarIcon::after {
    content: '∨' !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

/* Calendar popup panel */
.date-picker-dark .SingleDatePicker_picker {
    z-index: 9999 !important;
    background-color: #1A2744 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
}

.date-picker-dark .DayPicker,
.date-picker-dark .DayPicker_transitionContainer {
    background-color: #1A2744 !important;
    border-radius: 6px !important;
}

.date-picker-dark .CalendarMonth,
.date-picker-dark .CalendarMonthGrid {
    background-color: #1A2744 !important;
}

/* Month / year header */
.date-picker-dark .CalendarMonth_caption {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

/* Weekday header row */
.date-picker-dark .DayPicker_weekHeader {
    color: #667788 !important;
}
.date-picker-dark .DayPicker_weekHeader_li small {
    font-size: 11px !important;
}

/* Day cells */
.date-picker-dark .CalendarDay__default {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #8899bb !important;
    font-size: 12px !important;
}
.date-picker-dark .CalendarDay__default:hover {
    background: rgba(91,156,246,0.2) !important;
    border-color: #5b9cf6 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
}
.date-picker-dark .CalendarDay__selected,
.date-picker-dark .CalendarDay__selected:hover {
    background: #5b9cf6 !important;
    border-color: #5b9cf6 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
}
.date-picker-dark .CalendarDay__today {
    font-weight: 800 !important;
    color: #5b9cf6 !important;
}
.date-picker-dark .CalendarDay__blocked_out_of_range,
.date-picker-dark .CalendarDay__blocked_out_of_range:hover {
    color: rgba(255,255,255,0.18) !important;
    background: transparent !important;
    border-color: transparent !important;
    cursor: not-allowed !important;
}

/* Prev / next navigation arrows */
.date-picker-dark .DayPickerNavigation_button {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 4px !important;
}
.date-picker-dark .DayPickerNavigation_button:hover {
    background: rgba(91,156,246,0.2) !important;
    border-color: #5b9cf6 !important;
}
.date-picker-dark .DayPickerNavigation_svg__horizontal {
    fill: #8899bb !important;
}
/* ============================================================
   New Dash DatePickerSingle structure overrides
   ============================================================ */

/* Make the default Dash DatePicker wrapper transparent */
.dash-datepicker {
    background-color: transparent !important;
}

/* Outer wrapper — dark background, rounded border */
.date-picker-dark.dash-datepicker-input-wrapper,
#date-picker-start-wrapper,
#date-picker-end-wrapper {
    background-color: #1A2744 !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 6px !important;
    padding: 2px 6px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
    display: block !important;
    margin-left: auto !important;
    text-align: right !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
}

/* Input text — white */
#date-picker-start,
#date-picker-end,
input.dash-datepicker-input {
    background-color: transparent !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
    border: none !important;
    outline: none !important;
}

/* Chevron icon — white */
#date-picker-start-wrapper .dash-datepicker-caret-icon,
#date-picker-end-wrapper .dash-datepicker-caret-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Force month dropdown selected value to be black */
.dash-dropdown-value-item span {
    color: #000000 !important;
}

/* Force year input inside DatePicker to be black */
.dash-input-element {
    color: #000000 !important;
}