/* css/pianoroll.css - Styles for the Piano Roll and Sequencer */

.sequencer-container .controls {
    position: sticky;
    top: 0;
    left: 0;
    background-color: var(--bg-title-bar);
    z-index: 30;
    border-bottom: 1px solid var(--border-primary);
    padding: 0.25rem;
    color: var(--text-title-bar);
}
.sequencer-container .controls input, 
.sequencer-container .controls label {
    color: var(--text-primary);
}
.sequencer-container .controls input {
    background-color: var(--bg-input);
    border-color: var(--border-input);
}

.sequencer-grid-layout > div {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    border: 1px solid var(--border-sequencer);
}

.sequencer-grid-layout .sequencer-header-cell {
    position: sticky;
    top: 0;
    background-color: var(--bg-sequencer-header);
    font-weight: 500;
    color: var(--text-sequencer-header);
    z-index: 20;
}

.sequencer-grid-layout .sequencer-header-cell:first-child {
    z-index: 25;
    left: 0;
}

.sequencer-grid-layout .sequencer-label-cell {
    position: sticky;
    left: 0;
    background-color: var(--bg-sequencer-label);
    justify-content: flex-end;
    padding-right: 0.25rem;
    font-weight: 500;
    color: var(--text-sequencer-header);
    z-index: 10;
}

.sequencer-grid-layout .sequencer-step-cell {
    cursor: pointer;
    transition: background-color: 0.1s ease;
    color: var(--text-sequencer-step);
}

.sequencer-step-cell.bg-gray-50 {
    background-color: var(--bg-sequencer-step-even);
}

.sequencer-step-cell.bg-white {
    background-color: var(--bg-sequencer-step-odd);
}

.sequencer-step-cell:hover {
    background-color: var(--bg-sequencer-step-hover) !important;
    color: var(--text-button-hover) !important;
}

.sequencer-step-cell.active-synth,
.sequencer-step-cell.active-sampler,
.sequencer-step-cell.active-drum-sampler,
.sequencer-step-cell.active-instrument-sampler {
    background-color: var(--accent-sequencer-step) !important;
    color: var(--bg-sequencer-step-even) !important;
    border-color: var(--accent-sequencer-step-border) !important;
}

.sequencer-step-cell.playing {
    outline: 2px solid var(--accent-sequencer-playing-outline);
    outline-offset: -2px;
    z-index: 5;
}

.velocity-bar {
    background-color: var(--accent-sequencer-step);
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
.velocity-bar:hover {
    opacity: 1;
}