/* ==========================================================================
 admin-sicherheit.css — Styles fuer den Admin-Sub-Tab "Sicherheit"

 Konsumenten:
 web/js/sections/admin/admin-sicherheit.js
 web/js/components/drawers/sg-drawer.js
 web/js/components/drawers/bi-drawer.js

 Strikt SSOT-Module-First (CLAUDE.md, Design-System): nutzt KpiTiles,
 .kat-card, .pill, .card-v2--compact, Avatar.html als Module.
 Eigene Klassen NUR fuer:
 1. Hauptseiten-Layout-Wrapper (.admin-sicherheit, .admin-sec-list)
 2. Stakeholder-Tabelle (.admin-sec-table) — Tabelle statt Card-Liste
 3. Mitglieder-Liste im Drawer (.sg-row) — Listen-Pattern, kein
 eigener generischer Look
 4. Hero im Berechtigungs-Inspektor-Drawer (.bi-hero) — Avatar +
 Name + Pills, weil kein dediziertes Hero-Modul existiert

 Aus web/styles/admin-sicherheit.css verschoben in
 die Mirror-Topologie web/styles/sections/admin/.
 ========================================================================== */

/* ── Hauptseite: Layout ──────────────────────────────────────────── */
.admin-sicherheit { display: flex; flex-direction: column; gap: var(--space-4); }
.admin-sicherheit-card .ich-card-header { display: flex; gap: var(--space-3); align-items: flex-start; }

/* Pillen-FORM: Der Admin-Bereich liegt NICHT in .app-scope, daher greift das
   .app-scope .pill-Primitiv (Form/Padding/Radius/Font) hier NICHT — die
   Kategorie- und Status-Pillen der Gruppen-Liste rendern sonst als nackter
   <span>. Wir spiegeln die Form des Primitivs lokal fuer diese Zeile. */
.admin-sec-list-row1 .pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: 10.5px; font-weight: 600;
  padding: var(--space-xxs) var(--space-2); border-radius: var(--radius-circular); line-height: 1.4;
  white-space: nowrap;
}

/* Kategorie-Pille (Color-Variants ueber .pill SSOT). Wir nutzen die
   semantischen .status-*-Toene wo es passt; eigene Modifier nur fuer
   Kategorien die kein Tone-Mapping haben. */
.admin-sec-cat-pill--management        { background: var(--tone-success-soft); color: var(--tone-success-text); }
.admin-sec-cat-pill--wildcard          { background: var(--tone-info-soft);    color: var(--tone-info-text); }
.admin-sec-cat-pill--environment-specific { background: var(--tone-warn-soft); color: var(--tone-warn-text); }
.admin-sec-cat-pill--tab               { background: var(--color-bg-subtle);            color: var(--color-text-primary); }
.admin-sec-cat-pill--future            { background: var(--color-bg-subtle);            color: var(--color-text-secondary); font-style: italic; }
.admin-sec-cat-pill--guest-marker      { background: var(--tone-info-soft);    color: var(--tone-info-text); }

/* GUID-Mini-Copy-Button (kompakt, Mono-Font). Ghost-Chip: ruhig in der
   Titelzeile, erst beim Hover als klickbare Aktion erkennbar. */
.admin-sec-guidcopy {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: var(--color-bg-subtle); border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-xxs) var(--space-2);
  font-size: var(--fs-xs);
  font-family: var(--font-mono, monospace);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.admin-sec-guidcopy .ui-ico img { opacity: 0.6; }
.admin-sec-guidcopy:hover {
  background: var(--brand-light);
  border-color: var(--brand-light-hover);
  color: var(--brand-default);
}
.admin-sec-guidcopy:hover .ui-ico img { opacity: 0.9; }

/* ── Hauptseite: Sicherheitsgruppen-Liste (flach im ich-card-body) ────── */
.admin-sec-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.admin-sec-list-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3-5) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--duration-fast);
}
.admin-sec-list-item:last-child { border-bottom: none; }
.admin-sec-list-item:hover { background: var(--color-bg-hover, var(--color-bg-subtle)); }
.admin-sec-list-item.is-clickable { cursor: pointer; }
.admin-sec-list-item.is-clickable:focus-visible { outline: 2px solid var(--brand-default); outline-offset: -2px; }
.admin-sec-list-item.is-not-configured { opacity: 0.55; }

/* Mitglieder-Stat rechts in der Zeile: Icon + Zahl + Label mit klaren
   Abstaenden. Ersetzt den frueheren .app-counter-block (Toolbar-Modul,
   dessen fixe Value-min-width die Zahl ans Label klebte). */
.admin-sec-members {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.admin-sec-members .ui-ico img { width: 14px; height: 14px; opacity: 0.65; }
.admin-sec-members-count {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--color-text-primary);
}
.admin-sec-members--zero .admin-sec-members-count {
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
}
.admin-sec-members--warn,
.admin-sec-members--warn .admin-sec-members-count { color: var(--tone-warn-text); }

/* Verwalten-Button: Chevron rueckt beim Row-Hover leicht nach rechts —
   dezente Affordance, dass die ganze Zeile klickbar ist. */
.admin-sec-manage-btn .ui-ico { transition: transform var(--duration-fast) var(--ease-soft); }
.admin-sec-list-item:hover .admin-sec-manage-btn .ui-ico { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .admin-sec-list-item:hover .admin-sec-manage-btn .ui-ico { transform: none; }
}

/* Icon-Badge — getönter Hintergrund je Kategorie über Modifier-Klasse (gleiche
   Tone-Zuordnung wie .admin-sec-cat-pill--*). Default (auch Kategorie „tab"):
   neutrales Subtle-Bg. */
.admin-sec-list-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}
.admin-sec-list-icon img { width: 20px; height: 20px; }
.admin-sec-list-icon--management           { background: var(--tone-success-soft); color: var(--tone-success-text); }
.admin-sec-list-icon--wildcard             { background: var(--tone-info-soft);    color: var(--tone-info-text); }
.admin-sec-list-icon--environment-specific { background: var(--tone-warn-soft);    color: var(--tone-warn-text); }
.admin-sec-list-icon--future               { color: var(--color-text-secondary); }
.admin-sec-list-icon--guest-marker         { background: var(--tone-info-soft);    color: var(--tone-info-text); }

.admin-sec-list-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-xxs); }
.admin-sec-list-row1 {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
.admin-sec-list-name {
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}
.admin-sec-list-desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal, 1.4);
  color: var(--color-text-secondary);
}

.admin-sec-list-actions {
  display: inline-flex; align-items: center; gap: var(--space-4);
  flex-shrink: 0;
}

/* Tablet und kleiner: Action-Slot in eine zweite Zeile, rechtsbündig.
   Auf Notebook (1000–1399px) reicht die Breite für die dichtere Desktop-
   Inline-Anordnung — dort NICHT umbrechen (sonst ~105px hohe Zeilen mit
   Leerraum statt ~72px). Schwelle daher auf die kanonische Tablet-Grenze. */
@media (max-width: 999px) {
  .admin-sec-list-item {
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }
  .admin-sec-list-actions {
    flex-basis: 100%;
    justify-content: flex-end;
  }
}

/* ── Stakeholder-Tabelle (rund umranded, konsistent zu .admin-sec-list) ── */
.admin-sec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.admin-sec-table th,
.admin-sec-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}
.admin-sec-table th {
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-bg-subtle);
}
.admin-sec-table tbody tr:last-child td { border-bottom: none; }
.admin-sec-row:hover { background: var(--color-bg-hover, var(--color-bg-subtle)); }
.admin-sec-col-num { text-align: right; font-variant-numeric: tabular-nums; width: 5rem; }
.admin-sec-col-actions { text-align: right; width: 1%; white-space: nowrap; }

/* Mobile/Tablet (<1000px): Stakeholder-Tabelle → Karten (Pattern wie
   .admin-table). Die 6-Spalten-Tabelle wuerde sonst horizontal quetschen —
   .admin-section schaltet auf Tablet/Mobile auf overflow:visible, also kein
   Clipping-Netz. data-label auf jedem <td> liefert die Zeilen-Beschriftung. */
@media (max-width: 999px) {
  .admin-sec-table,
  .admin-sec-table tbody { display: block; }
  .admin-sec-table thead { display: none; }
  .admin-sec-table tbody tr {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
  }
  .admin-sec-table td {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); padding: var(--space-1) 0; border: 0;
    min-height: 32px; text-align: right; width: auto;
  }
  .admin-sec-table td::before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase; letter-spacing: 0.04em;
    font-weight: var(--fw-semibold);
    flex: 0 0 auto; text-align: left;
  }
  /* Projekt-Zelle als Karten-Kopf (ohne Label). */
  .admin-sec-table td[data-label="Projekt"] {
    font-size: var(--fs-body); font-weight: var(--fw-semibold);
    border-bottom: 1px solid var(--color-border-subtle);
    padding-bottom: var(--space-2); margin-bottom: var(--space-2);
  }
  .admin-sec-table td[data-label="Projekt"]::before { display: none; }
  /* Actions-Zelle: Resync-Button rechts, 44px Touch-Target, kein Label. */
  .admin-sec-col-actions { justify-content: flex-end; white-space: normal; }
  .admin-sec-col-actions::before { display: none; }
  .admin-sec-col-actions .fk-buchen { min-height: 44px; }
}

/* Drift-Status-Pills mit Status-Dot + Tooltip-Cursor. */
.admin-sec-drift-pill {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  padding: var(--space-xxs) var(--space-2);
  border-radius: var(--radius-pill);
  cursor: help;
}
.admin-sec-drift-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: var(--radius-circular);
  background: currentColor;
  flex-shrink: 0;
}
.admin-sec-drift-pill--ok      { background: var(--tone-success-soft); color: var(--tone-success-text); }
.admin-sec-drift-pill--drift   { background: var(--tone-warn-soft);    color: var(--tone-warn-text); }
.admin-sec-drift-pill--unknown { background: var(--color-bg-subtle);            color: var(--color-text-secondary); }

/* Ist-Zahl bei Drift hervorheben — der Blick springt direkt auf die Abweichung. */
.admin-sec-num--drift { color: var(--tone-warn-text); font-weight: var(--fw-semibold); }

/* Resync laeuft: Sync-Icon rotiert, solange der Request offen ist. */
.admin-sec-col-actions .fk-buchen.is-loading .ui-ico img {
  animation: lod-spin var(--duration-spinner) var(--ease-linear) infinite;
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
  .admin-sec-col-actions .fk-buchen.is-loading .ui-ico img { animation: none; }
}

/* ── Inspector: Action-Bar (Hauptseite, statt Card-Wrapper) ─────────── */
.admin-sec-inspect-bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3-5) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  flex-wrap: wrap;
}
/* Icon-Badge links — gleiche Sprache wie kat-card-icon / Listen-Icons. */
.admin-sec-inspect-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: var(--brand-light);
  flex-shrink: 0;
}
.admin-sec-inspect-icon img { width: 20px; height: 20px; }
.admin-sec-inspect-text { flex: 1; min-width: 16rem; }
.admin-sec-inspect-title { font-weight: var(--fw-semibold); color: var(--color-text-primary); }
/* Muted-Farbe selbst tragen — die Admin-Section ist un-scoped, die generische
   .muted (panel.css) lebt nur unter .app-scope und greift hier nicht. */
.admin-sec-inspect-sub { font-size: var(--fs-sm); line-height: var(--lh-normal, 1.4); color: var(--color-text-muted); }
.admin-sec-inspect-action { flex-shrink: 0; }
/* Picker-Trigger ist nun ein kompakter Outline-Button (kein full-width). */
.admin-sec-inspector-trigger { justify-content: center; min-width: 16rem; }

/* ── Berechtigungs-Inspektor-Drawer: Hero + Body ──────────────────── */
/* Paket Inspektor-Drawer-Polish 2026-05-07 (Spacing-Pass v2): gap auf
   space-4 (16px) gesetzt. Vorher space-2 (8px) war zu eng — die kat-cards
   kannten ohne Outer-Margin nur den Body-Gap, und 8px liessen sie aneinander-
   kleben (User-Feedback). 16px erzeugt klare visuelle Trennung zwischen
   KPI-Strip / Tab-Sichtbarkeit / Schreibrechte / Gruppen / Projekte /
   Stakeholder-Teams. */
.bi-body { display: flex; flex-direction: column; gap: var(--space-4); }

/* Hero-Banner: Avatar links + Name/Email/Pills rechts.
   Kein dediziertes Hero-Modul — wir nutzen Avatar.html (SSOT) und
   .pill (SSOT) und kombinieren sie hier. */
.bi-hero {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--color-bg-subtle) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}
.bi-hero-avatar { flex-shrink: 0; }
.bi-hero-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.bi-hero-name { font-size: var(--fs-lg, 1.125rem); font-weight: var(--fw-semibold); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-hero-email { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-hero-roles { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin-top: var(--space-1); }
.bi-hero-warn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  padding: var(--space-xxs) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--tone-warn-soft);
  color: var(--tone-warn-text);
  align-self: flex-start;
}
.bi-head-hint { font-size: var(--fs-xs); margin-left: var(--space-2); }

/* Inspector-List: Gruppen-Memberships — gerahmte Zeilen-Liste mit Dividern
   (gleiche Sprache wie .admin-sec-list auf der Hauptseite). Member-Zeilen
   lesen sich kraeftig, Nicht-Mitglieder treten zurueck (Ghost-Pill). */
.bi-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.bi-list-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 38px;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--duration-fast);
}
.bi-list-row:last-child { border-bottom: none; }
.bi-list-row:hover { background: var(--color-bg-subtle); }
.bi-list-name { flex: 1; min-width: 0; }
.bi-list-row--on .bi-list-name { font-weight: var(--fw-medium); color: var(--color-text-primary); }
.bi-list-row--off .bi-list-name { color: var(--color-text-secondary); }
/* Nicht-Mitglied als Ghost-Pill: 7 graue Voll-Pills untereinander waeren
   visuelles Rauschen — Border-only laesst die echten Memberships hervortreten. */
.bi-list .pill.status-muted {
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
}

/* Inspector-Flags: Kompakte Single-Line-Items fuer binaere Feature-Flags
 (Tab-Sichtbarkeit, Schreibrechte). Paket Auto-Fill-Grid mit minmax(16rem, 1fr) damit lange Labels
 wie "Anfragen-Workflow-Status setzen" Platz haben. ~32px-Hoehe pro
 Row statt 78px der vorherigen KpiTiles. */
.bi-flags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-1) var(--space-3);
}
.bi-flag {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
}
.bi-flag-icon {
  width: 14px;
  height: 14px;
  opacity: 0.65;
  flex: 0 0 auto;
}
.bi-flag-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bi-flag-status {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.bi-flag--on {
  background: var(--tone-success-soft);
  border-color: var(--tone-success-soft);
}
.bi-flag--on .bi-flag-status {
  color: var(--tone-success-text);
}
.bi-flag--on .bi-flag-icon {
  opacity: 0.85;
}
.bi-flag--off .bi-flag-status {
  color: var(--color-text-muted);
}
.bi-flag--off .bi-flag-label {
  color: var(--color-text-secondary);
}

/* Klickbare Projekt-Cards (Wrapper-Grid). Card-Look kommt aus .card-v2--compact (SSOT).
   Paket Inspektor-Drawer-Polish 2026-05-07 (Spacing-Pass):
   .card-v2--compact hat eine fixe height: 148px (Kanban-Lane-Standard,
   damit Cards in der Spalte uniform aussehen). Im Inspektor-Kontext sind
   die Cards aber inhalts-arm (Icon + Title + 1 Pille + Open-Icon) — die
   148px erzeugten massive leere Whitespace-Bloecke. Hier ueberschreiben
   wir auf height: auto + tighter padding. */
.bi-projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-2);
}
.bi-projects .card-v2.card-v2--compact {
  height: auto;
  min-height: 0;
  padding: var(--space-2) var(--space-3);
  gap: var(--space-1);
}
.bi-proj-link { cursor: pointer; text-align: left; width: 100%; }
.bi-proj-link:hover .card-app-title { color: var(--brand-default); }
/* Meta-Zeile: Pill/Owner-Team links, Open-Icon rechts — eine ruhige Zeile
   statt zwei gestapelter Meta-Blöcke. */
.bi-proj-link .card-app-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); min-width: 0;
}
.bi-proj-link .card-app-meta .bi-proj-meta-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-xs);
}
.bi-proj-link .card-app-meta .ui-ico { flex-shrink: 0; opacity: 0; transition: opacity var(--duration-fast); }
.bi-proj-link:hover .card-app-meta .ui-ico,
.bi-proj-link:focus-visible .card-app-meta .ui-ico { opacity: 1; }
/* Card-Header inline: die bi-Cards rendern .card-app-head (nicht die SSOT-Klasse
   .card-app-header), daher greifen die globalen Card-Header-Flex-Regeln nicht und
   Icon + Titel stapeln vertikal. Hier explizit als flex-row + Titel-Ellipsis. */
.bi-proj-link .card-app-head {
  display: flex; align-items: center; gap: var(--space-2); min-width: 0;
}
.bi-proj-link .card-app-head .card-app-title {
  flex: 1 1 auto; min-width: 0;
}

.bi-empty {
  font-size: var(--fs-sm);
  padding: var(--space-3);
  text-align: center;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border-subtle);
}

/* Role-Pills: Color-Mapping pro Rolle (basiert auf .pill SSOT). */
.pill.role-management,
.pill.role-devadmin                { background: var(--tone-success-soft); color: var(--tone-success-text); }
.pill.role-projektleiter,
.pill.role-projekte-mgmt           { background: var(--tone-info-soft);    color: var(--tone-info-text); }
.pill.role-serviceagent            { background: var(--tone-warn-soft);    color: var(--tone-warn-text); }
.pill.role-sales                   { background: var(--tone-info-soft);    color: var(--tone-info-text); }
.pill.role-mitarbeiter             { background: var(--color-bg-subtle);            color: var(--color-text-secondary); }
.pill.role-guest                   { background: var(--color-bg-subtle);            color: var(--color-text-secondary); }

/* Pill-Status-Tones fuer Inspector-Listen (falls in pill.css noch nicht da). */
.pill.status-success { background: var(--tone-success-soft); color: var(--tone-success-text); }
.pill.status-warn    { background: var(--tone-warn-soft);    color: var(--tone-warn-text); }
.pill.status-muted   { background: var(--color-bg-subtle);            color: var(--color-text-secondary); }

/* ── Sicherheitsgruppe-Drawer ──────────────────────────────────── */
.sg-body { display: flex; flex-direction: column; gap: var(--space-3); }

/* Header-Layout zweispaltig (Pill + Title oben, Description als Subtitle).
   Spezifitaet 0,4,0 (mit .drawer-head-meta) noetig, um das align-items:center
   der Basis-Regel (.app-scope .shared-drawer .drawer-head-meta, 0,3,0) zu schlagen —
   sonst zentriert die column-Flex Pill/Title/Description horizontal statt linksbuendig. */
.app-scope .shared-drawer .drawer-head-meta.sg-head-meta {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
  flex: 1; min-width: 0;
}
.sg-head-row1 {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
.sg-head-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  line-height: var(--lh-tight, 1.25);
}
.sg-head-desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal, 1.4);
}

/* SG-KPI-Strip mischt Zahlen (Mitglieder/deaktiviert) mit Text-Werten
   (Kategorie/GUID). Werte kompakter + einzeilig, damit ein Compound-Label wie
   "Tab-Verwaltung" nicht 2-zeilig umbricht und die 4 Kacheln optisch ruhig
   wirken. Scoped auf [data-sg-kpi] — die globale 22px-.kpi-tile-value bleibt
   fuer andere Konsumenten unveraendert. */
[data-sg-kpi] .kpi-tile-value {
  font-size: var(--fs-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mitglieder-Liste (Drawer-spezifisches Listen-Pattern). */
.sg-list { display: flex; flex-direction: column; gap: var(--space-1); }
.sg-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.sg-row.is-disabled { opacity: 0.55; }
.sg-row.is-clickable { cursor: pointer; }
.sg-row.is-clickable:hover {
  background: var(--color-bg-hover, var(--color-surface));
  border-color: var(--brand-default);
}
.sg-row-avatar { flex-shrink: 0; }
.sg-row-text { flex: 1; min-width: 0; }
/* Name + E-Mail einzeilig mit Ellipsis: eine lange, umbruchlose E-Mail wuerde sonst
   im schmalen/Mobile-Drawer aus der Zeile ragen und vom kat-card-body/drawer-body
   (overflow:hidden) unsichtbar abgeschnitten. */
.sg-row-name { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-row-email { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-row-remove {
  background: transparent; border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
  cursor: pointer;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.sg-row-remove:hover {
  background: var(--tone-danger-soft);
  color: var(--tone-danger-text);
  border-color: transparent;
}
.sg-add-trigger { width: 100%; justify-content: center; }