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

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

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

#icosmo-matrix-synth-container input.tuning-input {
    min-width: 6em !important;
}
#icosmo-matrix-synth-container input.tempoInput {
    min-width: 5em !important;
}

/* Player pitch controls (octave/semitone) */
#icosmo-matrix-synth-container .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%;
}
#icosmo-matrix-synth-container label.control-group-label-inline {
    font-size: var(--font-size-label);
    color: #bdbdbd;
    font-weight: normal;
    white-space: nowrap;
    margin-right: 2px;
}
#icosmo-matrix-synth-container .player-pitch-display-placeholder {
    min-width: 1.2em;
    text-align: center;
    color: #ccc;
    font-weight: bold;
    font-size: 0.9em;
    padding: 0 2px;
}
#icosmo-matrix-synth-container 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 */
#icosmo-matrix-synth-container #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 */
}

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

#icosmo-matrix-synth-container #audio-player-volume-wrapper .fader-label-lfo-wrapper {
    /* Standard styles from panels.css apply */
    width: 100%; /* Ensure this part also takes full width */
}
#icosmo-matrix-synth-container #audio-player-volume-wrapper .main-fader-area {
    /* Standard styles from panels.css apply */
    width: 100%; /* Ensure this part also takes full width */
}
#icosmo-matrix-synth-container #audio-player-volume-wrapper .standard-horizontal-fader {
    width: 100%; /* Make the fader itself take full width of its area */
}
#icosmo-matrix-synth-container #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) {
    #icosmo-matrix-synth-container .player-pitch-controls-container-unified {
        flex-wrap: wrap;
        justify-content: center;
    }
    /* If specific adjustments for volume fader on mobile are needed, add here */
}