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

/* === OSCILLATOR HEADER SPECIFIC LAYOUT === */
#icosmo-matrix-synth-container .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%;
}
#icosmo-matrix-synth-container .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;
}
#icosmo-matrix-synth-container .module > .control-group-heading.custom-heading-with-controls.osc-header-layout .osc-onoff-symbol-toggle.active {
    color: #8cc74b;
}
#icosmo-matrix-synth-container .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;
}
#icosmo-matrix-synth-container .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;
}
#icosmo-matrix-synth-container .osc-octave-display {
    min-width: 1.5em; text-align: center; color: #ccc;
    font-weight: bold; font-size: 0.9em; padding: 0 3px;
}
#icosmo-matrix-synth-container .osc-header-spacer {
    display: inline-block !important; width: 30px !important;
    min-width: 30px !important; flex-shrink: 0 !important;
}
#icosmo-matrix-synth-container .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 */
#icosmo-matrix-synth-container #osc1-waveform-buttons .panel-header-button,
#icosmo-matrix-synth-container #osc2-waveform-buttons .panel-header-button,
#icosmo-matrix-synth-container #sub-waveform-buttons .panel-header-button,
#icosmo-matrix-synth-container #lfo-waveform-buttons .panel-header-button,
#icosmo-matrix-synth-container .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 */
#icosmo-matrix-synth-container .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 */
}


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

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

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

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


/* === LFO PANEL SPECIFIC STYLES (excluding waveform buttons now handled above) === */
#icosmo-matrix-synth-container #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;
}
#icosmo-matrix-synth-container #lfo-rate-mode-toggle.panel-header-button:hover {
    background-color: #6c6c6c; border-color: #585858;
}
#icosmo-matrix-synth-container #lfo-rate-mode-toggle.panel-header-button:active {
    background-color: #7d7d7d; transform: translateY(1px);
}

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

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


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

/* Responsive adjustments */
@media (max-width: 600px) {
    #icosmo-matrix-synth-container .lfo-visualizer-container-inline { height: 50px; }
    #icosmo-matrix-synth-container .lfo-rate-amount-wrapper { flex-direction: column; gap: 8px; }

    #icosmo-matrix-synth-container .module > .control-group-heading.custom-heading-with-controls.osc-header-layout { gap: 2px !important; }
    #icosmo-matrix-synth-container .module > .control-group-heading.custom-heading-with-controls.osc-header-layout .osc-title-span {
        min-width: 25px !important; margin-right: auto !important;
    }
    #icosmo-matrix-synth-container .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;
    }
    #icosmo-matrix-synth-container .osc-header-spacer { min-width: 10px !important; width: 10px !important; flex-shrink: 100 !important; }
    #icosmo-matrix-synth-container .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 */
}