/* css/timeline.css - Styles for the timeline, clips, and playhead */

#timeline-container { 
    height: 100%; 
    width: 100%; 
    background-color: var(--bg-timeline-container); 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    position: relative;
}

#timeline-header { 
    height: 20px; 
    background-color: var(--bg-timeline-header); 
    border-bottom: 1px solid var(--border-timeline-header); 
    flex-shrink: 0; 
    position: relative; 
    overflow: hidden; 
    width: 100%;
}

#timeline-ruler { 
    width: 4000px; 
    height: 100%; 
    background-image: repeating-linear-gradient(to right, var(--text-secondary) 0 1px, transparent 1px 100%), repeating-linear-gradient(to right, var(--text-placeholder) 0 1px, transparent 1px 100%); 
    background-size: 120px 100%, 30px 100%; 
    background-position: left top; 
    position: absolute; 
    top: 0; 
    left: 0;
}

#timeline-tracks-and-playhead-container { 
    flex-grow: 1; 
    position: relative; 
    overflow-x: auto; 
    overflow-y: hidden;
}

#timeline-playhead { 
    position: absolute; 
    top: 0; 
    left: var(--timeline-track-name-width, 120px); 
    width: 2px; 
    height: 100%; 
    background-color: var(--accent-playhead); 
    z-index: 20; 
    pointer-events: none; 
    transform: translateX(0px);
}

#timeline-tracks-area { 
    position: relative; 
    height:100%; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column;
}

.timeline-track-lane { 
    min-height: 50px; 
    background-color: var(--bg-timeline-track-lane); 
    border-bottom: 1px solid var(--border-timeline-track-lane); 
    box-sizing: border-box; 
    position: relative; 
    overflow: hidden; 
    display: flex; 
    width: 4000px;
}

.timeline-track-lane:nth-child(even) { 
    background-color: var(--bg-timeline-track-lane-even);
}

.timeline-track-lane-name { 
    position: sticky; 
    left: 0; 
    z-index: 10; 
    background-color: var(--bg-timeline-track-name); 
    padding: 0 8px; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    border-right: 1px solid var(--border-timeline-track-name); 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    font-weight: 500; 
    color: var(--text-primary); 
    width: var(--timeline-track-name-width, 120px); 
    flex-shrink: 0;
}

.timeline-clips-area { 
    position: relative; 
    height: 100%; 
    flex-grow: 1;
}

.audio-clip, .midi-clip {
    position: absolute;
    height: 80%;
    top: 10%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 2px 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: grab;
    border-radius: 3px;
}

.audio-clip { 
    background-color: var(--accent-clip-bg); 
    border: 1px solid var(--accent-clip-border); 
    color: var(--bg-primary); 
}

.midi-clip {
    background-color: var(--accent-active);
    border: 1px solid var(--border-primary);
    color: var(--accent-active-text);
}

.midi-clip:hover, .audio-clip:hover {
    filter: brightness(1.2);
}

.audio-clip.selected, .midi-clip.selected { 
    outline: 2px solid var(--text-primary);
    z-index: 5;
}

.dragover-timeline-lane { 
    background-color: var(--bg-dropzone-dragover) !important;
}

.audio-clip canvas {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    z-index: 10;
    cursor: ew-resize;
}

.resize-handle.left {
    left: 0;
}

.resize-handle.right {
    right: 0;
}