/* Emergency fix for transpose and detune sliders in dark mode */

/* Force identical styles */
body.dark-theme #transposeSlider,
body.dark-theme #detuneSlider {
    all: unset !important; /* First reset everything */
    display: block !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 80% !important;
    height: 3px !important; /* Both sliders exactly 3px */
    background: #444444 !important; /* Use a solid color that matches the design */
    border: none !important;
    outline: none !important;
    border-radius: 3px !important;
    margin: 10px auto !important; /* Center the sliders and give consistent margins */
    position: relative !important;
    top: 0 !important; /* Ensure they're at the same vertical position */
}

/* Fix transpose slider vertical position - add 3px negative margin-top to move it up */
body.dark-theme #transposeSlider {
    margin-top: 7px !important; /* Adjust up by 3px from the original 10px */
}

/* Ensure identical vertical positioning for container elements */
body.dark-theme .transpose-detune-row .effect-group:first-child,
body.dark-theme .transpose-detune-row .effect-group:last-child {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: top !important;
}

/* Hide any extra tracks that might be created */
body.dark-theme #transposeSlider::before,
body.dark-theme #transposeSlider::after,
body.dark-theme #detuneSlider::before,
body.dark-theme #detuneSlider::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: transparent !important;
    border: none !important;
    height: 0 !important;
    width: 0 !important;
}

/* Force the track to look identical */
body.dark-theme #transposeSlider::-webkit-slider-runnable-track,
body.dark-theme #detuneSlider::-webkit-slider-runnable-track {
    height: 3px !important;
    background: #444444 !important;
    border: none !important;
    border-radius: 3px !important;
    cursor: pointer !important;
}

body.dark-theme #transposeSlider::-moz-range-track,
body.dark-theme #detuneSlider::-moz-range-track {
    height: 3px !important;
    background: #444444 !important;
    border: none !important;
    border-radius: 3px !important;
    cursor: pointer !important;
}

/* Make thumbs identical */
body.dark-theme #transposeSlider::-webkit-slider-thumb,
body.dark-theme #detuneSlider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #64B5F6 !important;
    border: none !important;
    cursor: pointer !important;
    margin-top: -4.5px !important; /* Center the thumb on the track */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme #transposeSlider::-moz-range-thumb,
body.dark-theme #detuneSlider::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #64B5F6 !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Force containers to be identical too */
body.dark-theme .transpose-detune-row .effect-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}