/*
 * Settings Theme Contrast Overrides
 * Applies to: Settings page only (.settings-page)
 * Purpose: Keep form controls readable in dark/custom themes where defaults can
 *          render low-contrast text, placeholders, or controls.
 */

/* ── Profile Inputs ────────────────────────────────────────────────────────── */
.settings-page .profile-text-input,
.settings-page .profile-readonly-input,
.settings-page .profile-city-input input {
    color: #111111 !important;
    background-color: #FFFFFF !important;
    border-color: var(--yc-border) !important;
}

.settings-page .profile-readonly-input {
    color: #111111 !important;
    background-color: #F3F4F6 !important;
}

/* Guard against parent color inheritance in dark/custom themes */
.settings-page input[type="text"],
.settings-page input[type="email"],
.settings-page input[type="date"],
.settings-page input[type="time"],
.settings-page input[type="number"],
.settings-page textarea {
    color: #111111 !important;
}

/* ── Dropdowns: Legacy react-select Markup (Dash v1 style) ───────────────── */
.settings-page .dash-dropdown .Select-control,
.settings-page .Select-control {
    background-color: #FFFFFF !important;
    border-color: var(--yc-border) !important;
    color: #111111 !important;
}

.settings-page .dash-dropdown .Select-placeholder,
.settings-page .dash-dropdown .Select-value-label,
.settings-page .dash-dropdown .Select-input > input,
.settings-page .Select-placeholder,
.settings-page .Select-value-label,
.settings-page .Select-input > input {
    color: #111111 !important;
    opacity: 1 !important;
}

.settings-page .dash-dropdown .Select--single > .Select-control .Select-value,
.settings-page .dash-dropdown .Select.has-value.Select--single > .Select-control .Select-value .Select-value-label,
.settings-page .dash-dropdown .Select-value,
.settings-page .Select--single > .Select-control .Select-value,
.settings-page .Select.has-value.Select--single > .Select-control .Select-value .Select-value-label,
.settings-page .Select-value {
    color: #111111 !important;
}

.settings-page .dash-dropdown .Select-arrow-zone,
.settings-page .dash-dropdown .Select-arrow,
.settings-page .Select-arrow-zone,
.settings-page .Select-arrow {
    color: var(--yc-text-secondary) !important;
}

.settings-page .dash-dropdown .Select-menu-outer,
.settings-page .Select-menu-outer {
    background-color: #FFFFFF !important;
    border-color: var(--yc-border) !important;
}

.settings-page .dash-dropdown .Select-option,
.settings-page .Select-option {
    background-color: #FFFFFF !important;
    color: #111111 !important;
}

.settings-page .dash-dropdown .Select-option.is-focused,
.settings-page .dash-dropdown .Select-option.is-selected,
.settings-page .Select-option.is-focused,
.settings-page .Select-option.is-selected {
    background-color: #F3F4F6 !important;
    color: #111111 !important;
}

/* ── Dropdowns: Modern react-select Markup (Dash v2+ style) ──────────────── */
.settings-page .dash-dropdown .Select__control {
    background-color: #FFFFFF !important;
    border-color: var(--yc-border) !important;
    color: #111111 !important;
}

.settings-page .dash-dropdown .Select__placeholder {
    color: #111111 !important;
    opacity: 1 !important;
}

.settings-page .dash-dropdown .Select__single-value,
.settings-page .dash-dropdown .Select__input-container,
.settings-page .dash-dropdown .Select__input-container input {
    color: #111111 !important;
}

.settings-page .dash-dropdown .Select__menu,
.settings-page .dash-dropdown .Select__menu-list {
    background-color: #FFFFFF !important;
    border-color: var(--yc-border) !important;
}

.settings-page .dash-dropdown .Select__option {
    background-color: #FFFFFF !important;
    color: #111111 !important;
}

.settings-page .dash-dropdown .Select__option--is-focused,
.settings-page .dash-dropdown .Select__option--is-selected {
    background-color: #F3F4F6 !important;
    color: #111111 !important;
}

.settings-page .dash-dropdown .Select__indicator,
.settings-page .dash-dropdown .Select__indicator svg {
    color: var(--yc-text-secondary) !important;
    fill: var(--yc-text-secondary) !important;
}

/* ── Sliders (Appearance tab controls) ────────────────────────────────────── */
.settings-page .rc-slider-rail {
    background-color: var(--yc-border) !important;
}

.settings-page .rc-slider-track {
    background-color: var(--yc-primary) !important;
}

.settings-page .rc-slider-handle {
    border-color: var(--yc-primary) !important;
    background-color: var(--yc-surface) !important;
    box-shadow: none !important;
}

.settings-page .rc-slider-mark-text {
    color: var(--yc-slider-mark-color) !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.settings-page .rc-slider-dot {
    border-color: var(--yc-border) !important;
    background-color: var(--yc-surface) !important;
}

.settings-page .rc-slider-tooltip-inner {
    color: #111111 !important;
    background-color: #FFFFFF !important;
    border: 1px solid var(--yc-border) !important;
}

.settings-page .rc-slider-tooltip-arrow {
    border-top-color: var(--yc-border) !important;
}

/* ── Radio Controls (Sensitivity options) ─────────────────────────────────── */
.settings-page .dash-radioitems label,
.settings-page #settings-trend-sensitivity label {
    color: var(--yc-text-primary) !important;
}

.settings-page .dash-radioitems input[type="radio"],
.settings-page #settings-trend-sensitivity input[type="radio"] {
    accent-color: var(--yc-primary);
}