/* Score Editor — app-specific styles.
   Subject: music notation / ABC composition. The accent is ink-blue (the
   colour of fountain-pen ink on manuscript paper) with gold for sharp/flat
   accidentals. Signature: staff-line dividers between sidebar sections. */

/* Mobile drawer + backdrop slide/fade transition (JS toggles .drawer-open on
   the next frame after display:block; see app.js openDrawer/closeDrawer). The
   global reduced-motion kill-switch collapses these. */
#mobileDrawer {
    transform: translateY(100%);
    transition: transform var(--md-duration-m, 300ms) var(--md-easing-enter, cubic-bezier(0.05,0.7,0.1,1));
    will-change: transform;
}
#mobileDrawer.drawer-open { transform: translateY(0); }
#drawerBackdrop {
    opacity: 0;
    transition: opacity var(--md-duration-m, 300ms) var(--md-easing-standard, cubic-bezier(0.2,0,0,1));
}
#drawerBackdrop.drawer-open { opacity: 1; }

/* Score-list loading skeleton row */
.score-item-skeleton {
    pointer-events: none;
    padding: 8px 10px;
}

:root {
    /* Ink-blue accent — overrides shared indigo for this app only */
    --sc-accent: #1A5276;
    --sc-accent-on: #FFFFFF;
    --sc-accent-container: #D4E6F1;
    --sc-on-accent-container: #0A2A3D;
    --sc-gold: #C9A227;
    --sc-gold-soft: color-mix(in srgb, #C9A227 15%, transparent);
}

.dark {
    --sc-accent: #7DB8D9;
    --sc-accent-on: #0A2A3D;
    --sc-accent-container: #1A3D52;
    --sc-on-accent-container: #D4E6F1;
    --sc-gold: #E8C84E;
}

/* Override shared MD3 primary with ink-blue for this app's UI */
:root {
    --md-primary: var(--sc-accent);
    --md-on-primary: var(--sc-accent-on);
    --md-primary-container: var(--sc-accent-container);
    --md-on-primary-container: var(--sc-on-accent-container);
}

/* Thin visible scrollbar for horizontally-scrolling toolbars — gives mobile
   users an affordance that more content is off-screen, without redesigning. */
.scroll-x-thin {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.25) transparent;
}
.dark .scroll-x-thin {
    scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.scroll-x-thin::-webkit-scrollbar { height: 6px; -webkit-overflow-scrolling: touch; }
.scroll-x-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-x-thin::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.22);
    border-radius: 999px;
}
.dark .scroll-x-thin::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); }
.scroll-x-thin::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.4); }
.dark .scroll-x-thin::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }

/* 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;
}

/* Empty state — matches the slides empty-state pattern (icon + title + body +
   CTA) but sized for the narrow sidebar. Reuses --md-primary so it stays
   on-theme in light/dark. */
.score-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 12px 8px;
    gap: 6px;
}
.score-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--md-primary) 12%, transparent);
    color: var(--md-primary);
    margin-bottom: 4px;
}
.score-empty-icon .material-symbols-outlined { font-size: 24px; }
.score-empty-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}
.score-empty-body {
    font-size: 11px;
    color: var(--text-color);
    opacity: 0.7;
    margin: 0 0 6px;
    line-height: 1.4;
}
.score-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--md-primary);
    color: var(--md-on-primary);
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: var(--md-shape-full, 999px);
    cursor: pointer;
    transition: filter 0.12s;
}
.score-empty-cta:hover { filter: brightness(1.08); }
.score-empty-cta:active { filter: brightness(0.95); }

/* 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: var(--sc-accent) !important;
    stroke: var(--sc-accent) !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 .note-selected path,
.dark #scoreOutput .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 */
.note-selected .abcjs-notehead,
.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: color-mix(in srgb, var(--md-primary-container) 45%, white);
    border-color: var(--md-primary);
}

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

.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: color-mix(in srgb, var(--md-primary) 60%, black); }

.piano-black-key.current-octave { background: color-mix(in srgb, var(--md-primary) 45%, black); }
.piano-black-key.current-octave:hover { background: color-mix(in srgb, var(--md-primary) 60%, black); }

.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 var(--sc-accent);
    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) — error-container tokens (resolve correctly in both schemes) */
.drum-pad--core { background: var(--md-error-container); border-color: var(--md-error); color: var(--md-on-error-container); }
.drum-pad--core:hover { background: color-mix(in srgb, var(--md-error-container) 80%, var(--md-error)); }

/* 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;
}

/* ── Signature: staff-line dividers ──
   Sidebar section dividers render as five-line music staves — the subject's
   most fundamental structural element. Quiet, only visible between sections. */
#sidebar .nav-section-label,
#sidebar h3,
aside h3 {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 8px;
}
#sidebar .nav-section-label::after,
#sidebar h3::after,
aside h3::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20px;
    background-image: repeating-linear-gradient(
        180deg,
        var(--md-outline-variant) 0,
        var(--md-outline-variant) 1px,
        transparent 1px,
        transparent 4px
    );
    background-size: 100% 20px;
    opacity: 0.5;
    pointer-events: none;
}

/* Gold accent for sharp/flat toolbar buttons */
.toolbar-btn[data-accidental] {
    color: var(--sc-gold);
}
.toolbar-btn[data-accidental]:hover {
    background: var(--sc-gold-soft);
}