:root {
  --bg-main: #121212;
  --bg-panel: #1e1e1e;
  --bg-accent: #2a2a2a;
  --text-main: #f0f0f0;
  --text-muted: #aaaaaa;
  --accent: #b38f3b;

  /* Section colors */
  --section-intro: #3b6ea5;
  --section-verse: #3a8f6a;
  --section-chorus: #b38f3b;
  --section-mambo: #8a5fa8;
  --section-outro: #a65f5f;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: system-ui, sans-serif;
}

body {
  background: var(--bg-main);
  color: var(--text-main);
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Top bar */

#top-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid #333;
}

#top-bar button,
#top-bar select,
#top-bar input {
  background: var(--bg-accent);
  color: var(--text-main);
  border: 1px solid #444;
  padding: 4px 8px;
}

/* Timeline header */

#timeline-header {
  display: flex;
  flex-direction: column;
  background: #181818;
  border-bottom: 1px solid #333;
}

#bars-row,
#sections-row {
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 12px;
  color: var(--text-muted);
}

#loops-panel {
  background: var(--bg-panel);
  border-top: 1px solid #333;
  overflow: hidden;
  transition: height 0.2s ease;
z-index: 20;
}

#loops-panel.collapsed #loops-content {
  display: none;
}

#loops-header {
  padding: 6px 8px;
  cursor: pointer;
  font-weight: bold;
  background: #222;
}


/* Main area */

#main-area {
  flex: 1;
  display: flex;
  overflow: hidden;
}

#tracks-list {
  width: 180px;
  background: var(--bg-panel);
  border-right: 1px solid #333;
  overflow-y: auto;
z-index: 20; 
}

.track-item {
  padding: 6px 8px;
  height: 40px;
  border-bottom: 1px solid #333;
  display: flex;
  flex-direction: column;
  gap: 4px;
    cursor: pointer;
    user-select: none;
   pointer-events: auto;
}

.track-item.selected-track {
    background: #444;
}
.track-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.track-name {
  font-size: 12px;
}

.track-controls {
  display: flex;
  gap: 4px;
}

.track-controls button {
  font-size: 10px;
  padding: 2px 4px;
}

.track-humanize {
  margin-top: 4px;
  font-size: 10px;
}

/* Timeline canvas */

#timeline-container {
  flex: 1;
  background: #101010;
  position: relative;
  overflow: hidden;
    z-index: 1;
}

#timeline-konva {
  width: 100%;
  height: 100%;
    pointer-events: auto;
}

/* Zoom controls */

#zoom-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--bg-panel);
  border-top: 1px solid #333;
}

/* Bottom area: MIDI */

#bottom-area {
  background: var(--bg-panel);
  border-top: 1px solid #333;
  padding: 8px;
}

#midi-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

#midi-keyboard-container {
  height: 120px;
}

/* Error modal */

#error-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

#error-modal.hidden {
  display: none;
}

#error-modal-content {
  background: var(--bg-panel);
  padding: 16px 20px;
  border-radius: 4px;
  min-width: 260px;
}

#error-modal-content button {
  margin-top: 12px;
  background: var(--accent);
  border: none;
  padding: 4px 8px;
  color: #000;
}