/* --- PERFORMANCE MODULE & BENDER SECTION --- */
/*
.p- **Performance Module**:
    - **Vertical Organization**: Reorganize into three distinct, non-overlapping rows:
        1. **Knobs**: `PORT`, `TUNE`, `VOLUME`.
        2. **Switches**: `PORTAMENTO ON/OFF` and `POLY I / II`.
        3. **Dedicated Octave Zone**: A new section at the bottom for Octave buttons.
    - **Octave Zone Layout**:
        - Horizontal order: `OCT+` label, then two square buttons, then `OCT-` label.
        - Buttons: Both buttons must be the same color (standard grey `sq` style).
        - Labels: White, 9px Microgramma font, positioned on the sides of the button pair.
    - **Knob Labels**: Reduced to 9px Microgramma for a cleaner look.
    - **Poly Buttons**: Keep clean (no inner text).
- **Bender Section**:
    - **LFO TRIG**: Convert to a standard grey `sq` button (pulsador).
    - **LFO TRIG Label**: Position the text "LFO TRIG" directly above the button.
    - **Alignment**: Sliders and Trigger button in the same row.
    - **Positioning**: Moved bender stick slightly lower.
*/

.performance-module {
    flex: 1;
    padding: 10px 0 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Distribute rows equally */
    background: transparent;
    border-top: 2px solid var(--black);
    margin-top: 0;
}

.perf-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    position: relative;
    align-items: flex-start;
    /* Ensure labels are at the same top level */
}

.perf-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.port-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* Space between label and switch */
}

.poly-col {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* Space between label and buttons */
}

.port-col .sw-unit {
    height: 54px;
    /* Matches asset height to align with buttons */
    margin-top: 2px;
}

.port-col .sw-path,
.port-col .sw-peg {
    height: 54px;
}

.sw-lbl {
    font-family: 'Microgramma', sans-serif;
    font-size: 9px;
    font-weight: 900;
    color: var(--white);
    margin-bottom: 5px;
}

.poly-col .main-lbl {
    width: 100%;
    text-align: center;
    margin-bottom: 12px;
}

.poly-buttons {
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding-top: 5px;
    align-items: flex-start;
}

.poly-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.poly-lit {
    font-size: 10px;
    color: var(--white);
    font-weight: bold;
}

/* Octave row refined below */

/* Octave unit styles removed for grid layout */

.lfo-trig-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-left: 10px;
}

#lfo-trig-btn {
    width: 44px;
    height: 32px;
}

/* Octave unit span styles removed */

.perf-octave-zone {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Matching utility grid 4x2 */
    align-items: center;
    padding: 15px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    margin-top: 5px;
}

.oct-lbl {
    font-family: 'Microgramma', sans-serif;
    font-size: 9px;
    font-weight: 900;
    color: var(--white);
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    justify-self: center;
    /* Guarantee centering in grid cell */
}

.oct-btn {
    width: 44px;
    height: 32px;
    margin: 0 auto;
    justify-self: center;
    /* Center horizontally in grid cell */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Explicit column placement */
.oct-lbl.col-1 {
    grid-column: 1;
}

.oct-btn.col-2 {
    grid-column: 2;
}

.oct-btn.col-3 {
    grid-column: 3;
}

.oct-lbl.col-4 {
    grid-column: 4;
}

.perf-knobs {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.knob-pod {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.knob-lbl {
    font-family: 'Microgramma', sans-serif;
    font-size: 9px;
    font-weight: 900;
    color: var(--white);
    text-transform: uppercase;
}

.perf-switches {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.sw-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

#bender-section {
    flex: 0 0 25%;
    /* 25% of space */
    background: transparent;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bender-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}

.bender-sliders {
    display: flex;
    gap: 15px;
    flex: 1;
    justify-content: flex-start;
}

/* Refined above */

.b-pod {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.b-lbl-top {
    font-family: 'Microgramma', 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 900;
    color: var(--white);
    text-transform: uppercase;
}

.b-track {
    width: 8px;
    height: 35px;
    background: var(--black);
    border-radius: 4px;
    position: relative;
    cursor: ns-resize;
}

.b-handle {
    position: absolute;
    width: 16px;
    height: 6px;
    left: -4px;
    background: var(--juno-blue);
    pointer-events: none;
    border-radius: 1px;
}

.bender-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 5px;
}

#stick-housing {
    flex: 1;
    height: 35px;
    background: var(--black);
    border-radius: 4px;
    border: 1px solid #1a1a1a;
    position: relative;
    box-shadow: inset 0 2px 10px var(--black);
    cursor: ew-resize;
    overflow: hidden;
    margin-top: 10px;
    /* Moved lower */
}

#bender-stick {
    position: absolute;
    width: 30px;
    height: 80%;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to right, #666, #aaa, #666);
    /* Lighter for visibility */
    border-radius: 3px;
    pointer-events: none;
    border: 1px solid #111;
}