/* lfo.css */

/*
 * LOG-BOOK
 *
 * 2025-06-13: (CRITICAL FIX) Corrected CSS class name for LFO indicator.
 *             - Problem: The CSS gradient inlay for the LFO range was not appearing.
 *             - Solution: The CSS selector was changed from the incorrect `.fader-lfo-indicator-active`
 *               to `.fader-animating-by-lfo` to match the class being added by the JavaScript.
 *               The indicator color has been made bright red for debugging visibility.
 *
 * 2025-06-12: Re-implemented LFO indicator as a fader track inlay.
 */

/* === LFO MODULATION CONTROL STYLING === */
.fader-with-lfo-mod {
    display: flex;
    flex-direction: column; 
    gap: 0px; 
}

.main-fader-area {
    display: flex;
    flex-direction: column; 
    position: relative; 
    padding-top: 2px;
    padding-bottom: 2px;
}

.lfo-mod-indicator {
    display: none;
}

/*
 * When a fader has an active LFO mapping, we apply a custom gradient background
 * to its track to serve as the new "inlay" indicator. The JS will set the
 * --lfo-track-gradient variable.
 */
.fader-animating-by-lfo::-webkit-slider-runnable-track {
    background: var(--lfo-track-gradient, #5f5f5f) !important;
    height: 9px !important; /* Make track thicker for debugging */
}
.fader-animating-by-lfo::-moz-range-track {
    background: var(--lfo-track-gradient, #5f5f5f) !important;
    height: 9px !important; /* Make track thicker for debugging */
}


.lfo-mod-control {
    display: flex;
    align-items: center; 
    gap: 4px; 
    font-size: 0.85em;
    justify-content: flex-end; 
}

.lfo-mod-label-left {
    font-size: 0.85em; 
    color: #aaa;
    margin-right: auto; 
    line-height: 1; 
    user-select: none;
}

.lfo-mod-checkbox {
    transform: scale(0.75); 
    margin-right: 0px;
    margin-left: -3px; 
    padding: 0;
    cursor: pointer;
}

.lfo-mod-label { 
    display: none;
}

input[type="range"].lfo-source-switch {
    -webkit-appearance:none;
    appearance:none;
    width: 20px;
    max-width: 20px;
    height: 7px;
    background: #5f5f5f;
    border-radius: 2px;
    outline: none;
    margin: 0 2px;
    padding: 0;
    cursor: pointer;
}
input[type="range"].lfo-source-switch::-webkit-slider-thumb {
    -webkit-appearance:none;
    appearance:none;
    width: 8px;
    height: 10px;
    background: #bdbdbd;
    border-radius: 1px;
    cursor: pointer;
    border: 1px solid #333;
    margin-top: -1.5px;
}
input[type="range"].lfo-source-switch::-moz-range-thumb {
    width: 8px;
    height: 10px;
    background: #bdbdbd;
    border-radius: 1px;
    cursor: pointer;
    border: 1px solid #333;
}

input[type="range"].lfo-mod-depth {
    -webkit-appearance:none;
    appearance:none;
    flex-grow:1; 
    height:7px; 
    background:#5f5f5f; 
    border-radius:2px;
    outline:none;
    margin:0 !important;
    padding:0 !important;
    max-width:75px; 
}
input[type="range"].lfo-mod-depth::-webkit-slider-thumb {
    -webkit-appearance:none;
    appearance:none;
    width:10px !important; 
    height:10px !important;
    background:#bdbdbd; 
    border-radius:50%; 
    cursor:pointer;
    border:1px solid #333;
    margin-top:-1.5px; 
}
input[type="range"].lfo-mod-depth::-moz-range-thumb {
    width:10px !important;
    height:10px !important;
    background:#bdbdbd;
    border-radius:50%;
    cursor:pointer;
    border:1px solid #333;
}
input[type="range"].lfo-mod-depth::-webkit-slider-runnable-track {
    background: transparent;
}
input[type="range"].lfo-mod-depth::-moz-range-track {
    background: transparent;
}

/* === LFO WAVEFORM BUTTON GROUP STYLING === */
.waveform-button-group {
    display: flex;
    gap: 2px; 
}

/* === LFO VISUALIZER STYLING === */
.lfo-visualizer-container-inline {
    width: 100%; 
    height: 40px; 
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lfo1-visualizer-canvas, #lfo2-visualizer-canvas {
    display: block; 
    width: 100%; 
    height: 100%; 
    background-color: #111111; 
    border: 1px solid #4f4f4f;
    border-radius: 3px;
    box-sizing: border-box;
}

/* Responsive adjustments for LFO section */
@media (max-width: 600px) {
    .lfo-visualizer-container-inline {
        height: 50px; 
    }
}