/* panels-settings.css */
/* Styles for the SETTINGS panel (MIDI, Presets) */

/* MIDI LED stack and Sync button (usually in the panel header) */
.midi-led-stack { 
    display: flex; 
    flex-direction: column; 
    gap: 3px; 
    margin-right: 6px; /* Space before the sync button */
    align-self: center; 
}
.midi-indicator-led { 
    width: 10px; 
    height: 10px; 
    background-color: #404040; 
    border-radius: 50%; 
    border: 1px solid #222; 
    transition: background-color 0.05s ease-out, box-shadow 0.05s ease-out, border-color 0.05s ease-out; 
    box-sizing: border-box; 
    flex-shrink: 0; 
}
.midi-indicator-led.on { /* Generic on state for MIDI activity */
    background-color: #00dd00; 
    box-shadow: 0 0 6px 2px #00dd00; 
    border-color: #00aa00; 
}
#midi-sync-led.on { /* Specific 'on' state for MIDI sync LED */
    background-color: #FFC107; /* Amber/yellow for sync */
    box-shadow: 0 0 6px 2px #FFC107; 
    border-color: #D4A000; 
}
#midi-sync-external-button.panel-header-button { /* Styles the sync toggle button */
    font-size: 1.4em; 
    /* General .panel-header-button styles apply for color, hover, active */
}
#midi-sync-external-button.panel-header-button.active {
    /* General .active styles from panels.css apply */
    /* Specific active color for sync button if different from default */
    background-color: #4CAF50 !important; /* Example: Green when active */
    color: white !important;
    border-color: #3e8e41 !important;
}


/* Control groups within the settings panel */
#system-presets-module-placeholder .control-group { 
    margin-top: 8px; 
    margin-bottom: 10px; /* Add consistent bottom margin */
}

/* MIDI Input and Channel row */
#system-presets-module-placeholder .control-group:has(#midi-input) > .input-row-compact .inline-control-item:has(#midi-input) {
    flex: 1 1 auto !important; /* MIDI device select takes more space */
    min-width: 100px; 
}
#system-presets-module-placeholder .control-group:has(#midi-input) > .input-row-compact .inline-control-item:has(#midi-channel-select) {
    flex: 0 0 90px !important; /* Fixed width for channel select container */
}
#system-presets-module-placeholder #midi-channel-select { /* The select element itself */
    width: 100% !important; /* Fill its container */
    min-width: unset !important; /* Override if there was a min-width from general select styles */
}


/* MIDI Map and Preset Name input groups */
#system-presets-module-placeholder input[type="text"] { /* General text inputs in this panel */
    margin-bottom:4px; 
    width:100%; 
}
#system-presets-module-placeholder .control-group:has(#midi-map-name) .input-button-inline-group,
#system-presets-module-placeholder .control-group:has(#preset-name) .input-button-inline-group {
    display: flex !important; 
    flex-direction: row !important; 
    align-items: flex-end !important; /* Align items to bottom for consistent height */
    gap: 5px !important; 
    flex-wrap: nowrap !important; 
}
#system-presets-module-placeholder .control-group:has(#midi-map-name) .input-button-inline-group > input[type="text"],
#system-presets-module-placeholder .control-group:has(#preset-name) .input-button-inline-group > input[type="text"] {
     flex: 1 1 auto !important; /* Input field takes available space */
     width: auto !important; 
     min-width: 50px !important; /* Minimum sensible width */
     margin-bottom: 0 !important; 
     box-sizing: border-box !important;
}
#system-presets-module-placeholder .control-group:has(#midi-map-name) .input-button-inline-group > .button-group-inline,
#system-presets-module-placeholder .control-group:has(#preset-name) .input-button-inline-group > .button-group-inline {
    display: flex !important; 
    flex-direction: row !important; 
    flex-wrap: nowrap !important;
    gap: 5px !important; 
    flex-shrink: 0; /* Prevent button group from shrinking */
}
/*
 * LOG-BOOK
 * 2025-06-09: Resized Settings panel icon buttons.
 *             - Problem: The Save/Load/Learn buttons in the Settings panel were 30x30px, which was
 *               larger than the equivalent buttons in the Sequencer panel.
 *             - Solution: Replaced the hardcoded `var(--button-square-size)` with the calculated
 *               size from the sequencer's CSS (`calc(var(--font-size-button) + 8px + 2px)`).
 *               This makes the buttons smaller and consistent with other icon buttons in the UI.
 *               Removed `!important` flags and the `flex` property for cleaner, more consistent styling.
 */
#system-presets-module-placeholder .control-group:has(#midi-map-name) .input-button-inline-group > .button-group-inline > button.icon-button,
#system-presets-module-placeholder .control-group:has(#preset-name) .input-button-inline-group > .button-group-inline > button.icon-button {
    height: calc(var(--font-size-button) + 8px + 2px);
    width: calc(var(--font-size-button) + 8px + 2px);
    min-width: unset;
    padding: 0;
    font-size: 1em;
    line-height: calc(var(--font-size-button) + 8px + 2px);
    margin-top: 0;
}

/* Factory Preset Select */
#system-presets-module-placeholder #factory-preset-select.full-width-select {
    /* Uses general .full-width-select from forms.css if defined, or ensure it's full width */
    width: 100%;
    box-sizing: border-box;
}