/* Layout of the system admin dashboard. Tokens come from /ui/tokens.css. */
pz-control-app { display: block; min-height: 100vh; }

.pz-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pz-space-4);
  padding: var(--pz-space-3) var(--pz-space-5);
  background: var(--pz-color-surface);
  border-bottom: 1px solid var(--pz-color-border);
}
.pz-header nav { display: flex; flex-wrap: wrap; gap: var(--pz-space-1); flex: 1; }
.pz-header nav a, .pz-user a {
  color: var(--pz-color-text);
  text-decoration: none;
  padding: var(--pz-space-1) var(--pz-space-3);
  border-radius: var(--pz-radius);
}
.pz-header a[aria-current="page"] { background: var(--pz-color-background); color: var(--pz-color-accent); font-weight: 600; }
.pz-header nav a:hover, .pz-user a:hover { background: var(--pz-color-background); }
.pz-user { display: flex; align-items: center; gap: var(--pz-space-2); }
.pz-brand { font-weight: 700; color: var(--pz-color-text); text-decoration: none; letter-spacing: 0.01em; }

.pz-main { max-width: 1100px; margin: 0 auto; padding: var(--pz-space-5); }
.pz-public { display: grid; align-items: start; min-height: 100vh; padding: 10vh var(--pz-space-4) var(--pz-space-4); }
.pz-narrow { width: 100%; max-width: 440px; margin-inline: auto; }
.pz-narrow .pz-brand { color: var(--pz-color-accent); margin-bottom: var(--pz-space-2); }
.pz-loading { padding: var(--pz-space-5); color: var(--pz-color-text-muted); }

.pz-secret { font-size: 1.1rem; letter-spacing: 0.08em; }
.pz-check { display: flex; align-items: center; gap: var(--pz-space-2); align-self: end; padding-bottom: var(--pz-space-2); }
.pz-cell-form { margin-top: var(--pz-space-4); max-width: none; }
.pz-card h2:first-child, .pz-card .pz-toolbar h2 { margin: 0; }
pre.pz-mono { white-space: pre-wrap; margin: var(--pz-space-2) 0 0; }
details summary { cursor: pointer; color: var(--pz-color-text-muted); margin-top: var(--pz-space-3); }

/* Area "Modelle" (N75) */
.pz-wide { max-width: none; }
.pz-key-form { margin-top: var(--pz-space-2); min-width: 16rem; }
.pz-roles { display: flex; flex-wrap: wrap; gap: var(--pz-space-1) var(--pz-space-4); }
details > form { margin-top: var(--pz-space-3); }
h3 { font-size: 1rem; margin: 0 0 var(--pz-space-2); }

@media (max-width: 600px) {
  .pz-header { padding: var(--pz-space-3) var(--pz-space-4); gap: var(--pz-space-2); }
  .pz-header .pz-brand { flex: 1; }
  .pz-header nav { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; }
  .pz-header nav a { white-space: nowrap; }
  .pz-main { padding: var(--pz-space-4); }
}