@font-face {
  font-family: "condensed";
  src: url("../fonts/InterstateRegularCondense.otf");
}

* {
  font-family: 'condensed';
}

body,
html {
  background-color: rgb(24, 24, 24);
  color: rgb(190, 190, 190);
  height: 100%;
}

a {
  text-decoration: none;
}

a:link {
  color: #7a7a7a;
}

a:visited {
  color: #7a7a7a;
}

input {
  background-color: rgb(15, 15, 15);
  color: rgb(236, 221, 223);
  border: 1px solid rgb(138, 138, 138);
}

select {
  background-color: rgb(15, 15, 15);
  color: rgb(236, 221, 223);
}

.red_button {
  background-color: rgb(146, 5, 24);
  color: rgb(236, 221, 223);
}

#dragsrc {
  border: none;
  background-color: #9a9a9a;
}

#pattern_editor_tab {
  display: flex;
  flex-direction: column;
  border-top: 1px solid white;
  padding-top: 10px;
}


#pattern_editor_tab {
  display: flex;
  flex-direction: column;
  border-top: 1px solid white;
  padding-top: 10px;
}


#ram_editor {
  font-family: fixed-width;
  background-color: #292929;
  color: white;
  font-family: monospace, monospace;
  border: none;
  padding: 10px;
  margin: 10px;
  height: 100%;
}

#midi_monitor_tab {
  display: flex;
  flex-direction: column;
  border-top: 1px solid white;
  padding-top: 10px;
}

#midi_log {
  font-family: fixed-width;
  background-color: #292929;
  color: white;
  font-family: monospace, monospace;
  border: none;
  padding: 10px;
  margin: 10px;
  height: 400px;
}

.tab_button {
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding-left: 10px;
  padding-right: 10px;
  margin-right: 10px;
  border-bottom: none;
  user-select: none;
}

.waveform_slots ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 0;
  gap: 8px;
}

/* Luma-1 layout: 2 columns, 5 rows */
.luma1_layout li {
  flex: 0 0 49%;
  border: 1px solid rgb(51, 51, 51);
  display: flex;
  height: 100px;
}

/* Luma-Mu layout: 2 columns, 4 rows */
.lumamu_layout li {
  flex: 0 0 49%;
  border: 1px solid rgb(51, 51, 51);
  display: flex;
  height: 100px;
}

.waveform_slots canvas {
  height: 100%;
  width: 100%;
}

.fine_print {
  font-size: 10pt;
}

.main_section {
  margin: 0px;
  display: flex;
  flex-direction: column;
  padding: 0px;
}

.editor_waveform {
  display: block;
  border: 1px solid rgb(51, 51, 51);
  background-color: rgb(41, 41, 41);
  width: 100%;
  height: 260px;
}

.status_alert {
  color: #ff4d4d;
}

.status_success {
  color: #4CAF50;
}

#firmware_progress_container {
  background: #333;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #444;
}


/* Tooltip Styles */
#global-tooltip {
  position: absolute;
  z-index: 10000;
  /* High z-index to sit on top of everything */
  pointer-events: none;
  /* CRITICAL: Allows clicks to pass through to underlying elements */

  background-color: rgba(20, 20, 20, 0.95);
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 8px 12px;
  font-family: 'condensed', sans-serif;
  font-size: 14px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  max-width: 250px;
  white-space: pre-wrap;
  /* Allows \n to act as line break */

  /* Smooth implementation */
  transition: opacity 0.1s;
}