/* 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; }

/* 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; }

/* 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;}