/**
 * Admin-Bereich — mobile-first Layout, Karten statt Tabellen, Touch-Formulare.
 * Ergänzt pulse.css; Stage/Presenter bleiben unverändert.
 */

/* ------------------------------------------------------------------ */
/* Shell — alle Admin-Views (#/admin…)                                 */
/* ------------------------------------------------------------------ */

body.admin-area {
  overflow-x: hidden;
}

.pulse-admin-shell,
body.admin-area .view:not([hidden]) {
  box-sizing: border-box;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding: max(0.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1.25rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

body.admin-area .view:not([hidden]) {
  padding-top: 0.5rem;
}

.events-page.pulse-admin-shell {
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* ------------------------------------------------------------------ */
/* Admin-Chrome — kompakt auf Smartphones                              */
/* ------------------------------------------------------------------ */

@media (max-width: 47.99rem) {
  .admin-chrome {
    padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));
  }

  /*
    M-001 / UX-M-OBS-01: Tools nicht auf volle zweite Zeile zwingen —
    sonst fressen Nav-Chrome + Sprachflags den ersten Viewport.
    Eine kompakte Zeile: Titel | Menü | Tools (schrumpfbar).
  */
  .admin-chrome-bar {
    flex-wrap: nowrap;
    gap: 6px 8px;
    align-items: center;
  }

  .admin-chrome-tools {
    order: unset;
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 4px;
    margin-left: 0;
  }

  .admin-chrome-tools .lang-switch {
    scale: 0.85;
    transform-origin: right center;
  }

  .admin-chrome-tools .icon-btn,
  .admin-chrome-tools .btn {
    min-height: 40px;
    min-width: 40px;
  }

  .admin-nav-toggle {
    flex: 0 0 auto;
    min-height: 40px;
    padding-inline: 10px;
  }
}

/* M-001: Form-Chrome / Karten dürfen auf schmalen Viewports nicht horizontal pressen. */
.pulse-admin-shell .admin-form-sections,
.pulse-admin-shell .admin-form-section,
.pulse-admin-shell .pulse-card,
.pulse-admin-shell .panel {
  min-width: 0;
  max-width: 100%;
}

.pulse-admin-shell .admin-form-section input,
.pulse-admin-shell .admin-form-section select,
.pulse-admin-shell .admin-form-section textarea {
  max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* Session-Hub — Formular + Sidebar                                    */
/* ------------------------------------------------------------------ */

.pulse-admin-shell .admin-sessions-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.pulse-admin-shell .admin-sessions-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

@media (min-width: 56rem) {
  .pulse-admin-shell .admin-sessions-layout {
    grid-template-columns: minmax(0, 1fr) min(17rem, 100%);
  }
}


.pulse-admin-section,
.pulse-admin-shell .admin-form-section {
  border-radius: var(--radius-pulse-sm, 0.75rem);
  border: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
  background: var(--bg-soft);
  padding: 12px 14px;
}

/* Eingabefelder — Touch-Höhe, Labels oben */
.pulse-admin-shell .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.pulse-admin-shell .field select,
.pulse-admin-shell .field textarea,
.pulse-admin-shell .users-toolbar input,
.pulse-admin-shell .users-toolbar select {
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-pulse-sm, 0.75rem);
  border: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
  background: var(--bg-elev);
  color: var(--ink);
  font-size: 1rem;
}

.pulse-admin-shell .field textarea {
  min-height: 5rem;
  resize: vertical;
}

/* Primäre Aktionen — sticky unten auf schmalen Screens */
@media (max-width: 47.99rem) {
  .pulse-admin-shell .admin-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin-inline: -14px;
    padding: 12px 14px max(12px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
  }

  .pulse-admin-shell .admin-form-actions .btn.primary,
  .pulse-admin-shell .admin-form-actions .pulse-btn-primary {
    width: 100%;
    min-height: 48px;
  }
}

.pulse-admin-shell .admin-sessions-sidebar {
  position: static;
  top: auto;
}

.pulse-admin-shell .recent-list--compact a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ------------------------------------------------------------------ */
/* Events / Benutzer — Toolbar & Kopf                                  */
/* ------------------------------------------------------------------ */

.admin-page-head .btn.primary,
.admin-page-head .pulse-btn-primary {
  min-height: 44px;
  align-self: flex-start;
}

.users-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

@media (min-width: 40rem) {
  .users-toolbar {
    grid-template-columns: 1fr auto auto;
    align-items: end;
  }
}

/* Session-Deck — Folienzeilen mobil */
@media (max-width: 640px) {

  .session-slide-tools {
    grid-column: 1 / -1;
    margin-left: 0;
    justify-content: flex-start;
  }

  .session-slide-tools .btn {
    min-height: 44px;
  }
}

/* ------------------------------------------------------------------ */
/* Dialoge am Handy — fast volle Breite, 16 px Rand, mittig (Lage: styles-dialogs.css, „Etappe 9 · Dialoge zentriert“) */
/* ------------------------------------------------------------------ */

@media (max-width: 640px) {
  .admin-dialog,
  dialog.modal,
  .admin-login-dialog {
    max-width: calc(100vw - 32px);
    width: calc(100vw - 32px);
    height: auto;
    max-height: calc(100dvh - 32px);
    margin: auto;
    border-radius: var(--ui-radius-xl, 16px);
    padding: 16px;
  }

  .admin-dialog .modal-actions,
  dialog.modal .modal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .admin-dialog .modal-actions .btn,
  dialog.modal .modal-actions .btn {
    width: 100%;
    min-height: 48px;
  }
}

/* Branding / Einstellungsseiten */
body.admin-area .branding-page,
body.admin-area .legal-page.panel {
  max-width: 48rem;
}

body.admin-area .branding-page .field input:not([type="checkbox"]):not([type="radio"]),
body.admin-area .branding-page .field select,
body.admin-area .branding-page .field textarea {
  min-height: 44px;
  width: 100%;
}

/* Teams — Karten und Mitglieder mobil */
.pulse-admin-shell .teams-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 30rem) {
  .pulse-admin-shell .teams-grid {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  }
}

.pulse-admin-shell .team-card-btn {
  min-height: 44px;
  padding: 4px;
}

.pulse-admin-shell .add-member-row {
  flex-direction: column;
  align-items: stretch;
}

.pulse-admin-shell .add-member-row select,
.pulse-admin-shell .add-member-row .btn {
  width: 100%;
  min-height: 44px;
}

@media (max-width: 640px) {
  .pulse-admin-shell .member-item {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }

  .pulse-admin-shell .member-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .pulse-admin-shell .member-actions select.pulse-input {
    width: 100%;
  }

  .pulse-admin-shell .member-actions .btn {
    width: 100%;
    min-height: 44px;
  }
}

/* Backups / Updates — Panels */
.pulse-admin-shell .backups-panel,
.pulse-admin-shell .backup-list-wrap {
  margin-bottom: 1rem;
}

@media (max-width: 640px) {
  .pulse-admin-shell .update-version-current {
    font-size: 1.5rem;
  }

  body.admin-area .branding-page form.panel {
    padding: 14px;
  }
}

/* ================================================================== */
/* Etappe 9 · Kopf, Startfläche, Navigation                            */
/* (Admin-Look, Task 5; Bausteine und Token in admin-look.css)         */
/* ================================================================== */
/*
 * Reihenfolge der Ebenen (z-index) im Adminbereich, von unten nach oben:
 *     4   klebende Aktionsleiste am unteren Rand (.admin-form-actions, nur Handy; oben nichts darunter)
 *    15   Menü ⋯ einer Zeile der Sessionliste (liegt unter der Kopfleiste, wird beim Scrollen von ihr verdeckt)
 *    20   Kopfleiste der Seite (.admin-page-head__bar, klebt unter der Admin-Leiste; auf der Sessionseite nur ohne Seitenleiste und ab Tablet)
 *    40   Hilfe-Knopf „?“ (#help-fab, fest unten rechts) und Hinweisleiste unten (.deck-toast)
 *    45   Admin-Leiste (.admin-chrome, klebt ganz oben; trägt Seitenleiste 31, Schublade 50 und Schleier 40 in ihrem eigenen Kontext).
 *         Früher 30: dann lag der Hilfe-Knopf über der geöffneten Schublade.
 *   400   Seitenleiste „Frage bearbeiten“ als Vollbild (unter 1100 px, events.css); ab 1100 px klebt sie in der rechten Spalte
 *         unterhalb der Admin-Leiste (top 4 rem); die Kopfleiste der Sessionseite klebt dann nicht, es gibt keine Überlagerung.
 * Die Admin-Leiste hat eine feste Höhe (--admin-chrome-height = 8 px Rand + 44 px Konto-Knopf + 8 px Rand + 1 px Linie, auch am Handy);
 * die Kopfleiste klebt genau darunter. test-admin-page-heads-headless prüft, dass der Wert stimmt.
 * Regeln stehen unter `body.admin-area`, weil admin-mobile.css vor den components-*- und styles-*-Teildateien lädt.
 */

body.admin-area {
  --admin-chrome-height: 61px;
  /* Platz, den Admin-Leiste und Kopfleiste (mit Zurück-Link bis etwa 96 px) oben verdecken: Fokus und Sprungziele landen darunter (WCAG 2.4.11) */
  --admin-sticky-offset: calc(var(--admin-chrome-height) + 6rem);
}
/* Die Seite scrollt im .app (styles-layout.css), bei Bedarf im Dokument: beide bekommen den Abstand */
body.admin-area,
body.admin-area .app,
html:has(body.admin-area) {
  scroll-padding-top: var(--admin-sticky-offset);
}

body.admin-area .admin-chrome {
  z-index: 45;
  box-sizing: border-box;
  min-height: var(--admin-chrome-height);
  /* Kein backdrop-filter: er würde die feste Seitenleiste und die Schublade in der Leiste einfangen (fixed richtet sich dann nach ihr). */
  background: var(--ui-ground);
  border-bottom: 1px solid var(--ui-separator);
}

/* ---------- Kopf: klebende, milchige Kopfleiste mit großem Titel ---------- */

/* Der <header> ist nur noch Träger: Kopfleiste, Meta-Zeile und Kurztext liegen direkt in der Seite, damit die Leiste über die ganze Seite klebt. */
body.admin-area .admin-page-head {
  display: contents;
}
body.admin-area .admin-page-head::after {
  content: "";
  display: block;
  height: 1.25rem;
}

body.admin-area .admin-page-head__bar.ui-topbar {
  position: sticky;
  top: var(--admin-chrome-height);
  z-index: 20;
  padding: 12px 0;
  background: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Milchige Fläche reicht bis zum Rand des Fensters (die Seite hat eine Höchstbreite und Ränder); links unter die Seitenleiste, rechts bis zum Rand. */
body.admin-area .admin-page-head__bar.ui-topbar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -50vw;
  background: var(--ui-bar);
  -webkit-backdrop-filter: var(--ui-blur);
  backdrop-filter: var(--ui-blur);
  border-bottom: 1px solid var(--ui-separator);
  pointer-events: none;
}
/* Mit geöffneter Seitenleiste „Frage bearbeiten“ ist die linke Spalte schmal: Titel, Umbenennen und drei Aktionen würden die Leiste sehr hoch machen,
 * sie klebt dann nicht. Die Seitenleiste selbst klebt ab 1100 px unter der Admin-Leiste (events.css) und überdeckt nichts. */
body.admin-area .has-slide-panel .admin-page-head__bar.ui-topbar {
  position: static;
}
body.admin-area .has-slide-panel .admin-page-head__bar.ui-topbar::before {
  display: none;
}

body.admin-area .admin-page-head__main {
  flex: 1 1 14rem;
  gap: 2px;
}
body.admin-area .admin-page-head__title.ui-large-title {
  font: var(--ui-large-title);
  letter-spacing: var(--ui-tracking-title);
  color: var(--ui-label);
  overflow-wrap: anywhere;
}
body.admin-area .admin-page-head__title .btn {
  vertical-align: middle;
  margin-left: 0.5rem;
  letter-spacing: normal;
}
body.admin-area .admin-page-head__back {
  font: var(--ui-subhead);
  color: var(--ui-tint-ink);
  min-height: 24px;
}
body.admin-area .admin-page-head__meta {
  margin-top: 4px;
}
body.admin-area .admin-page-head__lead {
  margin-top: 8px;
  font: var(--ui-callout);
  color: var(--ui-label-2);
}
body.admin-area .admin-page-head__meta + .admin-page-head__lead {
  margin-top: 6px;
}

/* Aktionen rechts in der Kopfleiste: Knöpfe im Look (Hauptaktion in der Tönung, übrige leise) */
body.admin-area .admin-page-head__actions {
  justify-content: flex-end;
}
body.admin-area .admin-page-head__actions .btn,
body.admin-area .admin-page-head__actions .pulse-btn-primary {
  min-height: var(--ui-control);
  padding: 0 18px;
  border: 0;
  border-radius: var(--ui-radius-m);
  font: 600 15px/1 var(--ui-font);
  box-shadow: none;
}
body.admin-area .admin-page-head__actions .btn--sm {
  min-height: var(--ui-control-s);
  padding: 0 12px;
  font-size: 14px;
}
body.admin-area .admin-page-head__actions .btn.primary,
body.admin-area .admin-page-head__actions .pulse-btn-primary {
  background: var(--ui-tint);
  color: var(--ui-on-tint);
}
body.admin-area .admin-page-head__actions .btn.primary:hover:not(:disabled),
body.admin-area .admin-page-head__actions .pulse-btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-tint) 88%, #000000);
}
body.admin-area .admin-page-head__actions .btn.ghost {
  background: var(--ui-tint-soft);
  color: var(--ui-tint-ink);
}
body.admin-area .admin-page-head__actions .btn.ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-tint-soft) 80%, var(--ui-tint));
}

/* Öffentliche Hilfe (kein Adminbereich): keine klebende Leiste, nur das Gerüst */
body:not(.admin-area) .admin-page-head__bar.ui-topbar {
  position: static;
  padding: 0;
  background: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Handy: Rand 16 px, Titel 28 px; Kopf mit mehreren Aktionen (Sessionseite) klebt nicht — sonst frisst er den Bildschirm */
@media (max-width: 47.99rem) {
  body.admin-area .admin-page-head__bar.ui-topbar {
    padding: 8px 0;
    gap: 8px 12px;
  }
  body.admin-area .admin-page-head__title.ui-large-title {
    font-size: 28px;
  }
  /* Titel und Hauptaktion bleiben in einer Zeile, solange sie passen */
  body.admin-area .admin-page-head__main {
    flex: 1 1 8rem;
  }
  body.admin-area .admin-page-head__actions .btn {
    white-space: nowrap;
  }
  body.admin-area .admin-page-head__bar.ui-topbar:has(.session-deck-toolbar) {
    position: static;
  }
  body.admin-area .admin-page-head__bar.ui-topbar:has(.session-deck-toolbar)::before {
    display: none;
  }
}

/* Auf „Neue Session“ steht die Hauptaktion der Startfläche nicht im Kopf */
#view-admin[data-admin-mode="new-session"] .admin-page-head__actions {
  display: none;
}

/* ---------- Startfläche: Sessionliste als gruppierte Liste ---------- */

/* Die Liste braucht keine Karte um sich: Gruppe und Suchfeld tragen den Look */
body.admin-area #admin-sessions-list.sessions-list {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.admin-area #admin-sessions-list .sessions-list__controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ui-space-2);
  margin: 0 0 var(--ui-space-2);
}
body.admin-area #admin-sessions-list .sessions-list__search.ui-search {
  width: 100%;
  box-sizing: border-box;
}
body.admin-area #admin-sessions-list .sessions-list__search svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
body.admin-area #admin-sessions-list .sessions-list__search input {
  width: auto;
  min-height: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: var(--ui-callout);
  color: var(--ui-label);
}
body.admin-area #admin-sessions-list .sessions-list__search input::placeholder {
  color: var(--ui-label-2);
}
body.admin-area #admin-sessions-list .sessions-list__search:focus-within {
  outline: 3px solid var(--focus, #0052cc);
  outline-offset: 2px;
}
body.admin-area #admin-sessions-list .sessions-list__search input:focus-visible {
  outline: none;
  box-shadow: none;
}
body.admin-area #admin-sessions-list .sessions-list__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}
/* Auswahl als Pille mit Beschriftung davor */
body.admin-area #admin-sessions-list .sessions-list__select {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-width: 0;
  height: 36px;
  padding: 0 var(--ui-space-3);
  border-radius: var(--ui-radius-m);
  background: var(--ui-fill);
  font: var(--ui-subhead);
}
body.admin-area #admin-sessions-list .sessions-list__select > span {
  margin: 0;
  color: var(--ui-label-2);
  font: var(--ui-footnote);
  white-space: nowrap;
}
body.admin-area #admin-sessions-list .sessions-list__select select {
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-s);
  background-color: transparent;
  box-shadow: none;
  font: var(--ui-subhead);
  color: var(--ui-label);
  cursor: pointer;
}
body.admin-area #admin-sessions-list .sessions-list__select:focus-within {
  outline: 3px solid var(--focus, #0052cc);
  outline-offset: 2px;
}
body.admin-area #admin-sessions-list .sessions-list__select select:focus-visible {
  outline: none;
  box-shadow: none;
}
body.admin-area #admin-sessions-list .sessions-list__count {
  margin: 0 0 var(--ui-space-2) var(--ui-space-4);
  font: var(--ui-footnote);
  color: var(--ui-label-2);
}
body.admin-area #admin-sessions-list .sessions-list__msg {
  margin: var(--ui-space-2) var(--ui-space-4);
}

/* Gruppe */
body.admin-area #admin-sessions-list .sessions-list__rows.ui-group {
  display: block;
  gap: 0;
  /* Das Menü ⋯ ragt aus der Gruppe heraus: nichts abschneiden; die Ecken runden Erste und Letzte Zeile selbst */
  overflow: visible;
}
body.admin-area #admin-sessions-list .sessions-list__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  min-height: 64px;
  padding: var(--ui-space-3) var(--ui-space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.admin-area #admin-sessions-list .sessions-list__row:first-child {
  border-top-left-radius: var(--ui-radius-l);
  border-top-right-radius: var(--ui-radius-l);
}
body.admin-area #admin-sessions-list .sessions-list__row:last-child {
  border-bottom-left-radius: var(--ui-radius-l);
  border-bottom-right-radius: var(--ui-radius-l);
}
body.admin-area #admin-sessions-list .sessions-list__row + .sessions-list__row {
  margin-left: 0;
  padding-left: var(--ui-space-4);
  border-top: 0;
}
/* Trennlinie ab dem Symbolfeld (nicht über die ganze Breite) */
body.admin-area #admin-sessions-list .sessions-list__row + .sessions-list__row::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--ui-space-4);
  right: 0;
  height: 1px;
  background: var(--ui-separator);
}
body.admin-area #admin-sessions-list .sessions-list__row:hover {
  background: var(--ui-surface-2);
}
body.admin-area #admin-sessions-list .sessions-list__row.is-archived {
  background: transparent;
}
body.admin-area #admin-sessions-list .sessions-list__row.is-archived:hover {
  background: var(--ui-surface-2);
}
body.admin-area #admin-sessions-list .sessions-list__icon {
  width: 40px;
  height: 40px;
}
body.admin-area #admin-sessions-list .sessions-list__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.admin-area #admin-sessions-list .sessions-list__row.is-closed .sessions-list__icon,
body.admin-area #admin-sessions-list .sessions-list__row.is-archived .sessions-list__icon {
  background: var(--ui-fill);
  color: var(--ui-label-2);
}
body.admin-area #admin-sessions-list .sessions-list__row.is-open .sessions-list__icon {
  background: var(--ui-green-soft);
  color: var(--ui-green-ink);
}
body.admin-area #admin-sessions-list .sessions-list__main {
  flex: 1 1 0;
  min-width: 0;
}
body.admin-area #admin-sessions-list .sessions-list__head {
  align-items: center;
  gap: 2px var(--ui-space-2);
}
body.admin-area #admin-sessions-list .sessions-list__title {
  font: var(--ui-headline);
  color: var(--ui-label);
}
/* Der Titel-Link öffnet die ganze Zeile (Fläche über die Zeile gezogen); Aktionen und Chevron liegen darüber */
body.admin-area #admin-sessions-list .sessions-list__title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
body.admin-area #admin-sessions-list .sessions-list__title:hover,
body.admin-area #admin-sessions-list .sessions-list__title:focus-visible {
  text-decoration: none;
}
body.admin-area #admin-sessions-list .sessions-list__row:has(.sessions-list__title:focus-visible) {
  outline: 3px solid var(--focus, #0052cc);
  outline-offset: -3px;
}
body.admin-area #admin-sessions-list .sessions-list__title:focus-visible {
  outline: none;
}
body.admin-area #admin-sessions-list .sessions-list__when {
  margin: 2px 0 0;
  font: var(--ui-footnote);
  font-weight: 600;
  color: var(--ui-tint-ink);
}
body.admin-area #admin-sessions-list .sessions-list__meta,
body.admin-area #admin-sessions-list .sessions-list__delete {
  margin: 2px 0 0;
  font: var(--ui-footnote);
  color: var(--ui-label-2);
}
body.admin-area #admin-sessions-list .sessions-list__delete.is-warn {
  color: var(--ui-red-ink);
  font-weight: 600;
}
/* Chip: Farbe und Form aus dem Baustein, die alten Rahmen entfallen */
body.admin-area #admin-sessions-list .sessions-list__chip.ui-chip {
  padding: 3px 9px;
  border: 0;
  background: var(--ui-fill);
  color: var(--ui-label);
  font: var(--ui-caption);
}
body.admin-area #admin-sessions-list .sessions-list__chip.ui-chip--ok {
  background: var(--ui-green-soft);
  color: var(--ui-green-ink);
}
body.admin-area #admin-sessions-list .sessions-list__chip.ui-chip--tint {
  background: var(--ui-tint-soft);
  color: var(--ui-tint-ink);
}
body.admin-area #admin-sessions-list .sessions-list__chip.is-archived {
  color: var(--ui-label-2);
}
body.admin-area #admin-sessions-list .sessions-list__actions {
  position: relative;
  z-index: 1;
  flex: none;
}
/* Jede Aktionsgruppe ist ein eigener Stapelkontext (Ebene 1): die Zeile mit geöffnetem Menü ⋯ kommt über die Folgezeilen,
 * sonst malen deren Knöpfe über die Menüeinträge. Das Menü bleibt dabei unter der Kopfleiste (2 < 20). */
body.admin-area #admin-sessions-list .sessions-list__row:has(.sessions-list__more[open]) .sessions-list__actions {
  z-index: 2;
}
body.admin-area #admin-sessions-list .sessions-list__actions .btn,
body.admin-area #admin-sessions-list .sessions-list__msg .btn,
body.admin-area #admin-sessions-list > p .btn {
  min-height: var(--ui-control-s);
  min-width: var(--ui-control-s);
  padding: 0 12px;
  border: 0;
  border-radius: var(--ui-radius-s);
  font: 600 14px/1 var(--ui-font);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.admin-area #admin-sessions-list .sessions-list__actions .ui-btn--quiet,
body.admin-area #admin-sessions-list .ui-btn--quiet {
  background: var(--ui-tint-soft);
  color: var(--ui-tint-ink);
}
body.admin-area #admin-sessions-list .btn.ghost {
  background: transparent;
  color: var(--ui-tint-ink);
}
body.admin-area #admin-sessions-list .btn.ghost:hover:not(:disabled) {
  background: var(--ui-fill);
}
body.admin-area #admin-sessions-list [data-sl-more] {
  background: var(--ui-tint-soft);
  color: var(--ui-tint-ink);
}
body.admin-area #admin-sessions-list .sessions-list__chevron {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--ui-label-3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
/* Menü ⋯: unter der Kopfleiste (15 < 20), Look des Baustein-Menüs */
body.admin-area #admin-sessions-list .sessions-list__menu {
  z-index: 15;
  border: 1px solid var(--ui-separator);
  border-radius: var(--ui-radius-m);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-pop);
}
body.admin-area #admin-sessions-list .sessions-list__menu-item {
  border-radius: var(--ui-radius-s);
  font: var(--ui-subhead);
  color: var(--ui-label);
}
body.admin-area #admin-sessions-list .sessions-list__menu-item:hover,
body.admin-area #admin-sessions-list .sessions-list__menu-item:focus-visible {
  background: var(--ui-fill);
}
body.admin-area #admin-sessions-list .sessions-list__menu-item.is-danger {
  color: var(--ui-red-ink);
}

/* Handy: Aktionen wandern unter den Text (eingerückt unter das Symbolfeld), das Chevron bleibt rechts oben */
@media (max-width: 40rem) {
  body.admin-area #admin-sessions-list .sessions-list__row {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: var(--ui-space-2);
  }
  body.admin-area #admin-sessions-list .sessions-list__chevron {
    align-self: center;
  }
  body.admin-area #admin-sessions-list .sessions-list__actions {
    order: 3;
    flex: 1 1 100%;
    display: flex;
    justify-content: flex-start;
    padding-left: calc(40px + var(--ui-space-3));
  }
  body.admin-area #admin-sessions-list .sessions-list__filters .sessions-list__select {
    flex: 1 1 auto;
  }
  body.admin-area #admin-sessions-list .sessions-list__menu {
    left: 0;
    right: auto;
  }
}

/* ---------- Startfläche: Rundgang, Nutzungsdaten, kommende Sessions, Checkliste, Status ---------- */

body.admin-area #sessions-hub-dashboard .sessions-hub-dashboard__cta-only {
  margin: 0;
}
body.admin-area #sessions-hub-dashboard .sessions-hub-dashboard__types.ui-btn {
  min-height: var(--ui-control);
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: var(--ui-radius-m);
  background: var(--ui-tint-soft);
  color: var(--ui-tint-ink);
  font: 600 15px/1 var(--ui-font);
}
body.admin-area #sessions-hub-dashboard .sessions-hub-dashboard__types.ui-btn:hover {
  background: color-mix(in srgb, var(--ui-tint-soft) 80%, var(--ui-tint));
}

/* Kein getönter Kasten mehr: jeder Abschnitt ist eine Gruppe mit Titel darüber */
body.admin-area #admin-workspace-hub.admin-workspace-hub {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.admin-area #admin-workspace-hub .admin-form-section__title {
  margin: 0 0 var(--ui-space-2) var(--ui-space-4);
  font: var(--ui-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-label-2);
}
body.admin-area #admin-workspace-hub .admin-workspace-hub__stats {
  gap: var(--ui-space-2);
}
body.admin-area #admin-workspace-hub .admin-hub-stat {
  padding: var(--ui-space-3) var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-l);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}
body.admin-area #admin-workspace-hub .admin-hub-stat__value {
  font: var(--ui-title-1);
  color: var(--ui-tint-ink);
}
body.admin-area #admin-workspace-hub .admin-hub-stat__label {
  font: var(--ui-footnote);
  color: var(--ui-label-2);
}
body.admin-area #admin-workspace-hub .admin-hub-funnel {
  margin: calc(-1 * var(--ui-space-2)) 0 var(--ui-space-4) var(--ui-space-4);
  font: var(--ui-footnote);
  color: var(--ui-label-2);
}
/* Kommende Sessions und Checkliste als gruppierte Liste */
body.admin-area #admin-workspace-hub .admin-hub-upcoming,
body.admin-area #admin-workspace-hub .admin-setup-checklist {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--ui-radius-l);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}
body.admin-area #admin-workspace-hub .admin-hub-upcoming li,
body.admin-area #admin-workspace-hub .admin-setup-checklist li {
  min-height: 48px;
  padding: var(--ui-space-2) var(--ui-space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  font: var(--ui-body);
  color: var(--ui-label);
}
body.admin-area #admin-workspace-hub .admin-hub-upcoming li + li,
body.admin-area #admin-workspace-hub .admin-setup-checklist li + li {
  margin-left: var(--ui-space-4);
  padding-left: 0;
  border-top: 1px solid var(--ui-separator);
}
body.admin-area #admin-workspace-hub .admin-hub-upcoming__when {
  min-width: 0;
  font: var(--ui-footnote);
  font-weight: 600;
  color: var(--ui-label-2);
}
body.admin-area #admin-workspace-hub .admin-hub-upcoming__title {
  font: var(--ui-headline);
  color: var(--ui-tint-ink);
  text-decoration: none;
}
body.admin-area #admin-workspace-hub .admin-hub-upcoming__title:hover {
  text-decoration: underline;
}
body.admin-area #admin-workspace-hub .admin-setup-check {
  border-color: var(--ui-label-3);
}
body.admin-area #admin-workspace-hub .admin-setup-check.is-done {
  border-color: var(--ui-green);
  background: var(--ui-green);
  color: #ffffff;
}
body.admin-area #admin-workspace-hub .admin-setup-label {
  font: var(--ui-body);
}
body.admin-area #admin-workspace-hub a.admin-setup-label {
  color: var(--ui-tint-ink);
}
body.admin-area #admin-workspace-hub .admin-workspace-hub__checklist > .btn {
  min-height: var(--ui-control-s);
  margin-top: var(--ui-space-2);
  padding: 0 12px;
  border: 0;
  border-radius: var(--ui-radius-s);
  background: transparent;
  color: var(--ui-tint-ink);
  font: 600 14px/1 var(--ui-font);
}
body.admin-area #admin-workspace-hub .admin-workspace-hub__checklist > .btn:hover:not(:disabled) {
  background: var(--ui-fill);
}
body.admin-area #admin-workspace-hub .admin-hub-warnings {
  padding-left: var(--ui-space-4);
  font: var(--ui-callout);
  list-style-position: inside;
}
body.admin-area #admin-workspace-hub .admin-hub-warnings a {
  color: var(--ui-tint-ink);
}

/* „Weiterarbeiten“ bleibt Karte (man fasst sie an): Fläche, Radius und Schrift aus dem Look */
body.admin-area #recent-sessions.pulse-card {
  border: 0;
  border-radius: var(--ui-radius-l);
  box-shadow: var(--ui-shadow-card);
}
body.admin-area #recent-sessions .admin-form-section__title {
  margin: 0 0 var(--ui-space-2);
  font: var(--ui-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-label-2);
}
body.admin-area .recent-list--continue .recent-item {
  border-bottom-color: var(--ui-separator);
}
body.admin-area .recent-list--continue .recent-item__meta strong {
  font: var(--ui-headline);
  letter-spacing: 0.04em;
}
body.admin-area .recent-list--continue .recent-item__actions .btn {
  min-height: var(--ui-control-s);
  padding: 0 12px;
  border: 0;
  border-radius: var(--ui-radius-s);
  font: 600 14px/1 var(--ui-font);
}
body.admin-area .recent-list--continue .recent-item__actions .ui-btn--quiet {
  background: var(--ui-tint-soft);
  color: var(--ui-tint-ink);
}
body.admin-area .recent-list--continue .recent-item__actions .ui-btn--ghost {
  background: transparent;
  color: var(--ui-tint-ink);
}

/* ---------- Navigation: Seitenleiste (ab 68,75 rem) und Schublade (Handy) ---------- */
/* Beide zeigen dieselbe Liste (.admin-nav): Bereichstitel in Kleinschrift darüber, Zeilen 44 px, Symbol in der Tönung,
 * die aktive Seite als Fläche in --ui-tint-soft (Farbe nie allein: aria-current bleibt, die Schrift wird fett). Keine Tableiste (L3). */
body.admin-area .admin-nav {
  gap: var(--ui-space-2);
}
body.admin-area .admin-nav-section__title,
body.admin-area .admin-nav-section__toggle {
  padding: var(--ui-space-1) var(--ui-space-3);
  font: var(--ui-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-label-2);
}
body.admin-area .admin-nav-section__toggle {
  min-height: 32px;
  border-radius: var(--ui-radius-s);
}
body.admin-area .admin-nav-section__toggle:hover,
body.admin-area .admin-nav-section__toggle:focus-visible {
  background: var(--ui-fill);
  color: var(--ui-label);
}
body.admin-area .admin-nav-section__toggle:focus-visible,
body.admin-area .admin-nav-link:focus-visible {
  outline: 3px solid var(--focus, #0052cc);
  outline-offset: -3px;
}
body.admin-area .admin-nav-section__chevron {
  stroke: var(--ui-label-3);
}
body.admin-area .admin-nav-link {
  gap: var(--ui-space-3);
  min-height: var(--ui-control);
  padding: 0 var(--ui-space-3);
  border-radius: var(--ui-radius-s);
  font: var(--ui-callout);
  font-weight: 500;
  color: var(--ui-label);
}
body.admin-area .admin-nav-link svg {
  width: 22px;
  height: 22px;
  stroke: var(--ui-label-2);
}
body.admin-area .admin-nav-link:hover {
  background: var(--ui-fill);
}
body.admin-area .admin-nav-link[aria-current="page"],
body.admin-area .admin-nav-link.is-active {
  background: var(--ui-tint-soft);
  color: var(--ui-tint-ink);
  box-shadow: none;
  font-weight: 600;
}
body.admin-area .admin-nav-link[aria-current="page"] svg,
body.admin-area .admin-nav-link.is-active svg {
  stroke: var(--ui-tint-ink);
}

/* Seitenleiste: Marke, Rücksprung, Feedback und Einklappen leise */
body.admin-area .admin-sidebar__title {
  font: var(--ui-headline);
  letter-spacing: var(--ui-tracking-title);
  color: var(--ui-label);
}
body.admin-area .admin-sidebar__home {
  font: var(--ui-footnote);
  color: var(--ui-label-2);
}
body.admin-area .admin-sidebar__feedback {
  min-height: var(--ui-control);
  border-radius: var(--ui-radius-s);
  font: var(--ui-callout);
  font-weight: 500;
  color: var(--ui-label);
}
body.admin-area .admin-sidebar__feedback:hover,
body.admin-area .admin-sidebar__feedback:focus-visible {
  background: var(--ui-fill);
}
body.admin-area .admin-sidebar__collapse {
  border: 0;
  border-radius: var(--ui-radius-s);
  background: var(--ui-fill);
  color: var(--ui-label-2);
}

/* Handy: Knopf „Menü“ in der Admin-Leiste und die Schublade */
body.admin-area .admin-nav-toggle {
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-m);
  background: var(--ui-tint-soft);
  color: var(--ui-tint-ink);
  font: 600 15px/1 var(--ui-font);
}
body.admin-area .admin-chrome-current {
  font: var(--ui-headline);
  color: var(--ui-label);
}
body.admin-area .admin-user-menu__trigger {
  border: 0;
  border-radius: var(--ui-radius-m);
  background: var(--ui-tint-soft);
  color: var(--ui-tint-ink);
  font: 600 15px/1 var(--ui-font);
}
body.admin-area .admin-nav-drawer.pulse-drawer-panel {
  padding: var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-xl) 0 0 var(--ui-radius-xl);
  background: var(--ui-ground);
  box-shadow: var(--ui-shadow-pop);
  color: var(--ui-label);
}
body.admin-area .admin-nav-drawer .pulse-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ui-control);
  margin-bottom: var(--ui-space-2);
  border: 0;
  border-radius: var(--ui-radius-m);
  background: var(--ui-fill);
  color: var(--ui-label);
  font: 600 15px/1 var(--ui-font);
}
body.admin-area #admin-nav-overlay.pulse-drawer-overlay {
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Angemeldet als <E-Mail> (Etappe 9c): in der Admin-Leiste vor dem Kontomenü; unter 48rem aus (kein Überlauf), dort steht die Zeile oben im Kontomenü */
.admin-chrome-account {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  min-width: 0;
  max-width: min(26rem, 40vw);
  margin-right: var(--ui-space-2);
  font: var(--ui-footnote);
  color: var(--ui-label-2);
  white-space: nowrap;
}
.admin-chrome-account[hidden],
.admin-user-menu__who[hidden] {
  display: none;
}
.admin-chrome-account__email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ui-label);
  font-weight: 600;
}
.admin-user-menu__who {
  display: none;
  margin: 0;
  padding: var(--ui-space-1) var(--ui-space-2) var(--ui-space-2);
  border-bottom: 1px solid var(--ui-separator);
  font: var(--ui-footnote);
  color: var(--ui-label-2);
  overflow-wrap: anywhere;
}
.admin-user-menu__who .admin-chrome-account__email {
  display: block;
  overflow: visible;
  text-overflow: clip;
}
@media (max-width: 47.99rem) {
  .admin-chrome-account {
    display: none;
  }
  .admin-user-menu__who:not([hidden]) {
    display: block;
  }
}