/* รอบ 67: เอกสารโรงเรียน (/school/documents — Pages/School/SchoolDocuments.razor) — prefix sdoc- (หน้า/เอกสาร A4) · scard- (บัตรนักเรียน)
   - เอกสาร A4: Components/SchoolDocPrint.razor (.sdoc-print) · บัตร CR80 10 ใบ/A4: Components/StudentCardPrint.razor (.scard-print)
   - บนจอแสดงเป็นตัวอย่างกระดาษขาวใน .sdoc-preview (ย่อด้วย zoom บนจอเล็ก) · ซ่อนเมื่ออยู่ใน .sdoc-offscreen (พิมพ์ซ้ำจากแท็บประวัติ)
   - พิมพ์: html[data-print="sdoc"] → @page sdoc (A4 แนวตั้ง) · html[data-print="scard"] → @page scard (A4 แนวตั้ง ขอบแคบ)
   - สีของหน้าใช้ตัวแปรธีม (โหมดมืดใช้ได้) · ตัวเอกสาร/บัตรเป็นขาวดำ + สีบัตร (--scard-c) ไม่ขึ้นกับธีม */

/* =====================================================================
   หน้าจอ
   ===================================================================== */
@media screen {
  .sdoc-tabs {
    display: flex; gap: 4px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
    background: var(--chip); border-radius: 14px;
  }
  .sdoc-tabs::-webkit-scrollbar { display: none; }
  .sdoc-tabs button {
    flex: 0 0 auto; min-height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: none;
    color: var(--muted); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  }
  .sdoc-tabs button:hover { color: var(--ink); }
  .sdoc-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

  /* ---------- ออกเอกสาร: ฟอร์มซ้าย + ตัวอย่างขวา ---------- */
  .sdoc-split { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); }
  .sdoc-form { gap: 10px; }
  .sdoc-form-scroll { display: flex; flex-direction: column; gap: 12px; }
  .sdoc-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sdoc-type {
    display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 12px; text-align: left;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink);
    font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  }
  .sdoc-type svg { flex: none; color: var(--muted); }
  .sdoc-type:hover { border-color: var(--brand); }
  .sdoc-type.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong, var(--brand)); }
  .sdoc-type.on svg { color: currentColor; }

  .sdoc-seg { display: flex; gap: 4px; padding: 4px; background: var(--chip); border-radius: 12px; }
  .sdoc-seg button {
    flex: 1 1 0; min-height: 36px; border: 0; border-radius: 9px; background: none; color: var(--muted);
    font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  }
  .sdoc-seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

  .sdoc-st { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--chip); color: var(--muted); white-space: nowrap; }
  .sdoc-st-active { background: var(--ok-soft); color: var(--ok); }

  .sdoc-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .sdoc-pick { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
  .sdoc-pick > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sdoc-x { border: 0; background: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 2px; }
  .sdoc-x:hover { color: var(--danger); }

  .sdoc-stu { padding: 10px 12px; border-radius: 12px; background: var(--chip); display: flex; flex-direction: column; gap: 2px; }
  .sdoc-stu-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .sdoc-warn { margin: 0; background: var(--warn-soft); color: #7a5300; }
  .sdoc-years { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 10px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
  .sdoc-years legend { padding: 0 4px; font-size: .85rem; color: var(--muted); }
  .sdoc-year-opt { display: flex; align-items: center; gap: 8px; min-height: 34px; }
  .sdoc-owe { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--chip); border-left: 4px solid var(--line); }
  .sdoc-owe.bad { background: var(--danger-soft); color: var(--danger); border-left-color: var(--danger); }
  .sdoc-owe.good { background: var(--ok-soft); color: var(--ok); border-left-color: var(--ok); }
  .sdoc-owe small { color: inherit; opacity: .8; }
  .sdoc-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .sdoc-form-actions { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); flex: none; }
  .sdoc-form-actions .btn { flex: 1 1 0; justify-content: center; }

  .sdoc-pv-pane { min-height: 320px; }
  .sdoc-pv-empty { margin: 40px auto; max-width: 360px; text-align: center; }
  .sdoc-pv-scroll { display: flex; flex-direction: column; gap: 10px; }
  .sdoc-preview { --sdoc-zoom: .82; overflow: auto; padding: 16px; border-radius: 12px; background: var(--chip); }
  .sdoc-preview > .sdoc-print, .sdoc-preview > .scard-print { zoom: var(--sdoc-zoom); }
  .sdoc-preview .sdoc-a4 {
    width: 210mm; min-height: 297mm; margin: 0 auto; padding: 14mm 16mm 14mm 18mm; box-sizing: border-box;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
  }
  .sdoc-preview-card .scard-sheet { width: max-content; margin: 0 auto 12px; padding: 6mm; background: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, .18); }
  .sdoc-offscreen { display: none; }

  /* ---------- ประวัติ ---------- */
  .sdoc-hbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
  .sdoc-filter { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 0 1 170px; font-size: .82rem; color: var(--muted); }
  .sdoc-filter select, .sdoc-filter input {
    width: 100%; min-width: 0; min-height: 40px; padding: 6px 10px; font: inherit; font-size: .92rem;
    color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  }
  .sdoc-f-text { flex: 1 1 220px; }
  .sdoc-hname { font-weight: 600; }
  .sdoc-hact { text-align: right; }
  .sdoc-tchip { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; background: var(--brand-soft); color: var(--brand-strong, var(--brand)); }
  .sdoc-tc-transcript { background: var(--ok-soft); color: var(--ok); }
  .sdoc-tc-transfer { background: var(--warn-soft); color: #7a5300; }
  .sdoc-more { margin: 10px 4px; }

  /* ---------- ตั้งค่าแบบฟอร์ม ---------- */
  .sdoc-set-card h2 { margin: 0 0 10px; font-size: 1.02rem; }
  .sdoc-set-card .sdoc-set-h2 { margin-top: 18px; }
  .sdoc-set-card .field { margin-bottom: 10px; }
  .sdoc-set-card textarea { width: 100%; resize: vertical; font: inherit; }
  .sdoc-tpl { min-height: 140px; line-height: 1.5; }
  .sdoc-check { display: flex; align-items: center; gap: 8px; min-height: 36px; margin-bottom: 8px; }
  .sdoc-phs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
  .sdoc-ph { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
  .sdoc-ph small { color: var(--muted); }
  .sdoc-set-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .sdoc-color { display: flex; align-items: center; gap: 10px; }
  .sdoc-color input[type="color"] { width: 52px; height: 40px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
  .sdoc-set-actions { justify-content: flex-end; margin-top: 12px; }
}

@media screen and (max-width: 1400px) {
  .sdoc-preview { --sdoc-zoom: .66; }
}
@media screen and (max-width: 1024px) {
  .sdoc-split { grid-template-columns: minmax(0, 1fr); }
  .sdoc-preview { --sdoc-zoom: .6; }
}

/* ---------- มือถือ 390px ---------- */
@media screen and (max-width: 760px) {
  .sdoc-head-bar .fit-tools { width: 100%; }
  .sdoc-tabs { width: 100%; }
  .sdoc-tabs button { flex: 1 0 auto; padding: 0 10px; }
  .sdoc-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdoc-type { min-height: 44px; padding: 8px 10px; font-size: .85rem; }
  .sdoc-grid2 { grid-template-columns: minmax(0, 1fr); }
  .sdoc-form input, .sdoc-form select, .sdoc-hbar input, .sdoc-hbar select, .sdoc-set textarea, .sdoc-set input { font-size: 16px; }
  .sdoc-preview { --sdoc-zoom: .4; padding: 8px; }
  .sdoc-hbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sdoc-filter { flex: none; }
  .sdoc-f-text { grid-column: 1 / -1; }
  .sdoc-hbar > .btn { grid-column: 1 / -1; }
  .sdoc-htable td { overflow-wrap: anywhere; }
  .sdoc-hact { text-align: left; }
  .sdoc-hact .btn { width: 100%; }
}

/* =====================================================================
   พิมพ์
   ===================================================================== */
@page sdoc { size: A4 portrait; margin: 14mm 16mm 14mm 18mm; }
@page scard { size: A4 portrait; margin: 6mm 10mm; }
@media print {
  html[data-print="sdoc"]:has(.sdoc-print), html[data-print="sdoc"]:has(.sdoc-print) body { page: sdoc; }
  html[data-print="scard"]:has(.scard-print), html[data-print="scard"]:has(.scard-print) body { page: scard; }
  html[data-print="sdoc"]:has(.sdoc-print), html[data-print="sdoc"]:has(.sdoc-print) body,
  html[data-print="scard"]:has(.scard-print), html[data-print="scard"]:has(.scard-print) body {
    margin: 0 !important; padding: 0 !important; height: auto !important; overflow: visible !important;
    background: #fff !important; color: #000 !important;
  }
  html[data-print="sdoc"]:has(.sdoc-print) body *:not(:has(.sdoc-print)):not(.sdoc-print):not(.sdoc-print *) { display: none !important; }
  html[data-print="scard"]:has(.scard-print) body *:not(:has(.scard-print)):not(.scard-print):not(.scard-print *) { display: none !important; }
  html[data-print="sdoc"]:has(.sdoc-print) body *:has(.sdoc-print),
  html[data-print="scard"]:has(.scard-print) body *:has(.scard-print) {
    display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
    width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important; overflow: visible !important;
    background: none !important; box-shadow: none !important; transform: none !important; zoom: 1 !important;
  }
  html[data-print="sdoc"] .sdoc-print, html[data-print="sdoc"] .sdoc-print *,
  html[data-print="scard"] .scard-print, html[data-print="scard"] .scard-print * { visibility: visible !important; }
  html[data-print="sdoc"] .sdoc-print { display: block !important; zoom: 1 !important; }
  html[data-print="scard"] .scard-print { display: block !important; zoom: 1 !important; }
  html[data-print="sdoc"] .sdoc-a4 { width: auto !important; min-height: 262mm; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
  html[data-print="scard"] .scard-sheet { padding: 0 !important; margin: 0 auto !important; box-shadow: none !important; }
}

/* =====================================================================
   เอกสาร A4 (ใบรับรอง / ผลการเรียน / ใบย้าย) — ขาวดำ ใช้ทั้งตัวอย่างบนจอและตอนพิมพ์
   ===================================================================== */
.sdoc-print { color: #000; background: #fff; font-size: 11pt; line-height: 1.5; text-align: left; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sdoc-print .num { font-variant-numeric: tabular-nums; }
.sdoc-a4 { display: flex; flex-direction: column; gap: 2mm; background: #fff; color: #000; }
.sdoc-nation { text-align: center; font-weight: 700; font-size: 11.5pt; line-height: 1.5; }
.sdoc-orn { display: flex; align-items: center; justify-content: center; gap: 2mm; margin-top: 1.2mm; }
.sdoc-orn span { width: 20mm; border-top: .3mm solid #000; }
.sdoc-orn i { width: 1.8mm; height: 1.8mm; border: .3mm solid #000; transform: rotate(45deg); }
.sdoc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6mm; margin-top: 3mm; }
.sdoc-org { display: flex; align-items: flex-start; gap: 3mm; min-width: 0; }
.sdoc-logo { width: 20mm; height: 20mm; object-fit: contain; flex: none; }
.sdoc-org-text { display: flex; flex-direction: column; gap: .4mm; min-width: 0; font-size: 10pt; line-height: 1.35; }
.sdoc-hline { white-space: pre-line; font-weight: 600; }
.sdoc-sname { font-size: 12.5pt; font-weight: 700; }
.sdoc-branch { font-weight: 600; }
.sdoc-addr { white-space: pre-line; font-size: 9pt; }
.sdoc-phone { font-size: 9pt; }
.sdoc-ref { flex: none; display: flex; flex-direction: column; gap: 1mm; text-align: right; font-size: 10pt; line-height: 1.35; }
.sdoc-ref span { color: #333; }
.sdoc-title { margin: 7mm 0 4mm; text-align: center; font-size: 17pt; font-weight: 700; letter-spacing: .02em; line-height: 1.3; }
.sdoc-body p { margin: 0 0 2.5mm; text-indent: 12mm; text-align: justify; font-size: 12pt; line-height: 1.8; overflow-wrap: anywhere; }
.sdoc-details { width: 100%; border-collapse: collapse; margin-top: 2mm; font-size: 11pt; }
.sdoc-details th { width: 48mm; padding: 1.2mm 2mm; text-align: left; font-weight: 600; vertical-align: top; border-bottom: .2mm dotted #777; }
.sdoc-details td { padding: 1.2mm 2mm; vertical-align: top; border-bottom: .2mm dotted #777; overflow-wrap: anywhere; }
.sdoc-remark { margin: 3mm 0 0; overflow-wrap: anywhere; }

.sdoc-info { width: 100%; border-collapse: collapse; margin-bottom: 1mm; font-size: 10pt; table-layout: fixed; }
.sdoc-info th { width: 30mm; padding: .7mm 1.5mm; text-align: left; font-weight: 600; vertical-align: top; }
.sdoc-info td { padding: .7mm 1.5mm; vertical-align: top; overflow-wrap: anywhere; }
.sdoc-year { margin-top: 3mm; break-inside: avoid; page-break-inside: avoid; }
.sdoc-ycap {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1mm 4mm; margin: 0; padding: 1mm 2mm;
  font-size: 10.5pt; font-weight: 700; background: #eee; border: .3mm solid #000; border-bottom: 0;
}
.sdoc-scores { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 9.5pt; }
.sdoc-scores th, .sdoc-scores td { border: .3mm solid #000; padding: .5mm 1.5mm; line-height: 1.3; }
.sdoc-scores thead th { background: #f2f2f2; text-align: center; font-weight: 700; }
.sdoc-scores tr { break-inside: avoid; page-break-inside: avoid; }
.sdoc-c-no { width: 9mm; text-align: center; }
.sdoc-c-subj { overflow-wrap: anywhere; }
.sdoc-c-sc { width: 19mm; text-align: center; }
.sdoc-c-max { width: 12mm; text-align: center; color: #333; }
.sdoc-c-year { background: #f7f7f7; }
.sdoc-scores tfoot td { font-weight: 700; background: #f2f2f2; }
.sdoc-ysum { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 1mm 8mm; margin-top: 1mm; font-size: 10pt; }
.sdoc-overall { margin: 3mm 0 0; text-align: right; font-size: 11.5pt; }
.sdoc-small { margin: 2mm 0 0; font-size: 8.5pt; color: #333; }

.sdoc-sign { margin-top: auto; padding-top: 8mm; break-inside: avoid; page-break-inside: avoid; }
.sdoc-given { margin: 0 0 2mm; padding-right: 8mm; text-align: right; }
.sdoc-signs { display: grid; grid-template-columns: 1fr 1fr; gap: 14mm; }
.sdoc-signer { display: flex; flex-direction: column; align-items: center; gap: 1mm; text-align: center; min-width: 0; }
.sdoc-stitle { font-weight: 700; overflow-wrap: anywhere; }
.sdoc-sspace { position: relative; display: block; width: 100%; height: 24mm; }
.sdoc-stamp {
  position: absolute; left: 2mm; top: 1mm; display: flex; align-items: center; justify-content: center;
  width: 22mm; height: 22mm; border: .3mm dashed #999; border-radius: 50%; color: #888; font-size: 7.5pt; text-align: center;
}
.sdoc-sline { display: block; width: 70%; border-bottom: .3mm dotted #000; }
.sdoc-sname { overflow-wrap: anywhere; }

/* =====================================================================
   บัตรนักเรียน CR80 (85.6 × 54 มม.) 2 × 5 ใบต่อ A4 + เครื่องหมายตัดที่มุม
   ===================================================================== */
.scard-print { --scard-c: #1F4E8C; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.scard-print .num { font-variant-numeric: tabular-nums; }
.scard-sheet {
  display: grid; grid-template-columns: repeat(2, 85.6mm); grid-auto-rows: 54mm; column-gap: 5mm; row-gap: 3mm;
  justify-content: center; break-after: page; page-break-after: always;
}
.scard-sheet:last-child { break-after: auto; page-break-after: auto; }
.scard-cell { position: relative; width: 85.6mm; height: 54mm; break-inside: avoid; page-break-inside: avoid; }
.scard-cm { position: absolute; width: 1.5mm; height: 1.5mm; border: 0 solid #000; }
.scard-tl { left: -1.5mm; top: -1.5mm; border-right-width: .15mm; border-bottom-width: .15mm; }
.scard-tr { right: -1.5mm; top: -1.5mm; border-left-width: .15mm; border-bottom-width: .15mm; }
.scard-bl { left: -1.5mm; bottom: -1.5mm; border-right-width: .15mm; border-top-width: .15mm; }
.scard-br { right: -1.5mm; bottom: -1.5mm; border-left-width: .15mm; border-top-width: .15mm; }
.scard {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; color: #000; border: .2mm solid #cfcfcf; border-radius: 3mm; font-size: 6.6pt; line-height: 1.25;
}
.scard-band { flex: none; display: flex; align-items: center; gap: 2mm; height: 11mm; padding: 0 3mm; background: var(--scard-c); color: #fff; }
.scard-logo { flex: none; width: 8mm; height: 8mm; object-fit: contain; padding: .4mm; background: #fff; border-radius: 1.5mm; }
.scard-school { display: flex; flex-direction: column; min-width: 0; }
.scard-school strong { font-size: 8.2pt; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard-school span { font-size: 6.4pt; letter-spacing: .04em; opacity: .92; }
.scard-main { flex: 1 1 auto; display: flex; gap: 2.5mm; min-height: 0; padding: 2.4mm 3mm 1mm; }
.scard-photo {
  flex: none; display: flex; align-items: center; justify-content: center; width: 20mm; height: 25mm;
  border: .3mm solid var(--scard-c); border-radius: 1.5mm; background: #eef1f6;
}
.scard-photo span { font-size: 15pt; font-weight: 700; color: var(--scard-c); }
/* รอบ 69: รูปนักเรียนจริง (ครอบเต็มช่อง 20 × 25 มม.) */
.scard-photo { overflow: hidden; }
.scard-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scard-info { flex: 1 1 auto; display: flex; flex-direction: column; gap: .5mm; min-width: 0; }
.scard-name { max-height: 2.5em; overflow: hidden; font-size: 9pt; font-weight: 700; line-height: 1.22; overflow-wrap: anywhere; }
.scard-nick { font-size: 6.8pt; color: #444; }
.scard-dl { display: flex; flex-direction: column; gap: .25mm; margin: .4mm 0 0; }
.scard-dl > div { display: flex; gap: 1.2mm; min-width: 0; }
.scard-dl dt { flex: none; min-width: 10mm; color: #555; }
.scard-dl dd { margin: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.scard-qrbox { flex: none; display: flex; flex-direction: column; align-items: center; gap: .5mm; width: 19mm; }
.scard-qr { display: block; width: 19mm; height: 19mm; }
.scard-qrcode { font-size: 6pt; letter-spacing: .05em; }
.scard-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 2mm; height: 6mm; padding: 0 3mm;
  border-top: .6mm solid var(--scard-c); font-size: 6pt;
}
.scard-sig { color: #777; }