/*
 * Suivi des defis — la carte d'accueil et sa feuille de detail.
 *
 * TOUT PASSE PAR LES JETONS SEMANTIQUES. Le texte prend --qz-text / --qz-muted
 * et JAMAIS --qz-ink (constant d'un theme a l'autre) ni un #fff en dur : c'est
 * exactement ce qui rendait des libelles illisibles en sombre ailleurs dans le
 * depot. Les fonds prennent --qz-surface / --qz-accent-soft.
 *
 * LA CHROME DE LA FEUILLE N'EST PAS REDEFINIE ICI. .mp-modal, son fond, son
 * panneau et sa poignee viennent de vnext-groupes-detail.css, chargee
 * globalement. On n'ajoute que le CONTENU.
 */

/* ── La carte ───────────────────────────────────────────────────────────── */

.qzr-duels-card .qzd-blocs {
  display: flex;
  flex-direction: column;           /* deux blocs VERTICAUX */
  gap: 8px;
  margin-top: 8px;
}

.qzr-duels-card .qzd-bloc {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--qz-surface, #FFFFFF);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-lg, 16px);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--qz-text, #16332B);
  transition: border-color .18s ease, background .18s ease;
}
.qzr-duels-card .qzd-bloc:hover:not([disabled]) {
  background: var(--qz-accent-soft, #E6F5EF);
  border-color: var(--qz-accent, #16A87A);
}
/* Un bloc vide reste LISIBLE, pas efface : il dit « aucun defi releve », ce qui
   est une information. On retire l'affordance de clic, pas le texte. */
.qzr-duels-card .qzd-bloc[disabled] { cursor: default; opacity: .72; }
.qzr-duels-card .qzd-bloc[disabled] .qzd-bloc__chev { visibility: hidden; }

.qzr-duels-card .qzd-bloc__ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--qz-accent-soft, #E6F5EF);
  color: var(--qz-accent, #16A87A);
}
.qzr-duels-card .qzd-bloc__txt   { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.qzr-duels-card .qzd-bloc__titre { font-weight: var(--qz-fw-strong, 600); font-size: .95rem; color: var(--qz-text, #16332B); }
.qzr-duels-card .qzd-bloc__sous  { font-size: .82rem; color: var(--qz-muted, #5E8A7C); }

.qzr-duels-card .qzd-bloc__n {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 1px 8px;
  border-radius: var(--qz-r-pill, 999px);
  background: var(--qz-accent, #16A87A);
  color: #FFFFFF;                    /* sur un fond accent plein, pas sur la page */
  font-size: .82rem;
  font-weight: var(--qz-fw-strong, 600);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.qzr-duels-card .qzd-bloc[disabled] .qzd-bloc__n {
  background: var(--qz-line, #DCEFE8);
  color: var(--qz-muted, #5E8A7C);
}
.qzr-duels-card .qzd-bloc__chev { flex: 0 0 auto; color: var(--qz-muted, #5E8A7C); font-size: .8rem; }

/* ── La feuille de detail ───────────────────────────────────────────────── */

.qzr-duels-sheet__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 16px 18px;
}

.qzr-duels-sheet .qzd-ligne {
  padding: 12px 14px;
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-lg, 16px);
  background: var(--qz-surface, #FFFFFF);
}
.qzr-duels-sheet .qzd-ligne__hd { display: flex; align-items: center; gap: 8px; }
.qzr-duels-sheet .qzd-ligne__bd { margin-top: 6px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.qzr-duels-sheet .qzd-ligne__ft { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.qzr-duels-sheet .qzd-titre {
  flex: 1 1 auto; min-width: 0;
  font-weight: var(--qz-fw-strong, 600);
  color: var(--qz-text, #16332B);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.qzr-duels-sheet .qzd-etat {
  flex: 0 0 auto;
  padding: 2px 10px;
  border-radius: var(--qz-r-pill, 999px);
  font-size: .74rem;
  font-weight: var(--qz-fw-strong, 600);
  letter-spacing: .02em;
}
/* Etat et verdict sont des couleurs SEMANTIQUES, distinctes de l'accent : le
   vert de marque ne doit pas vouloir dire « gagne » un ecran sur deux. */
.qzr-duels-sheet .qzd-etat--attente { background: #FFF3D6; color: #7A5300; }
.qzr-duels-sheet .qzd-etat--releve  { background: var(--qz-accent-soft, #E6F5EF); color: var(--qz-accent-ink, #0F6E56); }
.qzr-duels-sheet .qzd-etat--expire  { background: var(--qz-line, #DCEFE8); color: var(--qz-muted, #5E8A7C); }

.qzr-duels-sheet .qzd-qui      { color: var(--qz-muted, #5E8A7C); font-size: .88rem; }
.qzr-duels-sheet .qzd-chiffres { color: var(--qz-text, #16332B); font-weight: var(--qz-fw-strong, 600); font-variant-numeric: tabular-nums; }
.qzr-duels-sheet .qzd-chiffres span { color: var(--qz-muted, #5E8A7C); font-weight: 400; font-size: .82rem; }

.qzr-duels-sheet .qzd-bonnes { color: var(--qz-muted, #5E8A7C); font-size: .82rem; font-variant-numeric: tabular-nums; }

.qzr-duels-sheet .qzd-reste { font-size: .82rem; color: var(--qz-muted, #5E8A7C); }

.qzr-duels-sheet .qzd-verdict {
  padding: 2px 12px;
  border-radius: var(--qz-r-pill, 999px);
  font-size: .8rem;
  font-weight: var(--qz-fw-strong, 600);
}
/* LES TROIS VERDICTS DOIVENT SE DISTINGUER AU COUP D'ŒIL — c'est l'information
   qu'on vient chercher dans cette feuille. Au premier jet, « Gagné » prenait
   --qz-accent-soft et « Égalité » --qz-line : deux verts pâles à quelques
   points l'un de l'autre, indiscernables sur l'écran. « Gagné » prend donc
   l'accent PLEIN — le seul aplat sature de la feuille, donc le seul qu'on
   repère sans lire. */
.qzr-duels-sheet .qzd-verdict--gagne   { background: var(--qz-accent, #16A87A); color: #FFFFFF; }
.qzr-duels-sheet .qzd-verdict--perdu   { background: #FCE8E6; color: #8C2F23; }
.qzr-duels-sheet .qzd-verdict--egalite { background: var(--qz-line, #DCEFE8); color: var(--qz-muted, #5E8A7C); }

.qzr-duels-sheet .qzd-relancer {
  padding: 6px 14px;
  border-radius: var(--qz-r-pill, 999px);
  border: 1.5px solid var(--qz-line-strong, #CDE7DC);
  background: var(--qz-surface, #FFFFFF);
  color: var(--qz-accent-ink, #0F6E56);
  font-size: .82rem;
  font-weight: var(--qz-fw-strong, 600);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.qzr-duels-sheet .qzd-relancer:hover {
  background: var(--qz-accent-soft, #E6F5EF);
  border-color: var(--qz-accent, #16A87A);
}

.qzr-duels-sheet .qzd-vide { color: var(--qz-muted, #5E8A7C); text-align: center; padding: 18px 0; }

/* Le sombre ne redefinit QUE les deux couleurs codees en dur ci-dessus : tout
   le reste passe deja par des jetons qui basculent d'eux-memes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) .qzr-duels-sheet .qzd-etat--attente { background: #3A2E10; color: #F0CE7A; }
  :root:not([data-mode="light"]) .qzr-duels-sheet .qzd-verdict--perdu { background: #3D1E1A; color: #F3A79A; }
}
:root[data-mode="dark"] .qzr-duels-sheet .qzd-etat--attente { background: #3A2E10; color: #F0CE7A; }
:root[data-mode="dark"] .qzr-duels-sheet .qzd-verdict--perdu { background: #3D1E1A; color: #F3A79A; }

@media (prefers-reduced-motion: reduce) {
  .qzr-duels-card .qzd-bloc,
  .qzr-duels-sheet .qzd-relancer { transition: none; }
}