/*
 * Stylesheet for the MIDI Diagnostic Tool.  The design uses flexible panels
 * that adapt to the width of the screen. Panels can be hidden by clicking
 * their associated toggle buttons.  Colours are intentionally neutral to
 * focus attention on the data.  The keyboard is drawn using SVG and
 * highlights active notes.  All sizing is relative to the viewport to
 * maintain usability on desktops, tablets and phones.
 */

html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  /* Dark mode background and default text colour */
  background: #121212;
  color: #e0e0e0;

  /* Prevent any horizontal scrollbars on the root document */
  overflow-x: hidden;
}

header {
  padding: 1rem;
  background: #1e1e1e;
  border-bottom: 1px solid #333;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

header h1 {
  margin: 0;
  font-size: 1.5rem;
  color: #fafafa;
}

header .diagnostic {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #b0b0b0;
}

header .controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #b0b0b0;
}

button {
  padding: 0.4rem 0.8rem;
  border: 1px solid #444;
  background: #2a2a2a;
  color: #e0e0e0;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.9rem;
}

button.small-btn {
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

/* Small numeric input used for log size control. Keep consistent height
   with buttons and narrower width for compact display. */
.small-input {
  width: 4rem;
  padding: 0.2rem;
  border: 1px solid #444;
  background: #2a2a2a;
  color: #e0e0e0;
  border-radius: 4px;
  font-size: 0.8rem;
}

/* Hide spin buttons in number input for WebKit-based browsers */
.small-input::-webkit-inner-spin-button,
.small-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

button.toggle-btn {
  margin-left: auto;
}

/* Layout for v2: separate columns for event log and other panels */
main#panels {
  display: flex;
  flex-direction: row;
  padding: 0.5rem;
  gap: 0.5rem;
  height: calc(100vh - 130px);
  box-sizing: border-box;
}

/* Left column for event log */
#left-column {
  flex: 0 0 28%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Right column fills remaining width */
/* Right column fills remaining width and allows vertical scrolling if content
   exceeds the available height. Without a scroll, panels below the fold
   (e.g. Channel Programs and Synth) become inaccessible. */
#right-column {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  overflow-y: auto;
  /* Ensure horizontal content doesn't cause scrollbars */
  overflow-x: hidden;
  /* Allow the column to shrink properly in flex layout without
     preserving intrinsic width. Without this, the content's
     min-width may exceed the container and produce a horizontal
     scrollbar. */
  min-width: 0;
}

/* Rows inside right column */
.panel-row {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

/* Make specific rows full width */
#keyboard-panel,
#timeline-panel,
#channel-program-panel,
#synth-panel {
  flex: 1 1 100%;
}

/* Default row panels share space equally */
.panel-row > section {
  flex: 1 1 33%;
}

/* Panel styling */
/* Panel styling using dark theme */
.panel {
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Panel header styling */
.panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #2a2a2a;
  border-bottom: 1px solid #444;
  color: #fafafa;
}

/* Allow the event log header to wrap its content (filters, buttons) so it
   remains readable on narrow layouts. */
#event-panel .panel-header {
  flex-wrap: wrap;
}

/* Panel heading */
.panel-header h2 {
  margin: 0;
  font-size: 1.0rem;
  color: #fafafa;
}

/* Panel body styling */
.panel-body {
  padding: 0.75rem;
  overflow-y: auto;
  color: #e0e0e0;
}

.panel-body.hidden {
  display: none;
}

/* Event log */
/* Event log element dark styling */
#event-log {
  flex: 1 1 auto;
  overflow-y: auto;
  background: #181818;
  border: 1px solid #333;
  padding: 0.5rem;
  font-family: monospace;
  font-size: 0.75rem;
  line-height: 1.3;
  /* Preserve newlines but allow long lines to wrap */
  white-space: pre-wrap;
  word-break: break-word;
}

/* Filters for event log and timeline */
.filters, .timeline-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
}

/* Lists for notes and CCs */
ul.list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}

ul.list li {
  padding: 0.2rem 0;
  border-bottom: 1px dashed #444;
}

/* Range controls for keyboard */
.range-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
}

/* Keyboard SVG */
#keyboard-svg {
  width: 100%;
  height: 180px;
  display: block;
  border: 1px solid #333;
  background: #181818;
  box-sizing: border-box;
}

/* Prevent horizontal scrollbars on keyboard and timeline panels. These
   panels size their content to the available width, so horizontal
   scrolling is unnecessary. Ensure any overflow is clipped rather than
   causing scrollbars. */
#keyboard-content,
#timeline-content {
  /* Clip any horizontal overflow to avoid creating scrollbars */
  overflow-x: clip;
}

/* Also hide horizontal scrollbars on the specific panel bodies for
   keyboard and timeline. Without this, the browser may still reserve
   space for a scrollbar due to small rounding differences. */
#keyboard-panel .panel-body,
#timeline-panel .panel-body {
  /* Prevent horizontal overflow due to padding; remove horizontal padding */
  padding-left: 0;
  padding-right: 0;
  overflow-x: hidden;
}

/* Hide any horizontal scrollbar on the right column. Without this, a
   small horizontal scrollbar may appear due to minor sizing
   differences. */
#right-column::-webkit-scrollbar:horizontal {
  height: 0 !important;
}

/* Completely hide horizontal scrollbars on keyboard and timeline content.
   WebKit browsers otherwise render a tiny scrollbar even with
   overflow-x hidden. This rule targets those scrollbars directly. */
#keyboard-content::-webkit-scrollbar:horizontal,
#timeline-content::-webkit-scrollbar:horizontal,
#keyboard-panel .panel-body::-webkit-scrollbar:horizontal,
#timeline-panel .panel-body::-webkit-scrollbar:horizontal {
  height: 0 !important;
}

/* SVG keyboard keys */
#keyboard-svg rect.white {
  fill: #ddd;
  stroke: #555;
}
#keyboard-svg rect.black {
  fill: #222;
  stroke: #444;
}
#keyboard-svg rect.white.active {
  fill: #b32727;
}
#keyboard-svg rect.black.active {
  fill: #e53935;
}

/* Note labels on C keys */
#keyboard-svg text.note-label {
  fill: #a0a0a0;
  font-size: 8px;
  pointer-events: none;
}

/* Timeline canvas */
#timeline-canvas {
  width: 100%;
  height: 220px;
  border: 1px solid #333;
  background: #181818;
  display: block;
  box-sizing: border-box;
}

/* Hide elements with the hidden class */
.hidden {
  display: none !important;
}

/* Ensure label text in filters doesn't wrap */
.filters label,
.timeline-filters label {
  white-space: nowrap;
}

/* Responsive adjustments for narrow screens */
@media (max-width: 800px) {
  main#panels {
    flex-direction: column;
    height: auto;
  }
  #left-column,
  #right-column {
    flex: 1 1 100%;
    width: 100%;
  }
  .panel-row {
    flex-direction: column;
  }
  .panel-row > section {
    flex: 1 1 100%;
  }
  /* Reduce heights for smaller screens */
  #event-log {
    height: 200px;
  }
  #timeline-canvas {
    height: 200px;
  }
  #keyboard-svg {
    height: 150px;
  }
}

/* Hide horizontal scrollbars entirely. The content is sized to the
   available width, so horizontal scrollbars are unnecessary. Target
   WebKit browsers by disabling display of horizontal scrollbars. */
::-webkit-scrollbar:horizontal {
  display: none;
}

/* Synthesizer controls layout */
.synth-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
}
.synth-control {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 100px;
}
.synth-control label {
  font-size: 0.75rem;
}

/* Layout for synth effects toggles */
.synth-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

/* Layout for effect parameter controls. Each effect group stacks its
   sliders vertically and flows horizontally alongside other groups. */
.effect-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

.effect-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 180px;
  border: 1px solid #333;
  padding: 0.5rem;
  border-radius: 4px;
  background: #2a2a2a;
}

.effect-group h4 {
  margin: 0 0 0.2rem 0;
  font-size: 0.8rem;
  color: #fafafa;
}