/* ============================================================
   chart_creator_dark_dropdowns.css  — Dash 4.0 class names
   Place in assets/ folder.
   ============================================================ */

/* --- The trigger button (the visible control box) --- */
#cc-source-dd button.dash-dropdown,
#cc-countries-dd button.dash-dropdown,
#cc-cat1-dd button.dash-dropdown,
#cc-desc1-dd button.dash-dropdown,
#cc-chart1-type button.dash-dropdown,
#cc-y1-scale button.dash-dropdown,
#cc-y1-index-year button.dash-dropdown,
#cc-cat2-dd button.dash-dropdown,
#cc-desc2-dd button.dash-dropdown,
#cc-chart2-type button.dash-dropdown,
#cc-y2-scale button.dash-dropdown,
#cc-y2-index-year button.dash-dropdown,
#cc-cat3-dd button.dash-dropdown,
#cc-desc3-dd button.dash-dropdown,
#cc-chart3-type button.dash-dropdown,
#cc-y3-scale button.dash-dropdown,
#cc-y3-index-year button.dash-dropdown,
#cc-reg-type-dd button.dash-dropdown,
#cc-reg-y-dd button.dash-dropdown,
#cc-reg-x-dd button.dash-dropdown,
#cc-reg-z-dd button.dash-dropdown,
#cc-ust-indicator button.dash-dropdown,
#cc-ust-latest-date button.dash-dropdown,
#cc-ust-start-date button.dash-dropdown,
#cc-ust-country-filter-dd button.dash-dropdown,
#cc-cofer-valuetype button.dash-dropdown,
#cc-cofer-currencies button.dash-dropdown {
    background-color: #0B133A !important;
    color: white !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
}

/* --- Placeholder and single selected value text --- */
#cc-source-dd .dash-dropdown-value,
#cc-countries-dd .dash-dropdown-value,
#cc-cat1-dd .dash-dropdown-value,
#cc-desc1-dd .dash-dropdown-value,
#cc-chart1-type .dash-dropdown-value,
#cc-y1-scale .dash-dropdown-value,
#cc-y1-index-year .dash-dropdown-value,
#cc-cat2-dd .dash-dropdown-value,
#cc-desc2-dd .dash-dropdown-value,
#cc-chart2-type .dash-dropdown-value,
#cc-y2-scale .dash-dropdown-value,
#cc-y2-index-year .dash-dropdown-value,
#cc-cat3-dd .dash-dropdown-value,
#cc-desc3-dd .dash-dropdown-value,
#cc-chart3-type .dash-dropdown-value,
#cc-y3-scale .dash-dropdown-value,
#cc-y3-index-year .dash-dropdown-value,
#cc-reg-type-dd .dash-dropdown-value,
#cc-reg-y-dd .dash-dropdown-value,
#cc-reg-x-dd .dash-dropdown-value,
#cc-reg-z-dd .dash-dropdown-value,
#cc-ust-indicator .dash-dropdown-value,
#cc-ust-latest-date .dash-dropdown-value,
#cc-ust-start-date .dash-dropdown-value,
#cc-ust-country-filter-dd .dash-dropdown-value,
#cc-cofer-valuetype .dash-dropdown-value,
#cc-cofer-currencies .dash-dropdown-value {
    color: white !important;
}

/* --- The dropdown options panel (listbox popup) --- */
#cc-source-dd [role="listbox"],
#cc-countries-dd [role="listbox"],
#cc-cat1-dd [role="listbox"],
#cc-desc1-dd [role="listbox"],
#cc-chart1-type [role="listbox"],
#cc-y1-scale [role="listbox"],
#cc-y1-index-year [role="listbox"],
#cc-cat2-dd [role="listbox"],
#cc-desc2-dd [role="listbox"],
#cc-chart2-type [role="listbox"],
#cc-y2-scale [role="listbox"],
#cc-y2-index-year [role="listbox"],
#cc-cat3-dd [role="listbox"],
#cc-desc3-dd [role="listbox"],
#cc-chart3-type [role="listbox"],
#cc-y3-scale [role="listbox"],
#cc-y3-index-year [role="listbox"],
#cc-reg-type-dd [role="listbox"],
#cc-reg-y-dd [role="listbox"],
#cc-reg-x-dd [role="listbox"],
#cc-reg-z-dd [role="listbox"],
#cc-ust-indicator [role="listbox"],
#cc-ust-latest-date [role="listbox"],
#cc-ust-start-date [role="listbox"],
#cc-ust-country-filter-dd [role="listbox"],
#cc-cofer-valuetype [role="listbox"],
#cc-cofer-currencies [role="listbox"] {
    background-color: #0B133A !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    z-index: 9999 !important;
}

/* --- Individual options --- */
#cc-source-dd [role="option"],
#cc-countries-dd [role="option"],
#cc-cat1-dd [role="option"],
#cc-desc1-dd [role="option"],
#cc-chart1-type [role="option"],
#cc-y1-scale [role="option"],
#cc-y1-index-year [role="option"],
#cc-cat2-dd [role="option"],
#cc-desc2-dd [role="option"],
#cc-chart2-type [role="option"],
#cc-y2-scale [role="option"],
#cc-y2-index-year [role="option"],
#cc-cat3-dd [role="option"],
#cc-desc3-dd [role="option"],
#cc-chart3-type [role="option"],
#cc-y3-scale [role="option"],
#cc-y3-index-year [role="option"],
#cc-reg-type-dd [role="option"],
#cc-reg-y-dd [role="option"],
#cc-reg-x-dd [role="option"],
#cc-reg-z-dd [role="option"],
#cc-ust-indicator [role="option"],
#cc-ust-latest-date [role="option"],
#cc-ust-start-date [role="option"],
#cc-ust-country-filter-dd [role="option"],
#cc-cofer-valuetype [role="option"],
#cc-cofer-currencies [role="option"] {
    background-color: #0B133A !important;
    color: white !important;
}

/* --- Hovered/focused option --- */
#cc-source-dd [role="option"]:hover,
#cc-countries-dd [role="option"]:hover,
#cc-cat1-dd [role="option"]:hover,
#cc-desc1-dd [role="option"]:hover,
#cc-chart1-type [role="option"]:hover,
#cc-y1-scale [role="option"]:hover,
#cc-cat2-dd [role="option"]:hover,
#cc-desc2-dd [role="option"]:hover,
#cc-chart2-type [role="option"]:hover,
#cc-y2-scale [role="option"]:hover,
#cc-cat3-dd [role="option"]:hover,
#cc-desc3-dd [role="option"]:hover,
#cc-chart3-type [role="option"]:hover,
#cc-y3-scale [role="option"]:hover,
#cc-reg-type-dd [role="option"]:hover,
#cc-reg-y-dd [role="option"]:hover,
#cc-reg-x-dd [role="option"]:hover,
#cc-reg-z-dd [role="option"]:hover,
#cc-ust-indicator [role="option"]:hover,
#cc-ust-latest-date [role="option"]:hover,
#cc-ust-start-date [role="option"]:hover,
#cc-ust-country-filter-dd [role="option"]:hover,
#cc-cofer-valuetype [role="option"]:hover,
#cc-cofer-currencies [role="option"]:hover,
#cc-source-dd [role="option"][aria-selected="true"],
#cc-countries-dd [role="option"][aria-selected="true"],
#cc-cat1-dd [role="option"][aria-selected="true"],
#cc-cofer-valuetype [role="option"][aria-selected="true"],
#cc-cofer-currencies [role="option"][aria-selected="true"] {
    background-color: #1a2e60 !important;
}

/* --- Multi-value tags (.dash-dropdown-value-item) --- */
#cc-countries-dd .dash-dropdown-value-item,
#cc-ust-country-filter-dd .dash-dropdown-value-item,
#cc-cofer-currencies .dash-dropdown-value-item {
    background-color: #1a3a6e !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    color: white !important;
}

/* --- Search input inside dropdown --- */
#cc-countries-dd input,
#cc-ust-country-filter-dd input,
#cc-cofer-currencies input,
#cc-cat1-dd input,
#cc-desc1-dd input,
#cc-cat2-dd input,
#cc-desc2-dd input,
#cc-cat3-dd input,
#cc-desc3-dd input {
    background-color: #0B133A !important;
    color: white !important;
}

/* ============================================================
   NUCLEAR OPTION: override Dash 4 default white button
   ============================================================ */
.dash-dropdown-wrapper button.dash-dropdown {
    background-color: #1a2240 !important;
    color: rgba(255,255,255,0.85) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}

.dash-dropdown-wrapper button.dash-dropdown:hover,
.dash-dropdown-wrapper button.dash-dropdown:focus {
    background-color: #1e2a50 !important;
    border-color: rgba(255,255,255,0.35) !important;
}

.dash-dropdown-wrapper [role="listbox"],
.dash-dropdown-wrapper ul[role="listbox"] {
    background-color: #1a2240 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}

.dash-dropdown-wrapper [role="option"] {
    background-color: #1a2240 !important;
    color: rgba(255,255,255,0.85) !important;
}

.dash-dropdown-wrapper [role="option"]:hover {
    background-color: #2D7DFF !important;
    color: white !important;
}

.dash-dropdown-wrapper .dash-dropdown-value {
    color: rgba(255,255,255,0.85) !important;
}

.dash-dropdown-wrapper .dash-dropdown-value-item {
    background-color: #2a3d6e !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    color: white !important;
}

.dash-dropdown-wrapper button.dash-dropdown::selection,
.dash-dropdown-wrapper .dash-dropdown-value::selection,
.dash-dropdown-wrapper span::selection {
    background-color: transparent !important;
    color: inherit !important;
}

/* ============================================================
   RangeSlider — hide handle tooltip (the duplicate year number)
   Targeting every known rc-slider tooltip class + Dash 4 wrapper
   ============================================================ */
.rc-slider-tooltip { display: none !important; }
.rc-slider-tooltip-placement-top { display: none !important; }
.rc-slider-tooltip-inner { display: none !important; }
.rc-slider-tooltip-arrow { display: none !important; }

/* Dash 4 wraps tooltips in this — hide the whole thing */
.dash-slider-container .rc-slider-tooltip { display: none !important; }

/* rc-slider v10+ renders handle value inside .rc-slider-handle as a span */
.rc-slider-handle > span { display: none !important; }
.rc-slider-handle-dragging { box-shadow: none !important; }

/* ============================================================
   FINAL FIX: Hide ALL rc-slider mark text and handle values.
   We use custom cc-year-start-label / cc-year-end-label boxes.
   ============================================================ */
.rc-slider-mark-text { display: none !important; }
.rc-slider-mark { display: none !important; }