/* Tạo đề in (pr-) và báo cáo phụ huynh (rp-). */

/* ── Màn chọn đề ────────────────────────────────────────── */
.pr-field { margin: 4px 0 16px; }
.pr-label { font-weight: 700; margin-bottom: 8px; }
.pr-link { background: none; border: 0; padding: 0; color: var(--accent); font-size: 15px; font-weight: 600; cursor: pointer; }
.pr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-chip {
  min-height: 44px; padding: 8px 16px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); font-weight: 600; font-size: 16px;
  touch-action: manipulation;
}
.pr-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pr-lessons { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 14px; }
.pr-lesson, .pr-check { display: flex; align-items: flex-start; gap: 10px; padding: 8px 2px; cursor: pointer; font-size: 16px; line-height: 1.4; }
.pr-lesson input, .pr-check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.pr-check { margin-bottom: 8px; }
.pr-row { display: flex; flex-wrap: wrap; gap: 12px; }
.pr-input { display: flex; flex-direction: column; gap: 4px; font-size: 15px; font-weight: 600; color: var(--ink-2); flex: 1 1 200px; }
.pr-input input { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-weight: 400; font-size: 17px; color: var(--ink); }
.pr-note { margin: 12px 0 0; }

/* ── Tờ đề (xem trước trên màn hình) ────────────────────── */
.pr-sheet {
  background: #fff; color: #111; border: 1px solid var(--line); border-radius: 6px;
  box-shadow: var(--shadow); padding: 28px 32px; margin: 18px 0; font-size: 17px; line-height: 1.55;
}
.pr-head { border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 14px; }
.pr-title { font-size: 22px; font-weight: 700; text-align: center; }
.pr-scope { text-align: center; font-size: 14px; color: #555; margin: 2px 0 10px; }
.pr-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; }
.pr-blank { display: inline-block; border-bottom: 1px dotted #333; height: 1.1em; vertical-align: baseline; }
.pr-qs, .pr-as { list-style: none; margin: 0; padding: 0; }
.pr-q { margin: 0 0 16px; }
.pr-qn { margin-right: 2px; }
.pr-opts { list-style: none; margin: 6px 0 0; padding: 0 0 0 1.4em; display: grid; gap: 2px 18px; }
.pr-opts.two { grid-template-columns: 1fr 1fr; }
.pr-work { height: 5.5em; margin: 6px 0 4px 1.4em; border-left: 2px solid #eee; }
.pr-line { margin: 4px 0 0 1.4em; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pr-dots { flex: 0 1 14em; min-width: 8em; border-bottom: 1px dotted #333; height: 1.1em; }
.pr-unit { white-space: nowrap; }
.pr-answers { margin-top: 28px; padding-top: 18px; border-top: 2px dashed #bbb; }
.pr-answers .pr-title { margin-bottom: 12px; }
.pr-a { margin: 0 0 12px; }
.pr-sol { margin: 4px 0 0; padding-left: 2.6em; font-size: .94em; color: #333; }
.pr-sheet .m { white-space: nowrap; }

@media (max-width: 600px) {
  .pr-sheet { padding: 18px 16px; }
  .pr-opts.two { grid-template-columns: 1fr; }
}

/* ── Báo cáo phụ huynh ──────────────────────────────────── */
.rp-h { margin: 0 0 10px; }
.rp-cap { margin: 0 0 12px; }
.rp-empty { text-align: center; padding: 28px 20px; }
.rp-empty-icon { font-size: 42px; }
.rp-empty h3 { margin: 6px 0; }
.rp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.rp-stats > div { background: var(--accent-soft); border-radius: 12px; padding: 10px 8px; text-align: center; }
.rp-stats b { display: block; font-size: 26px; line-height: 1.2; color: var(--accent); }
.rp-stats span { font-size: 13px; color: var(--ink-2); }
.rp-chart { display: flex; align-items: stretch; gap: 4px; height: 150px; padding-top: 4px; }
.rp-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.rp-bar-v { font-size: 11px; color: var(--ink-3); line-height: 1.3; }
.rp-bar-col { width: 100%; max-width: 28px; min-height: 2px; background: var(--line); border-radius: 5px 5px 0 0; }
.rp-bar.on .rp-bar-col { background: var(--accent); }
.rp-bar-d { font-size: 10px; color: var(--ink-3); margin-top: 4px; white-space: nowrap; }
.rp-cap:last-child { margin: 8px 0 0; }
.rp-subj { padding: 10px 0; }
.rp-subj + .rp-subj { border-top: 1px solid var(--line); }
.rp-subj-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rp-subj-name { font-weight: 700; }
.rp-track { height: 10px; background: #ece6da; border-radius: 99px; overflow: hidden; margin: 6px 0 4px; }
.rp-track span { display: block; height: 100%; background: var(--good); border-radius: 99px; }
.rp-good { color: var(--good); }
.rp-bad { color: var(--bad); }
.rp-weak { list-style: none; margin: 0; padding: 0; }
.rp-weak > li { padding: 12px 0; }
.rp-weak > li + li { border-top: 1px solid var(--line); }
.rp-weak-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rp-weak-name { font-weight: 700; }
.rp-pct { font-weight: 700; color: var(--bad); background: var(--bad-soft); border-radius: 99px; padding: 0 10px; font-size: 15px; white-space: nowrap; }
.rp-mis { margin: 6px 0 0; padding-left: 1.2em; font-size: 15px; color: var(--ink-2); }
.rp-go { min-height: 40px; padding: 6px 16px; font-size: 15px; margin-top: 8px; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.rp-table th { text-align: left; font-size: 13px; color: var(--ink-3); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.rp-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); }

@media (max-width: 600px) {
  .rp-stats { grid-template-columns: repeat(2, 1fr); }
  .rp-bar-d { font-size: 9px; writing-mode: vertical-rl; transform: rotate(180deg); }
}

/* ── Khi in ─────────────────────────────────────────────── */
@page { margin: 14mm; }
@media print {
  .topbar, .tabbar, .pr-controls { display: none !important; }
  /* Trang có tờ đề: chỉ giữ tờ đề (và các khối cha của nó). */
  body:has(#pr-sheet:not([hidden])) :not(:has(#pr-sheet)):not(#pr-sheet):not(#pr-sheet *) { display: none !important; }
  html, body { background: #fff !important; color: #000; }
  body { padding: 0; }
  .app { max-width: none; margin: 0; padding: 0; }
  .pr-sheet {
    border: 0; box-shadow: none; border-radius: 0; padding: 0; margin: 0;
    background: #fff; color: #000; font-size: 12.5pt; line-height: 1.45;
  }
  .pr-title { font-size: 15pt; }
  .pr-scope { font-size: 10pt; }
  .pr-q, .pr-a, .pr-head { break-inside: avoid; page-break-inside: avoid; }
  .pr-work { border-left: 0; }
  .pr-answers { break-before: page; page-break-before: always; margin-top: 0; padding-top: 0; border-top: 0; }
  .pr-sheet .m { white-space: nowrap; }
  .rp-chart, .rp-stats > div, .rp-track span, .rp-bar-col { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .card { box-shadow: none; break-inside: avoid; }
  a.rp-go { display: none; }
}