/* heusel.sync admin — app-specific overrides on top of heusel.web.css */

/* NavMenu (hsl_): licence's inline styles (border/background, display/border-radius, margin-left)
   moved here to keep the .razor markup free of style= attributes (strict CSP). */
.hsl_nav_toggle { border: none; background: transparent; }
.hsl_brand img { display: block; border-radius: 7px; }
.hsl_theme_switch { margin-left: auto; }

/* Suppress Blazor's reconnect modal while the logout POST tears down the circuit (§8b).
   The logout form (class hsl_np_logout) sets html.logging-out on submit (see js/hsl-ui.js). */
html.logging-out #components-reconnect-modal { display: none !important; }

/* Sync-Jobs: clickable connection rows (select -> filter the log below), ported to hsl_ tables. */
.hsl_tbl tbody tr.hsl_row_click { cursor: pointer; }
.hsl_tbl tbody tr.hsl_row_click:hover > td { background: color-mix(in srgb, var(--hsl-fg) 6%, transparent); }
.hsl_tbl tbody tr.hsl_row_click.sel > td { background: color-mix(in srgb, var(--hsl-fg) 6%, transparent); }

/* Constrain images inside buttons (e.g. the SSO login icon) so an SVG never renders at intrinsic size. */
.hsl_btn img { width: 18px; height: 18px; vertical-align: middle; }

/* List-header: primary "Neu…" CTA pushed to the right (was hanging in the left corner). */
.hsl_lv_filters { align-items: center; }
.hsl_lv_filters > .hsl_btn:last-child { margin-left: auto; }

/* Setup-Token modal: the value input spans the full width, the copy button stays a square icon-btn. */
.hsl_field .hsl_row_actions { align-items: center; }
.hsl_field .hsl_row_actions > input { flex: 1 1 auto; min-width: 0; }
.hsl_field .hsl_row_actions > .hsl_icon_btn { flex: 0 0 auto; height: var(--hsl-ctl-h); aspect-ratio: 1; justify-content: center; }

/* Role pills in table cells: clear spacing between them. */
.hsl_tbl td .hsl_pill { margin: 1px 4px 1px 0; }

/* Headings inside a filter bar align cleanly with the CTA on one row. */
.hsl_lv_filters h1, .hsl_lv_filters h2 { margin: 0; }

/* Restore top spacing when a filter bar (e.g. the Sync-Log header) follows a card. */
.hsl_card + .hsl_lv_filters { margin-top: 24px; }

/* Row actions: center children so icon buttons stay square next to text buttons (no vertical stretch). */
.hsl_row_actions { align-items: center; }

/* ---- heusel.web2 (2027) companion bridges — app-specific classes not in the core system ---- */
.hsl_page_desc { margin: -6px 0 18px; color: var(--hsl-fg-dim); font-size: .9rem; max-width: 72ch; }
.hsl_ok_note { color: var(--hsl-co-green-fg, #008d5d); margin: 8px 0; }
.hsl_mb_1 { margin-bottom: 1rem; }
.hsl_w_full { width: 100%; }
.hsl_no_underline { text-decoration: none; }
.hsl_nav_separator { list-style: none; height: 1px; background: var(--hsl-border); margin: 8px 12px; }
.hsl_np_email { display: block; color: var(--hsl-fg-dim); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsl_txt_bad { color: var(--hsl-bad, #e5534b); font-weight: 600; cursor: help; }

/* ===================================================================== */
/* heusel.sync — 2030 (.nav line) app overrides                          */
/* ===================================================================== */

/* heusel.sync Brand-Override (NACH hsl.css): den bisherigen gruenen heusel.sync-Hero beibehalten
   (reine Struktur-Migration, kein Farbwechsel). Zieht CTA, Fokus-Ring, Card-Glas-Ring, aktiven
   Nav-Eintrag mit. Gilt fuer 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"). */
.hsl_sprite { display: none; }

/* Topbar-Spacer (CSP-safe statt inline style="flex:1"). */
.hsl_tb_spring { flex: 1; }

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

/* O365 ListView (2030) — CSP-safe bridges for the mockup's inline styles. */
.hsl_lv_scroll { overflow-x: auto; }
.hsl_lv_empty { padding: 20px; text-align: center; color: var(--fg-dim, #8a94a3); }

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

/* Gruppenkopf-Zeile in einer 2030-ListView (GUIDELINES §1: klar abgesetzt). */
.lv tbody tr.hsl_group_row { background: var(--bg-2, rgba(127,127,127,.08)); }
.lv tbody tr.hsl_group_row td,
.lv tbody tr.hsl_group_row .hsl_group_cell {
    padding: 9px 14px; font-weight: 700; font-size: .78rem; letter-spacing: .03em;
    text-transform: uppercase; color: var(--fg-dim, #8a94a3);
    border-top: 1px solid var(--border, rgba(127,127,127,.2));
}
/* Ausgewählte Zeile (Monitor: aktiver Verbindungs-Log-Filter). */
.lv tbody tr.hsl_row_click.sel { background: color-mix(in srgb, var(--hero-a, #12b886) 14%, transparent); }

/* Tenant-Combo im 2030-Nav (globaler Scope-Umschalter, heusel.id-Muster). */
.nav .hsl_tenant_switch { padding: 8px 12px; }
.nav .hsl_tenant_switch select {
    width: 100%; height: 34px; padding: 0 10px; font: inherit; cursor: pointer;
    color: var(--fg, inherit);
    background: var(--bg-input, rgba(127,127,127,.10));
    border: 1px solid var(--border, rgba(127,127,127,.22));
    border-radius: var(--radius-ctl, 10px);
}
/* Eingeklappte Nav: Combo ausblenden (nur Icons bleiben). */
.nav-collapsed .nav .hsl_tenant_switch,
#app.nav-collapsed .hsl_tenant_switch,
.nav.nav-collapsed .hsl_tenant_switch { display: none; }

/* Agenten-Übersicht: Prog-Bar-Row/Label aus dem Kanon-heusel.web.css (das hier NICHT geladen wird,
   solange die web2->Kanon-Migration läuft) — damit die CPU/Mem-Bars auf /agents korrekt layouten. */
.hsl_prog_row   { display: flex; align-items: center; gap: 8px; }
.hsl_prog_label { font-size: .72rem; color: var(--hsl-fg-dim); white-space: nowrap; }

/* Fix: der geladene vendor/heusel/hsl.css setzt .hsl_prog_fill{background:var(--hero-grad)}, und
   --hero-grad ist in dieser App nicht durchgethemt → der Balken malte NICHTS (leere Telemetrie-Bars).
   app.css lädt zuletzt → hier deterministisch auf die Brand-Farbe zwingen. */
.hsl_prog_fill { display: block; background: var(--hsl-brand); }

/* /agents — Feinschliff */
.hsl_agent_name { display: flex; align-items: center; gap: 8px; }        /* Ampel + Name in einer Zeile */
.hsl_agent_name .hsl_dot { margin: 0; }                                   /* Ampel-Punkt bündig, kein Rechts-Margin */
.hsl_dots { display: inline-flex; align-items: center; gap: 14px; }       /* Connector-Punkte weiter auseinander */
.hsl_dots .hsl_dot { margin: 0; }
/* Etwas mehr Luft zwischen den Datendarstellungen im Detail-Panel (.hsl_modal_box). */
.hsl_prog_row + .hsl_prog_row { margin-top: 6px; }
.hsl_modal_box h4 { margin: 18px 0 8px; }
.hsl_modal_box .hsl_field { margin-bottom: 10px; }
.hsl_modal_box .hsl_field_row { margin-bottom: 12px; }

/* ===================================================================== */
/* heusel.one-Shell-Einbettung: App-Chrome ausblenden, wenn gerahmt      */
/* (hsl.elements.js setzt #app.shell-one im Shell-Modus ?shell=one).     */
/* ===================================================================== */
#app.shell-one .nav { display: none; }
#app.shell-one .shell { grid-template-columns: 1fr; }
#app.shell-one .content { padding-bottom: 24px; }