/* =========================================================================
   L'Établi des Maths — Onglet « Fiches & DS » (écran + impression A4)
   Rendu par js/app/sheets.js. Classes préfixées .ws-
   ========================================================================= */

/* Doublon de la barre d'outils de l'onglet (le bouton « Devoir blanc multi-chapitres » y figure) */
/* important : prime sur une règle concurrente plus spécifique ou plus tardive */
#tab-pane-sheets .sheets-quick-header-actions { display: none !important; }

.ws-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ws-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ws-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  min-width: 0;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-main);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
  white-space: normal;
  cursor: pointer;
  transition: var(--transition);
}
.ws-chip:hover { background: var(--bg-subtle); }
.ws-chip.active {
  border-color: var(--primary);
  background: var(--primary-subtle);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.ws-chip:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.ws-chip-title { min-width: 0; overflow-wrap: anywhere; }

.ws-chip-kind {
  flex: none;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.ws-kind-gen { background: var(--success-bg); color: var(--success-text); }
.ws-kind-ds { background: var(--warning-bg); color: var(--warning-text); }
.ws-kind-static { background: var(--info-bg); color: var(--info-text); }

.ws-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.ws-btn { white-space: nowrap; }
.ws-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.ws-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.ws-option select {
  font: inherit;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-main);
}

.ws-notice {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--info-border);
  border-radius: var(--radius-md);
  background: var(--info-bg);
  color: var(--info-text);
  font-size: 0.9rem;
}

.ws-empty, .ws-no-solution {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* --- Feuille ------------------------------------------------------------------------- */
.ws-sheet {
  background: var(--bg-surface);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem;
  line-height: 1.65;
  max-width: 900px;
}

.ws-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--text-main);
}
.ws-header-main { min-width: 0; }
.ws-kicker {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ws-title {
  margin: 0.2rem 0 0.35rem;
  font-size: 1.35rem;
  line-height: 1.3;
}
.ws-infos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.ws-grade {
  flex: none;
  min-width: 6.5rem;
  padding: 0.4rem 0.75rem;
  border: 1.5px solid var(--text-main);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.5;
}
.ws-grade span { font-size: 1rem; font-weight: 700; }

.ws-student {
  gap: 0.5rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.ws-instructions {
  margin: 0 0 1.25rem;
  font-style: italic;
  color: var(--text-muted);
}

.ws-exercise { margin-bottom: 1.5rem; }
.ws-ex-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.35rem;
  padding: 0.4rem 0.7rem;
  border-left: 4px solid var(--primary);
  background: var(--bg-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 1.05rem;
}
.ws-pts {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}
.ws-skills {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.ws-questions {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ws-q {
  margin: 0 0 0.9rem;
  padding: 0 0 0.6rem 0;
  border-bottom: 1px dashed var(--border-color);
}
.ws-q:last-child { border-bottom: none; }
.ws-q-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  margin-bottom: 0.15rem;
}
.ws-q-num { font-weight: 800; }
.ws-q-topic { font-weight: 600; font-size: 0.9rem; color: var(--text-muted); }

.ws-q-text, .ws-sol-text, .ws-body { overflow-wrap: anywhere; }
.ws-body .katex-display, .ws-body .math-table, .ws-body table, .ws-body pre {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.ws-body .math-table-container, .ws-body .katex-display, .ws-body pre { position: relative; }
.ws-sheet { position: relative; overflow-wrap: anywhere; }
.ws-body { position: relative; overflow-x: auto; }
.ws-body svg, .ws-body img { max-width: 100%; height: auto; }

.ws-choices-instr { margin: 0.35rem 0 0.2rem; font-size: 0.85rem; font-style: italic; }
.ws-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.75rem;
  margin: 0;
  padding: 0 0 0 0.5rem;
  list-style: none;
}
.ws-choices li { flex: 0 1 auto; min-width: 20%; max-width: 100%; }
.ws-choice-letter { font-weight: 700; }
.ws-choices li p, .ws-choices li .math-p { margin: 0; display: inline; }

.ws-method {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--success-border);
  border-radius: var(--radius-sm);
  background: var(--success-bg);
  font-size: 0.88rem;
}
.ws-method ul { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.ws-answer { margin: 0.2rem 0; }

/* --- Corrigé repliable --------------------------------------------------------------- */
.ws-solution {
  margin-top: 1.5rem;
  border-top: 2px solid var(--border-color);
  padding-top: 1rem;
}
.ws-solution > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.75rem 1rem;
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-md);
  background: var(--primary-subtle);
  color: var(--primary-text);
  font-weight: 700;
}
.ws-solution > summary::-webkit-details-marker { display: none; }
.ws-solution > summary::before { content: '▸ '; }
.ws-solution[open] > summary::before { content: '▾ '; }
.ws-solution[open] > summary { margin-bottom: 1rem; }
.ws-solution-page {
  padding: 1.25rem;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

/* --- Mobile -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .ws-sheet { padding: 1.1rem 0.9rem; border-radius: var(--radius-md); }
  .ws-title { font-size: 1.15rem; }
  .ws-header { flex-direction: column; }
  .ws-grade { display: none; }
  .ws-chip { font-size: 0.8rem; padding: 0.4rem 0.6rem; }
  .ws-actions .ws-btn { flex: 1 1 calc(50% - 0.5rem); white-space: normal; }
  .ws-solution-page { padding: 0.75rem; }
  .ws-ex-title { font-size: 0.98rem; }
}

/* --- Impression A4 ------------------------------------------------------------------- */
@page etabli-sheet {
  size: A4 portrait;
  margin: 14mm 15mm 16mm;
  @bottom-center {
    content: "L’Établi des Maths — page " counter(page) " / " counter(pages);
    font-size: 8pt;
    color: #555;
  }
}

@media print {
  body:has(#tab-pane-sheets.active):not(.modal-open) {
    padding: 0;
  }
  #tab-pane-sheets .ws-sheet {
    page: etabli-sheet;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    max-width: none;
    background: #fff;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.45;
    box-shadow: none;
    break-inside: auto;
    page-break-inside: auto;
  }
  #tab-pane-sheets .ws-sheet * { color: #000; }
  #tab-pane-sheets .ws-header { border-bottom-color: #000; margin-bottom: 3mm; }
  #tab-pane-sheets .ws-kicker { font-size: 8.5pt; }
  #tab-pane-sheets .ws-title { font-size: 15pt; }
  #tab-pane-sheets .ws-infos { font-size: 9.5pt; }
  #tab-pane-sheets .ws-grade { display: block; border-color: #000; }
  #tab-pane-sheets .ws-qr.print-only,
  .quiz-footer-credit .print-qr { display: flex; }
  #tab-pane-sheets .ws-student.print-only {
    display: flex;
    margin: 0 0 4mm;
    padding: 0 0 2mm;
    border: none;
    font-size: 10pt;
  }
  #tab-pane-sheets .ws-ex-title {
    background: none;
    border-left: 3px solid #000;
    padding: 1mm 0 1mm 2.5mm;
    font-size: 11.5pt;
    break-after: avoid;
    page-break-after: avoid;
  }
  #tab-pane-sheets .ws-q,
  #tab-pane-sheets .ws-method,
  #tab-pane-sheets .ws-body table,
  #tab-pane-sheets .ws-body svg,
  #tab-pane-sheets .ws-body .katex-display {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #tab-pane-sheets .ws-body h1,
  #tab-pane-sheets .ws-body h2,
  #tab-pane-sheets .ws-body h3,
  #tab-pane-sheets .ws-body h4 { break-after: avoid; page-break-after: avoid; }
  /* important : impression, prime sur les styles d'écran, le thème sombre et le JS */
  #tab-pane-sheets .ws-body,
  #tab-pane-sheets .ws-body .katex-display,
  #tab-pane-sheets .ws-body table { overflow: visible !important; }
  #tab-pane-sheets .ws-method { background: none; border-color: #888; }

  /* Corrigé : masqué par défaut, sur une nouvelle page avec « Sujet + corrigé » */
  /* important : impression, prime sur les styles d'écran, le thème sombre et le JS */
  #tab-pane-sheets .ws-solution { display: none !important; }
  /* important : impression, prime sur les styles d'écran, le thème sombre et le JS */
  body.sheets-print-solution #tab-pane-sheets .ws-solution {
    display: block !important;
    border: none;
    margin: 0;
    padding: 0;
  }
  body.sheets-print-solution #tab-pane-sheets .ws-solution::details-content {
    content-visibility: visible;
    display: block;
  }
  body.sheets-print-solution #tab-pane-sheets .ws-solution-page {
    break-before: page;
    page-break-before: always;
    background: none;
    padding: 0;
  }
}

/* --- Thème sombre -------------------------------------------------------------------- */
[data-theme="dark"] .ws-sheet { background: var(--bg-surface); color: var(--text-main); }
[data-theme="dark"] .ws-solution-page { background: var(--bg-subtle); }

/* Devoir blanc type brevet / bac : intitulés des parties */
.quiz-exam-section {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0.25rem;
  padding: 0.6rem 0.9rem;
  border-left: 4px solid var(--primary-text, #1d4ed8);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  break-inside: avoid;
}
.quiz-exam-section h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-main);
}
.quiz-exam-section p {
  margin: 0.3rem 0 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* QR code imprimé en pied de sujet */
.print-qr {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
  font-weight: 600;
}
.print-qr img {
  width: 64px;
  height: 64px;
}

/* QR code d'entraînement en tête des fiches imprimées */
.ws-qr {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 0.6rem;
  font-size: 0.8rem;
}
.ws-qr img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

/* Barème indicatif par question (DS tirés de la banque) */
.ws-scale {
  margin: 0.2rem 0 0.45rem;
  font-size: 0.85em;
  color: var(--text-muted, #555);
}
.ws-sheet .exam-competency-grid,
.exam-competency-grid {
  break-inside: avoid;
  page-break-inside: avoid;
}