/* viewer.css — ดูหน้าที่ส่ง + ลายน้ำบนจอ + ลายเซ็นซ้อน + ช่องลงชื่อ (หน้า /documents/view/{id} · 8 พ.ย. 69)
   ลายน้ำเป็น CSS ล้วน: ไม่อยู่ในไฟล์ · ไม่รับคลิก · เลือกข้อความไม่ได้ · มือถือก่อน (375px ต้องไม่ล้นแนวนอน) */

/* ── ลายน้ำแนวขวาง ── */
.wm {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none;
    container-type: size; z-index: 1;
}
/* บรรทัดเดียว กลางหน้า แนวขวาง (8 พ.ย. 69) — ขนาดตัวอักษรตามความกว้างเอกสาร ให้ทั้งบรรทัดพาดผ่านกลางหน้าพอดี */
.wm__line {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-30deg);
    white-space: pre; text-align: center; font-family: "Chakra Petch", "IBM Plex Sans Thai Looped", sans-serif; font-weight: 700;
    font-size: clamp(10px, 5.4cqw, 40px); line-height: 1.35; letter-spacing: .01em;
    color: rgb(155 27 48 / .3);
    text-shadow: 0 0 2px rgb(255 255 255 / .75);
}
.wm--tiny .wm__line { font-size: clamp(4px, 5.4cqw, 9px); color: rgb(155 27 48 / .5); text-shadow: none; }
@media (prefers-contrast: more) { .wm__line { color: rgb(155 27 48 / .45); } }
@media print { .wm__line { color: rgb(155 27 48 / .4); } }

/* ── หน้าดูเอกสาร ── */
.viewer { display: grid; gap: 8px; margin: 0; }
.viewer__page {
    position: relative; overflow: hidden; border-radius: var(--r-sm); border: 1px solid var(--line);
    background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .08);
}
.viewer__pdf { display: grid; gap: 12px; }
.viewer__img { display: block; width: 100%; height: auto; max-height: none; }
.viewer__page { container-type: inline-size; }
/* ลายเซ็น + ตราเซ็นเมื่อไร/กดยอมรับ ซ้อนมุมขวาล่าง (8 พ.ย. 69) */
.viewer__sigbox {
    position: absolute; right: 2%; bottom: 1.5%; z-index: 2; width: 62%; max-width: 420px;
    display: grid; justify-items: end; gap: 1px; pointer-events: none; user-select: none; -webkit-user-select: none;
}
.viewer__certify {
    justify-self: center; font-family: "Chakra Petch", sans-serif; font-weight: 700; color: #1b3a8a;
    font-size: clamp(11px, 4.2cqw, 22px); line-height: 1.1; margin-bottom: .35em;
    text-shadow: 0 0 2px #fff, 0 0 2px #fff;
}
.viewer__sig { justify-self: center; width: 56%; height: auto; filter: drop-shadow(0 0 1px rgb(255 255 255 / .9)); }
.viewer__stamp {
    max-width: 100%; padding: 1px 6px; border-radius: 4px; text-align: right;
    font-size: clamp(9px, 2.9cqw, 13px); line-height: 1.3; font-weight: 600; color: #1b3a8a;
    background: rgb(255 255 255 / .82);
}
.viewer__stamp--warn { color: #9b1b30; }

/* ── หลักฐานการลงลายมือชื่อ (ใต้เอกสาร) ── */
.sigproof { display: grid; gap: 8px; padding: 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.sigproof__title { display: flex; gap: 6px; align-items: center; font-size: 1rem; color: var(--green); }
.sigproof__list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: .9rem; }
.sigproof__list dt { color: var(--ink-2); font-weight: 600; }
.sigproof__list dd { margin: 0; overflow-wrap: anywhere; }
.sigproof__warn { color: var(--maroon); font-weight: 600; }

/* ── ข้อมูลตามกฎหมายก่อนเซ็น ── */
.legal {
    display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-sm);
    background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line));
}
.legal__title { display: flex; gap: 6px; align-items: center; font-size: .95rem; color: var(--brand); margin: 0; }
.legal__list { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: .86rem; overflow-wrap: anywhere; }
.sigcard__accept { font-size: .86rem; color: var(--ink-2); }
.viewer__status { padding: 14px; text-align: center; color: var(--ink-2); font-weight: 600; }
.viewer__caption { font-size: .82rem; color: var(--ink-2); overflow-wrap: anywhere; }

/* ── หน้าอื่นของเอกสารเดียวกัน ── */
.pager { display: flex; flex-wrap: wrap; gap: 6px; }
.pager__item {
    display: inline-flex; gap: 6px; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface); color: var(--brand); font-weight: 600; text-decoration: none;
}
.pager__item.is-current { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager__flag { font-size: .74rem; font-weight: 700; color: var(--maroon); background: var(--maroon-soft); border-radius: 999px; padding: 0 8px; }
.pager__item.is-current .pager__flag { color: var(--maroon); background: #fff; }

/* ── ช่องลงชื่อรับรองหน้า ── */
.pagesign__statement {
    display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-sm);
    background: var(--surface-2); border-left: 4px solid var(--brand); overflow-wrap: anywhere;
}
.pagesign__subject { font-weight: 600; }

/* ── รายการหน้าที่ส่ง (/documents): ลายน้ำบนรูปย่อ + สถานะลงชื่อ ── */
.pages__thumbwrap { position: relative; grid-row: span 2; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; }
.pages__thumbwrap .pages__thumb { grid-row: auto; display: block; }
.pages__sign { font-size: .78rem; font-weight: 700; }
.pages__sign--ok { color: var(--green); }
.pages__sign--need { color: var(--maroon); }
.upload__thumbwrap { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; }
.upload__thumbwrap .upload__thumb { display: block; }