/* =====================================================================
   รอบ 69: รูปนักเรียน + สแกนบัตร QR
   sav-  = รูปนักเรียน (StudentAvatar)        sph- = กล่องรูปในแผงนักเรียน (StudentPhotoBox) + ปุ่มเลือกไฟล์
   qsb-  = กล้องสแกนแบบฝังในหน้า (QrScanBox)  ssc- = หน้าสแกนเช็กชื่อ / สแกนค้นหา   sbp- = อัปโหลดรูปหลายรูป
   ===================================================================== */

/* ---------- รูปนักเรียน ---------- */
.sav {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
  width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong, var(--brand));
  vertical-align: middle;
}
.sav img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sav-ini { font-weight: 700; font-size: .82rem; letter-spacing: .02em; line-height: 1; }
.sav-md { width: 56px; height: 56px; }
.sav-md .sav-ini { font-size: 1.05rem; }
.sav-lg { width: 96px; height: 120px; border-radius: 14px; }
.sav-lg .sav-ini { font-size: 1.6rem; }
.sav-xl { width: 132px; height: 165px; border-radius: 18px; }
.sav-xl .sav-ini { font-size: 2.2rem; }

/* รายชื่อนักเรียน: รูปเล็กหน้าชื่อ */
.sst-c-name .sst-av { float: left; width: 34px; height: 34px; margin: 0 10px 0 0; }

/* ---------- กล่องรูปในแผงนักเรียน ---------- */
.sph { display: flex; align-items: flex-end; gap: 12px 14px; flex-wrap: wrap; margin: 0 0 14px; }
.sph-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.sph-file { position: relative; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; cursor: pointer; }
.sph-file input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.sph-file.is-busy { opacity: .6; pointer-events: none; }
.sph-err { flex: 1 1 100%; margin: 0; color: var(--danger); font-size: .88rem; }
/* ปุ่มถ่ายรูป: มีประโยชน์บนมือถือ/แท็บเล็ตเท่านั้น */
@media (hover: hover) and (pointer: fine) {
  .sph-cam { display: none; }
}

/* ---------- กล้องสแกนแบบฝังในหน้า ---------- */
.qsb { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qsb-view {
  position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 60vh; overflow: hidden;
  border-radius: var(--radius); background: #000;
}
.qsb-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qsb-idle {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; text-align: center; color: rgba(255,255,255,.85); background: #1b1917;
}
.qsb-idle strong { color: #fff; }
.qsb-idle span { font-size: .9rem; max-width: 360px; }
.qsb-aim { position: absolute; left: 50%; top: 50%; width: min(62%, 280px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.qsb-aim i { position: absolute; width: 30px; height: 30px; border: 4px solid #fff; }
.qsb-aim .tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.qsb-aim .tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.qsb-aim .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.qsb-aim .br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.qsb.live .qsb-aim i { border-color: var(--brand); }
.qsb-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.qsb-live { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ok); }
.qsb-live::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: qsb-blink 1.2s ease-in-out infinite; }
@keyframes qsb-blink { 50% { opacity: .3; } }
.qsb-start { flex: 1 1 auto; justify-content: center; }

/* ---------- หน้าสแกนเช็กชื่อ ---------- */
.ssc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ssc-today { font-weight: 700; }
.ssc-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--chip); color: var(--muted); font-size: .85rem; font-weight: 600; }
.ssc-late { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0; }
.ssc-late .field { min-width: 160px; }
.ssc-late .actions { display: flex; gap: 8px; margin-left: auto; }
.ssc-grid { display: grid; grid-template-columns: minmax(300px, 440px) minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; }
.ssc-grid > .panel { margin: 0; min-width: 0; }
.ssc-cam { display: flex; flex-direction: column; gap: 14px; }
.ssc-wedge { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--muted); }
.ssc-wedge label { font-weight: 600; color: var(--ink); }
.ssc-wedge-row { display: flex; gap: 8px; min-width: 0; }
.ssc-wedge-row input {
  flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 8px 12px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--field, var(--surface)); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.ssc-wedge-row input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.ssc-feed { display: flex; flex-direction: column; gap: 14px; }
.ssc-wait { display: flex; flex-direction: column; gap: 4px; padding: 28px 16px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); }
.ssc-last {
  display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: var(--radius);
  border: 2px solid var(--line); background: var(--surface); animation: ssc-pop .18s ease-out;
}
@keyframes ssc-pop { from { transform: scale(.97); opacity: .5; } }
.ssc-last-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ssc-status { align-self: flex-start; padding: 3px 14px; border-radius: 999px; font-weight: 700; font-size: 1.05rem; background: var(--chip); }
.ssc-name { font-size: 1.45rem; line-height: 1.25; overflow-wrap: anywhere; }
.ssc-meta { color: var(--muted); overflow-wrap: anywhere; }
.ssc-msg { font-weight: 600; overflow-wrap: anywhere; }
.ssc-time { color: var(--muted); font-size: .9rem; }
.ssc-last.ok { border-color: var(--ok); background: var(--ok-soft); }
.ssc-last.ok .ssc-status { background: var(--ok); color: #fff; }
.ssc-last.late { border-color: var(--warn-text, #a35a00); background: var(--warn-soft); }
.ssc-last.late .ssc-status { background: var(--warn-text, #a35a00); color: #fff; }
.ssc-last.dup .ssc-status { background: var(--brand-soft); color: var(--brand-strong, var(--brand)); }
.ssc-last.bad { border-color: var(--danger); background: var(--danger-soft); }
.ssc-last.bad .ssc-status { background: var(--danger); color: #fff; }
.ssc-last.bad .ssc-msg { color: var(--danger); }
html[data-theme="dark"] .ssc-last.ok .ssc-status,
html[data-theme="dark"] .ssc-last.late .ssc-status,
html[data-theme="dark"] .ssc-last.bad .ssc-status { color: #151412; }
.ssc-noone { background: var(--chip); color: var(--muted); }

.ssc-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ssc-cnt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: var(--radius-sm); background: var(--chip); font-size: .82rem; color: var(--muted); min-width: 0; }
.ssc-cnt strong { font-size: 1.35rem; color: var(--ink); }
.ssc-cnt.ok { background: var(--ok-soft); }
.ssc-cnt.ok strong { color: var(--ok); }
.ssc-cnt.late { background: var(--warn-soft); }
.ssc-cnt.late strong { color: var(--warn-text, #7a5300); }
.ssc-cnt.bad { background: var(--danger-soft); }
.ssc-cnt.bad strong { color: var(--danger); }

.ssc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.ssc-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: var(--radius-sm); border-left: 4px solid var(--line); background: var(--surface);
}
.ssc-item.ok { border-left-color: var(--ok); }
.ssc-item.late { border-left-color: var(--warn-text, #a35a00); }
.ssc-item.dup { border-left-color: var(--brand); }
.ssc-item.bad { border-left-color: var(--danger); background: var(--danger-soft); }
.ssc-item-main { display: flex; flex-direction: column; min-width: 0; }
.ssc-item-main strong, .ssc-item-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssc-item-st { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ssc-tag { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--chip); color: var(--muted); }
.ssc-tag.ok, .ssc-item.ok .ssc-tag { background: var(--ok-soft); color: var(--ok); }
.ssc-tag.late, .ssc-item.late .ssc-tag { background: var(--warn-soft); color: var(--warn-text, #7a5300); }
.ssc-tag.dup, .ssc-item.dup .ssc-tag { background: var(--brand-soft); color: var(--brand-strong, var(--brand)); }
.ssc-tag.bad, .ssc-item.bad .ssc-tag { background: var(--danger-soft); color: var(--danger); }
.ssc-item.bad .ssc-tag { background: var(--surface); }
.ssc-note { margin: 0; }

/* ---------- หน้าสแกนค้นหา ---------- */
.ssc-look-bar { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.ssc-look-bar .ssc-scan-btn { min-height: 48px; padding: 0 18px; background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.ssc-look-bar .ssc-scan-btn:hover { color: var(--brand-ink); filter: brightness(1.05); }
.ssc-look-search { flex: 1 1 260px; width: auto; min-height: 48px; }
.ssc-look-search input { font-size: 16px; }
.ssc-look-empty p { margin: 0; }
.ssc-card { display: flex; gap: 18px; align-items: flex-start; margin: 0; }
.ssc-card-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 auto; }
.ssc-card-name { margin: 0; font-size: 1.4rem; overflow-wrap: anywhere; }
.ssc-card-name small { font-size: .9rem; font-weight: 400; }
.ssc-dl { display: grid; gap: 4px; margin: 0; }
.ssc-dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.ssc-dl dt { color: var(--muted); }
.ssc-dl dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; overflow-wrap: anywhere; }
.ssc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ssc-attres { margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); font-weight: 600; background: var(--chip); }
.ssc-attres.ok { background: var(--ok-soft); color: var(--ok); }
.ssc-attres.late { background: var(--warn-soft); color: var(--warn-text, #7a5300); }
.ssc-attres.dup { background: var(--brand-soft); color: var(--brand-strong, var(--brand)); }
.ssc-attres.bad { background: var(--danger-soft); color: var(--danger); }
.ssc-recent { margin: 0; }
.ssc-recent h2 { margin: 0 0 8px; font-size: 1rem; }
.ssc-recent ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ssc-recent-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--radius-sm);
  background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; min-width: 0;
}
.ssc-recent-btn:hover { background: var(--brand-tint); }
.ssc-recent-btn > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- อัปโหลดรูปหลายรูป ---------- */
.sbp-pick { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin: 0; }
.sbp-steps { margin: 0; padding-left: 20px; color: var(--muted); }
.sbp-result { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sbp-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sbp-grow { flex: 1 1 auto; }
.sbp-progress { font-weight: 700; }
.sbp-file code { overflow-wrap: anywhere; }
.sbp-stu { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.sbp-table tr.sbp-ok td { background: var(--ok-soft); }
.sbp-table tr.sbp-bad td:last-child { color: var(--danger); font-weight: 600; }

/* ---------- มือถือ / แท็บเล็ต ---------- */
@media (max-width: 900px) {
  .ssc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sav-xl { width: 96px; height: 120px; border-radius: 14px; }
  .sav-xl .sav-ini { font-size: 1.6rem; }
  .ssc-last { gap: 12px; padding: 10px; }
  .ssc-name { font-size: 1.2rem; }
  .ssc-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssc-card { flex-direction: column; align-items: center; text-align: center; }
  .ssc-card-main { width: 100%; text-align: left; }
  .ssc-dl > div { grid-template-columns: 90px minmax(0, 1fr); }
  .ssc-actions .btn { flex: 1 1 auto; justify-content: center; }
  .ssc-look-bar .ssc-scan-btn { flex: 1 1 100%; justify-content: center; }
  .ssc-late .actions { margin-left: 0; width: 100%; }
  .ssc-late .actions .btn { flex: 1 1 auto; }
  .sbp-sum .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ssc-last { animation: none; }
  .qsb-live::before { animation: none; }
}
@media print { .qsb, .ssc-look-bar { display: none !important; } }

/* รอบ 69 (แก้ตามรีวิว): ห้องที่สแกนบัตรไปบางคน — หน้าแรกโรงเรียน (รายการยังไม่เช็กชื่อ) */
.sdb-partial { display: block; color: var(--warn-text, #7a5300); font-weight: 600; font-size: .8rem; }

/* =====================================================================
   รอบ 104: <StudentPicker> (spk-) — ช่องค้นหา/เลือกนักเรียนตัวเดียวของทุกหน้า
   spk-float = ผลเป็นป๊อปอัปใต้ช่อง (หัวหน้ารับเงิน) · spk-inline = รายการใต้ช่องในฟอร์ม
   ===================================================================== */
.spk { position: relative; min-width: 0; }
.spk-inline { display: flex; flex-direction: column; gap: 6px; }
.spk-label { font-size: .9rem; color: var(--muted); }
.spk-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.spk-search { flex: 1 1 auto; min-width: 0; margin: 0; }
/* ช่องอยู่ในฟอร์ม (.field / .san-form ฯลฯ) ได้ — กันกฎ input ของฟอร์มทำให้เกิดกรอบซ้อน */
.spk .spk-search input[type="search"] {
  flex: 1; width: auto; min-width: 0; min-height: 0; margin: 0; padding: 8px 0; border: 0; border-radius: 0;
  outline: 0; box-shadow: none; background: none; color: var(--ink);
}
.spk-float .spk-search { width: 380px; flex: none; }
.spk-hits { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.spk-float .spk-hits {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: min(560px, 92vw); max-height: min(70vh, 520px);
  border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.spk-inline .spk-hits { max-height: 300px; }
.spk-hits-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--line); }
.spk-list { overflow: auto; overscroll-behavior: contain; padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.spk-pad { margin: 0; padding: 10px 12px; }
.spk-err { color: var(--danger); font-size: .88rem; }
.spk-hit {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; min-height: 48px;
  border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.spk-hit:hover:not(:disabled), .spk-hit:focus-visible { background: var(--brand-soft); outline: none; }
.spk-hit:disabled { cursor: default; }
.spk-hit:disabled:not(.is-picked) { opacity: .6; }
.spk-hit.is-picked { background: var(--chip); }
.spk-hit-main { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.spk-hit-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.spk-hit-name strong { overflow-wrap: anywhere; }
.spk-hit-meta { overflow-wrap: anywhere; }
.spk-st { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--warn-soft); color: var(--ink); white-space: nowrap; }
.spk-hit-extra { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; font-size: .9rem; }
.spk-check { flex: none; color: var(--ok); font-weight: 700; }
@media (max-width: 760px) {
  .spk-float { flex: 1 1 100%; width: 100%; }
  .spk-float .spk-search { width: auto; flex: 1 1 auto; }
  .spk-float .spk-hits { left: 0; right: 0; width: auto; }
  .spk-search input { font-size: 16px; }
}