/* ===========================================================================
 * QZR vNext — Studio (Mes quiz / Parcours / Stats)
 * Scoped to [data-qz-skin="studio"]. Aligned with docs/vnext/mockups/studio.
 * Mono-tone teal discipline: one accent + ramp; status badges use the fixed
 * success/warning system colors; type-icon squares stay accent-soft.
 * ======================================================================== */

[data-qz-skin="studio"] {
  background: transparent !important;
  padding: 0 !important;
}

[data-qz-skin="studio"] .studio-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--qz-5) var(--qz-4) var(--qz-7);
  color: var(--qz-text);
}

/* ── Bouton « Creer un quiz » dans le fil d'Ariane ───────────────────────────
   L'en-tete d'ecran (.studio-header) a ete supprimee : elle repetait « Studio »
   sous un fil d'Ariane qui le dit deja. Tout le bloc de styles qui l'habillait
   (logo, titre, compte, bouton rond) est parti avec elle — il ne restait aucun
   markup pour l'utiliser.

   Le bouton, lui, survit : injecte par studio.js dans .breadcrumb, a droite du
   titre. Il n'est PAS scope [data-qz-skin="studio"] — le fil d'Ariane vit dans
   la coquille de l'app, hors du conteneur du Studio. */
.studio-breadcrumb-create {
  margin-left: auto;          /* colle le bouton a droite du titre */
  display: flex;
  align-items: center;
}
.studio-breadcrumb-create::before { content: none !important; }  /* pas de "/" */

.studio-breadcrumb-create__btn {
  /* Geometrie (taille, rayon, centrage, font-size) : voir la regle commune
     `.qzr-bc-action` dans crs__front.css. Ici, seule l'identite du bouton. */
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  border: none;
  border-bottom: 3px solid var(--qz-accent-deep);
  cursor: pointer;
  transition: filter var(--qz-dur-press) var(--qz-ease), transform var(--qz-dur-press) var(--qz-ease);
}
.studio-breadcrumb-create__btn:hover { filter: brightness(1.05); }
.studio-breadcrumb-create__btn:active {
  transform: scale(var(--qz-press-scale));
  border-bottom-width: 2px;
}

/* ── Tabs ───────────────────────────────────────────────────────────────────
   Controle segmente en pilule, reprenant la geometrie de
   `.perf-seg.perf-seg--scope` (style/features/vnext-performances.css:56-98) :
   piste bordee au rayon pilule, onglets a parts egales, actif en accent doux.
   Les classes restent .studio-tabs / .studio-tab — studio.js:186,259 s'y
   accroche, et le contrat ARIA (role=tablist/tab) est deja porte par le PHP.
   La regle perf-seg d'origine est scopee [data-qz-skin="performances"] : elle
   ne peut pas s'appliquer ici, d'ou la reprise plutot qu'une reutilisation. */
[data-qz-skin="studio"] .studio-tabs {
  display: flex;
  gap: var(--qz-1);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-pill);
  padding: 4px;
  margin-bottom: var(--qz-5);
}

[data-qz-skin="studio"] .studio-tab {
  appearance: none;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  background: transparent;
  border: 0;
  padding: 7px var(--qz-2);
  border-radius: var(--qz-r-pill);
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-muted);
  cursor: pointer;
  transition: background var(--qz-dur-press) var(--qz-ease), color var(--qz-dur-press) var(--qz-ease);
}

[data-qz-skin="studio"] .studio-tab:hover {
  color: var(--qz-accent-ink);
}

[data-qz-skin="studio"] .studio-tab.is-active {
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
}

[data-qz-skin="studio"] .studio-tab:focus-visible {
  outline: none;
  box-shadow: var(--qz-focus-ring);
}

/* ── Panels ─────────────────────────────────────────────────────────────── */
[data-qz-skin="studio"] .studio-panel {
  display: none;
}

[data-qz-skin="studio"] .studio-panel.is-active {
  display: block;
}

/* ── Quiz list & cards ──────────────────────────────────────────────────────
   Deux par ligne a partir de la tablette ; UNE seule sur mobile (media query en
   fin de fichier). minmax(0,1fr) et non 1fr — sans le minimum a 0, un titre
   long refuse de se retrecir sous sa largeur intrinseque et la colonne
   deborde. */
[data-qz-skin="studio"] .studio-quiz-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--qz-4);
  align-items: start;
}

[data-qz-skin="studio"] .studio-quiz-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--qz-3);
  padding: var(--qz-5);
  /* Reserve la colonne du kebab (32px) + sa marge, sinon il chevauche le tag. */
  padding-right: calc(var(--qz-5) + var(--qz-6));
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  transition: border-color var(--qz-dur-press) var(--qz-ease), box-shadow var(--qz-dur-press) var(--qz-ease);
}

[data-qz-skin="studio"] .studio-quiz-card:hover {
  border-color: var(--qz-line-strong);
}

/* ── Archives : groupe repliable en bas de la liste ────────────────────────
   L'entete reprend EXACTEMENT la geometrie d'une carte quiz (surface, bordure,
   rayon, padding --qz-5, gap --qz-3, icone 44px) : c'est une ligne de la meme
   liste, qui se trouve en ouvrir d'autres. Elle reste pleine largeur — c'est
   un separateur, pas une carte de la grille a deux colonnes. */
[data-qz-skin="studio"] .studio-archives {
  margin-top: var(--qz-4);   /* meme respiration que le gap de .studio-quiz-list */
}
[data-qz-skin="studio"] .studio-archives__head {
  display: flex;
  align-items: center;
  gap: var(--qz-3);
  padding: var(--qz-5);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  cursor: pointer;
  list-style: none;                 /* masque le triangle natif (Firefox) */
  transition: border-color var(--qz-dur-press) var(--qz-ease);
}
[data-qz-skin="studio"] .studio-archives__head::-webkit-details-marker { display: none; }
[data-qz-skin="studio"] .studio-archives__head:hover { border-color: var(--qz-line-strong); }
[data-qz-skin="studio"] .studio-archives__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--qz-r-control);
  background: var(--qz-screen);
  color: var(--qz-muted);
  font-size: 16px;
}
[data-qz-skin="studio"] .studio-archives__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--qz-fs-body);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
}
[data-qz-skin="studio"] .studio-archives__count {
  flex: 0 0 auto;
  padding: 2px 10px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-screen);
  color: var(--qz-muted);
  font-size: var(--qz-fs-xs);
  font-weight: var(--qz-fw-strong);
}
[data-qz-skin="studio"] .studio-archives__chev {
  flex: 0 0 auto;
  color: var(--qz-muted);
  font-size: 12px;
  transition: transform var(--qz-dur-press) var(--qz-ease);
}
[data-qz-skin="studio"] .studio-archives[open] .studio-archives__chev { transform: rotate(180deg); }
/* Les cartes archivees reprennent le rythme vertical de la liste principale. */
[data-qz-skin="studio"] .studio-archives__list { margin-top: var(--qz-4); }

[data-qz-skin="studio"] .studio-quiz-card.is-archived {
  opacity: 0.6;
}

[data-qz-skin="studio"] .studio-quiz-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: var(--qz-r-control);
  background: var(--qz-accent-soft);
  color: var(--qz-accent);
  font-size: 1.15rem;
}

[data-qz-skin="studio"] .studio-quiz-card__body {
  flex: 1;
  min-width: 0;
}

[data-qz-skin="studio"] .studio-quiz-card__title {
  font-size: .84em !important;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  margin: 0;
  line-height: 1.3;
}

[data-qz-skin="studio"] .studio-quiz-card__meta {
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
  margin: 3px 0 0;
}

[data-qz-skin="studio"] .studio-quiz-card__tags {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

[data-qz-skin="studio"] .studio-quiz-card__players {
  font-size: var(--qz-fs-xs);
  color: var(--qz-muted);
}

/* ── Status badges ──────────────────────────────────────────────────────── */
[data-qz-skin="studio"] .studio-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: var(--qz-r-pill);
  font-size: var(--qz-fs-xs);
  font-weight: var(--qz-fw-strong);
  line-height: 1.5;
  border: 1px solid transparent;
}

[data-qz-skin="studio"] .studio-badge--publie {
  background: var(--qz-success-bg);
  color: var(--qz-success-ink);
}

[data-qz-skin="studio"] .studio-badge--brouillon {
  background: var(--qz-warning-bg);
  color: var(--qz-warning-ink);
}

[data-qz-skin="studio"] .studio-badge--validation {
  background: transparent;
  color: var(--qz-accent-ink);
  border-color: var(--qz-accent-mid);
}

[data-qz-skin="studio"] .studio-badge--archive {
  background: color-mix(in srgb, var(--qz-muted) 14%, #FFFFFF);
  color: var(--qz-muted);
}

[data-qz-skin="studio"] .studio-badge--groupe {
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
}

[data-qz-skin="studio"] .studio-badge--prive {
  background: color-mix(in srgb, var(--qz-muted) 14%, #FFFFFF);
  color: var(--qz-muted);
}

/* ── Parcours tab: create button + path cards ───────────────────────────── */
[data-qz-skin="studio"] .studio-parcours-create {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  margin-bottom: 14px;
  border: 1px dashed var(--qz-accent-mid);
  background: var(--qz-accent-soft);
  border-radius: var(--qz-r-card);
  color: var(--qz-accent);
  font-size: var(--qz-fs-body);
  font-weight: var(--qz-fw-strong);
  cursor: pointer;
}
[data-qz-skin="studio"] .studio-parcours-create:hover { border-style: solid; }

[data-qz-skin="studio"] .studio-path-card { cursor: pointer; padding-right: 16px; }
[data-qz-skin="studio"] .studio-path-card__chevron {
  align-self: center;
  color: var(--qz-muted);
  font-size: var(--qz-fs-sm);
  flex-shrink: 0;
}

/* AI chip (rendered when a quiz is flagged AI-generated) */
[data-qz-skin="studio"] .studio-chip-ai {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--qz-r-pill);
  font-size: var(--qz-fs-xs);
  font-weight: var(--qz-fw-strong);
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
}

/* ── Kebab menu + dropdown ──────────────────────────────────────────────── */
[data-qz-skin="studio"] .studio-quiz-card__menu {
  position: absolute;
  top: 12px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--qz-r-control);
  color: var(--qz-muted);
  cursor: pointer;
  transition: background var(--qz-dur-press) var(--qz-ease), color var(--qz-dur-press) var(--qz-ease);
}

[data-qz-skin="studio"] .studio-quiz-card__menu:hover {
  background: var(--qz-accent-soft);
  color: var(--qz-accent);
}

[data-qz-skin="studio"] .studio-quiz-card__dropdown {
  position: absolute;
  top: 44px;
  right: 10px;
  z-index: 20;
  min-width: 168px;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-control);
  box-shadow: 0 8px 24px rgba(6, 52, 42, 0.12);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

[data-qz-skin="studio"] .studio-quiz-card__dropdown[hidden] {
  display: none;
}

[data-qz-skin="studio"] .studio-quiz-card__action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: var(--qz-r-control);
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  text-align: left;
  cursor: pointer;
  transition: background var(--qz-dur-press) var(--qz-ease);
}

[data-qz-skin="studio"] .studio-quiz-card__action i {
  width: 16px;
  color: var(--qz-muted);
}

[data-qz-skin="studio"] .studio-quiz-card__action:hover {
  background: var(--qz-accent-soft);
}

/* ── Empty states ───────────────────────────────────────────────────────── */
[data-qz-skin="studio"] .studio-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
}

[data-qz-skin="studio"] .studio-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--qz-accent-soft);
  color: var(--qz-accent);
  font-size: 1.5rem;
  margin-bottom: 16px;
}

[data-qz-skin="studio"] .studio-empty__title {
  font-size: var(--qz-fs-h2);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  margin: 0 0 8px;
}

[data-qz-skin="studio"] .studio-empty__text {
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
  margin: 0 0 20px;
  max-width: 360px;
  line-height: 1.5;
}

[data-qz-skin="studio"] .studio-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: none;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  border-bottom: 3px solid var(--qz-accent-deep);
  font-size: var(--qz-fs-body);
  font-weight: var(--qz-fw-strong);
  cursor: pointer;
  transition: filter var(--qz-dur-press) var(--qz-ease), transform var(--qz-dur-press) var(--qz-ease);
}

[data-qz-skin="studio"] .studio-empty__cta:hover {
  filter: brightness(1.05);
}

[data-qz-skin="studio"] .studio-empty__cta:active {
  transform: scale(var(--qz-press-scale));
  border-bottom-width: 2px;
}

/* ── Stats panel ────────────────────────────────────────────────────────── */
[data-qz-skin="studio"] .studio-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

[data-qz-skin="studio"] .studio-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 10px;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  text-align: center;
}

[data-qz-skin="studio"] .studio-stat-card__icon {
  color: var(--qz-accent);
  font-size: 1.1rem;
}

[data-qz-skin="studio"] .studio-stat-card__value {
  font-size: var(--qz-fs-title);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  line-height: 1;
}

[data-qz-skin="studio"] .studio-stat-card__label {
  font-size: var(--qz-fs-xs);
  color: var(--qz-muted);
}

[data-qz-skin="studio"] .studio-stats-hint {
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
  text-align: center;
  margin-top: 18px;
}

/* ── Delete action + confirmation (private drafts) ──────────────────────────── */
[data-qz-skin="studio"] .studio-quiz-card__action--danger,
[data-qz-skin="studio"] .studio-quiz-card__action--danger i { color: var(--qz-error, #d13d3d); }
[data-qz-skin="studio"] .studio-quiz-card__action--danger:hover { background: var(--qz-error-bg, #fdeaea); }

/* Confirmation dialog — reuses the global .mp-modal chrome, centered */
.studio-confirm { align-items: center; }
.studio-confirm__panel {
  max-width: 380px; padding: 24px 22px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  border-radius: var(--qz-r-card, 18px) !important;
}
.studio-confirm__panel::before { display: none !important; } /* hide the bottom-sheet handle */
.studio-confirm__icon {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem;
  background: var(--qz-accent-soft); color: var(--qz-accent);
}
.studio-confirm__icon.is-danger { background: var(--qz-error-bg, #fdeaea); color: var(--qz-error, #d13d3d); }
.studio-confirm__title { margin: 2px 0 0; font-size: 1.12rem; font-weight: var(--qz-fw-strong); color: var(--qz-text); }
.studio-confirm__msg { margin: 0; font-size: .9rem; color: var(--qz-muted); line-height: 1.45; }
.studio-confirm__actions { display: flex; gap: 10px; width: 100%; margin-top: 8px; }
.studio-confirm__btn {
  flex: 1; border: none; cursor: pointer; font: inherit; font-size: .9rem; font-weight: var(--qz-fw-strong);
  padding: 11px 14px; border-radius: var(--qz-r-pill);
  transition: transform var(--qz-dur-ui) ease, background var(--qz-dur-ui) ease;
}
.studio-confirm__btn:active { transform: scale(var(--qz-press-scale)); }
.studio-confirm__btn--ghost { background: var(--qz-surface); color: var(--qz-text); border: 1px solid var(--qz-line); }
.studio-confirm__btn--danger { background: var(--qz-error, #d13d3d); color: #fff; }

/* Studio toast */
.studio-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 24px);
  z-index: 5000; opacity: 0; pointer-events: none;
  background: var(--qz-success, #1f9d55); color: #fff;
  font-size: .85rem; font-weight: var(--qz-fw-strong);
  padding: 11px 18px; border-radius: var(--qz-r-pill);
  box-shadow: 0 8px 24px rgba(6,52,42,.22);
  transition: opacity var(--qz-dur-ui) ease, transform var(--qz-dur-ui) ease;
}
.studio-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.studio-toast.is-error { background: var(--qz-error, #d13d3d); }

/* ===========================================================================
   PAGINATION
   ---------------------------------------------------------------------------
   La liste du Studio etait chargee en entier : 31 secondes pour le compte
   catalogue et ses 3 941 quizz. Elle est desormais paginee cote serveur, et
   cette barre n'apparait qu'a partir de deux pages — sur un Studio de douze
   quizz, une barre a une seule page serait du bruit.
   =========================================================================== */
[data-qz-skin="studio"] .studio-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 20px 0 8px;
}

[data-qz-skin="studio"] .studio-page {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--qz-200);
    border-radius: 10px;
    background: var(--qz-surface, #fff);
    color: var(--qz-ink, #1c1a17);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--qz-dur-ui) ease, border-color var(--qz-dur-ui) ease;
}

[data-qz-skin="studio"] .studio-page:hover:not(.is-disabled) {
    border-color: var(--qz-accent, #16A87A);
}

[data-qz-skin="studio"] .studio-page.is-active {
    background: var(--qz-accent, #16A87A);
    border-color: var(--qz-accent, #16A87A);
    color: #fff;
    font-weight: 600;
}

[data-qz-skin="studio"] .studio-page.is-disabled {
    opacity: .4;
    cursor: default;
}

/* Le compte total, pose en bout de barre : c'est le seul endroit ou le createur
   voit combien de quizz il possede reellement, la liste n'en montrant qu'une
   page. */
[data-qz-skin="studio"] .studio-pagination__count {
    margin-left: 10px;
    color: var(--qz-ink-soft, #6b6459);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

/* ── UNE colonne sur les surfaces mobiles ───────────────────────────────────
   767.98px est le seuil « mobile » de l'application : c'est celui qui fait
   apparaitre #qzr-mobile-bottom-nav (ui-visual-language.css:834). Une carte
   par ligne y reprend toute la largeur.

   La carte retrouve donc sa mise en page horizontale (icone a gauche, corps a
   droite) et ses paddings de base : la bascule en colonne et l'icone rapetissee
   n'existaient que pour survivre a deux cartes de ~150px cote a cote. */
@media (max-width: 767.98px) {
  [data-qz-skin="studio"] .studio-quiz-list {
    grid-template-columns: 1fr;
    gap: var(--qz-3);
  }

  /* Quatre onglets a parts egales sur mobile : on rend les marges laterales. */
  [data-qz-skin="studio"] .studio-tab {
    padding-left: var(--qz-1);
    padding-right: var(--qz-1);
    font-size: var(--qz-fs-xs);
  }
}