/* ======================================================================
   Etappe 9 · Dialoge zentriert
   Ursache der Lage links oben: die Rücksetzung `* { margin: 0 }` (Tailwind-Preflight, @layer base)
   gewinnt gegen den Browserstandard `dialog:modal { margin: auto }` des Top-Layers. Hier wird das
   native Verhalten für alle modalen Dialoge wiederhergestellt: mittig, mit Rand zum Fenster,
   Scrollen im Dialog statt Überlauf. Die Seitenleiste „Frage bearbeiten“ ist kein Dialog.
   ====================================================================== */
dialog:modal:not(.consent-dialog) {
  position: fixed;
  inset: 0;
  margin: auto;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Benutzer, Team, Wiederherstellen: mittlere Breite */
dialog#users-dialog:modal,
dialog#teams-dialog:modal,
dialog#backup-restore-dialog:modal {
  width: min(560px, calc(100vw - 32px));
  max-width: min(560px, calc(100vw - 32px));
}
/* Editoren (Fragenpool, Musikkatalog): breit */
dialog#qp-dialog:modal,
dialog#mc-dialog:modal {
  width: min(860px, calc(100vw - 32px));
  max-width: min(860px, calc(100vw - 32px));
}
dialog#qp-dialog:modal form,
dialog#mc-dialog:modal form {
  min-width: 0;
}
@media (max-width: 640px) {
  dialog:modal:not(.consent-dialog) {
    max-height: calc(100dvh - 32px);
  }
  dialog#users-dialog:modal,
  dialog#teams-dialog:modal,
  dialog#backup-restore-dialog:modal,
  dialog#qp-dialog:modal,
  dialog#mc-dialog:modal {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }
}

/* Lange Dialoge der Administrationsseiten (Benutzer, Team, Wiederherstellen, Fragenpool, Musikkatalog): Titel und Aktionen
 * bleiben beim Scrollen im Dialog sichtbar. Der Dialog selbst scrollt (siehe oben), daher genügt position: sticky. */
.pulse-admin-shell.sys-page dialog:is(.modal, .admin-dialog) > form > h2:first-child,
.pulse-admin-shell.sys-page dialog:is(.modal, .admin-dialog) > .panel > h2:first-child {
  position: sticky;
  top: 0;
  z-index: 2;
  margin-top: 0;
  padding-block: var(--ui-space-2);
  background: var(--ui-ground);
}
.pulse-admin-shell.sys-page dialog:is(.modal, .admin-dialog) .modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding-top: var(--ui-space-3);
  background: var(--ui-ground);
}

/* Benutzer, schreibgeschützt (normale Benutzer sehen nur ihr eigenes Konto, usersAdmin.js showOwnUserReadonly). */
.users-readonly {
  padding: var(--ui-space-4, 16px);
}
.users-readonly__list {
  display: grid;
  gap: var(--ui-space-2, 8px);
  margin: 0 0 var(--ui-space-3, 12px);
}
.users-readonly__row {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: var(--ui-space-3, 12px);
  align-items: center;
}
.users-readonly__row dt {
  color: var(--text-muted, inherit);
}
.users-readonly__row dd {
  margin: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .users-readonly__row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
/* Musikkatalog lesend (Musik-Freischaltung ohne Administration): Details zum Aufklappen statt Bearbeiten. */
.pulse-admin-shell .mc-details {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 4px 0 0;
}
.pulse-admin-shell .mc-details > summary {
  cursor: pointer;
  color: var(--ui-tint, #0a84ff);
}
.pulse-admin-shell .mc-details__list {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: 2px 12px;
  margin: 6px 0 0;
}
.pulse-admin-shell .mc-details__list dt {
  color: var(--ui-label-secondary, #6e6e73);
}
.pulse-admin-shell .mc-details__list dd {
  margin: 0;
  overflow-wrap: anywhere;
}