/* ISLX MIDI Remote Configurator — web edition.
   Mirrors the desktop tool's black terminal look (DARK_QSS). */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
}

/* ── Header ─────────────────────────────────────────────── */
#headerBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid #fff;
  position: sticky;
  top: 0;
  background: #000;
  z-index: 5;
}
#appTitle {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 2px;
}
#statusLabel { font-size: 11px; font-weight: bold; letter-spacing: 1px; }
.status-ok  { color: #00ff66; }
.status-search { color: #888; }
.status-off { color: #ff5555; }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 12px 24px;
}

/* ── Top row ────────────────────────────────────────────── */
.toprow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 10px;
  flex-wrap: wrap;
}
.toprow label { display: inline-flex; align-items: center; gap: 5px; }
.portname { color: #00ff66; letter-spacing: 1px; }
.toprow label.subtle { color: #777; font-size: 10px; }
.vline { width: 1px; height: 20px; background: #444; display: inline-block; }
.flex { flex: 1; }

/* ── Fieldsets (QGroupBox) ──────────────────────────────── */
fieldset {
  border: 1px solid #444;
  border-radius: 4px;
  margin: 12px 0 4px;
  padding: 8px;
}
legend {
  padding: 0 6px;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 12px;
}

/* ── Grids ──────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: 4px 6px;
  align-items: center;
}
#inputGrid { grid-template-columns: 90px repeat(12, auto); }
#oscGrid   { grid-template-columns: 90px auto minmax(180px, 1fr) auto repeat(4, 34px); }
.grid .ghdr {
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: center;
}
.grid .chdr {
  color: #aaa;
  font-size: 10px;
  letter-spacing: 1px;
  text-align: center;
}
.grid .rowlbl { color: #ddd; }
.grid .rowlbl.inactive { color: #555; }
.grid .center { text-align: center; }

/* ── Controls ───────────────────────────────────────────── */
input[type=number], select, input[type=text] {
  background: #0d0d0d;
  border: 1px solid #444;
  border-radius: 3px;
  padding: 3px 4px;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  min-height: 22px;
}
input[type=number] { width: 52px; text-align: center; }
input[type=number]:hover, select:hover, input[type=text]:hover { border-color: #888; }
input[type=number]:focus, select:focus, input[type=text]:focus { border-color: #fff; outline: none; }
input:disabled, select:disabled {
  color: #444;
  border-color: #1a1a1a;
  background: #050505;
}
input[type=checkbox] { accent-color: #666; }

input[type=color] {
  width: 58px;
  height: 24px;
  padding: 1px;
  border: 1px solid #444;
  border-radius: 3px;
  background: #0d0d0d;
  cursor: pointer;
}
input[type=color]:disabled { opacity: 0.25; cursor: default; }

button {
  background: #111;
  border: 1px solid #444;
  border-radius: 3px;
  color: #fff;
  padding: 4px 10px;
  min-height: 26px;
  letter-spacing: 1px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
button:hover:not(:disabled) { background: #222; border-color: #fff; }
button:active:not(:disabled) { background: #333; }
button:disabled { background: #000; border-color: #1a1a1a; color: #444; cursor: default; }
button.fw { border-color: #555; }
button.test { width: 34px; padding: 4px 0; }

/* ── Hints, actions, log ────────────────────────────────── */
.hint { color: #777; font-size: 10px; margin: 4px 2px 8px; }
.actions {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
  align-items: center;
}
#log {
  background: #050505;
  border: 1px solid #444;
  border-radius: 3px;
  color: #ccc;
  font-size: 11px;
  padding: 6px;
  margin: 0;
  height: 140px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Dialogs ────────────────────────────────────────────── */
dialog {
  background: #000;
  color: #fff;
  border: 1px solid #666;
  border-radius: 4px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  padding: 16px 20px;
  min-width: 380px;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
dialog h3 { margin: 0 0 12px; letter-spacing: 1px; }
dialog hr { border: none; border-top: 1px solid #444; margin: 12px 0; }
.form { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; }
.form label { display: contents; }
.form label > span { display: inline-flex; align-items: center; gap: 6px; }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.about-text { color: #ddd; white-space: pre-line; }

/* Firmware release notes inside the update dialog. Capped in height so a long
   list can never push the Flash / Cancel buttons off-screen. */
.flash-notes {
  margin: 12px 0 4px;
  padding: 10px 12px;
  border: 1px solid #444;
  border-radius: 4px;
  background: #0b0b0b;
  max-height: 34vh;
  overflow-y: auto;
}
.flash-notes h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: 1px; color: #fff; }
.flash-notes .flash-notes-lead { margin: 0 0 8px; color: #ddd; }
.flash-notes ul { margin: 0; padding-left: 18px; }
.flash-notes li { margin: 0 0 8px; color: #bbb; line-height: 1.5; }
.flash-notes li:last-child { margin-bottom: 0; }
.flash-notes li strong { color: #fff; }

.progress {
  height: 14px;
  border: 1px solid #444;
  border-radius: 3px;
  background: #050505;
  margin: 10px 0;
  overflow: hidden;
}
#flashBar {
  height: 100%;
  width: 0%;
  background: #00ff66;
  transition: width 0.15s linear;
}

/* ── Unsupported-browser overlay ────────────────────────── */
.overlay[hidden] { display: none; }
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overlay-card {
  max-width: 460px;
  border: 1px solid #666;
  border-radius: 4px;
  padding: 20px 26px;
  background: #000;
}
.overlay-card h2 { margin-top: 0; letter-spacing: 1px; }
.overlay-card p { color: #ccc; line-height: 1.5; }