/* App-specific synth overrides;*/

.flex-row{padding:10px;}

/* Tab system core — synth provides themed buttons below */
.tab-button { color:#2b3035; background:#90959A; }
.tab-button.active { background:#63b3ed; color:#2b3035; }
.tab-button:not(.active):hover { background:#6f7c93; }

/* Differentiate main tabs and sub-tabs */
.main-tabs .main-tab-button { color: #848484; background: #ddd; border-radius:6px; }
.main-tabs .main-tab-button.active {     background: #cfd4d8; color: #4e575f; }
.sub-tabs .sub-tab-button { background:#4a5568; color:#c8d7e1; border-radius:0px; }
.sub-tabs .sub-tab-button.active { background:#2f3742; color:#ffffff; }

#piano-controls { display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; }
#piano-controls.collapsed { display:none; }

.control-label{
    font-weight: 600; margin-bottom: 6px; color: #c8d7e1;
}
.transpose-btn, .ctlbutton{
    background: linear-gradient(0deg, #3f4751, transparent);
    /* Default (OFF) color */
    color: #bfbfbf;
    border: 2px solid #1A202C; 
    border-radius: 4px; 
    cursor: pointer;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 2px #000000a6;
}

/* When control buttons are active (e.g. Filter ON) use synth highlight color */
.uniform-btn.active,
.ctlbutton.active,
.transpose-btn.active {
    color: #7ff94f;
}

.transpose-btn svg{
    display: block;
}

#adsr-selector .selector-options, #adsr-selector-mobile .selector-options{
    gap: 1px;
}
#adsr-selector .selector-led, #adsr-selector-mobile .selector-led{
    margin-right: 5px;
}

/* Option selectors, steppers and sizing containers */
#stepper-polyphony, #stepper-polyphony-mobile, #stepper-unisonVoices, #stepper-unisonVoices-mobile, #filter-btn-container { background-color:#4a5568; padding:5px; border-radius:5px; }

/* Mobile devices - all orientations */
@media (max-width: 768px) {
    /* Mobile sizing and overlay rules are handled in shared.css; app-specific tweaks follow */
    #piano-controls {
        flex-direction: column;
        gap: 12px;
    }
    .control-group { width: 100%; flex-direction: column; min-width: auto; max-width: none; font-family: "Sofia Sans Extra Condensed", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; }
    /* Hide control-group headers on mobile; tabs provide the labels */
    .control-group > h4 { display: none; }

    /* Mobile-only sub-tab corner radii (first/last) */
    .sub-tabs .sub-tab-button:first-child { border-radius: 13px 0 0 0; }
    .sub-tabs .sub-tab-button:last-child { border-radius: 0 13px 0 0; }
}

/* Desktop / tablet tweaks and landscape constraints (see shared.css for shared defaults) */