/* Oberfläche von yaesuprog.
 *
 * Die Seite laeuft an zwei Orten und soll an beiden richtig aussehen:
 *
 *   afu.tools/programmer/yaesu   Kopfzeile, Fusszeile, Farben und Schrift
 *                                kommen aus dem Blatt von afu.tools, das vor
 *                                diesem geladen wird. Hier steht dann nur noch,
 *                                was es dort nicht gibt: Leisten, Reiter, die
 *                                dichte Tabelle.
 *   yaesuprog web                Kein fremdes Blatt. Dann greifen die
 *                                Rueckfallwerte in `var(--…, …)` und die Regeln
 *                                unter `.eigenstaendig` (das Skript setzt die
 *                                Klasse, wenn es keine afu.tools-Kopfzeile
 *                                findet).
 *
 * Alles Eigene haengt deshalb unter `.yaesu-app`. Nackte Selektoren wie
 * `button` oder `table` waeren sonst auch in der fremden Kopf- und Fusszeile
 * wirksam und wuerden sie zerlegen.
 */

.yaesu-app {
  --y-grund: var(--bg, #0e1116);
  --y-feld: var(--bg2, #161b22);
  --y-feld-hell: color-mix(in srgb, var(--bg2, #1d242e) 82%, var(--fg, #d7dee7) 8%);
  --y-rand: var(--border, #2a323d);
  --y-schrift: var(--fg, #d7dee7);
  --y-leise: var(--muted, #8b97a6);
  --y-akzent: var(--accent, #37c2c9);
  --y-warnung: #e0a33a;
  --y-fehler: #e5615e;
  --y-gut: #6fbf73;
  --y-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
}

/* Die dichte Schrift gilt der Anwendung, nicht dem Seitenkopf: Brotkrumen,
   Ueberschrift und Hinweise sollen genauso stehen wie auf jeder anderen Seite
   von afu.tools. Vorher sass die Ueberschrift hier drei Pixel hoeher als
   nebenan, weil die Brotkrume eine engere Zeile bekam. */
.yaesu-app .kopf,
.yaesu-app .leiste,
.yaesu-app .reiter,
.yaesu-app .blaetter,
.yaesu-app .melder,
.yaesu-app .ueberdeckung {
  font-size: 14px;
  line-height: 1.45;
}

/* ---------------------------------------------------------- Alleinbetrieb */
/* Nur wenn das Blatt von afu.tools fehlt. Sonst brächte das hier den
   Seitenhintergrund und die Schriftgröße der Seite durcheinander. */
.eigenstaendig body {
  margin: 0;
  background: #0e1116;
  color: #d7dee7;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.eigenstaendig * { box-sizing: border-box; }
.eigenstaendig [hidden] { display: none !important; }
.eigenstaendig .wrap { width: min(100% - 1.5rem, 1440px); margin-inline: auto; }
.eigenstaendig .page-head { padding: 1rem 0 0.4rem; }
.eigenstaendig .page-head h1 { margin: 0 0 0.4rem; font-size: 1.6rem; }
.eigenstaendig .lead, .eigenstaendig .crumbs { color: #8b97a6; }
.eigenstaendig .note { border: 1px solid #2a323d; border-radius: 6px; padding: 8px 12px; }
.eigenstaendig .skip { position: absolute; left: -9999px; }

/* Die Notkopfzeile steht nur im Alleinbetrieb. Unter afu.tools gibt es eine
   echte Kopfzeile, und zwei übereinander wären eine zu viel. */
.yaesu-app .kopf { display: none; }
.eigenstaendig .yaesu-app .kopf {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 10px; padding: 10px 0;
  border-bottom: 1px solid var(--y-rand);
}
.eigenstaendig .yaesu-app .kopf h1 {
  font-size: 16px; margin: 0; letter-spacing: .08em; text-transform: uppercase;
}

/* ------------------------------------------------------------------ Lage */
.yaesu-app .lage { display: inline-flex; gap: 8px; align-items: center; }
.yaesu-app .pille {
  font-family: var(--y-mono); font-size: 12px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--y-rand); background: var(--y-feld); color: var(--y-leise);
}
.yaesu-app .pille[data-zustand="an"] { color: var(--y-gut); border-color: var(--y-gut); }
.yaesu-app .pille[data-zustand="arbeit"] { color: var(--y-akzent); border-color: var(--y-akzent); }
.yaesu-app .pille[data-zustand="fehler"] { color: var(--y-fehler); border-color: var(--y-fehler); }
.yaesu-app .pille.leise:empty { display: none; }

/* --------------------------------------------------------------- Leisten */
.yaesu-app .leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--y-feld);
  border: 1px solid var(--y-rand);
}
.yaesu-app .leiste:first-of-type { border-radius: 10px 10px 0 0; }
.yaesu-app .leiste.zweite { border-top: 0; background: transparent; }
.yaesu-app .leiste label {
  display: flex; align-items: center; gap: 6px; color: var(--y-leise); font-size: 13px;
}
.yaesu-app .leiste label.haken { gap: 5px; }
.yaesu-app .teiler { width: 1px; align-self: stretch; background: var(--y-rand); }
/* Ans rechte Ende der Leiste. Ueber den Rand und nicht ueber einen Platzhalter,
   damit die Knoepfe auch dann rechts stehen, wenn die Leiste umbricht und sie
   allein auf der zweiten Zeile landen. */
.yaesu-app .leiste .rechts,
.yaesu-app .leiste .rechts-gruppe { margin-left: auto; }
.yaesu-app .rechts-gruppe {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* Ein Punkt am Knopf sagt, dass in den Einstellungen etwas von der Vorgabe
   abweicht - sonst faellt das erst beim naechsten Schreibvorgang auf. */
.yaesu-app #einstellungen.abweichend::after {
  content: ""; display: inline-block; margin-left: 7px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--y-akzent); vertical-align: middle;
}
.yaesu-app .hinweis { color: var(--y-leise); font-size: 12px; }

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

.yaesu-app button {
  background: var(--y-feld-hell); color: var(--y-schrift);
  border: 1px solid var(--y-rand); border-radius: 6px;
  padding: 6px 12px; font: inherit; line-height: 1.3; cursor: pointer;
}
.yaesu-app button:hover:not(:disabled) {
  border-color: var(--y-akzent);
  color: color-mix(in srgb, var(--y-schrift) 70%, var(--y-akzent));
}
.yaesu-app button:disabled { opacity: .4; cursor: not-allowed; }
.yaesu-app button.haupt {
  background: color-mix(in srgb, var(--y-akzent) 22%, transparent);
  border-color: var(--y-akzent); color: var(--y-schrift); font-weight: 600;
}

.yaesu-app .menue { position: relative; }
.yaesu-app .klappe[hidden] { display: none; }
.yaesu-app .klappe {
  position: absolute; top: 105%; left: 0; z-index: 20;
  display: flex; flex-direction: column; min-width: 170px;
  background: var(--y-feld); border: 1px solid var(--y-rand); border-radius: 6px;
  box-shadow: 0 8px 24px #0008;
}
.yaesu-app .klappe button { border: 0; border-radius: 0; text-align: left; }
/* Klappt die Liste am rechten Rand auf, damit sie nicht aus der Leiste laeuft. */
.yaesu-app .klappe.rechtsbuendig { left: auto; right: 0; }

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

.yaesu-app .blaetter { border: 1px solid var(--y-rand); border-top: 0; }
.yaesu-app .blatt { display: none; }
.yaesu-app .blatt.aktiv { display: block; }

.yaesu-app .tabellenkopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid var(--y-rand);
}
.yaesu-app .tabellenkopf > button,
.yaesu-app .tabellenkopf label.haken { flex: none; white-space: nowrap; }
/* Beschriftung und Feld gehoeren zusammen. Ohne das legt sich die Beschriftung
   ueber das Feld daneben, sobald die Zeile eng wird. */
.yaesu-app .tabellenkopf label {
  display: flex; align-items: center; gap: 6px;
  color: var(--y-leise); font-size: 13px; white-space: nowrap;
}
.yaesu-app .filterzeile select { max-width: 12rem; }

/* Die Tabelle scrollt in sich, nicht die Seite: der Kopf der Tabelle soll
   stehenbleiben, waehrend man durch hundert Kanaele geht. */
.yaesu-app .tabellenrahmen { max-height: min(70vh, 760px); overflow: auto; }

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

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

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

/* Umsortieren: gezogen wird der Griff, nicht die Zeile - eine draggable Zeile
   schluckt in manchen Browsern die Textauswahl in ihren Eingabefeldern. */
.yaesu-app td.griff { text-align: center; color: var(--y-leise); user-select: none; }
.yaesu-app td.griff[draggable="true"] { cursor: grab; }
.yaesu-app td.griff[draggable="true"]:active { cursor: grabbing; }
.yaesu-app tr.zieht { opacity: .45; }
.yaesu-app tr.ziel { outline: 2px solid var(--y-akzent); outline-offset: -2px; }

/* Menuepunkte: Name und Wert gehoeren nebeneinander, nicht an die beiden
   Enden einer bildschirmbreiten Tabelle. Deshalb schmal und links. */
.yaesu-app #menue { table-layout: fixed; max-width: 820px; }
.yaesu-app #menue th:nth-child(2), .yaesu-app #menue td:nth-child(2) { width: 120px; }
.yaesu-app #menue th:nth-child(3), .yaesu-app #menue td:nth-child(3) { width: 140px; }
.yaesu-app #menue td { vertical-align: middle; }

.yaesu-app #menue tr.gruppe td {
  padding-top: 16px; border-bottom: 1px solid var(--y-rand);
  color: var(--y-akzent); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.yaesu-app #menue tr.gruppe:first-child td { padding-top: 4px; }
.yaesu-app #menue td.bedeutung { padding-top: 6px; padding-bottom: 6px; }
.yaesu-app #menue td.bedeutung .name { display: block; }
.yaesu-app #menue td.bedeutung .name.ohne { font-family: var(--y-mono); color: var(--y-leise); }
.yaesu-app #menue td.bedeutung .schluessel { font-family: var(--y-mono); font-size: 11px; color: var(--y-leise); }
.yaesu-app #menue tr.geaendert { box-shadow: inset 3px 0 0 var(--y-akzent); }
.yaesu-app #menue td.vorher { color: var(--y-leise); font-family: var(--y-mono); font-size: 12px; white-space: nowrap; }
.yaesu-app #menue td.vorher button { padding: 1px 6px; margin-left: 6px; border-color: transparent; }
.yaesu-app #menue td.vorher button:hover { border-color: var(--y-rand); }
.yaesu-app #menue input.laenge-falsch { border-color: var(--y-fehler); color: var(--y-fehler); }
.yaesu-app #menuesuche { width: 200px; }
.yaesu-app td.loeschen button { padding: 2px 7px; border-color: transparent; color: var(--y-leise); }
.yaesu-app td.loeschen button:hover { color: var(--y-fehler); border-color: var(--y-fehler); }

.yaesu-app #protokoll {
  margin: 0; padding: 10px 12px; max-height: min(70vh, 760px); overflow: auto;
  font-family: var(--y-mono); font-size: 12px; color: var(--y-leise); white-space: pre-wrap;
}

/* ------------------------------------------------------------ Laufstreifen */
/* Fortschritt und Meldung stehen in der Gerätezeile, gleich neben dem
   Verbindungszustand. Eine eigene Fußzeile hätte „verbunden" und „bereit"
   nebeneinandergestellt, also zweimal dasselbe. */
.yaesu-app .lauf {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--y-leise);
}
.yaesu-app .balken {
  display: inline-block; width: 160px; height: 6px;
  background: var(--y-feld-hell); border-radius: 3px; overflow: hidden;
}
.yaesu-app #balken {
  display: block; height: 100%; width: 0;
  background: var(--y-akzent); transition: width .12s linear;
}
.yaesu-app #abbrechen { padding: 3px 9px; font-size: 12px; }

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

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

/* ------------------------------------------------------- Fehler melden */
/* Ein Fenster über der Seite, weil das Melden alles andere anhält: wer hier
   tippt, arbeitet nicht nebenher am Kanal weiter. */
.yaesu-app .ueberdeckung {
  position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, .55);
}
/* `display` sticht `hidden` aus: ohne diese Zeile liegt das unsichtbare Fenster
   ueber der ganzen Seite und schluckt jeden Klick. */
.yaesu-app .ueberdeckung[hidden] { display: none; }
.yaesu-app .meldekasten {
  width: 100%; max-width: 520px; max-height: 90vh; overflow: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px; border: 1px solid var(--y-rand); border-radius: 10px;
  background: var(--y-feld);
}
.yaesu-app .meldekasten h2 { margin: 0; font-size: 15px; padding: 0; border: 0; }
.yaesu-app .meldekasten label { display: block; font-size: 12px; color: var(--y-leise); }
.yaesu-app .meldekasten label.haken { display: flex; align-items: center; gap: 6px; }
.yaesu-app .meldekasten input[type="text"],
.yaesu-app .meldekasten textarea {
  width: 100%; margin-top: 4px; padding: 6px 8px;
  border: 1px solid var(--y-rand); border-radius: 6px;
  background: var(--y-feld-hell); color: var(--y-schrift); font: inherit;
}
.yaesu-app .meldekasten textarea { resize: vertical; }
.yaesu-app .meldeknoepfe { display: flex; justify-content: flex-end; gap: 8px; }
.yaesu-app #meldesenden { border-color: var(--y-akzent); color: var(--y-akzent); }
.yaesu-app .meldefehler { margin: 0; color: var(--y-fehler); font-size: 13px; }

/* ------------------------------------------------------- Einstellungen */
/* Derselbe Kasten wie beim Melden, nur ohne Formular: jede Zeile ist ein Haken
   mit einem Satz darunter, der sagt, was er kostet. */
.yaesu-app .einstellungskasten label.haken {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 10px; border: 1px solid var(--y-rand); border-radius: 8px;
  color: var(--y-schrift); font-size: 13px; cursor: pointer;
}
.yaesu-app .einstellungskasten label.haken:hover { border-color: var(--y-akzent); }
.yaesu-app .einstellungskasten label.haken input { margin-top: 3px; flex: none; }
.yaesu-app .einstellungskasten label.haken em {
  display: block; margin-top: 2px;
  color: var(--y-leise); font-size: 12px; font-style: normal; line-height: 1.4;
}
.yaesu-app .einstellungskasten .meldeknoepfe { justify-content: space-between; }
/* Der Haken, der Warnungen übergeht, ist kein Haken wie die anderen: er bleibt
   an, bis ihn jemand ausschaltet. Deshalb sichtbar abgesetzt. */
.yaesu-app .einstellungskasten label.haken.warnend {
  border-color: color-mix(in srgb, var(--y-warnung) 55%, var(--y-rand));
}
.yaesu-app .einstellungskasten label.haken.warnend:hover { border-color: var(--y-warnung); }

/* ---------------------------------------------------------- Dialogkopf */
/* Überschrift links, Schließen rechts - dieselbe Anordnung wie in den Dialogen
   von afu.tools, damit das × dort sitzt, wo die Hand es sucht. */
.yaesu-app .dialogkopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 8px; border-bottom: 1px solid var(--y-rand);
}
.yaesu-app .dialogkopf h2 { margin: 0; padding: 0; border: 0; font-size: 15px; }
.yaesu-app .dialogkopf .schliessen {
  padding: 2px 9px; border-color: transparent; color: var(--y-leise);
  font-size: 15px; line-height: 1.2;
}
.yaesu-app .dialogkopf .schliessen:hover { border-color: var(--y-rand); color: var(--y-schrift); }

/* ------------------------------------------------------ Filter und Blättern */
/* Aussehen und Verhalten der Filterzeile bringt das Blatt von afu.tools mit.
   Hier steht nur, wo sie klebt: unter der Kopfzeile der Tabelle, die selbst
   klebt. Die 31 Pixel sind deren Höhe bei 12 px Schrift und 7 px Polster. */
.yaesu-app .filterzeile th { position: sticky; top: 31px; z-index: 2; background: var(--y-feld); }
.yaesu-app .filters { margin: 0; border: 0; border-bottom: 1px solid var(--y-rand); }

/* Der Satz an der Stelle, an der sonst die Tabelle steht. */
.yaesu-app .nichts,
.yaesu-app td.nichts {
  margin: 0; padding: 18px 12px; color: var(--y-leise); text-align: left;
}

/* Der Tabellenfuß ist derselbe wie unter jeder anderen Tabelle der Seite: das
   Aussehen bringt `.tabellen-fuss` aus dem Blatt von afu.tools mit, hier steht
   nur, wie er in den Kasten der Anwendung passt. Seine Ränder liegen genau auf
   denen des Kastens, sonst stünden zwei Linien nebeneinander. */
.yaesu-app .blaetter { border-radius: 0 0 var(--radius, 10px) var(--radius, 10px); }
.yaesu-app .blatt .tabellen-fuss { margin: -1px; }

/* Und dasselbe noch einmal für den Alleinbetrieb, wo es das Blatt von afu.tools
   nicht gibt. */
.eigenstaendig .yaesu-app .tabellen-fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 8px 12px;
  border: 1px solid var(--y-rand);
  border-radius: 0 0 10px 10px;
  background: var(--y-feld);
}
.eigenstaendig .yaesu-app .fuss-info { margin: 0 auto 0 0; font-size: 12px; color: var(--y-leise); }
.eigenstaendig .yaesu-app .fuss-menge {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--y-leise);
}
.eigenstaendig .yaesu-app .seiten-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.eigenstaendig .yaesu-app .seiten-nav button { min-width: 2rem; padding: 3px 8px; font-size: 13px; }
.eigenstaendig .yaesu-app .seiten-nav button[aria-current="page"] {
  border-color: var(--y-akzent);
  background: color-mix(in srgb, var(--y-akzent) 22%, transparent);
  font-weight: 600;
}
.eigenstaendig .yaesu-app .seiten-nav .luecke {
  align-self: center; padding: 0 2px; color: var(--y-leise);
}