/* ============================================================
   Nari DSP – Setup
   ------------------------------------------------------------
   Alles Sichtbare kommt aus neko-ui. Hier steht nur, was dieser
   Seite allein gehoert: die Zustandsspalte, die Mischmatrix, die
   Filterbaender und die Speicherplaetze.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import './vendor/neko-ui/css/neko-ui.css';

html, body { height: 100%; }
body { overflow: hidden; }
@media (max-width: 900px) {
  html, body { height: auto; }
  body { overflow: auto; }
}

/* Kennfarbe je Ausgang. Sie taucht in der Seitenspalte, an den
   Filterbaendern und in der Matrix auf und steht deshalb hier.
   Out 1 ist blau und Out 2 rot, wie die Stecker am Cinch-Paar; damit
   heisst links im Studio dasselbe wie links hier. */
:root {
  --ch0: #38BDF8;
  --ch1: #F87171;
  --ch2: #10B981;
  --ch3: #A78BFA;
}

/* ============================================================
   Seitenspalte: Zustand des Geraets
   ============================================================ */
/* ============================================================
   Kopfleiste
   ============================================================ */
.brand-mark.chip {
  padding: 6px; color: var(--accent);
  background: var(--accent-bg); border: 1px solid rgba(244,114,182,.25);
}

/* Das Geraet, mit Leuchtpunkt fuer die Verbindung – sitzt in der
   Kopfleiste und bleibt deshalb schmal. */
.device-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 9px; border-radius: var(--radius-s);
  background: var(--bg-2); border: 1px solid var(--line);
}
.device-item .info { display: flex; align-items: baseline; gap: 6px; }
.device-item .dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--muted); box-shadow: 0 0 0 3px rgba(107,114,128,.15);
  transition: background .15s, box-shadow .15s;
}
.device-item .dot.online { background: var(--good); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.device-item .name { font-size: var(--fs-s); font-weight: 600; }
.device-item .detail { font-size: var(--fs-tiny); color: var(--muted); font-family: var(--mono); }

/* Abschnitt mit Kennwerten. Ueberschrift wie im Messdialog. */
.sb-section > h3 {
  font-size: 10px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); margin: 0 0 7px; display: flex; align-items: center; gap: 8px;
}
.sb-section > h3::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }

.sb-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: var(--fs-xs); }
.sb-label { color: var(--muted); }
.sb-value { margin-left: auto; font-family: var(--mono); color: var(--text-2); }
.sb-value.warn { color: var(--warn); }
.sb-chip {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-xs);
  padding: 1px 6px; color: var(--text-2);
}

/* Auslastung: derselbe Balken wie ueberall, nur schmaler. */
.sb-cpu-wrap { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.sb-cpu-bar { width: 66px; height: 5px; border-radius: 3px; overflow: hidden;
              background: var(--bg-2); border: 1px solid var(--line); }
.sb-cpu-fill { display: block; height: 100%; width: 0; background: var(--good); transition: width .2s linear; }
.sb-cpu-fill.warn { background: var(--warn); }
.sb-cpu-fill.crit { background: var(--danger); }
.sb-cpu-wrap .sb-value { margin-left: 0; min-width: 42px; text-align: right; }

.sb-ch-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 0 4px 8px;
  font-size: var(--fs-xs); border-left: 2px solid var(--ch, var(--muted));
}
.sb-ch-row:nth-child(1) { --ch: var(--ch0); }
.sb-ch-row:nth-child(2) { --ch: var(--ch1); }
.sb-ch-row:nth-child(3) { --ch: var(--ch2); }
.sb-ch-row:nth-child(4) { --ch: var(--ch3); }
.sb-ch-name { color: var(--text-2); font-weight: 500; }
.sb-ch-detail { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   Kanalblock: ein Ausgang mit seinen Bedienelementen
   ============================================================ */
.ch-block {
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--ch, var(--accent));
  border-radius: var(--radius); padding: 10px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.ch-block[data-ch="0"] { --ch: var(--ch0); }
.ch-block[data-ch="1"] { --ch: var(--ch1); }
.ch-block[data-ch="2"] { --ch: var(--ch2); }
.ch-block[data-ch="3"] { --ch: var(--ch3); }
.ch-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-s); font-weight: 600; color: var(--text-2);
  padding-bottom: 7px; border-bottom: 1px solid var(--line-soft);
}
.ch-head .tools { margin-left: auto; display: flex; align-items: center; gap: 5px; }

.fir-stat { display: inline-flex; align-items: baseline; gap: 5px; }
.fir-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.fir-stat-value { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text); }
.fir-stat-value.success { color: var(--good); }

/* ============================================================
   Frequenzgang eines Kanals
   ============================================================ */
/* Der Graph ist hier kein Beiwerk, sondern das Bedienelement: die Punkte
   darin werden gezogen. Deshalb bekommt er Hoehe. */
.response-chart {
  position: relative; height: 200px; border-radius: 6px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line);
  touch-action: none;   /* sonst scrollt der Finger die Seite statt zu ziehen */
}
.response-chart canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.iir-peak { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.iir-peak:empty { display: none; }

/* ============================================================
   Filterbaender
   ============================================================ */
.rew-bands { display: flex; flex-direction: column; gap: 5px; }
/* Der leere Zustand kommt als eigenes Element aus app.js, nicht als
   :empty – der Text soll erklaeren, nicht nur luecken. */
.rew-empty {
  padding: 12px; text-align: center; line-height: 1.5;
  font-size: var(--fs-xs); color: var(--muted);
  background: var(--bg); border: 1px dashed var(--line); border-radius: 6px;
}
.rew-band {
  display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap;
  padding: 7px 8px; border-radius: var(--radius-s);
  background: var(--panel); border: 1px solid var(--line-soft);
}
/* Die Nummer traegt die Farbe, mit der das Band im Diagramm gezeichnet wird. */
.rew-band-num {
  font-family: var(--mono); font-size: 10px; font-weight: 700; color: #0F1113;
  border-radius: 4px; padding: 2px 5px; min-width: 20px; text-align: center; flex: none;
  align-self: center;
}
.rew-band-type { height: var(--h-xs); font-size: 11px; flex: 1 1 120px; min-width: 96px; }
.rew-band-field { display: flex; flex-direction: column; gap: 3px; flex: 0 1 66px; min-width: 58px; }
.rew-band-field > span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.rew-band-field input { height: var(--h-xs); width: 100%; }
.rew-band-remove {
  height: var(--h-xs); padding: 0 7px; align-self: center; margin-left: auto;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius-s);
  color: var(--muted); cursor: pointer; font-size: 11px;
}
.rew-band-remove:hover { color: var(--danger); border-color: #5A2A2A; }
.iir-slots { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

/* Ein Hinweis, der nur auftaucht, wenn wirklich Vorverstaerkung noetig ist.
   In der Warnfarbe wie jeder andere Hinweiskasten auch – rot wuerde einen
   Fehler behaupten, dabei nennt der Satz nur eine Zahl zum Ablesen. */
.iir-global-pregain:not(:empty) {
  font-size: 11px; line-height: 1.45; padding: 6px 8px; border-radius: 6px;
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-txt);
}
.iir-global-pregain:not(:empty)::before {
  content: '';
  display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--warn); vertical-align: middle; margin-right: 7px;
}

/* ============================================================
   Mischmatrix
   ============================================================ */
table.matrix-grid { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: var(--fs-xs); }
table.matrix-grid th, table.matrix-grid td {
  border: 1px solid var(--line-soft); padding: 6px 8px; text-align: center; white-space: nowrap;
}
table.matrix-grid thead th { background: var(--panel-2); color: var(--text-2); font-weight: 600;
                             font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
table.matrix-grid tbody th { background: var(--panel-2); color: var(--text-2); text-align: left; font-weight: 600; }
table.matrix-grid td { cursor: pointer; color: var(--text); background: var(--bg-2); transition: background var(--dur); }
table.matrix-grid td:hover { background: var(--panel-3); }
/* Aus und Durchleitung sofort erkennbar, ohne die Zahl zu lesen. */
table.matrix-grid td.cell-zero { color: var(--faint); background: var(--bg); }
table.matrix-grid td.cell-one { color: var(--good); background: var(--good-bg); }

/* ============================================================
   Eingangsverstaerkung
   ============================================================ */
.gain-control {
  display: flex; flex-direction: column; gap: 6px;
  padding: 9px 10px; border-radius: var(--radius);
  background: var(--bg-2); border: 1px solid var(--line-soft);
}
.gain-label { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-xs); }
.gain-label .ch { color: var(--text-2); font-weight: 500; }
.gain-label .val { margin-left: auto; font-family: var(--mono); color: var(--accent); font-weight: 600; }

/* ============================================================
   Speicherplaetze
   ============================================================ */
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.preset-slot-card {
  display: flex; flex-direction: column; gap: 7px;
  padding: 9px 10px; border-radius: var(--radius);
  background: var(--bg-2); border: 1px solid var(--line-soft);
}
.preset-slot-header { display: flex; align-items: center; gap: 8px; }
.preset-slot-label { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.preset-slot-badge {
  margin-left: auto; font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
  padding: 2px 5px; border-radius: 4px;
}
.preset-slot-badge.saved { background: rgba(16,185,129,.15); color: var(--good); border: 1px solid var(--good-line); }
.preset-slot-badge.empty { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.preset-slot-name { font-size: var(--fs-s); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset-slot-name.empty { color: var(--faint); font-style: italic; }
.preset-slot-actions { display: flex; gap: 5px; }
.preset-slot-actions .btn { flex: 1; }

/* ============================================================
   Fusszeile: Kennwerte und Ereignisprotokoll
   ============================================================ */
.monitor { display: flex; flex-direction: column; }
.monitor-log {
  border-top: 1px solid var(--line-soft); background: var(--bg);
  max-height: 190px; overflow-y: auto; padding: 8px 12px;
}
.log-entry {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.55; color: var(--muted);
  white-space: pre-wrap; word-break: break-word;
}
.log-entry.success { color: var(--good); }
.log-entry.error { color: var(--danger); }
.log-entry.warn { color: var(--warn); }

.monitor-stats { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.monitor-stat { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.monitor-stat .label { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.monitor-stat span:last-child { font-family: var(--mono); color: var(--text-2); }
.monitor-stat .value.warning { color: var(--warn); font-weight: 600; }

/* Der Pfeil am Protokollknopf zeigt, in welche Richtung es aufgeht. */
#btnToggleLog svg { transition: transform .15s; }
.monitor.open #btnToggleLog svg { transform: rotate(180deg); }

/* ============================================================
   Kleinigkeiten
   ============================================================ */
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.readonly-value {
  height: var(--h-s); display: flex; align-items: center; padding: 0 8px;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-s);
  font-family: var(--mono); color: var(--muted);
}
/* Bestaetigung nach einem erfolgreichen Befehl – kurz gruen, dann zurueck. */
.btn-flash-ok { border-color: var(--good) !important; color: var(--good) !important; }
canvas.meter { width: 100%; display: block; background: var(--bg); }

/* ============================================================
   Geruest der Seite
   ============================================================ */
/* Der Inhalt liegt auf derselben Flaeche, auf der die Karteireiter
   aufsitzen – sonst schwebt der aktive Reiter ueber einer Kante. */
.pane-scroll {
  flex: 1; min-height: 0; overflow-y: auto; background: var(--bg-2);
  padding: 12px; display: flex; flex-direction: column; gap: 12px;
}
/* setTab schaltet auf display:flex – die Tafeln stapeln sich dann. */
.tab-content { display: flex; flex-direction: column; gap: 12px; }

/* Ein Strich, der zwei Gruppen in derselben Tafel trennt. */
.rule { height: 1px; background: var(--line-soft); }
/* Eine Beschriftung ohne eigenes Feld darunter. */
.lbl-standalone {
  font-size: var(--fs-tiny); color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
}

/* Ein einzelner Knopf im Kanalblock bleibt ein Knopf: ueber die volle Breite
   gezogen liest er sich wie ein Banner und nicht wie etwas zum Anklicken. */
.ch-block > .btn { align-self: flex-start; }