/* Layout des Leitstands. Farben und Schriften kommen aus theme.css
   (erzeugt aus main_gui.py — siehe scripts/gen_theme_css.py).

   Handy zuerst: eine Karte je Bot, untereinander. Die 200-px-Sidebar der GUI
   ist fuer ein 1400-px-Fenster gebaut und kommt erst ab Tablet-Breite zurueck. */

*{box-sizing:border-box}
/* Muss VOR allem stehen, was `display` setzt: die Browser-Regel fuer [hidden]
   ist nur `display:none` ohne Klasse, und jede eigene Klasse mit `display`
   (etwa .login-wrap{display:grid}) schlaegt sie. Ohne diese Zeile stehen
   Anmeldemaske und „Verbinde…" gleichzeitig auf dem Schirm. */
[hidden]{display:none!important}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:14px/1.5 var(--ui);-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.hinweis{color:var(--hint);font-size:13px;text-align:center;margin:32px 0}
.w{color:var(--wait)}

/* ---------- Kopfleiste ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:12px;height:60px;padding:0 16px;
  background:var(--bg-dark);border-bottom:1px solid var(--line);
}
.wordmark{
  font:bold 19px/1 var(--mono);color:var(--gold);
  letter-spacing:.06em;white-space:nowrap;
}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px;min-width:0}
.who{color:var(--hint);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-btn{
  background:transparent;border:1px solid var(--line);border-radius:4px;
  color:var(--hint);padding:6px 10px;cursor:pointer;
}
.icon-btn:hover{border-color:var(--on-hover);color:var(--text)}

/* ---------- Anmeldung ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login{
  width:100%;max-width:360px;background:var(--bg-frame);
  border:1px solid var(--line);border-radius:8px;padding:28px 24px;
}
.login .wordmark{font-size:22px;display:block;text-align:center;margin-bottom:4px}
.login .sub{text-align:center;color:var(--hint);font-size:12px;margin:0 0 24px}
label{
  display:block;font:bold 11px/1 var(--ui);letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);margin:0 0 6px;
}
.field{
  width:100%;background:var(--bg-dark);border:1px solid var(--line);
  border-radius:4px;color:var(--text);padding:10px 12px;
}
.field:focus{border-color:var(--on-hover);outline:none}
.stack{display:flex;flex-direction:column;gap:16px}
.primary{
  width:100%;background:var(--on);border:none;border-radius:4px;color:var(--text);
  padding:12px;font-weight:bold;cursor:pointer;transition:background .12s ease;
}
.primary:hover{background:var(--on-hover)}
.primary[disabled]{opacity:.5;cursor:progress}
.fehler{
  margin:16px 0 0;font-size:12px;line-height:1.6;color:#E06C6C;text-align:center;
}

/* ---------- Geruest ---------- */
.shell{display:block}
.sidebar{display:none}
.content{padding:16px}

.summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 14px}
.summary h1{
  margin:0;font:bold 20px/1.2 var(--ui);letter-spacing:0;color:var(--gold);
}
.counts{display:flex;flex-wrap:wrap;gap:6px}
.counts span{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid #3A5240;border-radius:999px;background:#101A10;
  padding:4px 10px;font-size:12px;font-weight:bold;color:var(--text);
}
.counts b{font-weight:bold;font-variant-numeric:tabular-nums}
.c-ok b{color:var(--green)}
.c-stale b{color:var(--hint)}
.c-remote b{color:var(--wait)}
.c-fb b{color:var(--hint)}
.c-fb.knapp b{color:var(--wait)}
.c-fb.ueber b{color:#E06C6C}

/* ---------- Bot-Karte ---------- */
.cards{display:flex;flex-direction:column;gap:10px}
.card{
  background:var(--bg-frame);border:1px solid #2A3D2A;border-radius:14px;overflow:hidden;
}
.card.stale{opacity:.55}
.card.remote{box-shadow:inset 3px 0 0 var(--on-hover)}
/* Angehalten schlaegt alles andere: ein Bot, der nicht laeuft, ist die
   wichtigere Auskunft als die Schalterstellung, mit der er es taete. */
.card.angehalten{box-shadow:inset 3px 0 0 #E06C6C}
.card.angehalten .dot{background:#E06C6C}
.card-head{
  width:100%;display:flex;flex-direction:column;align-items:stretch;gap:8px;
  text-align:left;background:transparent;border:none;
  padding:12px 14px;cursor:pointer;
}
.card-head:hover .name{color:var(--gold)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.card-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.modi{display:contents}
.name{font-weight:bold;font-size:16px;letter-spacing:.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modus-pill{
  border:1px solid #3A5240;border-radius:999px;background:#101A10;
  color:var(--text);padding:2px 8px;font-size:11px;font-weight:bold;line-height:1.3;
}
/* Rolle im Krieg: wie die Modus-Marken, aber eingefaerbt — Waechter gruen,
   Angreifer gold, ohne Ziel rot. */
.rolle-pill{
  border:1px solid #2D862D;border-radius:999px;background:#102010;
  color:var(--green);padding:2px 8px;font-size:11px;font-weight:bold;line-height:1.3;
}
.rolle-pill.angreifer{border-color:#8A6A1E;background:#1A1408;color:var(--gold)}
.rolle-pill.warnung{border-color:#6A2424;background:#1A0C0C;color:#E06C6C}
.meta{
  flex:1 1 120px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11px;color:var(--hint);font-family:var(--mono);
}
.pulse{
  display:flex;align-items:center;gap:6px;flex:none;
  font-size:12px;color:var(--hint);font-family:var(--mono);white-space:nowrap;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.stale .dot{background:var(--hint)}
.card-flags{display:flex;flex-wrap:wrap;gap:6px}
.gesteuert{display:contents}
.flag-pill,.auftragsmarke{
  max-width:100%;border-radius:999px;padding:2px 8px;
  font:bold 11px/1.35 var(--ui);color:#D5E8D5;
  background:#102010;border:1px solid #2D862D;
}
.flag-pill.halt,.card.angehalten .flag-pill.halt{
  color:#E06C6C;background:#1A0C0C;border-color:#6A2424;
}
.auftragsmarke{color:var(--hint);background:#101A10;border-color:#3A4A3A}
.auftragsmarke.warten{color:#F0C9A0;background:#1C1208;border-color:var(--wait)}
.card-body{border-top:1px solid var(--line);padding:4px 16px 16px}
.group{margin-top:14px}
.group-title{
  font:bold 10px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin:0 0 8px;
}
.row{
  display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 2px 10px 10px;
  border-left:3px solid transparent;border-bottom:1px solid rgba(0,0,0,.28);
}
.row:last-child{border-bottom:none}
.row.pending{border-left-color:var(--wait)}
/* Von hier gesetzt — im Unterschied zum Wert aus der GUI des jeweiligen PCs.
   Der farbige Strich reicht; ein Zusatzzeichen in der Beschriftung stoert. */
.row.ueberschrieben{border-left-color:var(--on-hover)}
.row.ueberschrieben.pending{border-left-color:var(--wait)}
/* Der Bot hat seinen Zustand noch nicht gemeldet: die Schalterstellung
   bedeutet dann nichts und darf nicht wie „aus" aussehen. */
.row.unbekannt .sw{opacity:.35}
.row.unbekannt .val{color:var(--hint)}
.row-label{flex:1;min-width:0}
.row-label .k{display:block;margin-top:2px;font-size:11px;line-height:1.35;color:var(--hint)}
.waiting{font-size:11px;color:var(--wait);font-family:var(--mono);white-space:nowrap}
/* „an“/„aus“ steht schon im Schalter. Sichtbar bleibt nur das Fragezeichen,
   solange der Bot seinen Zustand noch nicht gemeldet hat. */
.val{display:none}
.row.unbekannt .val{
  display:block;width:auto;text-align:right;font-size:12px;font-family:var(--mono);color:var(--hint);
}

.sw{
  position:relative;width:48px;height:28px;flex:none;border-radius:14px;
  background:var(--bg-dark);border:1px solid var(--line);cursor:pointer;
  transition:background .14s ease,border-color .14s ease;
}
.sw::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--hint);transition:transform .14s ease,background .14s ease;
}
.sw[aria-checked="true"]{background:var(--on);border-color:var(--on-hover)}
.sw[aria-checked="true"]::after{transform:translateX(22px);background:var(--text)}
.sw:hover{border-color:var(--on-hover)}
.sw[disabled]{opacity:.4;cursor:not-allowed}

.pick{
  background:var(--bg-dark);border:1px solid var(--line);border-radius:4px;
  color:var(--text);padding:6px 8px;font-family:var(--mono);font-size:13px;min-width:78px;
}
.pick:hover{border-color:var(--on-hover)}
/* Zahlenfeld: rechtsbuendig und mit gleich breiten Ziffern, damit Werte
   untereinander vergleichbar bleiben. */
.pick.zahl{width:96px;min-width:0;text-align:right;font-variant-numeric:tabular-nums}
.spanne{font:10px/1 var(--mono);color:var(--hint);white-space:nowrap;flex:none}
.row.ungueltig .pick{border-color:#E06C6C}
.gruppe-title{
  font:600 12px/1.3 var(--ui);letter-spacing:.01em;text-transform:none;
  color:var(--hint);margin:16px 2px 6px;
}
.group > .gruppe-title:first-child,
.lage + .gruppe-title{margin-top:2px}
.rows{
  display:flex;flex-direction:column;
  background:rgba(0,0,0,.18);border-radius:12px;padding:2px 12px;
}

.card-foot{
  margin-top:16px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
}
.ack{font-size:12px;font-family:var(--mono);color:var(--green)}
.ack.warten{color:var(--wait)}
.ack.keine{color:var(--hint)}
.by{font-size:11px;color:var(--hint);font-family:var(--mono)}
.abgelehnt{
  flex-basis:100%;font-size:11px;font-family:var(--mono);color:#E06C6C;line-height:1.6;
}
.clear{
  margin-left:auto;background:transparent;border:1px solid var(--red);color:#E06C6C;
  border-radius:4px;padding:7px 12px;cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.clear:hover{background:var(--red);color:var(--text)}
.clear[disabled]{opacity:.35;cursor:not-allowed}
.clear[disabled]:hover{background:transparent;color:#E06C6C}

/* Start und der Riegel stehen immer unter dem Namen, nicht erst unter
   „Jetzt tun". Sonst wirkt die Instanz, als ginge der Bot von hier nicht an. */
.betrieb{
  display:flex;flex-direction:column;gap:8px;
  margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line);
}
.betrieb .tun-reihe{margin:0}

/* Kriegsrolle: unter Start/Anhalten, vor den Schaltern. Die gewaehlte Rolle
   steht gefuellt da — man soll ablesen koennen, nicht nur druecken. */
.rollenwahl{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.rollenwahl .tun-reihe{margin:0}
.tun.rolle.is-on{background:#123312;border-color:var(--green);color:var(--green);font-weight:bold}
.rollen-stand{margin:8px 0 0;font-size:11.5px;line-height:1.6;font-family:var(--mono);color:var(--green)}
.rollen-stand.keine{color:var(--hint)}
.rollen-stand.warten{color:var(--wait)}
.rollen-stand.warnung{color:#E06C6C}
.diagnose{
  margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line);
}
.diagnose .logbox{width:100%}

/* ---------- Jetzt tun ---------- */
/* Knoepfe statt Schalter: ein Auftrag hat keinen Zustand, den man ablesen
   koennte — nur ein Vorher und ein Nachher. */
.aktionen{margin-top:8px;border-top:none;padding-top:4px}
.in-arbeit{
  margin:0 0 10px;font-size:11px;font-family:var(--mono);color:var(--hint);
}
.in-arbeit.aktiv{color:var(--wait)}
.tun-reihe{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px}
.tun-gruppe{
  flex-basis:100%;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hint);font-family:var(--mono);
}
.tun{
  background:var(--bg-dark);border:1px solid var(--line);border-radius:4px;
  color:var(--text);padding:9px 13px;font-size:13px;cursor:pointer;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.tun:hover{border-color:var(--on-hover)}
/* Scharf: die Farbe des Wartens, nicht die des Fehlers — es ist eine Frage,
   keine Warnung. */
.tun.scharf{background:var(--wait);border-color:var(--wait);color:#1A0C02;font-weight:bold}
.tun-abbruch{border-color:var(--red);color:#E06C6C}
.tun-abbruch:hover{border-color:#E06C6C}
.tun-abbruch.scharf{color:#1A0C02}
/* Anhalten/Freigeben: rot fuer den Eingriff, gruen fuer die Ruecknahme.
   Der Knopf wechselt seine Bedeutung, also auch seine Farbe. */
.tun-stopp{border-color:var(--red);color:#E06C6C}
.tun-stopp:hover{border-color:#E06C6C}
.tun-frei{border-color:var(--on-hover);color:var(--green)}
.stopp-stand{margin:8px 0 0;font-size:11.5px;line-height:1.6;font-family:var(--mono);color:var(--hint)}
.stopp-stand.aktiv{color:#E06C6C}
.tun[disabled]{opacity:.4;cursor:not-allowed}
.auftrag-stand{margin:10px 0 0;font-size:12px;font-family:var(--mono);color:var(--green)}
.auftrag-stand.warten{color:var(--wait)}
.auftrag-stand.keine{color:var(--hint)}
.auftrag-stand.fehler{color:#E06C6C}

/* ---------- Log holen ----------
   Das Formular nimmt die ganze Reihe ein: Auswahl, Auswahl, Suchfeld, Knopf.
   Am Handy bricht es um, statt die Felder auf Briefmarkenbreite zu quetschen. */
.logbox{flex-basis:100%;margin-top:2px}
.log-reihe{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.log-wahl{width:auto;flex:0 0 auto;padding:8px 10px;font-size:13px}
/* Waechst mit, faellt aber nie unter eine Breite, in der man ein Wort noch
   lesen kann. */
.log-suche{flex:1 1 150px;min-width:120px;padding:8px 10px;font-size:13px}
.log-kopf{
  margin:10px 0 0;font-size:11.5px;font-family:var(--mono);color:var(--hint);
}
/* Der Ausschnitt kann Hunderte Zeilen haben: eigener Rollbereich, damit die
   Seite nicht endlos wird, und waagerecht rollend statt umbrechend — eine
   umgebrochene Logzeile ist schwerer zu lesen als eine abgeschnittene. */
.log-text{
  margin:8px 0 0;padding:10px 12px;max-height:60vh;overflow:auto;
  background:var(--bg-dark);border:1px solid var(--line);border-radius:4px;
  font:11.5px/1.65 var(--mono);color:var(--text);white-space:pre;
}
.log-text.fehlerspur{max-height:none;color:#E06C6C;border-color:var(--red)}
/* Fehlermarke auf der Uebersichtskarte: eine Zeile, notfalls gekuerzt. */
.auftragsmarke.fehler{
  display:inline-block;max-width:100%;color:#E06C6C;background:#1A0C0C;border-color:#6A2424;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.footnote{
  margin:22px 0 8px;font-size:12px;line-height:1.6;color:var(--hint);
}
.footnote summary{
  cursor:pointer;color:var(--hint);font-size:12px;
}
.footnote summary:hover{color:var(--text)}
.footnote p{margin:10px 0 0}

/* ---------- Verbindungsband ---------- */
.verbindung{
  margin:0;padding:10px 16px;font-size:12px;line-height:1.5;
  background:#2A1608;border-bottom:1px solid var(--wait);color:var(--wait);
}
.getrennt .card,.getrennt .detail{opacity:.6}
.pick[disabled]{opacity:.4;cursor:not-allowed}

/* ---------- Auswahl einer Instanz ---------- */
/* Am Handy gibt es keine Seitenleiste — dort ist der Zurueck-Knopf der
   einzige Weg aus der Auswahl heraus. Ab 900 px uebernimmt das die
   Navigation, dann waere er doppelt. */
.zurueck{
  background:transparent;border:none;color:var(--gold);
  padding:2px 0 8px;font-size:13px;cursor:pointer;margin:0;
}
.zurueck:hover{color:var(--text)}
.detail{background:var(--bg-frame);border:1px solid var(--line);border-radius:14px}
.detail.stale{opacity:.7}
.detail-head{padding:14px 16px 12px}
.detail-titel{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.detail-name{
  font:bold 20px/1.2 var(--ui);letter-spacing:.03em;color:var(--gold);margin:0;
}
.detail-head .meta{margin:6px 0 0}
.detail-head .gesteuert{
  display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;
}

.nav-chips{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:12px 0 0}
.nav-spur{
  display:flex;gap:2px;padding:3px;
  background:var(--bg-dark);border:1px solid var(--line);border-radius:12px;
}
.nav-spur .nav-chip{position:relative;flex:1;min-width:0;color:#D5D8D5}
.nav-chip{
  background:transparent;color:var(--hint);border:none;
  border-radius:9px;padding:9px 4px;font:inherit;font-size:12px;font-weight:bold;
  cursor:pointer;
}
.nav-spur .nav-chip[aria-selected="true"]{background:var(--on);color:var(--text)}
/* Ein Punkt, kein zweiter Strich: irgendwo in der Gruppe ist etwas an. */
.nav-chip-an:not([aria-selected="true"])::after{
  content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;
  border-radius:50%;background:var(--green);
}
.nav-chip-tun{
  align-self:flex-start;width:auto;margin-top:2px;border:1px solid #3A4A3A;
  background:transparent;color:#D5D8D5;border-radius:999px;padding:4px 12px;
  font-size:12px;font-weight:bold;text-decoration:none;
}
.nav-chip-tun[aria-selected="true"]{color:var(--gold);border-color:var(--gold);background:transparent}
/* Breite folgt dem Namen. Zentriert, damit eine zweite Zeile nicht links hängen bleibt. */
.reiter-chips{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:8px 0 14px;padding:0;
  background:transparent;border:none;
}
.reiter-chip{
  flex:0 0 auto;border:1px solid #3A5240;border-radius:999px;background:#101A10;
  color:var(--text);padding:7px 12px;font:inherit;font-size:12.5px;font-weight:bold;
  line-height:1.2;cursor:pointer;
}
.reiter-chip.is-on{color:#F0D48A;border-color:var(--gold);background:#241C0C}
.lage{
  margin:2px 0 12px;padding:2px 0 2px 10px;background:transparent;
  border:none;border-left:3px solid var(--gold);border-radius:0;
  font-size:13px;line-height:1.45;color:var(--text);
}

/* ---------- Ab Tablet: Sidebar zurueck ---------- */
@media (min-width:900px){
  .shell{display:grid;grid-template-columns:200px 1fr;min-height:calc(100vh - 60px)}
  .sidebar{display:block;background:var(--bg-dark);border-right:1px solid var(--line);padding:20px 0}
  .nav-title{
    font:bold 11px/1 var(--ui);letter-spacing:.14em;color:var(--gold);
    padding:0 20px;margin:0 0 12px;
  }
  .nav-item{
    display:block;width:100%;text-align:left;background:transparent;border:none;
    padding:11px 20px;color:var(--text);cursor:pointer;
  }
  .nav-item:hover{background:var(--bg-frame)}
  .nav-item[aria-current="page"]{background:var(--on)}
  .content{padding:24px 28px;max-width:1180px}
  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));align-items:start}
  .wordmark{font-size:22px}

  /* Instanzliste in der Navigation. Die Leiste scrollt fuer sich: bei einem
     Dutzend Instanzen soll die Auswahl erreichbar bleiben, ohne die
     Schalter rechts wegzuschieben. */
  .sidebar{overflow-y:auto;max-height:calc(100vh - 60px)}
  .nav-title-2{margin-top:20px}
  .nav-list{display:flex;flex-direction:column}
  .nav-bot{display:flex;align-items:center;gap:9px;font-size:13px}
  .nav-bot .nav-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-bot.stale .nav-name{color:var(--hint)}
  .nav-flag{
    font:10px/1 var(--mono);letter-spacing:.04em;color:var(--wait);flex:none;
  }
  .nav-flag.rot{color:#E06C6C}
  .nav-bot.angehalten .dot{background:#E06C6C}
  .nav-item[aria-current="page"] .nav-flag{color:var(--text)}
  .zurueck{display:none}
  .detail{max-width:720px}
}