/* WCAG 2.2 AAA contrast overrides for Dash native components.
   Tema-spesifikke farger ligger i themes.css (CSS-variabler per data-theme).
   Denne fila inneholder kun komponentstruktur som er felles på tvers av temaer.
*/

/* --- Slider (rc-slider) ---------------------------------------------------- */

/* Hide all tooltips and the auto-rendered <input type="number">.
   Verdien vises i vår egen html.Span over slideren. */
.rc-slider-tooltip {
    display: none !important;
}
input[type="number"] {
    display: none !important;
}

/* Felles fallback — tema overstyrer track/handle-farge i themes.css */
.rc-slider-rail {
    background-color: var(--border, #475569) !important;
}
.rc-slider-handle:hover,
.rc-slider-handle:active,
.rc-slider-handle:focus {
    box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.35) !important;
}

/* Synlige mark-tall under z-slideren */
.rc-slider-mark-text {
    color: var(--text-secondary, #cbd5e1) !important;
    font-size: 10px !important;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important;
}

/* --- Dropdown (dcc.Dropdown / react-select) -------------------------------- */

.Select-control,
.Select--single > .Select-control,
.is-open > .Select-control {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #475569 !important;
    min-height: 36px !important;
}

.Select-menu-outer {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #475569 !important;
}

.Select-value-label,
.Select-placeholder,
.Select-input > input,
.Select-option {
    color: #0f172a !important;
    font-weight: 500 !important;
}

.Select-option.is-focused {
    background-color: #fef9c3 !important; /* secondary-100, lys gul */
    color: #0f172a !important;
}

.Select-option.is-selected {
    background-color: #fde047 !important; /* secondary-300 */
    color: #0f172a !important;
}

.Select-arrow-zone .Select-arrow {
    border-top-color: #0f172a !important;
}

/* --- DatePickerSingle (react-dates) ---------------------------------------- */

.DateInput,
.SingleDatePickerInput,
.SingleDatePickerInput__withBorder {
    background-color: #ffffff !important;
    border: 1px solid #475569 !important;
    border-radius: 4px !important;
}

.DateInput_input,
.DateInput_input_1 {
    background-color: #ffffff !important;
    color: #0f172a !important;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 10px !important;
    border-bottom: none !important;
}

.DateInput_input__disabled {
    /* Disabled state — fortsatt ≥4.5:1 kontrast */
    color: #475569 !important;
    background-color: #e2e8f0 !important;
    font-style: normal !important;
}

.SingleDatePickerInput__disabled {
    background-color: #e2e8f0 !important;
}

/* Måneds-/års-velgere i kalender-caption (uten dette blir året en blank
   <input type="number"> mellom − og +). */
.CalendarMonth_caption select,
.CalendarMonth_caption input {
    color: #0f172a !important;
    background-color: #ffffff !important;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important;
    font-size: 13px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 2px 4px !important;
}

/* --- RadioItems & Checklist labels ----------------------------------------- */

.dash-checklist label,
.dash-radio-items label,
input[type="radio"] + label,
input[type="checkbox"] + label {
    color: var(--text-primary, #f1f5f9) !important;
    font-size: 13px !important;
}

/* --- Focus rings (tastaturtilgjengelighet) --------------------------------- */

.Select-control:focus-within,
.DateInput_input:focus,
button:focus-visible,
input:focus-visible {
    outline: 2px solid #eab308 !important;
    outline-offset: 2px !important;
}