/* Oberfläche von yaesuprog: dunkel, dicht, an ein Gerätedisplay angelehnt. */
:root {
  --grund: #0e1116;
  --feld: #161b22;
  --feld-hell: #1d242e;
  --rand: #2a323d;
  --schrift: #d7dee7;
  --leise: #8b97a6;
  --akzent: #37c2c9;
  --akzent-dunkel: #1d6b70;
  --warnung: #e0a33a;
  --fehler: #e5615e;
  --gut: #6fbf73;
  --mono: ui-monospace, "JetBrains Mono", "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ------------------------------------------------------------------ Kopf */
.kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--rand); background: var(--feld);
}
.kopf h1 { font-size: 16px; margin: 0; letter-spacing: .08em; text-transform: uppercase; }
.version { color: var(--leise); font-weight: normal; letter-spacing: 0; text-transform: none; }
.lage { display: flex; gap: 8px; align-items: center; }

.pille {
  font-family: var(--mono); font-size: 12px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--rand); background: var(--feld-hell); color: var(--leise);
}
.pille[data-zustand="an"] { color: var(--gut); border-color: var(--gut); }
.pille[data-zustand="arbeit"] { color: var(--akzent); border-color: var(--akzent); }
.pille[data-zustand="fehler"] { color: var(--fehler); border-color: var(--fehler); }
.pille.leise:empty { display: none; }

/* --------------------------------------------------------------- Leisten */
.leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--rand); background: var(--feld);
}
.leiste.zweite { background: transparent; }
.leiste label { display: flex; align-items: center; gap: 6px; color: var(--leise); font-size: 13px; }
.leiste label.haken { gap: 5px; }
.teiler { width: 1px; align-self: stretch; background: var(--rand); }
.hinweis { color: var(--leise); font-size: 12px; }

select, input[type="text"], input[type="number"] {
  background: var(--feld-hell); color: var(--schrift);
  border: 1px solid var(--rand); border-radius: 4px; padding: 5px 7px;
  font: inherit;
}
select:focus, input:focus { outline: 1px solid var(--akzent); border-color: var(--akzent); }

button {
  background: var(--feld-hell); color: var(--schrift);
  border: 1px solid var(--rand); border-radius: 4px;
  padding: 6px 12px; font: inherit; cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--akzent); color: #fff; }
button:disabled { opacity: .4; cursor: not-allowed; }
button.haupt { background: var(--akzent-dunkel); border-color: var(--akzent); color: #fff; }

.menue { position: relative; }
.klappe[hidden] { display: none; }
.klappe {
  position: absolute; top: 105%; left: 0; z-index: 20;
  display: flex; flex-direction: column; min-width: 170px;
  background: var(--feld); border: 1px solid var(--rand); border-radius: 4px;
  box-shadow: 0 8px 24px #0008;
}
.klappe button { border: 0; border-radius: 0; text-align: left; }

/* --------------------------------------------------------------- Reiter */
.reiter { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--rand); }
.reiter button {
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--leise); padding: 9px 14px;
}
.reiter button.aktiv { color: var(--schrift); border-bottom-color: var(--akzent); }
.zahl {
  font-family: var(--mono); font-size: 11px; color: var(--leise);
  background: var(--feld-hell); border-radius: 999px; padding: 1px 7px; margin-left: 4px;
}

main { flex: 1; min-height: 0; display: flex; }
.blatt { display: none; flex: 1; min-height: 0; flex-direction: column; }
.blatt.aktiv { display: flex; }

.tabellenkopf {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-bottom: 1px solid var(--rand);
}
.tabellenrahmen { flex: 1; overflow: auto; }

/* -------------------------------------------------------------- Tabellen */
table { border-collapse: collapse; width: 100%; font-size: 13px; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--feld); color: var(--leise);
  text-align: left; font-weight: 500; font-size: 12px;
  padding: 7px 8px; border-bottom: 1px solid var(--rand); white-space: nowrap;
}
tbody td { padding: 2px 6px; border-bottom: 1px solid #1b2129; }
tbody tr:nth-child(even) { background: #12161c; }
tbody tr.fehlerhaft { background: #2a1618; }
tbody tr.fehlerhaft td:first-child { box-shadow: inset 3px 0 0 var(--fehler); }

td input, td select {
  width: 100%; background: transparent; border: 1px solid transparent;
  border-radius: 3px; padding: 3px 5px; color: inherit; font: inherit;
}
td input:hover, td select:hover { border-color: var(--rand); }
td input:focus, td select:focus { background: var(--feld-hell); }
td.zahl-spalte input, td.frequenz input { font-family: var(--mono); text-align: right; }
td.loeschen { width: 30px; text-align: center; }

/* Feste Spaltenbreiten: die Frequenz soll nicht wandern, wenn ein Kommentar
   laenger wird. Der Kommentar bekommt den Rest. */
#kanaele { table-layout: fixed; min-width: 1120px; }
#kanaele th:nth-child(1), #kanaele td:nth-child(1) { width: 72px; }
#kanaele th:nth-child(2), #kanaele td:nth-child(2) { width: 118px; }
#kanaele th:nth-child(3), #kanaele td:nth-child(3) { width: 168px; }
#kanaele th:nth-child(4), #kanaele td:nth-child(4) { width: 118px; }
#kanaele th:nth-child(5), #kanaele td:nth-child(5) { width: 108px; }
#kanaele th:nth-child(6), #kanaele td:nth-child(6) { width: 170px; }
#kanaele th:nth-child(7), #kanaele td:nth-child(7) { width: 104px; }
#kanaele th:nth-child(8), #kanaele td:nth-child(8) { width: 96px; }
#kanaele th:nth-child(10), #kanaele td:nth-child(10) { width: 36px; }
/* Der Platzhalter in der TX-Spalte ist Erklaerung, keine Eingabe. */
#kanaele td:nth-child(4) span { display: inline-block; padding: 3px 5px; font-size: 12px; }

#menue { table-layout: fixed; }
#menue th:nth-child(1), #menue td:nth-child(1) { width: 110px; }
#menue th:nth-child(3), #menue td:nth-child(3) { width: 150px; }
td.loeschen button { padding: 2px 7px; border-color: transparent; color: var(--leise); }
td.loeschen button:hover { color: var(--fehler); border-color: var(--fehler); }

#protokoll {
  flex: 1; margin: 0; padding: 10px 16px; overflow: auto;
  font-family: var(--mono); font-size: 12px; color: #9fb3c8; white-space: pre-wrap;
}

/* ----------------------------------------------------------------- Fuss */
.fuss {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 16px; border-top: 1px solid var(--rand);
  background: var(--feld); font-size: 13px; color: var(--leise);
}
.balken { width: 220px; height: 6px; background: var(--feld-hell); border-radius: 3px; overflow: hidden; }
#balken { height: 100%; width: 0; background: var(--akzent); transition: width .12s linear; }

/* --------------------------------------------------------------- Melder */
.melder {
  position: fixed; right: 16px; bottom: 52px; z-index: 50;
  display: flex; flex-direction: column; gap: 8px; max-width: 460px;
}
.meldung {
  background: var(--feld); border: 1px solid var(--rand); border-left-width: 3px;
  border-radius: 4px; padding: 9px 12px; box-shadow: 0 6px 20px #0009;
  white-space: pre-wrap;
}
.meldung.gut { border-left-color: var(--gut); }
.meldung.warnung { border-left-color: var(--warnung); }
.meldung.fehler { border-left-color: var(--fehler); }
.meldung.info { border-left-color: var(--akzent); }

@media (max-width: 820px) {
  .leiste { gap: 8px; }
  .teiler { display: none; }
  .melder { left: 16px; right: 16px; max-width: none; }
}