/* layout.css */

/* === MAIN CONTAINER === */
.main-container {
    width: 100%;
    max-width: none;
    min-width: 320px;
    margin: 0;
    padding: 0px 0;
    padding-bottom: 23px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-sizing: border-box;
}

/* === SYNTH ROW STRUCTURE === */
.synth-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 4px;
    box-sizing: border-box;
}

/* === COLLAPSIBLE ROW MECHANICS === */
.synth-row .row-header {
    display: flex;
    align-items: center;
    padding: 0px 0px;
    background-color: #333333;
    border-radius: 0px;
    margin-bottom: 2px;
    cursor: pointer;
    height: 23px;
    box-sizing: border-box;
}

.synth-row .row-header .collapse-toggle {
    background: none;
    border: none;
    color: #e0e0e0;
    font-size: 1.1em;
    padding: 0 0px 0 0;
    margin-right: 8px;
    line-height: 1; 
    transition: transform 0.2s ease-in-out;
    cursor: pointer; 
}

.synth-row .row-header .row-title {
    font-weight: thin; /* Typo corrected: should be normal or a valid weight */
    font-size: 0.9em;
    color: #f0f0f0;
    line-height: 1; 
    user-select: none; 
}

.synth-row.collapsed .row-content {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    border: none; 
    overflow: hidden; 
}

.synth-row.collapsed .row-header {
    margin-bottom: 0; 
}

.synth-row.collapsed .row-header .collapse-toggle {
    transform: rotate(-90deg);
}
.synth-row:not(.collapsed) .row-header .collapse-toggle {
    transform: rotate(0deg);
}


/* === MODULE STRUCTURE === */
.module {
    border: 1px solid #4f4f4f;
    padding: 8px;
    border-radius: 6px;
    background-color: #222222;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.module-group {
    border: 1px solid #4f4f4f;
    padding: 8px;
    border-radius: 6px;
    background-color: #222222; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column; 
    gap: 8px; 
}

.module-group > .module { 
    width: 100%;
    border: none !important; 
    padding: 0 !important;   
    background-color: transparent !important; 
    box-shadow: none !important; 
    border-radius: 0 !important; 
}

/*
 * LOG-BOOK
 * 2025-06-08: Final layout refactor from Flexbox to CSS Grid for panel rows.
 *             - Problem: The previous Flexbox implementation and first grid attempt did not
 *               correctly handle fixed panel widths and natural heights.
 *             - Solution: Switched the `.row-content` of panel-based rows to `display: grid`.
 *             - `grid-template-columns: repeat(auto-fit, 350px)` creates a grid of strictly
 *               350px-wide columns, with the number of columns adjusting to the viewport width.
 *             - `justify-content: center;` centers the entire grid of panels within the row,
 *               creating a balanced look when rows wrap unevenly.
 *             - `align-items: start;` prevents panels from stretching to the height of the
 *               tallest panel in a row, allowing each to have its natural height.
 *             - This provides a robust, dynamic, and visually stable layout that works on any screen size.
 */

/* Default row content layout (for rows that don't have a special layout) */
.synth-row .row-content {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, 350px); /* Fixed width columns */
    justify-content: center; /* Center the grid items horizontally */
    align-items: start; /* Prevent vertical stretching */
}

/* Specific layouts for rows that should NOT use the grid system */
#row-performance-keyboard .row-content { 
    display: flex; /* Override grid and use flexbox */
    flex-wrap: nowrap; 
    align-items: stretch; 
}
#row-performance-keyboard #hold-mod-pitch-section-placeholder {
    flex-grow: 0; flex-shrink: 0; flex-basis: auto; 
    width: 170px; max-width: 180px; min-width: 160px;
}
#row-performance-keyboard #keyboard-area-module-placeholder {
    flex-grow: 1; flex-basis: auto; min-width: 0; 
}

#row-sequencer .row-content {
    display: block; /* Override grid for the full-width sequencer */
}
#sequencer-main-module-placeholder { 
    flex-basis: 100% !important; 
    padding: 0 !important; 
}

/* The placeholder module is no longer needed for layout, so we hide it */
.placeholder-module { 
    display: none !important;
}


/* === RESPONSIVE LAYOUT ADJUSTMENTS (Simplified) === */
/* The grid now handles all wrapping automatically. We only need adjustments for small screens. */
@media (max-width: 600px) {
    .main-container {
        padding: 5px 0; 
    }
    .synth-row {
        border-radius:0; 
        padding:5px; 
        gap:5px;
    }
    .synth-row .row-header { padding:4px 6px; height:24px; }
    .synth-row .row-header .collapse-toggle { font-size:1em; }
    .synth-row .row-header .row-title { font-size:0.85em; }

    #row-performance-keyboard .row-content {
        flex-direction: column; 
    }
    #row-performance-keyboard #hold-mod-pitch-section-placeholder {
        width: 100%; max-width: 220px; 
        margin: 0 auto 8px auto;
        flex-basis: auto; 
    }
}