/* ============================================================================
   QZR vNext — Players (#players)
   Strangler migration: scoped by [data-qz-skin="players"]. Reskins the legacy
   userTemplate cards over --qz-* tokens, and adds the player-specific sections
   of the profile bottom sheet (which reuses the global .mp-modal chrome).
   ============================================================================ */

/* ── Page ────────────────────────────────────────────────────────────────── */
/* Scoped to the #players PAGE container specifically — NOT the bare
   [data-qz-skin="players"], because the profile bottom sheet (#player-profile-modal)
   also carries data-qz-skin="players" (for its .pp-* rules) and must stay a
   full-viewport fixed overlay (see the sheet reset below). */
#players[data-qz-skin="players"] {
  background: var(--qz-screen);
  color: var(--qz-text);
  font-family: var(--qz-font, inherit);
  margin: 0 auto;
  min-height: 100%;
  max-width: 560px;
}

/* The profile sheet must fill the screen on ANY surface: keep the global
   .mp-modal fixed/inset:0 chrome — never inherit the page column's width. */
#player-profile-modal.mp-modal {
  max-width: none;
  margin: 0;
  background: transparent;
}

/* Search bar → clean vNext pill */
[data-qz-skin="players"] .search-container { margin: 2px 0 18px; }
[data-qz-skin="players"] .search-container .search,
[data-qz-skin="players"] input.search {
  background: var(--qz-surface) !important;
  border: 1px solid var(--qz-line) !important;
  border-radius: var(--qz-r-pill) !important;
  color: var(--qz-text) !important;
  padding: 14px 20px !important;
  font-size: var(--qz-fs-body);
  /* box-shadow: 0 6px 18px rgba(6, 20, 16, .06) !important; */
}
[data-qz-skin="players"] .search-container .search::placeholder { color: var(--qz-muted); }
[data-qz-skin="players"] .qzp-actionbar-row { margin-bottom: 6px; }

/* ── List grid ───────────────────────────────────────────────────────────── */
[data-qz-skin="players"] .list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 !important;
}
@media (min-width: 540px) {
  [data-qz-skin="players"] .list { grid-template-columns: repeat(3, 1fr); }
}

/* Card cell — neutralise the Bootstrap column sizing */
[data-qz-skin="players"] .user-template-container-1 {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
[data-qz-skin="players"] .user-template-container-1.underline { text-decoration: none; }

/* ── Card ────────────────────────────────────────────────────────────────── */
[data-qz-skin="players"] .user-template-container-2 {
  background: var(--qz-surface) !important;
  border: 1px solid var(--qz-line) !important;
  border-radius: var(--qz-r-card) !important;
  /* box-shadow: 0 6px 16px rgba(6, 20, 16, .07) !important; */
  padding: 18px 12px 16px !important;
  margin: 0 !important;
  width: 100% !important;
  cursor: pointer;
  text-align: center;
  transition: transform .1s ease, box-shadow .1s ease, border-color .1s ease;
}
[data-qz-skin="players"] .user-template-container-2:hover,
[data-qz-skin="players"] .user-template-container-2:focus-visible {
  transform: translateY(-2px);
  border-color: var(--qz-accent-mid) !important;
  box-shadow: 0 12px 28px rgba(6, 20, 16, .13) !important;
  outline: none;
}
[data-qz-skin="players"] .user-template-container-2:active { transform: translateY(0); }

/* Avatar (picture or initials from buildUserPictureElement) */
[data-qz-skin="players"] .user-template-container-2 > .row:first-child { margin: 0 0 10px; }
[data-qz-skin="players"] .user-template-container-2 img {
  width: 66px !important;
  height: 66px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid var(--qz-accent-soft);
}
/* Name-derived letter avatar (buildUserPictureElement fallback) — match the img size. */
[data-qz-skin="players"] .user-template-container-2 .user-letter-avatar {
  width: 66px !important;
  height: 66px !important;
  border-radius: 50% !important;
}
[data-qz-skin="players"] .user-template-container-2 .user-letter-avatar span {
  font-size: 27px !important; /* ~66 × .42 */
}
[data-qz-skin="players"] .user-template-container-2 [class*="i_boss"] {
  color: var(--qz-accent-ink) !important;
  font-size: 3.2em !important;
}

/* Name */
[data-qz-skin="players"] .user-template-container-2 .name {
  font-size: var(--qz-fs-h3) !important;
  font-weight: var(--qz-fw-strong) !important;
  color: var(--qz-text) !important;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ══ Pastille de presence, facon vNext ══════════════════════════════════
   Le balisage met la classe d'icone SUR le badge : « .fas fa-check » et le
   libelle sont le meme element. Deux consequences, toutes deux visibles :
   le glyphe manquait (corrige globalement sur ::before), et surtout le TEXTE
   heritait de la face « Font Awesome 6 Free », qui ne contient aucune lettre
   latine — « En ligne » retombait donc sur une police systeme, etrangere au
   reste de l'application. C'est ce que l'on voyait.

   On ne peut pas corriger le balisage sans casser la mise a jour en direct :
   players.js reecrit le contenu du badge par .html() a chaque changement de
   presence, ce qui effacerait toute structure interne. Le style fait donc le
   travail, et survit a la reecriture.

   Le glyphe cede la place a une PASTILLE, dessinee dans le meme ::before.
   Un point colore dit l'etat plus vite qu'un crochet, et il ne depend plus
   d'une police externe. La couleur vient de currentColor : players.js bascule
   deja .text-success / .text-secondary, on se greffe dessus sans y toucher. */
.user-online-status {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  /* --qz-font vaut `inherit` : reprend la police de l'app, que .fas ecrasait */
  font-family: var(--qz-font, inherit) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  padding: 5px 11px !important;
  border-radius: var(--qz-r-pill, 999px) !important;
  border: 0 !important;
  vertical-align: middle;
}
.user-online-status::before {
  content: "" !important;      /* le glyphe FA laisse place a la pastille */
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
/* En ligne : un halo discret, pour que l'oeil accroche le seul etat qui
   demande une action. Hors ligne reste muet. */
.user-online-status.text-success::before {
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

[data-qz-skin="players"] .user-online-status {
  margin-top: 8px;
}
[data-qz-skin="players"] .user-online-status.text-success {
  background: var(--qz-success-bg) !important;
  color: var(--qz-success-ink) !important;
}
[data-qz-skin="players"] .user-online-status.text-secondary {
  background: color-mix(in srgb, var(--qz-muted) 12%, var(--qz-surface)) !important;
  color: var(--qz-muted) !important;
}
[data-qz-skin="players"] [class*="user-online-last-connection"] {
  display: block;
  font-size: 10px !important;
  color: var(--qz-muted);
  margin-top: 4px;
}

/* Hide the legacy collapse cruft — the whole card opens the profile sheet now */
[data-qz-skin="players"] .user-template-container-2 .options-delimiter,
[data-qz-skin="players"] .user-template-container-2 .options.collapse,
[data-qz-skin="players"] .user-template-container-2 .bootstrap-collapse,
[data-qz-skin="players"] .user-template-container-2 .collapse-shower-container,
[data-qz-skin="players"] .user-template-container-2 .item-type {
  display: none !important;
}
/* The pager was hidden here — and List.js still pages the list at 10 (see
   players.js initListJs), so everyone from the 11th player on became
   unreachable: no page controls, and nothing else on the page can reveal them.
   Hiding the control did not remove the paging, only the way out of it.
   Styled instead of hidden. List.js emits <li class="page"><a>…</a></li>, NOT
   Bootstrap's .page-item/.page-link, which is why the default Bootstrap
   pagination styling never applied to it in the first place.

   #categories (the themes list) is paired into every rule below on purpose.
   Its pager is NOT List.js — the theme list owns its own search over
   server-rendered cards, so categories__.qzrPaginate() emits the same
   <ul class="pagination"><li class="page[ active]"><a>N</a></li> markup
   instead. One definition, two consumers: that is what keeps the two pagers
   looking identical rather than becoming lookalike copies that drift. */
[data-qz-skin="players"] .pagination,
#categories .pagination {
  /* The pager is a CHILD of its list container, and on #categories that
     container is a CSS grid (2 x 258px). Without this it becomes a grid ITEM
     and is squeezed into a single column cell — measured: 258px wide, sitting
     in column 2 instead of centred under the 528px grid. Spanning every column
     puts it back on its own full-width row. Inert when the parent is not a
     grid, which is the #players case. */
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
[data-qz-skin="players"] .pagination > li,
#categories .pagination > li { display: block; }
[data-qz-skin="players"] .pagination > li > a,
#categories .pagination > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-control);
  background: var(--qz-surface);
  color: var(--qz-text);
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
  text-decoration: none;
  cursor: pointer;
}
[data-qz-skin="players"] .pagination > li > a:hover,
#categories .pagination > li > a:hover {
  background: color-mix(in srgb, var(--qz-text) 8%, var(--qz-surface));
}
/* List.js marks the current page with .active on the <li>. */
[data-qz-skin="players"] .pagination > li.active > a,
#categories .pagination > li.active > a {
  background: var(--qz-accent-soft);
  border-color: var(--qz-accent-mid);
  color: var(--qz-accent-ink);
}

/* ============================================================================
   Player profile bottom sheet — player-specific sections.
   The sheet reuses the GLOBAL .mp-modal / .mp-hero / .mp-kpis / .mp-badge /
   .mp-msg-btn chrome (vnext-groupes-detail.css); these add the extras.
   Colours match the .mp-* palette so the sheet reads as one surface.
   ============================================================================ */
[data-qz-skin="players"] .pp-hero-pic { display: inline-flex; margin-bottom: 10px; }
[data-qz-skin="players"] .pp-hero-pic img {
  width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--qz-accent);
}
[data-qz-skin="players"] .pp-badge--online .fa-circle { font-size: 8px; color: var(--qz-success-ink); }

/* Level progress */
[data-qz-skin="players"] .pp-progress {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: 16px;
}
[data-qz-skin="players"] .pp-progress__row {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px;
}
[data-qz-skin="players"] .pp-progress__label { font-size: 13px; font-weight: 500; color: var(--qz-text); }
[data-qz-skin="players"] .pp-progress__hint { font-size: 12px; color: var(--qz-muted); }
[data-qz-skin="players"] .pp-progress__track {
  height: 8px; border-radius: var(--qz-r-pill); background: var(--qz-accent-soft); overflow: hidden;
}
[data-qz-skin="players"] .pp-progress__fill {
  height: 100%; border-radius: var(--qz-r-pill); background: var(--qz-accent);
  transition: width .4s var(--qz-ease);
}

/* Recent quizzes */
[data-qz-skin="players"] .pp-history { display: flex; flex-direction: column; gap: 8px; }
[data-qz-skin="players"] .pp-history-item {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  background: var(--qz-surface); border: 1px solid var(--qz-line); border-radius: 14px;
}
[data-qz-skin="players"] .pp-history-item__ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--qz-accent-soft); color: var(--qz-accent-ink); font-size: 14px;
}
[data-qz-skin="players"] .pp-history-item.is-missed .pp-history-item__ic { background: var(--qz-warning-bg); color: var(--qz-warning-ink); }
[data-qz-skin="players"] .pp-history-item__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
[data-qz-skin="players"] .pp-history-item__name {
  font-size: 14px; font-weight: 500; color: var(--qz-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-qz-skin="players"] .pp-history-item__meta { font-size: 12px; color: var(--qz-muted); text-transform: capitalize; }
[data-qz-skin="players"] .pp-history-item__xp { flex: 0 0 auto; font-size: 13px; font-weight: 500; color: var(--qz-accent); }
[data-qz-skin="players"] .pp-history-item.is-missed .pp-history-item__xp { color: var(--qz-muted); }
[data-qz-skin="players"] .pp-empty-line { text-align: center; color: var(--qz-muted); font-size: 13px; padding: 14px 0; }

/* Secondary action rows (stats / share) reuse .mp-manage-row chrome */
[data-qz-skin="players"] .pp-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
[data-qz-skin="players"] .pp-actions .mp-manage-label { flex: 1 1 auto; }