/* ============================================================
   datepicker.css  –  golden theme overrides
   Compatible with dash-mantine-components 2.x (Mantine 8)
   ============================================================ */

/* ── DatePickerSingle ───────────────────────────────────────── */
/*actually either class is good, use both just to be sure*/
.DateInput_input, .DateInput_input_1 {
    font-size: inherit;
    border-color: #daa520;
}

.DateInput, .DateInput_1 {
    width: 150px;
}

.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
    background: #daa520;
    border: 1px solid #daa520;
}

.DayPickerKeyboardShortcuts_show__bottomRight:hover::before {
    border-right: 33px solid #daa520;
}

.DayPickerKeyboardShortcuts_show__bottomRight::before {
    border-top: 26px solid transparent;
    border-right: 33px solid #daa520;
    bottom: 0;
    right: 0;
}

/* ── Sliders ─────────────────────────────────────────────────── */
/*
 * dcc.Slider was replaced with dmc.Slider(color='yellow') so no CSS
 * override is needed — Mantine handles the colour natively.
 * The rules below are kept only as a safety net in case any other
 * rc-slider instance appears elsewhere in the app.
 */
.rc-slider-track,
.rc-slider-tracks {
    background-color: #daa520 !important;
}
.rc-slider-handle {
    background-color: #daa520 !important;
    border-color: #daa520 !important;
    opacity: 1 !important;
}

/* ── dmc.Select used as time picker (hour / minute) ─────────── */
/*
 * The two dcc.Dropdown components were replaced with dmc.Select because
 * Mantine 8's global stylesheet (dmc.styles.ALL) clashes with react-select
 * v1 – the library used internally by dcc.Dropdown.  The clash sets
 * overflow:hidden on the value container, hiding the selected text and
 * leaving only the "×" clear button visible.
 *
 * dmc.Select is a first-class Mantine component, so it is fully compatible
 * with Mantine 8 styles.  The rules below remove Mantine's own focus ring
 * and border from the inputs so the golden border on the parent <div>
 * (set inline in serve_layout) is the only visible border.
 */

/* Remove Mantine's focus outline/ring on the Select input */
#dropdown-hour input:focus,
#dropdown-minute input:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Ensure the input wrapper itself carries no Mantine border */
#dropdown-hour [data-mantine-input-wrapper],
#dropdown-minute [data-mantine-input-wrapper] {
    border: none !important;
    box-shadow: none !important;
}

/* ── VirtualizedSelect highlighted option ───────────────────── */
/* Kept for any other dcc.Dropdown instances elsewhere in the app */
.VirtualizedSelectFocusedOption {
    background-color: #daa520;
    color: white;
}