/* heusel.sync — app-eigene Ergaenzungen auf hsl.css (Kanon-Linie).
   NUR echt App-Spezifisches; alle Toolkit-Nachbauten sind entfernt (das Markup nutzt jetzt
   direkt die Kanon-Klassen .btn/.field/.lv/.pill/.udot/.iconbtn/.modal …, die hsl.css stylt).
   App-eigene Klassen tragen den sync_-Praefix (der hsl_-Namensraum gehoert dem Toolkit). */

/* heusel.sync Brand: gruener Hero (reine Struktur-Migration, kein Farbwechsel) — hell + dunkel. */
:root { --hero-a:#12b886; --hero-c:#63e6be; --hero-glow:18 184 134; }

/* heusel.one Shell-Modus: Nav/Topbar/Footer aus, Grid einspaltig — leistet das Toolkit selbst (ab 0.58.0). */

/* Icon-Sprite unsichtbar halten (CSP-safe statt inline style="display:none"). */
.sync_sprite { display: none; }

/* Topbar-Spacer schiebt Theme-Toggle/Avatar nach rechts (CSP-safe statt inline style="flex:1"). */
.sync_tb_spring { flex: 1; }

/* Abmelden-Knopf in der Topbar (aus der Nav geholt). */
.sync_topbar_logout { display: inline-flex; align-items: center; margin: 0; }

/* Reconnect-Modal unterdruecken, waehrend der Logout-POST den Circuit abbaut.
   Das Logout-Form (sync_np_logout) setzt html.logging-out beim Submit (js/hsl-ui.js). */
html.logging-out #components-reconnect-modal { display: none !important; }

/* Bilder in Buttons (z. B. das SSO-Login-Icon) begrenzen, damit ein SVG nie in Intrinsic-Groesse rendert. */
.btn img { width: 18px; height: 18px; vertical-align: middle; }

/* Setup-Token-Zeile: Wert-Input volle Breite, Copy-Button bleibt quadratischer Icon-Button. */
.field .hsl_actions { align-items: center; }
.field .hsl_actions > input { flex: 1 1 auto; min-width: 0; }
.field .hsl_actions > .iconbtn { flex: 0 0 auto; }

/* Logout- und Profil-Zeile am Nav-Fuss wie ein Nav-Eintrag ausrichten. */
.nav .nav-logout { margin: 0; }
.nav .nav-logout button {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: none; border: 0; padding: 8px 12px; cursor: pointer;
    font: inherit; color: inherit; border-radius: var(--radius-ctl, 10px);
}
.nav .nav-logout button:hover { color: var(--co-red, #e5534b); }
.nav .nav-profile { display: flex; align-items: center; gap: 10px; padding: 6px 12px; }
.nav .nav-profile-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; opacity: .8; }

/* Zeilen-Klick oeffnet das Detail (GUIDELINES §1). Hover leuchtet auf statt zu heben (§8). */
.lv tbody tr.sync_row_click { cursor: pointer; }
.lv tbody tr.sync_row_click:hover { background: color-mix(in srgb, var(--hero-a, #12b886) 8%, transparent); }
.lv tbody tr.sync_row_click.sel { background: color-mix(in srgb, var(--hero-a, #12b886) 14%, transparent); }

/* Tenant-Combo im Nav (globaler Scope-Umschalter). */
.nav .sync_tenant_switch { padding: 8px 12px; }
.nav .sync_tenant_switch select {
    width: 100%; height: 34px; padding: 0 10px; font: inherit; cursor: pointer;
    color: var(--fg, inherit);
    background: var(--bg-input, color-mix(in srgb, var(--fg) 4%, transparent));
    border: 1px solid var(--border-strong, var(--border));
    border-radius: var(--radius-ctl, 10px);
}
#app.nav-collapsed .sync_tenant_switch, .nav.nav-collapsed .sync_tenant_switch { display: none; }

/* /agents — Telemetrie-Bars (Row/Label app-lokal um die Kanon-.hsl_prog). */
.sync_prog_row   { display: flex; align-items: center; gap: 8px; }
.sync_prog_row + .sync_prog_row { margin-top: 6px; }
.sync_prog_label { font-size: .72rem; color: var(--fg-dim); white-space: nowrap; }
/* .hsl_prog_fill IST Toolkit-Klasse: hier auf die Brand-Farbe zwingen, weil --hero-grad in dieser
   App nicht durchgethemt ist (sonst malte der Balken nichts — leere Telemetrie-Bars). */
.hsl_prog_fill { display: block; background: var(--hero-a); }

/* /agents — Ampel + Name in einer Zeile; Connector-Punkte weiter auseinander. */
.sync_agent_name { display: flex; align-items: center; gap: 8px; }
.sync_agent_name .udot { margin: 0; }
.sync_dots { display: inline-flex; align-items: center; gap: 14px; }
.sync_dots .udot { margin: 0; }

/* App-eigene Kleinteile. */
.sync_field_row { margin-bottom: 12px; }
.sync_lv_buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.sync_ok_note { color: var(--co-green, #008d5d); margin: 8px 0; }
.sync_error   { color: var(--co-red, #e5534b); margin: 8px 0; }
.sync_hint    { color: var(--fg-dim); font-size: .85rem; }
.sync_info_tip { cursor: help; }
.sync_txt_bad { color: var(--co-red, #e5534b); font-weight: 600; cursor: help; }

/* Der Detail-Drawer ist breiter als die Kanon-Vorgabe (420px). Hier stehen Hardware-Listen mit
   Modellnamen, Seriennummern und PCI-Kennungen nebeneinander; bei 420px bricht jede zweite Zeile um
   und die Gliederung geht im Umbruch unter (Andreas, 05.09.2026: "der gesamte slideout muss auch
   etwas breiter werden"). Die Kanon-Vorgabe bleibt unberuehrt — das ist eine Entscheidung dieser
   Anwendung, nicht des Design-Systems. */
.hsl_drawer{width:min(620px,94vw);}

/* Kanon-Listen-/Seiten-Beschreibung (Referenz heusel.time): sekundaer, kompakt. */
.page-lead{color:var(--fg-dim);margin:0;font-size:13.5px;line-height:1.5;}

/* Agenten-Detail im Drawer. Die Abschnitte tragen die Gliederung, nicht die Ueberschrift allein:
   Trennlinie ZWISCHEN den Bloecken, darunter die Ueberschrift mit Luft nach unten. Vorher stand sie
   ohne Abstand direkt auf der naechsten Zeile und verschwand zwischen den Werten (Andreas,
   04.09.2026, zwei Screenshots). Die Klammer .agentdetail.stack ist noetig, weil .stack aus dem
   Kanon denselben Rang haette und je nach Ladereihenfolge gewinnt. */
.agentdetail.stack{gap:0;}
/* Die Abschnitte liegen seit den Reitern eine Ebene tiefer, in hsl-tabpanel. Ein Kind-Selektor
   (> section) trifft sie damit NICHT mehr — deshalb standen die Ueberschriften wieder ohne Luft auf
   den Werten davor (Andreas, 05.09.2026: "im gesamten detailbereich sind wieder keine absaetze vor
   den ueberschriften"). Nachkomme statt Kind, und dieselbe Behandlung fuer die zusammenklappbaren
   Bloecke, die es damals noch nicht gab. */
.agentdetail hsl-tabpanel.stack{gap:0;}
.agentdetail section,
.agentdetail hsl-tabpanel > details{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);}
.agentdetail > section:first-of-type,
.agentdetail hsl-tabpanel > section:first-child{margin-top:10px;padding-top:0;border-top:0;}
.agentdetail h4{margin:0 0 9px;font-size:11.5px;font-weight:800;letter-spacing:.06em;
                text-transform:uppercase;color:var(--fg-dim);border:0;padding:0;}
.agentdetail section.stack-sm{gap:6px;}

/* Zeilen: zwei Spalten, leichte Trennung — deutlich schwaecher als die Abschnittslinie, damit die
   Gliederung oben steht und nicht jede Zeile gleich laut ist. */
.agentdetail .hsl_dl{grid-template-columns:minmax(120px,auto) 1fr;gap:0 18px;font-size:12.5px;}
.agentdetail .hsl_dl dt,
.agentdetail .hsl_dl dd{padding:6px 0;border-top:1px solid color-mix(in srgb,var(--fg) 7%,transparent);}
.agentdetail .hsl_dl dt:first-of-type,
.agentdetail .hsl_dl dt:first-of-type + dd{border-top:0;}
.agentdetail .hsl_dl dt{color:var(--fg-dim);font-weight:500;}
.agentdetail .hsl_dl dd{text-align:left;font-weight:600;overflow-wrap:anywhere;}
.agentdetail .hashval{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
                      font-size:11px;font-weight:500;line-height:1.35;color:var(--fg-dim);}
.agentdetail>.frow:last-child{margin-top:var(--sp-4);}
.agentdetail .hsl_rel{list-style:none;margin:0;padding:0;}
/* Balken und Wertezeilen teilen sich die Spalten — der Balken beginnt, wo die Werte beginnen. */
.agentdetail .blist-row{grid-template-columns:minmax(120px,auto) 1fr auto;gap:0 18px;}
.agentdetail .blist-lbl{color:var(--fg-dim);font-weight:500;}
.agentdetail .blist{gap:7px;}

/* Offene Pakete als schlanke Liste statt als Karten (Andreas, 04.09.2026: "eine einfache Liste mit
   den Chips genuegt doch, spart Platz"). Eine Zeile je Paket: Name, Versionssprung gedimmt, das
   Kennzeichen nur wo es eins gibt. Bei 13 Paketen war die Kartenansicht laenger als der Rest des
   Fensters. */
.agentdetail .pkglist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.agentdetail .pkglist li{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12.5px;
                         border-top:1px solid color-mix(in srgb,var(--fg) 7%,transparent);min-width:0;}
.agentdetail .pkglist li:first-child{border-top:0;}
/* Beim Filtern ausgeblendete Zeilen: Die Zeilenregel oben setzt display:flex und schlaegt damit die
   Vorgabe des Browsers fuer [hidden] — ohne diese Zeile bliebe die Zeile trotz hidden stehen. */
.agentdetail .pkglist li[hidden]{display:none;}
/* Das Filterfeld sitzt zwischen Ueberschrift und Liste und nimmt die volle Breite.
   AUSDRUECKLICH GEFAERBT, nicht der Engine ueberlassen (Andreas, 05.09.2026: „ich sehe keinen Cursor
   blinken, aber Tastenanschlaege werden angenommen"): Ein ungestyltes Feld nimmt Hintergrund, Schrift
   UND Schreibmarke aus der Vorgabe der Engine. Trifft die nicht das Thema der Seite, tippt man in
   etwas Weisses auf Weiss — die Eingabe kommt an, man sieht sie nur nicht. Dieselben Werte wie in den
   Filterzeilen des Kanons, plus caret-color, weil die Schreibmarke sonst als einzige der Vorgabe
   folgt. */
.agentdetail .swfilter{width:100%;height:30px;font-family:inherit;font-size:12.5px;padding:0 10px;
                       border-radius:8px;border:1px solid var(--border-strong);
                       background:color-mix(in srgb,var(--fg) 5%,transparent);
                       color:var(--fg);caret-color:var(--fg);appearance:none;-webkit-appearance:none;}
.agentdetail .swfilter::placeholder{color:var(--fg-dim);}
.agentdetail .swfilter:focus-visible{outline:2px solid var(--hero-a);outline-offset:1px;}
.agentdetail .pkgname{font-weight:650;white-space:nowrap;min-width:0;flex:0 1 auto;
                      overflow:hidden;text-overflow:ellipsis;}
.agentdetail .pkgver{color:var(--fg-dim);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;
                     white-space:nowrap;min-width:0;flex:1;}
/* Das Kennzeichen steht rechtsbuendig statt hinter dem Text — sonst wandert es mit der Textlaenge
   und die Spalte franst ueber zehn Zeilen sichtbar aus. */
.agentdetail .pkglist hsl-badge{flex:0 0 auto;margin-left:auto;}

/* Kopf des Hardware-Reiters: erst was die Maschine IST, dann die Einzelwerte. */
.agentdetail .hwhead{display:flex;flex-direction:column;gap:7px;margin-top:10px;}
.agentdetail .hwtitle{font-size:15px;font-weight:700;line-height:1.3;overflow-wrap:anywhere;}
.agentdetail .hwchips{display:flex;flex-wrap:wrap;gap:6px;}

/* Dritter Zustand in der Agentenliste: bekannt, aber nie gemeldet. Hohl statt gefuellt — die Maschine
   ist angelegt, aber es gab noch kein Lebenszeichen (04.09.2026, Modellbau Schmidt). */
.udot.unk{background:transparent;box-shadow:inset 0 0 0 2px var(--fg-faint);}

/* "Alle markieren" ueber der Paketliste — auf Hoehe der Zeilen darunter, damit die Haken fluchten. */
.agentdetail .pkgall{display:flex;align-items:center;gap:8px;padding:4px 0;}

/* Laufender Auftrag in der Agentenliste: schmaler Balken plus Prozentzahl. */
.tprog{display:inline-flex;align-items:center;gap:7px;min-width:96px;margin-top:4px;}
.tprog .hsl_prog{flex:1;height:6px;}
.tprog-l{font-size:11px;color:var(--fg-dim);font-variant-numeric:tabular-nums;white-space:nowrap;}
/* hidden muss hidden bleiben: .pill und .tprog setzen ein eigenes display und wuerden das
   HTML-Attribut sonst ueberstimmen — sichtbar als leere Blase in jeder Zeile (04.09.2026). */
.pill[hidden], .tprog[hidden]{display:none !important;}

/* Betriebssystem-Symbol vor dem Agentennamen — mitlaufend in Textfarbe, gedimmt, damit der Name
   die Zeile fuehrt und das Symbol nur einordnet. */
.osico{width:14px;height:14px;vertical-align:-2px;margin-right:6px;color:var(--fg-dim);}

/* Reiter im Agenten-Detail: Die Leiste bekommt Luft nach unten, die Abschnitte im ersten Reiter
   brauchen ihre Trennlinie oben nicht — die Leiste trennt schon. */
.agentdetail .tabs{margin-bottom:var(--sp-3);}
.agentdetail .tabpanel > section:first-of-type{margin-top:0;padding-top:0;border-top:0;}

/* Ausgabe eines Auftrags im Meldungen-Reiter: woertlich, umbrechend, ruhig. Ein Lauf, der
   "erfolgreich" meldet und trotzdem nichts aendert, ist nur an diesem Text zu erklaeren. */
.taskout{margin:.4rem 0 0;padding:.45rem .6rem;border-radius:var(--r-sm,6px);
  background:var(--bg-2,rgba(0,0,0,.05));border:1px solid var(--bd,rgba(0,0,0,.12));
  font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap;overflow-wrap:anywhere;max-height:9rem;overflow:auto}