/* Discover: the Discover section of the quiz library (library.html, js/pages/quizpulse_library_discover.js), its report
   form, and the super admin's Discover reports page (public/discover_reports.html).
   The tokens at the top set spacing, shape and colour, and follow the active theme through its --qpt-* variables,
   so Discover is restyled by changing them rather than the rules below. */

.qp-library-discover,
.qp-library-discover-sources,
.qp-discover-dialog,
.qp-discover-admin {
  --qp-discover-gap: 14px;
  --qp-discover-pad: 16px;
  --qp-discover-radius: 14px;
  --qp-discover-surface: var(--qpt-surface, #ffffff);
  --qp-discover-surface-alt: var(--qpt-surface-alt, #f6f4fb);
  --qp-discover-text: var(--qpt-text, #171326);
  --qp-discover-muted: var(--qpt-muted, #6f6a7d);
  --qp-discover-border: var(--qpt-border, #e7e4ee);
  --qp-discover-accent: var(--qpt-primary, #6d28d9);
  --qp-discover-danger: var(--qpt-danger, #dc2626);
}

/* Where Discover's quizzes come from: everyone, or the reader's own organization */
.qp-library-discover-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qp-library-discover-sources[hidden] {
  display: none;
}

.qp-library-discover-sources button {
  padding: 6px 14px;
  border: 1px solid var(--qp-discover-border);
  border-radius: 999px;
  background: var(--qp-discover-surface);
  color: var(--qp-discover-text);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.qp-library-discover-sources button.active {
  border-color: var(--qp-discover-accent);
  background: var(--qp-discover-accent);
  color: #ffffff;
}

/* The Discover section: its sort and page size, the cards, and the page numbers */
.qp-library-discover {
  display: grid;
  gap: var(--qp-discover-gap);
}

.qp-library-discover[hidden],
.qp-library-section[hidden] {
  display: none !important;
}

.qp-discover-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.qp-discover-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--qp-discover-muted);
  font-size: 13px;
  font-weight: 800;
}

.qp-discover-select select {
  width: auto;
  min-height: 36px;
  padding-block: 4px;
}

/* A Discover card holds a Play solo button, so it grows to fit instead of the library's fixed card height
   (quizpulse_workspace.css). */
.qp-workspace-v2 .qp-kahoot-library-grid.qp-discover-grid:not(.is-list) .qp-kahoot-quiz-card.qp-discover-card {
  height: auto !important;
  grid-template-rows: 158px auto !important;
}

.qp-workspace-v2 .qp-kahoot-library-grid.qp-discover-grid:not(.is-list) .qp-discover-card .qp-kahoot-card-body {
  height: auto;
  grid-template-rows: auto auto auto !important;
  gap: 6px !important;
}

.qp-workspace-v2 .qp-kahoot-library-grid.qp-discover-grid .qp-discover-card .qp-kahoot-card-status {
  align-items: center;
  max-height: none;
  overflow: visible;
}

/* At phone width the library caps every card, picture and body at 116px (quizpulse_theme.css, quizpulse_workspace.css);
   a Discover card lifts those caps so its Play solo button stays inside it. */
@media (max-width: 760px) {
  .qp-workspace-v2 .qp-kahoot-library-grid.qp-discover-grid:not(.is-list) .qp-kahoot-quiz-card.qp-discover-card {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    min-height: 116px !important;
    max-height: none !important;
  }
  .qp-workspace-v2 .qp-kahoot-library-grid.qp-discover-grid:not(.is-list) .qp-discover-card .qp-kahoot-card-thumb {
    height: auto !important;
    min-height: 116px !important;
    max-height: none !important;
  }
  .qp-workspace-v2 .qp-kahoot-library-grid.qp-discover-grid:not(.is-list) .qp-discover-card .qp-kahoot-card-body {
    height: auto !important;
    overflow: visible !important;
  }
  .qp-workspace-v2 .qp-kahoot-library-grid.qp-discover-grid:not(.is-list) .qp-discover-card .qp-kahoot-card-status {
    max-height: none;
    overflow: visible;
  }
}

.qp-discover-card .qp-kahoot-card-mainline h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qp-discover-card-foot {
  justify-content: space-between;
}

.qp-discover-play {
  margin-inline-start: auto;
}

.qp-discover-report[disabled] {
  opacity: .45;
  cursor: default;
}

.qp-discover-mine {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--qp-discover-accent) 12%, transparent);
  color: var(--qp-discover-accent);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.qp-discover-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.qp-discover-pager:empty {
  display: none;
}

.qp-discover-page {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--qp-discover-border);
  border-radius: 10px;
  background: var(--qp-discover-surface);
  color: var(--qp-discover-text);
  font: inherit;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.qp-discover-page[aria-current="page"] {
  border-color: var(--qp-discover-accent);
  background: var(--qp-discover-accent);
  color: #ffffff;
}

.qp-discover-page[disabled] {
  opacity: .4;
  cursor: default;
}

.qp-discover-page-gap {
  color: var(--qp-discover-muted);
  font-weight: 800;
}

/* The report form */
.qp-discover-dialog {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--qp-discover-border);
  border-radius: 22px;
  background: var(--qp-discover-surface);
  color: var(--qp-discover-text);
  box-shadow: 0 30px 80px rgba(15, 10, 30, .35);
}

.qp-discover-dialog::backdrop {
  background: rgba(15, 10, 30, .55);
}

.qp-discover-report-form {
  display: grid;
  gap: 14px;
  padding: 22px;
}

.qp-discover-report-form h2 {
  margin: 0;
  font-size: 20px;
  overflow-wrap: anywhere;
}

.qp-discover-reasons-field {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.qp-discover-reasons-field legend {
  margin-bottom: 8px;
  font-weight: 900;
}

.qp-discover-reason {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--qp-discover-border);
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
}

.qp-discover-reason input {
  margin: 0;
  accent-color: var(--qp-discover-accent);
}

.qp-discover-reason:has(input:checked) {
  border-color: var(--qp-discover-accent);
  background: color-mix(in srgb, var(--qp-discover-accent) 8%, var(--qp-discover-surface));
}

.qp-discover-details {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

.qp-discover-details small {
  color: var(--qp-discover-muted);
  font-weight: 600;
}

.qp-discover-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* The reports page */
.qp-discover-admin {
  width: min(1120px, 100%);
  margin-inline: auto;
  display: grid;
  gap: 30px;
}

.qp-discover-admin-section {
  display: grid;
  gap: 10px;
}

.qp-discover-admin-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--qp-discover-text);
  font-size: 20px;
}

.qp-discover-hint {
  margin: 0;
  color: var(--qp-discover-muted);
  font-weight: 600;
}

.qp-discover-badge {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--qp-discover-danger);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.qp-discover-badge[hidden] {
  display: none;
}

.qp-discover-admin-list {
  display: grid;
  gap: var(--qp-discover-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.qp-discover-empty {
  margin: 0;
  padding: var(--qp-discover-pad);
  border: 1px dashed var(--qp-discover-border);
  border-radius: var(--qp-discover-radius);
  color: var(--qp-discover-muted);
  list-style: none;
  text-align: center;
}

.qp-discover-admin-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--qp-discover-gap);
  padding: 14px var(--qp-discover-pad);
  border: 1px solid var(--qp-discover-border);
  border-radius: var(--qp-discover-radius);
  background: var(--qp-discover-surface);
  color: var(--qp-discover-text);
}

.qp-discover-admin-item[data-reported-quiz] {
  box-shadow: inset 4px 0 0 var(--qp-discover-danger);
}

.qp-discover-admin-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.qp-discover-admin-meta {
  color: var(--qp-discover-muted);
  font-size: 13px;
  font-weight: 600;
}

.qp-discover-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.qp-discover-reasons li {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--qp-discover-surface-alt);
  color: var(--qp-discover-text);
  font-size: 13px;
  font-weight: 600;
}

.qp-discover-admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.qp-discover-count {
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--qp-discover-danger) 12%, transparent);
  color: var(--qp-discover-danger);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 640px) {
  .qp-discover-admin-item { grid-template-columns: 1fr; }
  .qp-discover-admin-actions { justify-content: flex-start; }
}