/* Nutzerverwaltung (23.09.2026): neue Nutzer ganz oben, wer online ist offen
   unter seiner Rolle, der Rest eingeklappt, und je Nutzer die Nutzungs-
   statistik (Balken je Tag, gestapelt nach Reitergruppe). Logik in
   modules/adminUsers.js. Nicht im Demo-Paket (DROP_STYLESHEETS im Export). */

/* Farben der Reitergruppen. Der Farbton stammt aus den gedämpften
   Börsenfarben des FRF (exchangeProfiles in modules/state.js, je Gruppe in
   Klammern), die Helligkeit ist für die dunkle Fläche gestuft (OKLCH L 0,53
   bis 0,66). Die Reihenfolge ist die Stapelreihenfolge von unten nach oben;
   geprüft mit dem Palettenprüfer der Datenvisualisierungs-Regeln gegen
   --surface-1: alle Nachbarn trennbar, auch bei Rot-Grün-Schwäche
   (ΔE ≥ 10,1, normal ≥ 16,1), alle ≥ 3 : 1 Kontrast. Die Farbe hängt fest an
   der Gruppe, nie am Rang. Nur hier stehen Farbwerte; die Regeln darunter
   benutzen ausschließlich Variablen. */
:root {
  --nutzung-fundingrates: #0896b4;    /* Farbton bitget */
  --nutzung-topspreads: #c36e0d;      /* Farbton extended */
  --nutzung-boersen: #169d7c;         /* Farbton hyperliquid; seit 25.09.2026 Gruppe „Börsen“ (vorher Liquidität) */
  --nutzung-pointsvaults: #ae900f;    /* Farbton phemex; bis 25.09.2026 „Airdrop“, bis 15.10.2026 „xStocks Points“, seitdem „Points / Vaults“ */
  --nutzung-depeg: #b65dc2;           /* Farbton hyna */
  --nutzung-musterportfolio: #567904; /* Farbton grvt */
  --nutzung-routelens: #9181e5;       /* Farbton xyz */
  /* V3 DEX Simulator (30.09.2026): das Olivgrün des Musterportfolios, das
     seit 29.09.2026 in „RST“ steht und keine eigene Gruppe mehr hat.
     Abstand (CIE76) zu den Nachbarn im Stapel: Route Lens 115, RST 63, bei
     Rot-Grün-Schwäche 97 bzw. 27; Kontrast zu --surface-1 3,6 : 1. */
  --nutzung-dexsim: var(--nutzung-musterportfolio);
  /* Trading (01.10.2026): das Blau der früheren Gruppe „Backtesting“, die
     seit 29.09.2026 in „RST“ steht. Nachbarn im Stapel: RST (Orange) und
     Tracking (Rot). */
  --nutzung-trading: var(--nutzung-backtesting);
  --nutzung-tracking: #e36469;        /* Farbton aster */
  --nutzung-rst: var(--warning);      /* Katalog-Token, Orange wie im PT */
  --nutzung-backtesting: #4a88d9;     /* Blau, seit 27.09.2026 Kopfreiter „Backtesting“ */
  --nutzung-uebrige: var(--text-3);   /* neutral: ETF Spot, Nutzer, Sonstige */
  --nutzung-imbau: var(--text-2);     /* „Im Bau / Beta“ (15.10.2026): hell-neutral, vom Grau „Übrige“ abgesetzt */
}

/* Gruppenfarbe als Klasse – ohne Bereich, weil die Tooltip-Ebene am <body>
   hängt und dieselben Schlüssel zeigt. */
.ns-g-fundingrates { --ns-farbe: var(--nutzung-fundingrates); }
.ns-g-topspreads { --ns-farbe: var(--nutzung-topspreads); }
.ns-g-boersen { --ns-farbe: var(--nutzung-boersen); }
.ns-g-pointsvaults { --ns-farbe: var(--nutzung-pointsvaults); }
.ns-g-depeg { --ns-farbe: var(--nutzung-depeg); }
.ns-g-musterportfolio { --ns-farbe: var(--nutzung-musterportfolio); }
.ns-g-routelens { --ns-farbe: var(--nutzung-routelens); }
/* „Tools“ (18.10.2026): Route Lens, V3 DEX Simulator, Depeg & Staking; Farbe von Route Lens. */
.ns-g-tools { --ns-farbe: var(--nutzung-routelens); }
.ns-g-dexsim { --ns-farbe: var(--nutzung-dexsim); }
.ns-g-trading { --ns-farbe: var(--nutzung-trading); }
.ns-g-tracking { --ns-farbe: var(--nutzung-tracking); }
.ns-g-rst { --ns-farbe: var(--nutzung-rst); }
.ns-g-backtesting { --ns-farbe: var(--nutzung-backtesting); }
.ns-g-uebrige { --ns-farbe: var(--nutzung-uebrige); }
.ns-g-imbau { --ns-farbe: var(--nutzung-imbau); }

/* Tooltip eines Tages: kurzer Strich in der Gruppenfarbe vor dem Reiter,
   der Text bleibt in Textfarbe. */
.value-tip-layer .ns-schluessel {
  display: inline-block;
  width: 10px;
  height: 2px;
  margin-right: 6px;
  border-radius: 1px;
  background: var(--ns-farbe);
  vertical-align: middle;
}

/* ── Neue Nutzer vor der Freigabe ─────────────────────────────────────── */
#usersView .users-table tbody tr.users-gruppe-neu td { color: var(--text-warning); }
#usersView .users-neu-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin-right: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--warning-soft);
  color: var(--text-warning);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  vertical-align: middle;
}
#usersView .users-neu-anzahl {
  display: inline-block;
  min-width: 20px;
  margin-left: var(--space-1);
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--warning);
  color: var(--text-inv);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
#usersView .users-table tbody tr.users-row-neu > td:first-child { box-shadow: inset 3px 0 0 var(--warning); }

/* ── Nutzerzeilen klappen ihre Nutzung auf ────────────────────────────── */
#usersView .users-table tbody tr.users-row { cursor: pointer; }
#usersView .users-table tbody tr.users-row:focus-visible { outline: 2px solid var(--focus-color); outline-offset: -2px; }
#usersView .users-table tbody tr.users-row.detail-offen { background: var(--surface-2); }
#usersView .users-table tbody tr.users-row.detail-offen > td { border-bottom-color: transparent; }

/* „n weitere (offline)": eingeklappt unter den Online-Nutzern einer Rolle. */
#usersView .users-table tbody tr.users-offline-zeile { cursor: pointer; }
#usersView .users-table tbody tr.users-offline-zeile:hover { background: var(--surface-2); }
#usersView .users-table tbody tr.users-offline-zeile:focus-visible { outline: 2px solid var(--focus-color); outline-offset: -2px; }
#usersView .users-table tbody tr.users-offline-zeile td {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  padding-left: 1.9rem;
  color: var(--text-2);
  font-size: var(--fs-13);
}

/* ── Detail: Nutzungsstatistik ────────────────────────────────────────── */
#usersView .users-table td.users-nutzung-zelle {
  padding: var(--space-1) var(--space-3) var(--space-4);
  background: var(--surface-2);
}
/* Die Tabelle scrollt am Handy quer. Das Detail bleibt im sichtbaren
   Ausschnitt (sticky links, Breite aus --users-sicht-breite, die
   adminUsers.js nachführt) und scrollt selbst nie. */
#usersView .ns-detail {
  position: sticky;
  left: var(--space-3);
  box-sizing: border-box;
  width: calc(var(--users-sicht-breite, 100%) - 2 * var(--space-3));
  max-width: 100%;
  padding: var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: default;
}
#usersView .ns-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
#usersView .ns-segment {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--input-bg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
}
#usersView .ns-chip {
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
#usersView .ns-chip:hover { color: var(--text-1); }
#usersView .ns-chip[aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--primary-text);
  box-shadow: var(--primary-glow);
}
#usersView .ns-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

#usersView .ns-inhalt { position: relative; }
#usersView .ns-kennzahlen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
}
#usersView .ns-kennzahl {
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
}
#usersView .ns-kennzahl dt {
  color: var(--text-2);
  font-size: var(--fs-12);
}
#usersView .ns-kennzahl dd {
  margin: 2px 0 0;
  color: var(--text-1);
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}
#usersView .ns-kennzahl-zusatz {
  color: var(--text-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
  white-space: nowrap;
}
#usersView .ns-hinweis {
  margin: var(--space-2) 0;
  color: var(--text-3);
  font-size: var(--fs-12);
}
#usersView .ns-fehler {
  margin-top: var(--space-2);
  color: var(--text-danger);
  font-size: var(--fs-13);
}
#usersView .ns-leer { margin-top: var(--space-2); }
#usersView .ns-skelett-flaeche { margin-top: var(--space-3); }

/* Diagramm */
#usersView .ns-chart { width: 100%; }
#usersView .ns-svg { display: block; }
#usersView .ns-achse {
  fill: var(--text-3);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
}
#usersView .ns-raster { stroke: var(--border-1); stroke-width: 1; }
#usersView .ns-grundlinie { stroke: var(--border-2); stroke-width: 1; }
#usersView .ns-ungemessen { fill: var(--surface-2); }
#usersView .ns-seg { fill: var(--ns-farbe); }
#usersView .ns-treffer { fill: transparent; outline: none; }
#usersView .ns-treffer:focus-visible { stroke: var(--focus-color); stroke-width: 1; }
#usersView .ns-tag:hover .ns-seg,
#usersView .ns-tag:focus-within .ns-seg { filter: brightness(1.25); }

/* Legende: immer sichtbar, Minuten je Gruppe im Zeitraum. */
#usersView .ns-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
#usersView .ns-legende-eintrag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-1);
  font-size: var(--fs-13);
}
#usersView .ns-legende-eintrag.ist-leer { color: var(--text-3); }
#usersView .ns-legende-wert {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
#usersView .ns-legende-eintrag.ist-leer .ns-legende-wert { color: var(--text-3); }
#usersView .ns-farbfeld {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--ns-farbe);
}
#usersView .ns-legende-eintrag.ist-leer .ns-farbfeld { opacity: .45; }

@media (max-width: 760px) {
  #usersView .ns-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #usersView .ns-detail { padding: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  #usersView .ns-chip { transition: none; }
}

/* Geheimlinks für die Trade-Rechner-Reiter Live und Rechner (23.09.2026).
   Hinter dem Schalter je ein Icon-Knopf nach Katalog Buttons/icon, Größe sm
   (28 × 28, Secondary): in Ruhe nur das Symbol, bei Hover und Fokus klappt
   die Beschriftung aus. Während des Abrufs Spinner, danach „Kopiert" mit
   Haken, bis der Knopf nach kurzer Zeit wieder in Ruhe geht. Die Knöpfe
   stehen außerhalb des <label>, sonst schaltete ein Klick den Reiter.
   Seit 24.09.2026 dieselben Knöpfe auch für den Geheimlink der Demo. */
/* Öffentliche Seiten als Tabelle (29.09.2026, Nutzerwunsch: „wie bei
   Nutzern vorne die App, dahinter die Tabs“). Kopf, Haken, Gruppenlinien und
   Hover kommen von .users-matrix; hier nur, was die Seiten anders brauchen.
   Die Zeilen tragen die IDs der früheren Karten (#usersTrKarte,
   #usersDemoKarte), damit Icon-Knöpfe und Logik unverändert greifen. */
#usersView .users-seiten {
  display: grid;
  gap: var(--space-2);
  margin: 0 var(--space-5);
  padding: var(--space-2) 0 var(--space-3);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  font-size: var(--fs-13);
  color: var(--text-2);
}
#usersView .users-seiten > .users-tr-hinweis,
#usersView .users-seiten > .users-demo-meldung { padding: 0 var(--space-4); }
/* `.lz-knopf` setzt display: inline-flex und schlüge sonst `hidden`. */
#usersView .users-seiten [hidden] { display: none; }
/* Nicht auf volle Breite: sonst zöge sich die Link-Spalte über den Rest.
   Gemessen 29.09.2026: `width: auto` blieb bei 100 % stehen, erst
   max-content schrumpft die Tabelle auf ihren Inhalt (824 statt 1369 px).
   Schmale Fenster scrollen in .users-table-wrap quer. */
#usersView .users-matrix.users-seiten-matrix { width: max-content; }
#usersView .users-seiten-matrix thead th.users-perm-cell { height: 112px; }
#usersView .users-seiten-matrix thead th.users-kopf-nutzer { color: var(--text-3); font-size: var(--fs-12); }
#usersView .users-seiten-matrix td.users-nutzer-zelle { min-width: 240px; }
#usersView .users-seiten-name { font-weight: var(--fw-semibold); color: var(--text-1); }
#usersView .users-seiten-zeile .users-demo-spinner { margin-left: var(--space-2); vertical-align: middle; }
#usersView .users-seiten-zeile.schaltet .users-demo-spinner { visibility: visible; }
#usersView .users-seiten-zeile.schaltet input.users-perm-box { cursor: progress; }
#usersView .users-seiten-zeile .users-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); }
#usersView .users-seiten-zeile .users-demo-meldung { display: block; white-space: normal; }
#usersView .users-seiten-oeffnen { color: var(--text-2); font-size: var(--fs-12); }
#usersView .users-seiten-oeffnen:hover { color: var(--text-1); }
/* Unterreiter von Bots: ausgegraut, solange Bots aus ist – schaltbar bleiben sie. */
#usersView .users-seiten-matrix td[data-tr-bots-unter] { transition: opacity var(--t-fast); }
#usersView .users-seiten-matrix td[data-tr-bots-unter].ist-wirkungslos { opacity: .45; }
#usersView .users-seiten-matrix td.users-seiten-leer {
  padding: var(--space-2) var(--space-3) !important;
  text-align: center;
  font-size: var(--fs-12);
  color: var(--text-3);
}
#usersView .users-seiten-matrix td.users-seiten-link-zelle { padding: var(--space-2) var(--space-3) !important; white-space: nowrap; }
#usersView .users-seiten-matrix thead th.users-seiten-kopf-link { vertical-align: bottom; }
@media (prefers-reduced-motion: reduce) {
  #usersView .users-seiten-matrix td[data-tr-bots-unter] { transition: none; }
}
:is(#usersTrKarte, #usersDemoKarte) .users-tr-zugang {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon {
  --ikon-groesse: 14px;
  --knopf-hoehe: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: none;
  box-sizing: border-box;
  height: var(--knopf-hoehe);
  min-width: var(--knopf-hoehe);
  max-width: var(--knopf-hoehe);
  /* Symbol mittig im Quadrat: (Höhe − Rahmen − Symbol) / 2. */
  padding: 0 0 0 calc((var(--knopf-hoehe) - 2px - var(--ikon-groesse)) / 2);
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid var(--secondary-border);
  border-radius: var(--radius-sm);
  background: var(--secondary-bg);
  color: var(--secondary-text);
  font: inherit;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: max-width var(--t-expand), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon:hover:not(:disabled),
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon:focus-visible,
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon.laedt,
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon.ist-ok {
  max-width: 240px;
}
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon:hover:not(:disabled) {
  background: var(--secondary-hover-bg);
  border-color: var(--secondary-hover-border);
}
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon:focus-visible { outline: none; box-shadow: var(--focus-ring); }
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon:active:not(:disabled) { transform: translateY(1px); }
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon.laedt { cursor: progress; }
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon-bild {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--ikon-groesse);
  height: var(--ikon-groesse);
}
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon-bild svg {
  width: var(--ikon-groesse);
  height: var(--ikon-groesse);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon-ok,
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon-spinner,
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon.laedt .users-tr-ikon-ruhe,
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon.ist-ok .users-tr-ikon-ruhe { display: none; }
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon.laedt .users-tr-ikon-spinner { display: inline-block; }
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon.ist-ok .users-tr-ikon-ok { display: block; color: var(--text-success); }
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon-text {
  margin-left: var(--space-2);
  padding-right: var(--space-3);
  opacity: 0;
  transition: opacity var(--t-base);
}
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon:hover:not(:disabled) .users-tr-ikon-text,
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon:focus-visible .users-tr-ikon-text,
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon.laedt .users-tr-ikon-text,
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon.ist-ok .users-tr-ikon-text { opacity: 1; }
/* Handy (10.10.2026): ohne Überfahren steht die Beschriftung immer da. */
@media (hover: none) { :is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon-text { opacity: 1; } }
:is(#usersTrKarte, #usersDemoKarte) .users-tr-text-laedt,
:is(#usersTrKarte, #usersDemoKarte) .users-tr-text-ok,
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon.laedt .users-tr-text-ruhe,
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon.ist-ok .users-tr-text-ruhe { display: none; }
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon.laedt .users-tr-text-laedt,
:is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon.ist-ok .users-tr-text-ok { display: inline; }
:is(#usersTrKarte, #usersDemoKarte) .users-tr-zugang-meldung { flex-basis: 100%; }

/* Rückfrage vor dem Erneuern: Katalog Modal/standard, Confirm sm (400 px),
   als nativer <dialog> — showModal bringt Fokusfalle, Escape und die
   oberste Ebene mit. Knöpfe aus ladezustand.css (.lz-knopf = Secondary),
   die Bestätigung als Danger, weil der alte Link danach tot ist. */
.users-tr-dialog {
  width: 400px;
  max-width: calc(100vw - var(--space-6));
  box-sizing: border-box;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-lg);
  color: var(--text-1);
  font-family: var(--font-sans);
}
.users-tr-dialog::backdrop {
  background: var(--overlay);
  backdrop-filter: blur(3px);
}
.users-tr-dialog[open] { animation: users-tr-dialog-auf var(--t-base); }
@keyframes users-tr-dialog-auf {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
/* Seite dahinter scrollt nicht, solange die Rückfrage offen ist. */
html:has(.users-tr-dialog[open]) { overflow: hidden; }
.users-tr-dialog-kopf {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) 0;
}
.users-tr-dialog-titel {
  margin: 0;
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}
.users-tr-dialog-zu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.users-tr-dialog-zu:hover { color: var(--text-1); background: var(--surface-3); }
.users-tr-dialog-zu:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.users-tr-dialog-zu svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.users-tr-dialog-text {
  margin: var(--space-2) 0 0;
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--text-2);
}
.users-tr-dialog-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-1);
}
.users-tr-dialog .lz-knopf.users-tr-gefahr {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--danger-text);
  font-weight: var(--fw-bold);
}
.users-tr-dialog .lz-knopf.users-tr-gefahr:hover:not(:disabled) {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
}
/* Neue Team-PIN (01.10.2026): einmal groß und gut abschreibbar. */
.users-teampin-wert {
  display: block;
  margin: 0 var(--space-5) var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--fs-20);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-widest);
  text-align: center;
  user-select: all;
}
.users-teampin-wert[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  :is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon,
  :is(#usersTrKarte, #usersDemoKarte) .users-tr-ikon-text { transition: none; }
  .users-tr-dialog[open] { animation: none; }
}

/* ── Gesamtstatistik (24.09.2026) ─────────────────────────────────────── */
/* Unterreiter „Statistik": Kacheln, Rangliste mit Minuten je Reitergruppe,
   Top-Nutzer je Reiter. Logik in modules/adminNutzungGesamt.js. Die
   Kopfsortierung benutzt die Knöpfe der Nachrichtenliste (nr-sortier). */
#usersView .ng-bereich {
  padding: var(--space-4) var(--space-5) var(--space-5);
}
#usersView .ng-inhalt { position: relative; }
#usersView .ng-kacheln { margin-bottom: var(--space-2); }
#usersView .ng-kachel dd { white-space: normal; }
#usersView .ng-bereich .ns-hinweis { margin: 0 0 var(--space-3); }

/* Rangliste: am Handy rollt nur die Tabelle in ihrer Hülle quer. */
#usersView .ng-tabelle-huelle {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
}
#usersView .ng-tabelle { width: 100%; font-size: var(--fs-13); }
#usersView .ng-tabelle th,
#usersView .ng-tabelle td { padding: var(--space-2); }
#usersView .ng-tabelle tr > :first-child { padding-left: var(--space-3); }
#usersView .ng-tabelle tr > :last-child { padding-right: var(--space-3); }
/* Köpfe brechen um statt die Tabelle zu verbreitern; die Gruppenspalten
   in normaler Schreibweise mit weichem Trennstrich, die Gruppenfarbe als
   Streifen oben. */
#usersView .ng-tabelle thead th { vertical-align: bottom; white-space: normal; }
#usersView .ng-tabelle thead th .nr-sortier { align-items: flex-end; text-align: inherit; white-space: normal; }
#usersView .ng-tabelle th.ng-kopf-gruppe {
  box-shadow: inset 0 3px 0 var(--ns-farbe);
  letter-spacing: normal;
  text-transform: none;
  font-size: var(--fs-12);
  hyphens: manual;
}
#usersView .ng-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
#usersView .ng-zeit { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-2); }
#usersView .ng-leer,
#usersView .ng-fehlt { color: var(--text-3); }
#usersView .ng-rang { color: var(--text-2); width: 1%; }

#usersView .ng-zeile { cursor: pointer; }
#usersView .ng-zeile:hover { background: var(--surface-2); }
#usersView .ng-zeile:focus-visible { outline: 2px solid var(--focus-color); outline-offset: -2px; }

#usersView .ng-name { white-space: normal; }
#usersView .ng-name-text,
#usersView .ng-name .ng-badge { white-space: nowrap; }
#usersView .ng-name-text { color: var(--text-1); font-weight: var(--fw-semibold); }
#usersView .ng-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: 18px;
  vertical-align: 1px;
}
#usersView .ng-badge-admin { border-color: var(--warning); color: var(--text-warning); }
#usersView .ng-badge-gesperrt { border-color: var(--danger); color: var(--text-danger); }

/* Online gesamt: Balken relativ zum aktivsten Nutzer, Zahl daneben. */
#usersView .ng-online-inhalt {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}
#usersView .ng-balken {
  display: inline-block;
  width: 56px;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}
#usersView .ng-balken > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--primary-text);
}
#usersView .ng-online-wert { color: var(--text-1); font-weight: var(--fw-semibold); }

/* Minuten je Gruppe: dezent in der Gruppenfarbe hinterlegt, Stärke relativ
   zum größten Wert der Spalte (--ng-anteil 0–1). Der Text bleibt in
   Textfarbe. */
#usersView .ng-gruppe-zelle {
  background: color-mix(in srgb, var(--ns-farbe) calc(var(--ng-anteil, 0) * 34%), transparent);
  color: var(--text-1);
}
#usersView .ng-gruppe-zelle.ist-null { color: var(--text-3); }

/* Aufklappen der Gruppenspalten (03.10.2026): Dreieck vor dem Namen, die
   Unterspalten mit schmalerem Farbstreifen, kleinerer Schrift und dünner
   Trennlinie zur Gruppe. */
/* Das Dreieck sitzt oben links in der freien Ecke des Kopfs (die Köpfe sind
   unten ausgerichtet, die höchsten haben drei Zeilen): so kostet es keine
   Breite, und die zugeklappte Tabelle passt weiter bei 1440 px. */
#usersView .ng-tabelle th.ng-kopf-gruppe { position: relative; }
#usersView .ng-klapp {
  position: absolute;
  top: var(--space-2);
  left: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
#usersView .ng-klapp:hover { background: var(--surface-3); color: var(--text-1); }
#usersView .ng-klapp:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#usersView .ng-klapp svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-fast); }
#usersView .ng-klapp.ist-offen { color: var(--text-1); }
#usersView .ng-klapp.ist-offen svg { transform: rotate(90deg); }
#usersView .ng-tabelle th.ng-kopf-unter { box-shadow: inset 0 1px 0 var(--ns-farbe); color: var(--text-2); font-weight: var(--fw-medium); }
#usersView .ng-tabelle .ng-unter-zelle { font-size: var(--fs-12); border-left: 1px dashed var(--border-1); }

#usersView .ng-tabelle tfoot td,
#usersView .ng-tabelle tfoot th {
  border-top: 1px solid var(--border-2);
  border-bottom: 0;
  background: var(--surface-2);
  color: var(--text-1);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-13);
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
}
#usersView .ng-tabelle tfoot td.col-right { text-align: right; }
#usersView .ng-summe-zusatz { margin-left: var(--space-2); color: var(--text-2); font-weight: var(--fw-regular); white-space: nowrap; }

#usersView .ng-seiten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
#usersView .ng-seiten-info { color: var(--text-2); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }

/* Top-Nutzer je Reiter: Raster ohne Scrollen, eine Karte je Gruppe. */
#usersView .ng-abschnitt {
  margin: var(--space-5) 0 var(--space-3);
  color: var(--text-1);
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
}
#usersView .ng-top-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-2);
}
#usersView .ng-top-karte {
  min-width: 0;
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-top: 2px solid var(--ns-farbe, var(--border-2));
  border-radius: var(--radius-md);
}
#usersView .ng-top-kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-2);
}
#usersView .ng-top-titel { color: var(--text-1); font-size: var(--fs-13); font-weight: var(--fw-semibold); }
#usersView .ng-top-summe {
  margin-left: auto;
  color: var(--text-2);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#usersView .ng-top-liste { margin: 0; padding: 0; list-style: none; }
#usersView .ng-top-nutzer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "platz name wert" "balken balken balken";
  align-items: center;
  column-gap: 6px;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--text-1);
  font: inherit;
  font-size: var(--fs-13);
  text-align: left;
  cursor: pointer;
}
#usersView .ng-top-nutzer:hover .ng-top-name { text-decoration: underline; }
#usersView .ng-top-nutzer:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
#usersView .ng-top-platz { grid-area: platz; color: var(--text-3); font-variant-numeric: tabular-nums; }
#usersView .ng-top-name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#usersView .ng-top-wert { grid-area: wert; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
#usersView .ng-top-balken {
  grid-area: balken;
  display: block;
  height: 3px;
  margin-top: 3px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
}
#usersView .ng-top-balken > span { display: block; height: 100%; background: var(--ns-farbe); }
#usersView .ng-top-leer { margin: 0; color: var(--text-3); font-size: var(--fs-13); }

@media (max-width: 760px) {
  #usersView .ng-bereich { padding: var(--space-3); }
  #usersView .ng-balken { width: 40px; }
}

/* Anwesenheit (24.09.2026): grüner Punkt = am Bildschirm (Nutzungsminute in
   den letzten 5 min), grauer Punkt = Tab offen, aber keine Eingabe. */
#usersView .users-row .admin-presence-dot.ist-tab-offen { background: var(--text-3); }

/* ── Discord-Rollennachweis (24.09.2026) ──────────────────────────────── */
/* Unter dem Namen: @handle, Rolle Mentoring, Ausnahme. */
#usersView .users-discord-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--space-2);
  margin-top: 2px;
  font-size: var(--fs-12);
  color: var(--text-2);
}
#usersView .users-discord-handle { color: var(--text-1); }
/* Discord-Namen (24.09.2026): @handle · Anzeigename · Server: Nick. Die
   Gruppe ist der Tooltip-Auslöser (data-tip, ohne Unterstreichung) und bricht
   um, statt die Spalte zu verbreitern oder zu scrollen. */
#usersView .users-discord-namen {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-1);
  min-width: 0;
  overflow-wrap: anywhere;
}
#usersView .users-discord-namen:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; border-radius: 3px; }
#usersView .users-discord-anzeige,
#usersView .users-discord-nick,
#usersView .users-discord-trenner { color: var(--text-2); }
#usersView .users-discord-rolle { display: inline-flex; align-items: center; gap: 3px; font-weight: var(--fw-semibold); }
#usersView .users-discord-rolle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
#usersView .users-discord-rolle.ist-ok { color: var(--check); }
#usersView .users-discord-rolle.ist-warn { color: var(--text-warning); }
/* Weitere Zugangsrollen und die Stufe mit Web3-Raute (29.09.2026). */
#usersView .users-discord-zusatz { color: var(--text-2); font-weight: var(--fw-medium); }
#usersView .users-discord-stufe {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-2);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
#usersView .users-discord-stufe img { width: 14px; height: 14px; flex: none; }
#usersView .users-ausnahme {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-3);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: help;
}

/* Gelber Block „Warteliste · n" über der Tabelle (Entwurf „Nutzerverwaltung"). */
#usersView .users-warteliste {
  margin: var(--space-3) var(--space-5) var(--space-4);
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
}
#usersView .users-warteliste[hidden] { display: none; }
#usersView .uw-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--warning) 7%, var(--surface-1));
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 28%, var(--surface-1));
}
#usersView .uw-symbol { width: 16px; height: 16px; fill: none; stroke: var(--warning); stroke-width: 2.4; stroke-linecap: round; }
#usersView .uw-titel { margin: 0; font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-1); }
#usersView .uw-anzahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--surface-1));
  color: var(--text-warning);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
#usersView .uw-unterzeile { font-size: var(--fs-13); color: var(--text-2); }
#usersView .uw-kopfzeile,
#usersView .uw-zeile {
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) minmax(120px, 1fr) minmax(180px, 1.6fr) minmax(130px, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
}
#usersView .uw-kopfzeile {
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
}
#usersView .uw-kopfzeile .users-sortier {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  cursor: pointer;
}
#usersView .uw-kopfzeile .users-sortier:hover,
#usersView .uw-kopfzeile .users-sortier.ist-aktiv { color: var(--text-1); }
#usersView .uw-kopfzeile .users-sortier:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; border-radius: 3px; }
#usersView .uw-kopfzeile .users-sortier-pfeil { display: inline-block; width: 1em; margin-left: 2px; text-align: left; }
#usersView .uw-zeile {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  border-top: 1px solid var(--border-1);
  font-size: var(--fs-13);
  color: var(--text-2);
}
#usersView .uw-zelle { min-width: 0; }
#usersView .uw-nutzer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
#usersView .uw-nutzer .users-role-badge { margin-left: 0; }
#usersView .uw-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
}
#usersView .uw-discord { color: var(--text-1); overflow-wrap: anywhere; }
#usersView .uw-grund-text { color: var(--text-warning); }
#usersView .uw-etikett { display: none; }
#usersView .uw-aktionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
#usersView .uw-knopf { min-height: 36px; }
#usersView .uw-gefahr { color: var(--text-danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--surface-1)); }
#usersView .uw-gefahr:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 12%, var(--surface-1)); border-color: var(--danger); }
#usersView .uw-status { flex-basis: 100%; text-align: right; font-size: var(--fs-12); color: var(--text-2); }
#usersView .uw-status:empty { display: none; }

/* „Discord ausstehend“ (Schema 46): neutral statt gelb, Kopf klappt auf und
   zu; vier Spalten (Nutzer, Grund, zuletzt aktiv, Aktionen). */
#usersView .users-ausstehend .uw-kopf {
  padding: 0;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-1);
}
#usersView .users-ausstehend .uw-aufklapp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#usersView .users-ausstehend .uw-aufklapp:hover { background: var(--surface-2); }
#usersView .users-ausstehend .uw-aufklapp:focus-visible { outline: 2px solid var(--focus-color); outline-offset: -2px; }
#usersView .users-ausstehend .uw-aufklapp[aria-expanded="false"] { border-bottom: 0; }
#usersView .users-ausstehend .uw-symbol { stroke: var(--text-2); }
#usersView .users-ausstehend .uw-anzahl {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text-1);
}
#usersView .users-ausstehend .uw-pfeil { margin-left: auto; color: var(--text-2); }
#usersView .users-ausstehend .uw-grund-text { color: var(--text-1); }
#usersView .users-ausstehend .uw-tabelle[hidden] { display: none; }
#usersView .users-ausstehend .uw-kopfzeile,
#usersView .users-ausstehend .uw-zeile {
  grid-template-columns: minmax(200px, 1.4fr) minmax(180px, 1.6fr) minmax(130px, 1fr) auto;
}

/* Handy: jede Zeile als Karte, Beschriftung vor den Werten, nichts scrollt. */
@media (max-width: 760px) {
  #usersView .users-ausstehend .uw-zeile { grid-template-columns: 1fr; }
  #usersView .users-ausstehend .uw-aktiv { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
  #usersView .users-warteliste { margin-left: var(--space-3); margin-right: var(--space-3); }
  #usersView .uw-kopfzeile { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  #usersView .uw-kopfzeile .uw-kopfzelle:last-child { display: none; }
  #usersView .uw-zeile { grid-template-columns: 1fr; gap: var(--space-2); }
  #usersView .uw-discord,
  #usersView .uw-grund,
  #usersView .uw-geprueft { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
  #usersView .uw-etikett {
    display: block;
    color: var(--text-2);
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
  }
  #usersView .uw-aktionen { justify-content: stretch; }
  #usersView .uw-aktionen .uw-knopf { flex: 1 1 0; min-height: 44px; padding: 0 var(--space-2); white-space: nowrap; }
  #usersView .uw-status { text-align: left; }
}

/* ── Unterreiter „Seiten" (24.09.2026) ─────────────────────────────── */
/* Jede Seite ist eine Karte in #seitenKarten, untereinander. Gemeinsame
   Hülle: .sb-karte (Fläche, Rahmen, Abstand wie die frühere Demo-Karte);
   weitere Seiten kommen als weitere .sb-karte dazu. Die Karten Demo und
   Trade-Rechner behalten ihre Bauart (.users-demo in style.css), hier nur
   ohne den seitlichen Außenabstand aus dem Unterreiter „Nutzer".
   Logik: modules/adminSeiten.js (Team-Einladung), adminUsers.js (Demo,
   Trade-Rechner). Nichts scrollt in sich; ein zu langer Link wird gekürzt. */
#usersView .sb-karten {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
}
#usersView .sb-karte {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  font-size: var(--fs-13);
  color: var(--text-2);
}

/* Team-Einladung: Kopf mit Titel und Schalter, darunter Link-Feld mit
   Knöpfen, Gültigkeit und „Zuletzt genutzt von". */
#usersView .sb-team {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-3);
}
#usersView .sb-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
#usersView .sb-schalter {
  gap: var(--space-2);
  margin-left: auto;
}
#usersView .sb-schalter-name { color: var(--text-1); }
#usersView .sb-feld,
#usersView .sb-nutzungen {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
/* Beschriftung über dem Feld (Katalog Inputs/standard). */
#usersView .sb-label {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
}
#usersView .sb-feld-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
/* Anzeige wie ein Eingabefeld (nur lesen): der Link gekürzt, einzeilig. */
#usersView .sb-link {
  display: block;
  flex: 0 1 30rem;
  min-width: 0;
  box-sizing: border-box;
  height: 32px;
  padding: 0 var(--space-3);
  line-height: 30px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#usersView .sb-link.ist-leer { color: var(--text-3); font-family: var(--font-sans); }
#usersView .sb-link-skel { display: inline-block; width: 220px; max-width: 100%; vertical-align: middle; }
#usersView .sb-knopf { flex: none; }
#usersView .sb-knopf .sb-knopf-ok,
#usersView .sb-knopf .sb-text-ok,
#usersView .sb-knopf.ist-ok .sb-knopf-ruhe,
#usersView .sb-knopf.ist-ok .sb-text-ruhe { display: none; }
#usersView .sb-knopf.ist-ok .sb-knopf-ok { display: inline; color: var(--text-success); }
#usersView .sb-knopf.ist-ok .sb-text-ok { display: inline; }
#usersView .sb-hinweis { font-size: var(--fs-12); }
#usersView .sb-team.ist-aus .sb-hinweis { color: var(--text-3); }
/* `.lz-knopf` setzt display: inline-flex und schlüge sonst `hidden`. */
#usersView .sb-team [hidden] { display: none; }
#usersView .sb-nutzungen-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
#usersView .sb-nutzung {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: var(--fs-12);
}
#usersView .sb-nutzung-name { color: var(--text-1); font-weight: var(--fw-semibold); }
#usersView .sb-nutzung-zeit { color: var(--text-2); font-variant-numeric: tabular-nums; }
#usersView .sb-nutzung-leer { border-style: dashed; color: var(--text-3); background: transparent; }

@media (max-width: 760px) {
  #usersView .sb-karten { padding: var(--space-3); }
  #usersView .sb-schalter { margin-left: 0; }
  #usersView .sb-link { flex: 1 1 100%; }
}
/* „Neu laden" im Kopf von „Seiten" bricht am Handy nicht in zwei Zeilen um. */
#usersView .sb-panel .nr-kopf-rechts .lz-knopf { white-space: nowrap; }

/* ── Tracking und PP: komplett oder je Unterreiter (24.09. / 12.10.2026) ──
   Häkchen = komplett, Pfeil daneben öffnet das Panel mit den Unterreitern
   einzeln (adminUsers.js, renderGruppenZelle; PP mit users-pp-*, das Panel
   teilen sich beide). Das Panel ist ein
   Katalog-Popup mit der Mehrfachauswahl aus catalog-controls.css; es hängt
   am <body>, scrollt nie in sich und klappt nach oben, wenn unten Platz fehlt. */
.users-tracking-wahl,
.users-pp-wahl {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.users-tracking-box,
.users-pp-box { cursor: pointer; }
.users-tracking-box:disabled,
.users-pp-box:disabled { cursor: progress; opacity: 0.5; }
.users-perm-rolle .users-tracking-box:disabled,
.users-perm-rolle .users-pp-box:disabled { cursor: default; opacity: 0.4; }
.users-tracking-pfeil,
.users-pp-pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
  font-size: var(--fs-12);
  line-height: 1;
}
.users-tracking-pfeil:hover,
.users-pp-pfeil:hover,
.users-tracking-pfeil[aria-expanded="true"],
.users-pp-pfeil[aria-expanded="true"] { background: var(--surface-3); border-color: var(--border-3); color: var(--text-1); }
.users-tracking-pfeil:focus-visible,
.users-pp-pfeil:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.users-tracking-pfeil span,
.users-pp-pfeil span { display: inline-block; transition: transform var(--t-fast); }
.users-tracking-pfeil[aria-expanded="true"] span,
.users-pp-pfeil[aria-expanded="true"] span { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .users-tracking-pfeil span,
  .users-pp-pfeil span { transition: none; }
}

.users-tracking-panel.catalog-popup {
  position: fixed;
  z-index: var(--z-modal);
  min-width: 0;
  padding: var(--space-2);
}
.users-tracking-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-2);
}
.users-tracking-titel {
  overflow: hidden;
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.users-tracking-zahl {
  flex: 0 0 auto;
  color: var(--text-2);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
}
.users-tracking-panel .users-tracking-liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
}
.users-tracking-panel .hedged-more-item { min-height: var(--space-8); }
.users-tracking-name {
  display: grid;
  gap: var(--space-1);
  font-size: var(--fs-13);
}
.users-tracking-name small {
  color: var(--text-3);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
}
.users-tracking-panel .hedged-more-item.ist-geerbt::after { color: var(--text-2); }
.users-tracking-panel .hedged-more-action-btn:disabled { cursor: not-allowed; opacity: 0.5; }
/* Beim Speichern: nichts gesperrt (der Fokus bliebe sonst nicht stehen), nur sichtbar beschäftigt. */
.users-tracking-zelle[data-speichert="1"] .users-tracking-box,
.users-pp-zelle[data-speichert="1"] .users-pp-box,
.users-tracking-panel[aria-busy="true"] .hedged-more-item,
.users-tracking-panel[aria-busy="true"] .hedged-more-action-btn { cursor: progress; opacity: 0.7; }
.users-tracking-hinweis {
  margin: var(--space-2) var(--space-2) var(--space-1);
  color: var(--text-3);
  font-size: var(--fs-12);
}

/* Ask FRF – Verbrauch (25.09.2026, adminAskFrf.js): fünf Kacheln in einer
   Zeile, am Handy zwei je Zeile. */
#usersView .akv-kacheln {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: var(--space-2);
}

/* Rollenfreigabe beim einzelnen Nutzer entzogen (25.09.2026): Die Häkchen,
   die die Rolle gibt, sind anklickbar. Angehakt und etwas blasser = frei über
   die Rolle; leer mit rotem Rand = für diesen Nutzer entzogen (ein Klick gibt
   es zurück). Gleiches Zeichen im Tracking-Panel: ein rotes ✕ statt ✓. */
.users-perm-rolle .users-perm-box[data-von-rolle="1"]:checked:not(:disabled),
.users-perm-rolle .users-tracking-box[data-von-rolle="1"]:checked,
.users-perm-rolle .users-pp-box[data-von-rolle="1"]:checked { opacity: 0.6; }
.users-perm-entzogen .users-perm-box,
.users-perm-entzogen .users-tracking-box,
.users-perm-entzogen .users-pp-box {
  outline: 2px solid var(--danger);
  outline-offset: 1px;
  border-radius: 2px;
}
.users-tracking-panel .hedged-more-item.ist-geerbt,
.users-tracking-panel .hedged-more-item.ist-entzogen { cursor: pointer; }
.users-tracking-panel .hedged-more-item.ist-entzogen { border-color: var(--danger); }
.users-tracking-panel .hedged-more-item.ist-entzogen::after {
  content: '✕';
  color: var(--text-danger);
  visibility: visible;
}
.users-tracking-panel .hedged-more-item.ist-entzogen small { color: var(--text-danger); }

/* ── Rechte-Matrix (25.09.2026, Entwurf vom Nutzer freigegeben) ─────────────
   Je Recht eine schmale Spalte mit hochkant gestellter Beschriftung,
   gruppiert wie die Tab-Leiste; die Nutzerzelle kompakt (Name, darunter
   Punkt, Rolle, Status); Aktionen hinter „⋯“. Alle Spalten passen ab etwa
   1000 px ohne Querscrollen, darunter scrollt nur die Tabellenhülle. */
#usersView .users-suche {
  width: 220px;
  height: var(--space-8);
  margin: 0;
}
#usersView .users-matrix { width: 100%; }
#usersView .users-matrix th,
#usersView .users-matrix td { border-bottom-color: var(--border-1); }

/* Kopf: Gruppenzeile und hochkant gestellte Rechte. */
#usersView .users-matrix thead th { background: var(--surface-1); }
#usersView .users-matrix thead th.users-kopf-gruppe {
  padding: var(--space-2) var(--space-1) 2px;
  border-bottom: 0;
  text-align: center;
  vertical-align: bottom;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-3);
}
#usersView .users-matrix thead th.users-kopf-gruppe > span {
  display: block;
  margin: 0 var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--border-2);
  white-space: nowrap;
  cursor: default;
}
#usersView .users-matrix thead th.users-kopf-nutzer {
  width: 1%;
  padding: var(--space-2) var(--space-4) var(--space-3);
  vertical-align: bottom;
  text-align: left;
}
#usersView .users-kopf-sortierung { display: grid; gap: var(--space-1); justify-items: start; }
#usersView .users-kopf-weitere {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0 var(--space-1);
  white-space: nowrap;
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-3);
}
#usersView .users-kopf-weitere .users-kopf-trenner { margin: 0; }
#usersView .users-matrix thead th.users-perm-cell {
  position: relative;
  width: 34px;
  min-width: 34px;
  height: 132px;
  overflow: visible;
  padding: 0 !important;
  vertical-align: bottom;
  text-align: center;
  cursor: default;
}
/* Schräg nach rechts geneigt statt hochkant (Nutzerwunsch 26.09.2026):
   liest sich leichter. Die Beschriftung beginnt über der Mitte der Spalte
   und steigt nach rechts oben; die Kopfhöhe deckt die längste ab. */
#usersView .users-matrix thead th.users-perm-cell > span {
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  display: block;
  z-index: 1; /* über dem Hintergrund der Nachbarzellen rechts */
  width: max-content;
  max-width: none;
  overflow: visible;
  transform-origin: 0 50%;
  transform: translateX(-3px) rotate(-60deg);
  white-space: nowrap;
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  line-height: var(--lh-tight);
  text-transform: none;
  color: var(--text-2);
}
#usersView .users-matrix thead th.users-kopf-aktion { width: 44px; min-width: 44px; padding: 0; }

/* Kopf bleibt beim Scrollen unter der festen Reiterleiste stehen
   (26.09.2026). `--users-kopf-oben` setzt adminUsers.js aus der Höhe der
   Leiste. Sticky greift nur, wenn die Hülle kein Scroll-Container ist:
   ab 1100 px passt die Matrix ohne Querscrollen, darunter scrollt die
   Hülle quer wie bisher und der Kopf rollt mit. */
@media (min-width: 1100px) {
  #usersView .users-table-wrap { overflow: visible; }
  #usersView .users-matrix thead {
    position: sticky;
    top: var(--users-kopf-oben, 0px);
    z-index: 4;
  }
  #usersView .users-matrix thead tr.users-kopf-rechte > th { box-shadow: 0 1px 0 var(--border-2); }
}
#usersView .users-matrix .ist-gruppenstart { border-left: 1px solid var(--border-1); }

/* Spalten-Hervorhebung beim Überfahren oder Fokus (bindeUsersSpalten). */
#usersView .users-matrix thead th.users-perm-cell.ist-spalte { background: var(--surface-2); }
#usersView .users-matrix thead th.users-perm-cell.ist-spalte > span { color: var(--text-1); }
#usersView .users-matrix tbody td.users-perm-cell.ist-spalte { background: var(--surface-3); }

/* Körper. */
#usersView .users-matrix tbody td.users-perm-cell { width: 34px; padding: var(--space-2) 0 !important; }
#usersView .users-matrix tbody tr.users-row:hover > td,
#usersView .users-matrix tbody tr.users-row.menue-offen > td { background: var(--surface-2); }
#usersView .users-matrix tbody tr.users-row:hover > td.users-perm-cell.ist-spalte { background: var(--surface-3); }
#usersView .users-matrix td.users-nutzer-zelle {
  padding: var(--space-2) var(--space-4) !important;
  white-space: nowrap;
  text-align: left;
}
#usersView .users-matrix tbody tr.users-row-in-rolle > td.users-nutzer-zelle { padding-left: var(--space-6) !important; }
#usersView .users-matrix .users-name { font-weight: var(--fw-semibold); cursor: default; }
#usersView .users-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 2px;
  font-size: var(--fs-12);
  color: var(--text-3);
}
#usersView .users-meta .admin-presence-dot {
  width: 7px;
  height: 7px;
  margin: 0;
  border-radius: 50%;
  background: var(--success);
}
#usersView .users-meta .admin-presence-dot.ist-tab-offen { background: var(--text-3); }
#usersView .users-rolle-text { color: var(--text-2); }
#usersView .users-meta .admin-status {
  padding: 1px var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: normal;
  text-transform: none;
  background: var(--success-soft);
  color: var(--text-success);
}
#usersView .users-meta .admin-status.admin-status-active-offline { background: var(--surface-3); color: var(--text-2); }
#usersView .users-meta .admin-status.admin-status-pending { background: var(--warning-soft); color: var(--text-warning); }
#usersView .users-meta .admin-status.admin-status-denied,
#usersView .users-meta .admin-status.admin-status-blocked {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--text-danger);
}
#usersView .users-meta .admin-grace { margin: 0; }
#usersView .users-discord-kurz { cursor: default; border-radius: var(--radius-sm); }
/* Team-Login mit der PT-PIN (26.09.2026): verknüpftes PositionTracker-Konto. */
#usersView .users-meta .users-pt { color: var(--text-2); cursor: default; white-space: nowrap; }
#usersView .users-discord-kurz:focus-visible,
#usersView .users-legende-hinweis:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#usersView .users-meta .users-perm-status { display: inline; margin: 0; font-size: var(--fs-12); color: var(--text-2); }
#usersView .users-meta .users-perm-status:empty { display: none; }

/* Rollenzeilen hervorgehoben: ein Häkchen dort gilt für alle Nutzer der Rolle. */
#usersView .users-matrix tbody tr.users-rolle-zeile > td { background: var(--surface-2); }
#usersView .users-matrix .users-rolle-name { color: var(--text-warning); font-size: var(--fs-15); font-weight: var(--fw-semibold); margin: 0; }
#usersView .users-rolle-anzahl { margin-left: var(--space-2); font-size: var(--fs-12); color: var(--text-3); }

/* Admin: eine Zelle „Vollzugriff“ über alle Rechte-Spalten. */
#usersView .users-matrix tbody td.users-admin-alles { padding: var(--space-2) var(--space-3) !important; color: var(--text-3); }

/* Kästchen im Katalog-Stil (Toggle/Checkbox, aktiv = --check). Echte
   Checkboxen, nur anders gezeichnet: Tastatur, change-Ereignis und
   indeterminate bleiben, wie sie waren. .users-kbox zeichnet dasselbe in der
   Legende. */
#usersView .users-matrix input.users-perm-box,
#usersView .users-matrix input.users-rolle-box,
#usersView .users-matrix input.users-tracking-box,
#usersView .users-matrix input.users-pp-box,
#usersView .users-kbox {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--space-4);
  height: var(--space-4);
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--border-3);
  border-radius: calc(var(--radius-sm) / 2);
  background: transparent;
  vertical-align: middle;
  cursor: pointer;
  outline: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
#usersView .users-matrix input.users-perm-box:hover,
#usersView .users-matrix input.users-rolle-box:hover,
#usersView .users-matrix input.users-tracking-box:hover,
#usersView .users-matrix input.users-pp-box:hover { border-color: var(--text-2); }
#usersView .users-matrix input.users-perm-box:checked,
#usersView .users-matrix input.users-rolle-box:checked,
#usersView .users-matrix input.users-tracking-box:checked,
#usersView .users-matrix input.users-pp-box:checked,
#usersView .users-matrix input.users-tracking-box:indeterminate,
#usersView .users-matrix input.users-pp-box:indeterminate,
#usersView .users-kbox.ist-an,
#usersView .users-kbox.ist-teil {
  background: var(--check);
  border-color: var(--check);
}
#usersView .users-matrix input.users-perm-box:checked::after,
#usersView .users-matrix input.users-rolle-box:checked::after,
#usersView .users-matrix input.users-tracking-box:checked::after,
#usersView .users-matrix input.users-pp-box:checked::after,
#usersView .users-kbox.ist-an::after {
  content: '';
  width: var(--space-2);
  height: var(--space-1);
  border: 2px solid var(--surface-0);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
#usersView .users-matrix input.users-tracking-box:indeterminate::after,
#usersView .users-matrix input.users-pp-box:indeterminate::after,
#usersView .users-kbox.ist-teil::after {
  content: '';
  width: var(--space-2);
  height: 2px;
  border: 0;
  transform: none;
  background: var(--surface-0);
}
/* Über die Rolle: blasser. Entzogen: leer mit rotem Rand. */
#usersView .users-matrix .users-perm-rolle input[data-von-rolle="1"]:checked,
#usersView .users-matrix .users-perm-rolle input.users-tracking-box[data-von-rolle="1"]:indeterminate,
#usersView .users-matrix .users-perm-rolle input.users-pp-box[data-von-rolle="1"]:indeterminate,
#usersView .users-kbox.ist-rolle { opacity: 0.55; }
#usersView .users-matrix .users-perm-entzogen input.users-perm-box,
#usersView .users-matrix .users-perm-entzogen input.users-tracking-box,
#usersView .users-matrix .users-perm-entzogen input.users-pp-box,
#usersView .users-kbox.ist-weg {
  outline: none;
  border-color: var(--danger);
}
#usersView .users-matrix input.users-perm-box:focus-visible,
#usersView .users-matrix input.users-rolle-box:focus-visible,
#usersView .users-matrix input.users-tracking-box:focus-visible,
#usersView .users-matrix input.users-pp-box:focus-visible { box-shadow: var(--focus-ring); }
#usersView .users-matrix input.users-perm-box:disabled,
#usersView .users-matrix input.users-rolle-box:disabled { cursor: progress; opacity: 0.5; }

/* Tracking und PP: Kästchen und Pfeil in einer Spalte, etwas breiter. */
#usersView .users-matrix tbody td.users-tracking-zelle,
#usersView .users-matrix tbody td.users-pp-zelle { width: 48px; padding: var(--space-2) var(--space-1) !important; }
#usersView .users-matrix .users-tracking-wahl,
#usersView .users-matrix .users-pp-wahl { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
#usersView .users-matrix .users-tracking-pfeil,
#usersView .users-matrix .users-pp-pfeil { width: var(--space-4); height: var(--space-4); border-color: transparent; }
#usersView .users-matrix .users-tracking-pfeil:hover,
#usersView .users-matrix .users-pp-pfeil:hover,
#usersView .users-matrix .users-tracking-pfeil[aria-expanded="true"],
#usersView .users-matrix .users-pp-pfeil[aria-expanded="true"] { border-color: var(--border-3); }

/* Letzte Spalte: „⋯“. Bei offenen Anfragen gelb umrandet – dort warten Aktivieren und Ablehnen. */
#usersView .users-matrix td.users-aktion-zelle { width: 44px; padding: var(--space-2) var(--space-2) !important; text-align: center; }
#usersView .users-mehr {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-15);
  line-height: 1;
  cursor: pointer;
}
#usersView .users-mehr:hover,
#usersView .users-mehr[aria-expanded="true"] { background: var(--surface-3); border-color: var(--border-3); color: var(--text-1); }
#usersView .users-mehr:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#usersView .users-mehr:disabled { cursor: progress; opacity: 0.5; }
#usersView .users-mehr.ist-anfrage { border-color: var(--warning); color: var(--text-warning); }

/* Aktionsmenü (Katalog ContextMenu, Zeilenmenü am Knopf); hängt am <body>. */
.users-menue {
  position: fixed;
  z-index: var(--z-modal);
  box-sizing: border-box;
  min-width: 200px;
  max-width: 280px;
  padding: var(--space-2) 0;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  animation: users-menue-auf 120ms ease;
}
.users-menue[hidden] { display: none; }
@keyframes users-menue-auf {
  from { opacity: 0; transform: scale(.98) translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.users-menue-titel {
  padding: var(--space-2) var(--space-4) var(--space-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-3);
}
.users-menue-eintrag {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: transparent;
  color: var(--text-1);
  font: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  text-align: left;
  cursor: pointer;
}
.users-menue-eintrag:hover,
.users-menue-eintrag:focus-visible { background: var(--surface-3); outline: none; }
.users-menue-eintrag:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-color); }
.users-menue-symbol { display: inline-flex; flex-shrink: 0; width: var(--space-4); height: var(--space-4); color: var(--text-3); }
.users-menue-symbol svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.users-menue-text { flex: 1; min-width: 0; }
.users-menue-haken { color: var(--check); }
.users-menue-eintrag.ist-aktiv .users-menue-symbol { color: var(--text-1); }
.users-menue-eintrag.ist-gefahr,
.users-menue-eintrag.ist-gefahr .users-menue-symbol { color: var(--text-danger); }
.users-menue-eintrag.ist-gefahr:hover,
.users-menue-eintrag.ist-gefahr:focus-visible { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.users-menue-trenner { height: 1px; margin: var(--space-1) 0; background: var(--border-1); }
@media (prefers-reduced-motion: reduce) {
  .users-menue { animation: none; }
}

/* Legende unter der Tabelle. */
#usersView .users-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-12);
  color: var(--text-3);
}
#usersView .users-legende > span { display: inline-flex; align-items: center; gap: var(--space-2); }
#usersView .users-legende .users-kbox { cursor: default; }
#usersView .users-legende-hinweis { color: var(--text-2); cursor: default; }

@media (max-width: 760px) {
  #usersView .users-suche { width: 100%; }
}

/* Eigene Bots (30.09.2026): je Konto eine Zeile mit Mail-Feld und Speichern
   (modules/adminPpMails.js). */
#usersView .sb-pp { display: flex; flex-direction: column; gap: var(--space-3); }
#usersView .sb-pp-liste { display: flex; flex-direction: column; gap: var(--space-2); }
#usersView .sb-pp-zeile { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) auto minmax(0, 200px); align-items: center; gap: var(--space-2); }
#usersView .sb-pp-name { color: var(--text-1); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Muster-Zeile (01.10.2026): abgesetzt über den Konten. */
#usersView .sb-pp-muster { padding-bottom: var(--space-2); margin-bottom: var(--space-1); border-bottom: 1px solid var(--border-1); }
#usersView .sb-pp-muster .sb-pp-name { font-weight: var(--fw-semibold); }
#usersView .sb-pp-feld { min-width: 0; font: inherit; font-size: var(--fs-13); color: var(--text-1); background: var(--surface-0); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); }
#usersView .sb-pp-feld:focus { outline: none; border-color: var(--border-3); box-shadow: var(--focus-ring); }
#usersView .sb-pp-status { font-size: var(--fs-12); color: var(--text-3); overflow-wrap: anywhere; }
#usersView .sb-pp-status.ok { color: var(--text-success); }
#usersView .sb-pp-status.fehler { color: var(--text-danger); }
@media (max-width: 720px) { #usersView .sb-pp-zeile { grid-template-columns: minmax(0, 1fr) auto; } }

/* Servername als Knopf am Namen + Discord-Kärtchen (01.10.2026). */
#usersView .users-name-knopf {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 650;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  text-decoration: underline dotted transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-fast);
}
#usersView .users-name-knopf:hover,
#usersView .users-name-knopf[aria-expanded="true"] { text-decoration-color: var(--text-3); }
#usersView .users-name-knopf:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.users-menue.users-dkarte { min-width: 260px; max-width: 340px; }
.users-dkarte-zeile {
  display: grid;
  grid-template-columns: 96px 1fr var(--space-4);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-13);
}
.users-dkarte-label { color: var(--text-3); font-size: var(--fs-12); }
.users-dkarte-wert { color: var(--text-1); font-family: var(--font-mono); font-size: var(--fs-13); overflow-wrap: anywhere; user-select: text; }
.users-dkarte-symbol { display: inline-flex; width: var(--space-4); height: var(--space-4); color: var(--text-3); }
.users-dkarte-symbol svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.users-dkarte-zeile.ist-kopiert .users-dkarte-symbol { color: var(--text-success); }

/* Trading (01.10.2026): nur einzeln je Nutzer vergebbar – in der Rollenzeile
   steht statt eines Kästchens ein gedämpfter Strich (adminUsers.js nurEinzeln). */
#usersView .users-nur-einzeln { color: var(--text-2); cursor: help; }