/* panels-player.css */
/* Styles for the MATRIX Player and Metronome panel */

/* Player and Metronome content sections */
#audio-player-content-section,
#metronome-content-section {
    margin-top: 8px;
}

/* Compact input rows within these sections */
#audio-player-content-section .input-row-compact .inline-control-item input,
#audio-player-content-section .input-row-compact .inline-control-item select,
#metronome-content-section .input-row-compact .inline-control-item input,
#metronome-content-section .input-row-compact .inline-control-item select {
    /* Uses general .input-row-compact styles from panels.css */
}

input.tuning-input { 
    min-width: 6em !important; 
}
input.tempoInput { 
    min-width: 5em !important; 
}

/* Player pitch controls (octave/semitone) */
.player-pitch-controls-container-unified { 
    display: flex; 
    flex-wrap: nowrap; 
    justify-content: flex-start; 
    align-items: center; 
    gap: 4px; 
    margin-top: 6px; 
    margin-bottom: 6px; 
    width: 100%; 
}
label.control-group-label-inline { 
    font-size: var(--font-size-label); 
    color: #bdbdbd; 
    font-weight: normal; 
    white-space: nowrap; 
    margin-right: 2px; 
}
.player-pitch-display-placeholder { 
    min-width: 1.2em; 
    text-align: center; 
    color: #ccc; 
    font-weight: bold; 
    font-size: 0.9em; 
    padding: 0 2px; 
}
button.player-pitch-btn { 
    padding: 0px 6px !important; 
    font-size: 1em !important; 
    font-weight: bold !important; 
    line-height: 1 !important; 
    min-width: 22px !important; 
    min-height: 22px !important; 
    margin: 0 !important; 
    border-radius: 4px !important; 
}

/* MODIFIED: Player Volume with LFO Modulation Wrapper */
#audio-player-volume-wrapper.control-group.fader-group {
    margin-top: 10px;
    display: flex; /* Ensure this outer container also allows flex growth */
    flex-direction: column; /* Stack label and fader structure vertically */
    width: 100%; /* Take full width */
}

#audio-player-volume-wrapper .fader-with-lfo-mod {
    width: 100%; /* Ensure the inner fader structure takes full width */
    display: flex;
    flex-direction: column;
}

#audio-player-volume-wrapper .fader-label-lfo-wrapper {
    /* Standard styles from panels.css apply */
    width: 100%; /* Ensure this part also takes full width */
}
#audio-player-volume-wrapper .main-fader-area {
    /* Standard styles from panels.css apply */
    width: 100%; /* Ensure this part also takes full width */
}
#audio-player-volume-wrapper .standard-horizontal-fader {
    width: 100%; /* Make the fader itself take full width of its area */
}
#audio-player-volume-wrapper .value-display {
    min-width: 2.5em; /* Give value display a bit of space */
    text-align: right;
}


/* Responsive adjustments specific to player/metronome if needed */
@media (max-width: 600px) {
    .player-pitch-controls-container-unified { 
        flex-wrap: wrap; 
        justify-content: center; 
    }
    /* If specific adjustments for volume fader on mobile are needed, add here */
}