/* panels-synth.css */
/* Styles for OSC, LFO, Mixer, Filter, Envelopes panels */

/* === OSCILLATOR HEADER SPECIFIC LAYOUT === */
.module > .control-group-heading.custom-heading-with-controls.osc-header-layout {
    display: flex !important; align-items: center !important; justify-content: flex-start !important; 
    flex-wrap: nowrap !important; gap: 0px !important; width: 100%; 
}
.module > .control-group-heading.custom-heading-with-controls.osc-header-layout .osc-onoff-symbol-toggle {
    flex-shrink: 0 !important; padding-right: 5px !important; margin-right: 3px !important; 
    cursor: pointer; 
}
.module > .control-group-heading.custom-heading-with-controls.osc-header-layout .osc-onoff-symbol-toggle.active {
    color: #8cc74b; 
}
.module > .control-group-heading.custom-heading-with-controls.osc-header-layout .osc-title-span {
    flex-grow: 1; flex-shrink: 1; text-align: left !important; white-space: nowrap !important;
    overflow: hidden !important; text-overflow: ellipsis !important; margin-right: auto !important; 
    padding-left: 3px; min-width: 30px; 
}
.module > .control-group-heading.custom-heading-with-controls.osc-header-layout .osc-octave-switch-container {
    display: flex !important; align-items: center !important; justify-content: center !important; 
    gap: 4px !important; margin-left: auto; margin-right: 0;  flex-shrink: 0 !important; 
}
.osc-octave-display { 
    min-width: 1.5em; text-align: center; color: #ccc; 
    font-weight: bold; font-size: 0.9em; padding: 0 3px; 
}
.osc-header-spacer { 
    display: inline-block !important; width: 30px !important; 
    min-width: 30px !important; flex-shrink: 0 !important; 
}
.module > .control-group-heading.custom-heading-with-controls.osc-header-layout .heading-controls-right {
    display: flex !important; align-items: center !important; gap: 4px !important; 
    flex-shrink: 0 !important; margin-left: 0 !important; 
}

/* Unified Waveform Button Sizing for OSC, LFO, and Filter Type Buttons */
#osc1-waveform-buttons .panel-header-button,
#osc2-waveform-buttons .panel-header-button,
#sub-waveform-buttons .panel-header-button,
#lfo-waveform-buttons .panel-header-button,
.filter-type-button-group button.filter-type-button { /* MODIFIED: Added Filter Type Buttons */
    min-width: var(--button-square-size-small-osc) !important; 
    width: var(--button-square-size-small-osc) !important;
    height: var(--button-square-size-small-osc) !important; 
    line-height: var(--button-square-size-small-osc) !important;
    font-size: 0.8em !important; /* Base font size for symbols within these small buttons */
    padding: 0 !important; /* Remove padding for square buttons */
}
/* Specific text content for filter buttons might need slight adjustment if they don't fit well */
.filter-type-button-group button.filter-type-button {
    font-size: 0.75em !important; /* Slightly smaller text for LPF, BPF, HPF */
     min-width: 30px !important; /* Allow slightly more width for text */
     width: auto !important; /* Let text determine width, but height is fixed */
     padding: 0 4px !important; /* Add a little horizontal padding */
}


#osc1-waveform-buttons button[data-waveform="sine"], 
#osc2-waveform-buttons button[data-waveform="sine"],
#sub-waveform-buttons button[data-waveform="sine"],
#lfo-waveform-buttons button[data-waveform="sine"] { 
    font-size: 1.1em; padding-bottom: 1px; line-height: calc(var(--button-square-size-small-osc) - 1px); 
}

#osc1-waveform-buttons button[data-waveform="triangle"],
#osc2-waveform-buttons button[data-waveform="triangle"],
#sub-waveform-buttons button[data-waveform="triangle"],
#lfo-waveform-buttons button[data-waveform="triangle"] { font-size: 1.3em; }

#osc1-waveform-buttons button[data-waveform="sawtooth"],
#osc2-waveform-buttons button[data-waveform="sawtooth"],
#sub-waveform-buttons button[data-waveform="sawtooth"],
#lfo-waveform-buttons button[data-waveform="sawtooth"] { font-size: 1.0em; }

#osc1-waveform-buttons .waveform-symbol-square,
#osc2-waveform-buttons .waveform-symbol-square,
#sub-waveform-buttons .waveform-symbol-square,
#lfo-waveform-buttons .waveform-symbol-square { width: 0.9em; height: 0.9em; }


/* === LFO PANEL SPECIFIC STYLES (excluding waveform buttons now handled above) === */
#lfo-rate-mode-toggle.panel-header-button { 
    font-size: 0.75em; padding: 0 6px; min-width: 60px; 
    height: var(--button-square-size-small-osc) !important; /* Match other small buttons in height */
    line-height: var(--button-square-size-small-osc) !important;
    background-color: #555555; border-color: #444444; color: #e0e0e0; 
}
#lfo-rate-mode-toggle.panel-header-button:hover { 
    background-color: #6c6c6c; border-color: #585858; 
}
#lfo-rate-mode-toggle.panel-header-button:active { 
    background-color: #7d7d7d; transform: translateY(1px); 
}

.lfo-visualizer-container-inline {
    width: 100%; height: 40px; margin-top: 8px;
    display: flex; align-items: center; justify-content: center;
}
#lfo-visualizer-canvas {
    display: block; width: 100%; height: 100%; 
    background-color: #111111; border: 1px solid #4f4f4f;
    border-radius: 3px; box-sizing: border-box;
}
.lfo-rate-amount-wrapper { 
    display: flex; flex-direction: row; gap: 10px; 
    width: 100%; margin-top: 8px; margin-bottom: 8px; 
}
.lfo-rate-amount-wrapper .lfo-sub-control { 
    margin-bottom: 0; display: flex; flex-direction: column; 
}
.lfo-rate-amount-wrapper .lfo-sub-control .control-group-label { 
    white-space: nowrap; margin-bottom: 3px; text-transform: uppercase;
}
.lfo-rate-amount-wrapper .lfo-sub-control input[type="range"].standard-horizontal-fader { 
    width: 100%; 
}
.lfo-rate-amount-wrapper .lfo-sub-control .value-display { 
    width: 100%; margin-top: 2px; text-align: right; 
}

/* === FILTER PANEL SPECIFIC STYLES === */
.filter-type-button-group { 
    display: flex; gap: 2px; 
}
/* .filter-type-button-group button.filter-type-button styling is now part of the unified group above */


/* === COMPACT OSC CONTROLS === */
.compact-osc-controls { 
    align-items: flex-end; 
}
.compact-osc-controls .inline-control-item .control-group-label { 
    margin-bottom: 2px; text-transform: uppercase;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .lfo-visualizer-container-inline { height: 50px; }
    .lfo-rate-amount-wrapper { flex-direction: column; gap: 8px; }
    
    .module > .control-group-heading.custom-heading-with-controls.osc-header-layout { gap: 2px !important; }
    .module > .control-group-heading.custom-heading-with-controls.osc-header-layout .osc-title-span {
        min-width: 25px !important; margin-right: auto !important; 
    }
    .module > .control-group-heading.custom-heading-with-controls.osc-header-layout .osc-octave-switch-container {
        margin: 0 1px 0 auto !important; flex-shrink: 1 !important;
    }
    .osc-header-spacer { min-width: 10px !important; width: 10px !important; flex-shrink: 100 !important; }
    .module > .control-group-heading.custom-heading-with-controls.osc-header-layout .heading-controls-right {
        gap: 1px !important; flex-shrink: 0; 
    }
    /* Unified waveform button sizing already applied above should cover responsiveness */
}