/* Score Editor — app-specific styles */

/* Toolbar buttons */
.toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
    white-space: nowrap;
    user-select: none;
}

.toolbar-btn:hover {
    background: var(--hover-bg, rgba(0,0,0,0.06));
}

.dark .toolbar-btn:hover {
    background: rgba(255,255,255,0.08);
}

.toolbar-btn.active {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    border-color: transparent;
}

/* Score list items */
.score-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-color);
    transition: background 0.1s;
    min-width: 0;
}

.score-item:hover {
    background: rgba(0,0,0,0.05);
}

.dark .score-item:hover {
    background: rgba(255,255,255,0.05);
}

.score-item.active {
    background: color-mix(in srgb, var(--md-primary) 16%, transparent);
    color: var(--md-primary);
}

.score-item .score-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.score-item .delete-btn {
    opacity: 0;
    padding: 2px;
    border-radius: 4px;
    color: #ef4444;
    transition: opacity 0.1s;
    flex-shrink: 0;
}

.score-item:hover .delete-btn {
    opacity: 1;
}

/* Clicked note highlight — rendered SVG elements inside the selected group */
.note-selected path,
.note-selected use,
.note-selected line,
.note-selected polygon {
    fill: #3b82f6 !important;
    stroke: #3b82f6 !important;
}

/* Voice list items */
.voice-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-color);
    background: rgba(0,0,0,0.03);
    border: 1px solid transparent;
}

.dark .voice-item {
    background: rgba(255,255,255,0.04);
}

.voice-item .voice-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-item .remove-voice-btn {
    opacity: 0;
    padding: 1px;
    border-radius: 3px;
    color: #6b7280;
    transition: opacity 0.1s;
    flex-shrink: 0;
}

.voice-item:hover .remove-voice-btn {
    opacity: 1;
}

/* Score pane background follows the app theme */
#scorePane {
    background: #ffffff;
    min-width: 200px;
}

.dark #scorePane {
    background: var(--md-surface);
}

/* Light mode only: nudge ABCJS SVG ink to match the MD3 surface token */
html:not(.dark) #scoreOutput svg {
    color: var(--md-on-surface);
}
html:not(.dark) #scoreOutput svg path:not([fill="none"]),
html:not(.dark) #scoreOutput svg rect:not([fill="none"]),
html:not(.dark) #scoreOutput svg ellipse,
html:not(.dark) #scoreOutput svg polygon {
    fill: var(--md-on-surface);
}
html:not(.dark) #scoreOutput svg path[fill="none"],
html:not(.dark) #scoreOutput svg line {
    stroke: var(--md-on-surface);
}

/* Dark mode: invert the SVG so black notation becomes white on dark background.
   No fill override here — ABCJS renders black by default; invert flips it to white. */
.dark #scoreOutput svg {
    filter: invert(1);
}
/* Re-invert the selected note so it stays blue after the SVG-level invert */
.dark #scoreOutput .abcjs-note_selected path,
.dark #scoreOutput .abcjs-note_selected ellipse {
    filter: invert(1);
    fill: #2563eb !important;
}

/* Ensure the split pane fills height and both halves are visible */
#abcPane {
    min-width: 200px;
}

/* ABC Editor */
#abcEditor {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    tab-size: 4;
}

/* Scrollbar styling for editor panes */
#abcEditor::-webkit-scrollbar,
#scorePane::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#abcEditor::-webkit-scrollbar-track,
#scorePane::-webkit-scrollbar-track {
    background: transparent;
}

#abcEditor::-webkit-scrollbar-thumb,
#scorePane::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
}

.dark #abcEditor::-webkit-scrollbar-thumb,
.dark #scorePane::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
}

/* Score view — selected note highlight */
.abcjs-note_selected .abcjs-notehead,
.abcjs-note_selected .abcjs-stem {
    fill: #2563eb !important;
}

/* ABCJS cursor */
.abcjs-cursor {
    stroke: #ef4444;
}

/* Status bar items */
#statusVoices::before { content: '♫ '; }
#statusBars::before { content: '|  '; }
#statusKey::before { content: 'K: '; }
#statusTimeSig::before { content: 'M: '; }

/* Mobile: abc pane fills full width, score pane hidden by default */
@media (max-width: 767px) {
    #abcPane {
        border-right: none;
    }

    #scorePane {
        display: none;
    }

    #scorePane.mobile-active {
        display: flex;
        flex-direction: column;
    }

    #abcPane.mobile-hidden {
        display: none;
    }
}

/* ── Virtual Piano Keyboard ───────────────────────────────────────────────────── */

.piano-octave-block {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    border-right: 1px solid rgba(0,0,0,0.12);
}

.dark .piano-octave-block {
    border-right-color: rgba(255,255,255,0.08);
}

.piano-white-key {
    width: 32px;
    height: 84px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-top: none;
    border-radius: 0 0 4px 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 5px;
    transition: background 0.08s;
    user-select: none;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    gap: 1px;
}

.piano-white-key:hover { background: #dbeafe; }
.piano-white-key:active { background: #bfdbfe; }

.piano-white-key.current-octave {
    background: #eff6ff;
    border-color: #93c5fd;
}

.piano-white-key.current-octave:hover { background: #dbeafe; }

.dark .piano-white-key {
    background: var(--md-surface-container-highest);
    border-color: var(--md-outline-variant);
}

.dark .piano-white-key:hover { background: color-mix(in srgb, var(--md-surface-container-highest) 80%, var(--md-on-surface)); }
.dark .piano-white-key:active { background: var(--md-primary-container); }

.dark .piano-white-key.current-octave {
    background: var(--md-primary-container);
    border-color: var(--md-primary);
}

.dark .piano-white-key.current-octave:hover { background: color-mix(in srgb, var(--md-primary-container) 85%, white); }

.piano-shortcut {
    font-size: 9px;
    font-weight: 700;
    color: var(--md-primary);
    line-height: 1;
}

.piano-note-name {
    font-size: 8px;
    color: #9ca3af;
    line-height: 1;
}

.piano-black-key {
    position: absolute;
    top: 0;
    width: 20px;
    height: 52px;
    background: #1e293b;
    border-radius: 0 0 3px 3px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 3px;
    transition: background 0.08s;
    user-select: none;
}

.piano-black-key:hover { background: #334155; }
.piano-black-key:active { background: #1d4ed8; }

.piano-black-key.current-octave { background: #1e3a8a; }
.piano-black-key.current-octave:hover { background: #1d4ed8; }

.dark .piano-black-key { background: var(--md-surface); }
.dark .piano-black-key:hover { background: var(--md-surface-container-low); }
.dark .piano-black-key.current-octave { background: var(--md-primary-container); }
.dark .piano-black-key.current-octave:hover { background: color-mix(in srgb, var(--md-primary-container) 85%, white); }

.piano-black-key .piano-note-name { color: #475569; font-size: 7px; }
.dark .piano-black-key .piano-note-name { color: #334155; }

/* ── Drum Pad Grid ────────────────────────────────────────────────────────────── */

/* Row-based layout: Cymbal · Tom · Core — matches standard staff position (top→bottom) */
#drumPadGrid {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.drum-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.drum-row-label {
    width: 42px;
    flex-shrink: 0;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    text-align: right;
    padding-right: 5px;
    line-height: 1;
    user-select: none;
}

.dark .drum-row-label {
    color: #6b7280;
}

.drum-row-pads {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}

.drum-pad {
    position: relative;
    width: 60px;
    height: 46px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    transition: filter 0.08s, transform 0.06s;
    user-select: none;
    flex-shrink: 0;
}

.drum-pad:active { filter: brightness(0.82); transform: scale(0.93); }

@keyframes drum-hit {
    0%   { transform: scale(1);   filter: brightness(1); }
    35%  { transform: scale(0.9); filter: brightness(1.4); }
    100% { transform: scale(1);   filter: brightness(1); }
}

.drum-pad.drum-flash {
    animation: drum-hit 0.14s ease-out;
}

/* Chord mode: selected pads get a blue ring */
.drum-pad.drum-chord-selected {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

.drum-pad-symbol {
    font-size: 15px;
    line-height: 1;
}

.drum-pad-name {
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    text-align: center;
}

.drum-pad-key {
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: 7.5px;
    font-weight: 700;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    opacity: 0.45;
    line-height: 1;
    text-transform: uppercase;
}

/* Cymbals — amber */
.drum-pad--cymbal { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.drum-pad--cymbal:hover { background: #fde68a; }
.dark .drum-pad--cymbal { background: #78350f; border-color: #f59e0b; color: #fef3c7; }
.dark .drum-pad--cymbal:hover { background: #92400e; }

/* Toms — primary/indigo */
.drum-pad--tom { background: var(--md-primary-container); border-color: var(--md-primary); color: var(--md-on-primary-container); }
.drum-pad--tom:hover { background: color-mix(in srgb, var(--md-primary-container) 85%, var(--md-on-primary-container)); }
.dark .drum-pad--tom:hover { background: color-mix(in srgb, var(--md-primary-container) 85%, white); }

/* Core (snare, kick) — red */
.drum-pad--core { background: #fecaca; border-color: #f87171; color: #991b1b; }
.drum-pad--core:hover { background: #fca5a5; }
.dark .drum-pad--core { background: #7f1d1d; border-color: #ef4444; color: #fecaca; }
.dark .drum-pad--core:hover { background: #991b1b; }

/* Utility (side stick) — gray */
.drum-pad--util { background: #f3f4f6; border-color: #d1d5db; color: #374151; }
.drum-pad--util:hover { background: #e5e7eb; }
.dark .drum-pad--util { background: #374151; border-color: #6b7280; color: #d1d5db; }
.dark .drum-pad--util:hover { background: #4b5563; }

/* Rest — green dashed */
.drum-pad--rest { background: #f0fdf4; border-color: #86efac; border-style: dashed; color: #166534; }
.drum-pad--rest:hover { background: #dcfce7; }
.dark .drum-pad--rest { background: #14532d; border-color: #22c55e; color: #dcfce7; }
.dark .drum-pad--rest:hover { background: #166534; }

/* Instrument modal grid buttons */
.instrument-pick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
    background: transparent;
    color: var(--text-color);
}

.instrument-pick-btn:hover {
    background: color-mix(in srgb, var(--md-primary) 8%, transparent);
    border-color: var(--md-primary);
    color: var(--md-primary);
}

/* Header save button — MD3 primary-container */
#saveBtn {
    background: var(--md-primary-container) !important;
    color: var(--md-on-primary-container) !important;
    border: none;
}
#saveBtn:hover {
    background: color-mix(in srgb, var(--md-primary-container) 88%, var(--md-on-primary-container)) !important;
}