/* Ultra-specific fixes for transpose and detune sliders in dark mode */

/* Completely reset sliders to clear existing styling */
body.dark-theme #transposeSlider,
body.dark-theme #detuneSlider {
    all: initial !important; /* Clear all properties */
    display: block !important;
    width: 80% !important;
    height: 3px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    border-radius: 2px !important;
    outline: none !important;
    padding: 0 !important;
    margin: 8px auto 4px auto !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    box-sizing: content-box !important;
    transform: none !important;
    /* Ensure exact same vertical position */
    top: 0 !important;
    vertical-align: middle !important;
}

/* Reset all possible pseudo-elements */
body.dark-theme #transposeSlider::before,
body.dark-theme #transposeSlider::after,
body.dark-theme #detuneSlider::before,
body.dark-theme #detuneSlider::after,
body.dark-theme .transpose-detune-row::before,
body.dark-theme .transpose-detune-row::after,
body.dark-theme .effect-group::before,
body.dark-theme .effect-group::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Force identical track styling for WebKit browsers */
body.dark-theme #transposeSlider::-webkit-slider-runnable-track,
body.dark-theme #detuneSlider::-webkit-slider-runnable-track {
    width: 100% !important;
    height: 3px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    /* Remove any other pseudo-elements */
    content: none !important;
}

/* Force identical track styling for Firefox */
body.dark-theme #transposeSlider::-moz-range-track,
body.dark-theme #detuneSlider::-moz-range-track {
    width: 100% !important;
    height: 3px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    appearance: none !important;
    /* Remove any other pseudo-elements */
    content: none !important;
}

/* Force identical thumb styling for WebKit browsers */
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;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
}

/* Force identical thumb styling for Firefox */
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;
    position: relative !important;
}

/* Ensure identical containers - force same position and layout */
body.dark-theme .transpose-detune-row .effect-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 50% !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
}

/* Ensure input containers are identical */
body.dark-theme .transpose-detune-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
}