/**
 * Sheet Music Container Styles
 * Dark theme compatible styling for the sheet music display area
 */

.sheet-music-container {
    width: 100%;
    height: var(--sheet-music-height, 450px);
    min-height: var(--sheet-music-height, 450px);
    /* Increased for additional ledger space on Grand Staff (overridden dynamically) */
    background-color: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    overflow-y: hidden;
    /* Scrolling is handled manually via JS transforms */
    overflow-x: hidden;
    /* Prevent horizontal scrolling */
    overflow: visible;
    transition: height 0.3s ease-out, opacity 0.3s ease-out;
    position: relative;
    flex-shrink: 0;
    z-index: 3;
    /* Sit above falling notes but below toolbar */
    color: #000000;
}


.sheet-music-scroll-mode-toggle {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    z-index: 4;
    pointer-events: auto;
}

.sheet-music-scroll-mode-toggle .scroll-mode-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.sheet-music-scroll-mode-toggle .scroll-mode-icon svg {
    width: 24px;
    height: 24px;
}

.sheet-music-render-height-buttons {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
}

.sheet-music-height-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.sheet-music-height-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.sheet-music-height-btn svg {
    width: 24px;
    height: 24px;
}

.sheet-music-resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 16px;
    /* invisible hot-zone by default, but straddling the boundary */
    cursor: ns-resize;
    background: transparent;
    z-index: 10;
    transition: background-color 0.2s ease;
}

.sheet-music-resize-handle:hover,
.sheet-music-container.sheet-music-padding-resizing .sheet-music-resize-handle {
    background-color: rgba(var(--accent-color-rgb), 0.15);
}

.sheet-music-container.sheet-music-padding-resizing {
    transition: none;
}

.sheet-music-padding-resizing,
.sheet-music-padding-resizing * {
    cursor: ns-resize !important;
}

.sheet-music-container.hidden {
    height: 0;
    opacity: 0;
    pointer-events: none;
}

/* SVG styling for VexFlow */
.sheet-music-container svg,
.sheet-music-svg {
    width: 100%;
    height: 100%;
}

.sheet-music-svg text {
    user-select: none;
}

.sheet-music-svg .sheet-note {
    transition: fill 120ms linear;
}

/* Cursor animation for playback tracking */
@keyframes cursor-pulse {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

.sheet-music-cursor {
    animation: cursor-pulse 0.5s ease-in-out infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sheet-music-container {
        height: var(--sheet-music-height, 345px);
        min-height: var(--sheet-music-height, 345px);
    }
}

@media (max-width: 480px) {
    .sheet-music-container {
        height: var(--sheet-music-height, 285px);
        min-height: var(--sheet-music-height, 285px);
    }
}