/**
 * Pubquiz-Bereich der Administration (Spec docs/superpowers/specs/2026-10-23-pubquiz-baukasten-design.md, A1–A6; Entwurf
 * docs/superpowers/pubquiz-baukasten-entwurf/menue.png): farblich abgesetzte Menügruppe „Pubquiz“, Seite „Pubquiz-Abende“ mit Bildkarten,
 * Knopf „Im Baukasten öffnen“ auf der Session-Seite.
 *
 * Farbe: Der Bereich trägt das Orange des Pubquiz (Entwurf). Schrift auf Orange ist dunkel (#1c1c1e auf #f59e0b ≈ 8:1), die Überschrift der
 * Gruppe nutzt --ui-amber-ink (≥ 4,5:1 auf dem hellen Grund). Dunkles Design über [data-theme="dark"].
 */

:root {
  --pq-accent: #f59e0b;
  --pq-accent-hover: #e08a00;
  --pq-on-accent: #1c1c1e;
  --pq-soft: #fff7e8;
  --pq-line: #f3d6a0;
  --pq-ink: #8a4b00;
  --pq-chip: #f2f2f5;
}
[data-theme="dark"] {
  --pq-soft: rgba(255, 159, 10, 0.1);
  --pq-line: rgba(255, 159, 10, 0.32);
  --pq-ink: #ffc46b;
  --pq-chip: rgba(255, 255, 255, 0.08);
}

/* ---------- Menügruppe „Pubquiz“ (Seitenleiste und Schublade) ---------- */
body.admin-area :is(#admin-sidebar-nav, #admin-nav-drawer) .admin-nav-section--accent {
  margin: var(--ui-space-1) 0;
  padding: var(--ui-space-2) var(--ui-space-1) var(--ui-space-1);
  border: 1px solid var(--pq-line);
  border-radius: var(--ui-radius-m);
  background: var(--pq-soft);
}
body.admin-area :is(#admin-sidebar-nav, #admin-nav-drawer) .admin-nav-section--accent .admin-nav-section__title {
  color: var(--pq-ink);
}
body.admin-area :is(#admin-sidebar-nav, #admin-nav-drawer) .admin-nav-section--accent .admin-nav-link[aria-current="page"],
body.admin-area :is(#admin-sidebar-nav, #admin-nav-drawer) .admin-nav-section--accent .admin-nav-link.is-active {
  background: var(--ui-surface);
  color: var(--ui-label);
  box-shadow: 0 0 0 1px var(--pq-line), var(--ui-shadow-card);
}
body.admin-area :is(#admin-sidebar-nav, #admin-nav-drawer) .admin-nav-section--accent .admin-nav-link[aria-current="page"] svg,
body.admin-area :is(#admin-sidebar-nav, #admin-nav-drawer) .admin-nav-section--accent .admin-nav-link.is-active svg {
  stroke: var(--ui-tint-ink);
}
/* „Neues Pubquiz“: hervorgehoben als orange Fläche mit Plus-Symbol */
body.admin-area :is(#admin-sidebar-nav, #admin-nav-drawer) .admin-nav-link--primary,
body.admin-area :is(#admin-sidebar-nav, #admin-nav-drawer) .admin-nav-section--accent .admin-nav-link--primary.is-active,
body.admin-area :is(#admin-sidebar-nav, #admin-nav-drawer) .admin-nav-section--accent .admin-nav-link--primary[aria-current="page"] {
  margin-bottom: var(--ui-space-1);
  background: var(--pq-accent);
  color: var(--pq-on-accent);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(138, 75, 0, 0.18);
}
body.admin-area :is(#admin-sidebar-nav, #admin-nav-drawer) .admin-nav-link--primary svg,
body.admin-area :is(#admin-sidebar-nav, #admin-nav-drawer) .admin-nav-section--accent .admin-nav-link--primary.is-active svg {
  stroke: var(--pq-on-accent);
}
body.admin-area :is(#admin-sidebar-nav, #admin-nav-drawer) .admin-nav-link--primary:hover {
  background: var(--pq-accent-hover);
}

/* Anzahl am Eintrag (z. B. Pubquiz-Abende) */
.admin-nav-link__count {
  margin-left: auto;
  min-width: 1.5rem;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ui-fill, #e5e5ea);
  color: var(--ui-label-2, #636366);
  font: 600 12px/20px var(--ui-font, system-ui);
  text-align: center;
}
.admin-nav-link__count[hidden] {
  display: none !important;
}

@media (min-width: 68.75rem) {
  body.admin-sidebar-collapsed .admin-sidebar #admin-sidebar-nav .admin-nav-section--accent {
    margin: var(--ui-space-1) 0;
    padding: var(--ui-space-1) 2px;
  }
  body.admin-sidebar-collapsed .admin-sidebar .admin-nav-link__count {
    display: none !important;
  }
}

/* ---------- Seite „Pubquiz-Abende“ ---------- */
.view-pubquiz-list .admin-page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  align-items: center;
}
.view-pubquiz-list .pqa-search {
  min-width: 15rem;
}
.pqa-new {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-height: var(--ui-control, 44px);
  padding: 0 var(--ui-space-4);
  border-radius: var(--ui-radius-s, 10px);
  background: var(--pq-accent);
  color: var(--pq-on-accent);
  font: 600 15px/1 var(--ui-font);
  text-decoration: none;
  white-space: nowrap;
}
.pqa-new:hover {
  background: var(--pq-accent-hover);
}
.pqa-new:focus-visible,
.pqa-act:focus-visible,
.pqa-seg__btn:focus-visible,
.pqa-card__title a:focus-visible {
  outline: 3px solid var(--focus, #0052cc);
  outline-offset: 2px;
}
.view-pubquiz-list svg,
.pqa-builder-btn svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.view-pubquiz-list .pqa-fill {
  fill: currentColor;
  stroke: none;
}

.pqa-list {
  display: grid;
  gap: var(--ui-space-3);
}
.pqa-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2) var(--ui-space-3);
  align-items: center;
}
.pqa-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--ui-radius-s);
  background: var(--ui-fill);
}
.pqa-seg__btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-label);
  font: 500 14px/1 var(--ui-font);
  min-height: 34px;
  padding: 0 12px;
  cursor: pointer;
}
.pqa-seg__btn.is-on {
  background: var(--ui-seg-on);
  color: var(--ui-seg-on-ink);
  border-color: var(--ui-seg-on-ring);
  font-weight: 600;
}
.pqa-seg__n {
  color: var(--ui-label-2);
  font-weight: 500;
}
.pqa-select {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-height: 40px;
  padding: 0 var(--ui-space-3);
  border: 1px solid var(--ui-separator-strong);
  border-radius: 999px;
  background: var(--ui-surface);
  color: var(--ui-label-2);
  font: var(--ui-footnote);
}
:is(.pulse-admin-shell) .pqa-select select {
  width: auto;
  min-height: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--ui-label);
  font: 500 14px/1.2 var(--ui-font);
  box-shadow: none;
}
.pqa-next {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0 0 0 auto;
  padding: 6px var(--ui-space-3);
  border-radius: var(--ui-radius-s);
  background: var(--ui-tint-soft);
  color: var(--ui-tint-ink);
  font: 600 14px/1.3 var(--ui-font);
}
.pqa-msg {
  margin: var(--ui-space-2) 0;
}

/* Karten */
.pqa-cards {
  display: grid;
  gap: var(--ui-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pqa-card {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto auto;
  grid-template-areas: "thumb main side actions";
  gap: var(--ui-space-4);
  align-items: center;
  padding: 10px var(--ui-space-4) 10px 10px;
  border: 1px solid var(--ui-separator);
  border-radius: var(--ui-radius-l);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}
.pqa-card:has(.sessions-list__more[open]) {
  z-index: 3;
}
.pqa-card__thumb {
  grid-area: thumb;
  position: relative;
  display: block;
  width: 150px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--ui-radius-s);
  background: var(--pq-soft);
}
.pqa-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pqa-card__plain {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--pq-ink);
}
.view-pubquiz-list .pqa-card__plain svg {
  width: 36px;
  height: 36px;
}
.pqa-card__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #5a3a00;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.view-pubquiz-list .pqa-card__badge svg {
  width: 16px;
  height: 16px;
}
.pqa-card__main {
  grid-area: main;
  display: grid;
  gap: 6px;
  min-width: 0;
}
.pqa-card__title {
  margin: 0;
  font: var(--ui-headline);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pqa-card__title a {
  color: var(--ui-label);
  text-decoration: none;
  border-radius: 4px;
}
.pqa-card__title a:hover {
  text-decoration: underline;
}
.pqa-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.pqa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--pq-chip);
  color: var(--ui-label);
  font: 500 13px/1.35 var(--ui-font);
}
.view-pubquiz-list .pqa-chip svg {
  width: 14px;
  height: 14px;
  color: var(--ui-label-2);
}
.pqa-chip.is-muted {
  color: var(--ui-label-2);
}

/* Streifen der Rundenarten */
.pqa-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pqa-kind {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--k-bg);
  color: var(--k-ink);
}
.view-pubquiz-list .pqa-kind svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}
.pqa-kind--choice { --k-bg: #e8f1fb; --k-ink: #1f63ad; }
.pqa-kind--music { --k-bg: #f2eafd; --k-ink: #7034b8; }
.pqa-kind--estimate { --k-bg: #e0f5f1; --k-ink: #0d7a6b; }
.pqa-kind--year { --k-bg: #eceefe; --k-ink: #4150c8; }
.pqa-kind--buzzer { --k-bg: #fdeaea; --k-ink: #b8222c; }
.pqa-kind--random { --k-bg: #fff0dc; --k-ink: #a85a00; }
.pqa-kind--wheel { --k-bg: #fde8f2; --k-ink: #b02572; }
.pqa-kind--news { --k-bg: #e3f5e9; --k-ink: #1a7a40; }
.pqa-kind--geo { --k-bg: #dff3f8; --k-ink: #0a6a86; }
.pqa-kind--text { --k-bg: #efeff2; --k-ink: #4e5360; }
.pqa-kind--pause { --k-bg: #f3ece4; --k-ink: #6e4f2e; }
[data-theme="dark"] .pqa-kind { --k-bg: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .pqa-kind--choice { --k-ink: #7fb6f0; }
[data-theme="dark"] .pqa-kind--music { --k-ink: #c39cf2; }
[data-theme="dark"] .pqa-kind--estimate { --k-ink: #5fd3bf; }
[data-theme="dark"] .pqa-kind--year { --k-ink: #9aa4f5; }
[data-theme="dark"] .pqa-kind--buzzer { --k-ink: #ff8a8f; }
[data-theme="dark"] .pqa-kind--random { --k-ink: #ffb65c; }
[data-theme="dark"] .pqa-kind--wheel { --k-ink: #f28ac2; }
[data-theme="dark"] .pqa-kind--news { --k-ink: #6fd492; }
[data-theme="dark"] .pqa-kind--geo { --k-ink: #7fd6ee; }
[data-theme="dark"] .pqa-kind--text { --k-ink: #c4c7cf; }
[data-theme="dark"] .pqa-kind--pause { --k-ink: #d8b48c; }

/* Teams und Status */
.pqa-card__side {
  grid-area: side;
  display: grid;
  grid-template-columns: 11rem 8.5rem;
  gap: var(--ui-space-3);
  align-items: center;
}
.pqa-teams {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  color: var(--ui-label);
  font: 500 13px/1.3 var(--ui-font);
}
.pqa-teams.is-solo svg {
  color: var(--ui-label-2);
}
.pqa-dots {
  display: inline-flex;
  padding-left: 4px;
}
.pqa-dot {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: -4px;
  border: 2px solid var(--ui-surface);
  border-radius: 50%;
  background: var(--pq-dot);
  color: var(--pq-dot-ink);
  font: 700 10px/1 var(--ui-font);
}
.pqa-status {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--ui-fill);
  color: var(--ui-label);
  font: 600 13px/1.2 var(--ui-font);
}
.view-pubquiz-list .pqa-status svg {
  width: 14px;
  height: 14px;
}
.pqa-status.is-live { background: var(--ui-red-soft); color: var(--ui-red-ink); }
.pqa-status.is-ready { background: var(--ui-green-soft); color: var(--ui-green-ink); }
.pqa-status.is-planned { background: var(--ui-tint-soft); color: var(--ui-tint-ink); }
.pqa-status.is-closed,
.pqa-status.is-archived { background: var(--pq-chip); color: var(--ui-label-2); }

/* Aktionen */
.pqa-card__actions {
  grid-area: actions;
  display: flex;
  gap: var(--ui-space-2);
  align-items: center;
}
.pqa-act,
.pqa-card__actions .sessions-list__more > summary {
  display: inline-grid;
  place-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ui-separator-strong);
  border-radius: var(--ui-radius-s);
  background: var(--ui-surface);
  color: var(--ui-label);
  font: 700 16px/1 var(--ui-font);
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
}
.pqa-act:hover,
.pqa-card__actions .sessions-list__more > summary:hover {
  background: var(--ui-fill);
}
.pqa-act.is-primary {
  border-color: var(--ui-tint);
  background: var(--ui-tint);
  color: var(--ui-on-tint);
}
.pqa-act.is-primary:hover {
  background: var(--ui-tint-ink);
}
.pqa-card__actions .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);
}
.pqa-card__actions .sessions-list__menu-item {
  border-radius: var(--ui-radius-s);
  font: var(--ui-subhead);
  color: var(--ui-label);
}

/* Leerzustand */
.pqa-empty {
  display: grid;
  justify-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-10) var(--ui-space-4);
  border: 1px dashed var(--pq-line);
  border-radius: var(--ui-radius-l);
  background: var(--pq-soft);
  text-align: center;
}
.pqa-empty__art {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--ui-surface);
  color: var(--pq-ink);
}
.view-pubquiz-list .pqa-empty__art svg {
  width: 36px;
  height: 36px;
}
.pqa-empty__title {
  margin: 0;
  font: var(--ui-title-2);
  color: var(--ui-label);
}
.pqa-empty p {
  margin: 0;
}

/* Sessionliste: Hinweis auf den Pubquiz-Bereich */
.sessions-list__elsewhere {
  margin: 0 0 var(--ui-space-2);
  font: var(--ui-footnote);
}

/* Session-Seite: „Im Baukasten öffnen“ */
.pqa-builder-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-height: var(--ui-control, 44px);
  padding: 0 var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-s, 10px);
  background: var(--pq-accent);
  color: var(--pq-on-accent);
  font: 600 15px/1 var(--ui-font, system-ui);
  text-decoration: none;
  cursor: pointer;
}
.pqa-builder-btn:hover {
  background: var(--pq-accent-hover);
}
.pqa-builder-btn:focus-visible {
  outline: 3px solid var(--focus, #0052cc);
  outline-offset: 2px;
}

/* Breiten: Tablet zweizeilig, Handy gestapelt */
@media (max-width: 75rem) {
  .pqa-card {
    grid-template-columns: 132px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb main actions"
      "thumb side actions";
    row-gap: var(--ui-space-2);
  }
  .pqa-card__thumb {
    width: 132px;
  }
  .pqa-card__side {
    grid-template-columns: auto auto;
    justify-content: start;
  }
  .pqa-next {
    margin-left: 0;
  }
}
@media (max-width: 40rem) {
  .view-pubquiz-list .pqa-search {
    min-width: 0;
    flex: 1 1 100%;
  }
  .pqa-seg {
    flex-wrap: wrap;
  }
  .pqa-card {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas:
      "thumb main"
      "side side"
      "actions actions";
    gap: var(--ui-space-2) var(--ui-space-3);
    padding: 10px;
  }
  .pqa-card__thumb {
    width: 96px;
    align-self: start;
  }
  .pqa-card__title {
    white-space: normal;
  }
  .pqa-card__side {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
  .pqa-card__actions {
    justify-content: flex-end;
  }
  .pqa-card__actions .sessions-list__menu {
    right: 0;
    left: auto;
  }
}