/* Clean fix for Music Generator Controls panel to ensure equal height containers */

/* Reset any problematic styles that might be causing the overlay issue */
body.dark-theme .music-generator-controls-panel .control-group {
    position: static !important; /* Reset position */
    min-height: auto !important; /* Remove forced height */
    height: auto !important; /* Remove forced height */
    max-height: none !important; /* Remove forced height */
    display: block !important; /* Reset display mode */
    overflow: visible !important;
    flex-direction: initial !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Simple consistent height fix for both containers */
body.dark-theme .music-controls-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    gap: 10px !important;
    align-items: stretch !important;
}

/* Style the titles consistently */
body.dark-theme .music-generator-controls-panel .control-group > h3 {
    margin: 0 0 10px 0 !important;
    padding: 0 0 5px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-size: 0.85em !important;
    color: #eee !important;
    font-weight: bold !important;
}

/* Fix for the current scale display position */
body.dark-theme .scale-presets-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

body.dark-theme #currentScaleDisplay {
    display: block !important;
    margin-top: 6px !important;
    color: #aaa !important;
    font-size: 0.85em !important;
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}