/* หมวดผ่อน (inst) — ของใหม่ที่ r-inst.js ใช้ · ชื่อคลาสขึ้นต้น ri- ทั้งหมด (ห้าม position:sticky ในแผ่น) */

/* ── การ์ดสรุป 6 ใบ + ชิปสถานะ ── */
.ri-sum { gap:var(--s2); margin-bottom:var(--s3); }
.ri-sum .card { margin-bottom:0; }
.ri-stat { padding:12px 14px; min-width:0; }
.ri-stat.wide { grid-column:1 / -1; }
.ri-sv { font-size:21px; font-weight:700; letter-spacing:-.3px; margin-top:2px; overflow-wrap:anywhere; }
.ri-sv small { font-size:13px; font-weight:500; color:var(--muted); }
.ri-chips { margin-top:calc(var(--s1) * -1); }

/* ── การ์ดสัญญาในรายการ ── */
.ri-card { background:var(--card); border-radius:var(--r-card); padding:12px var(--s4); margin-bottom:var(--s2); border-left:3px solid transparent; }
.ri-card.late { border-left-color:var(--red); }
.ri-card.soon { border-left-color:var(--orange); }
/* ลิสต์สัญญายาว (ร้านผ่อนหลายร้อยใบ): การ์ดนอกจอไม่คำนวณเลย์เอาต์ — เข้าหน้าผ่อน/กดชิปสถานะไม่ค้าง (ถ้า iPhone เห็นการ์ดว่างตอนเลื่อนเร็ว ให้ถอดบรรทัดนี้) */
#inst-body .ri-card { content-visibility:auto; contain-intrinsic-size:auto 150px; }
.ri-ctop { display:flex; gap:var(--s3); align-items:flex-start; }
.ri-ctop .txt { flex:1; min-width:0; }
.ri-ctop .name { font-size:16.5px; font-weight:600; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ri-ctop .sub { font-size:13px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere; }
.ri-ctop .tagmini { margin-top:4px; }
.ri-cright { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; }
.ri-out { font-size:16px; font-weight:700; }
.ri-dot { width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; flex:none; }
.ri-re { font-size:11px; padding:2px 7px; }
/* แถบผ่อนถึงไหน + เส้นทุน (progHTML) */
.ri-prog { margin-top:10px; }
.ri-bar { position:relative; height:6px; border-radius:3px; background:var(--card-2); }
.ri-bar > i { position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--tint); }
.ri-prog.ok .ri-bar > i { background:var(--green); }
.ri-bar > b { position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; border-radius:1px; background:var(--ink); }
.ri-plab { display:flex; justify-content:space-between; gap:var(--s2); flex-wrap:wrap; margin-top:5px; font-size:12px; color:var(--muted); }
.ri-plab .ri-pin { color:var(--green); font-weight:600; }
.ri-plab .ri-pout { color:var(--orange); font-weight:600; }
.ri-cfoot { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; }
.ri-cline { flex:1; min-width:170px; font-size:14px; }
.ri-cline .late { color:var(--red); font-weight:600; }
.ri-cline .soon { color:var(--orange); font-weight:600; }
.ri-rem { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.ri-rem.yes { color:var(--green); }
.ri-cbtn { display:flex; gap:6px; }
.ri-cbtn .btn { padding:7px 12px; font-size:14px; }
.badge.ri-work { background:rgba(191,90,242,.18); color:var(--purple); }
.badge.ri-soon { background:rgba(255,159,10,.16); color:var(--orange); }

/* ── ปฏิทิน: ยุบ/กาง + เดือนนี้ + ค้างจากเดือนก่อน ── */
.ri-calhead { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); margin-bottom:var(--s2); }
.ri-calhead .btn.plain { font-size:15px; }
.ri-calnow { font-size:14px; margin-left:auto; }
.ri-carry { margin:var(--s2) 0; color:var(--red); background:rgba(255,69,58,.12); font-size:14.5px; }

/* ── หน้าสัญญา ── */
.ri-badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--s3); }
.ri-drow .ri-dl { font-size:15px; font-weight:400; color:var(--muted); white-space:normal; }
.ri-drow .ri-dv { font-size:15px; font-weight:500; white-space:normal; text-align:right; max-width:62%; overflow-wrap:anywhere; }
.ri-dv.strong { font-weight:700; }
.ri-dv.in { color:var(--green); }
.ri-dv.out { color:var(--red); }
.ri-dv.cost { color:var(--muted); }
.ri-edit { cursor:pointer; }
.ri-pen { font-size:13px; color:var(--tint); margin-left:4px; }
.ri-pill { font-size:13px; font-weight:600; padding:3px 9px; border-radius:var(--r-pill); background:rgba(142,142,147,.2); color:var(--muted); }
.ri-pill.ok { background:rgba(48,209,88,.16); color:var(--green); }
.ri-pill.late { background:rgba(255,69,58,.16); color:var(--red); }
.ri-pill.done { background:rgba(10,132,255,.16); color:var(--tint); }
.ri-banner { background:var(--card); border-radius:var(--r-inner); padding:12px 14px; margin-bottom:var(--s3); font-size:14.5px; line-height:1.45; color:var(--ink-2); border-left:3px solid var(--tint); }
.ri-banner.warn { border-left-color:var(--orange); background:rgba(255,159,10,.10); }
.ri-banner.ok { border-left-color:var(--green); background:rgba(48,209,88,.10); }
.ri-btnrow { display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s3); }
.ri-btnrow .btn { font-size:14.5px; padding:9px 14px; }
.ri-dgroup { margin-top:var(--s3); }
.row.ri-danger .name { color:var(--red); }
.ri-v { font-weight:400; font-size:15px; color:var(--muted); max-width:55%; overflow:hidden; text-overflow:ellipsis; }
.ri-h3 { font-size:15px !important; color:var(--muted); font-weight:600 !important; }
.ri-wrap { white-space:normal !important; overflow-wrap:anywhere; }
.ri-pre { white-space:pre-line; }
.ri-prow { align-items:flex-start; }
.ri-prow .ic { margin-top:2px; }
.ri-prow .val { font-size:16px; }
.ri-cut { padding:6px 12px; font-size:14px; flex:none; }

/* โน้ตตารางงวด (หน้าตาเหมือนข้อความที่ส่งลูกค้า) */
.ri-note { padding:14px; }
.ri-nh { display:flex; justify-content:space-between; align-items:center; gap:var(--s2); font-size:14px; color:var(--muted); margin-bottom:8px; }
.ri-nl { display:flex; gap:8px; align-items:flex-start; font-size:14.5px; margin:3px 0; }
.ri-nl i { color:var(--muted); margin-top:3px; }
.ri-nl.strong { font-weight:600; }
.ri-sgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:4px 10px; margin-top:8px; font-size:13.5px; font-variant-numeric:tabular-nums; }
.ri-sp { display:flex; gap:4px; align-items:center; color:var(--ink-2); }
.ri-sp span:first-child { color:var(--muted); min-width:22px; }
.ri-sp.paid i { color:var(--green); }
.ri-sp.late { color:var(--red); }

/* รูป/เอกสาร */
.ri-thumbs { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px; margin-bottom:var(--s3); }
.ri-thumb { position:relative; aspect-ratio:1; border-radius:var(--r-inner); overflow:hidden; background:var(--card-2); }
.ri-thumb img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.ri-dtag { position:absolute; left:4px; bottom:4px; font-size:11px; font-weight:600; background:rgba(0,0,0,.62); color:#fff; padding:2px 6px; border-radius:6px; display:flex; gap:3px; align-items:center; }
.ri-dtag.on { background:var(--tint); }
.ri-tb { position:absolute; top:4px; right:4px; width:28px; height:28px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; display:grid; place-items:center; font-size:14px; }
.ri-tb.rm { background:rgba(255,69,58,.9); }
.ri-tb + .ri-tb { right:36px; }
.ri-lightbox { position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.92); display:grid; place-items:center; }
.ri-lightbox img { max-width:100vw; max-height:100vh; object-fit:contain; }
.ri-lightbox .circ-btn { position:absolute; top:calc(env(safe-area-inset-top) + 12px); right:12px; }
.ri-lb-n { position:absolute; top:calc(env(safe-area-inset-top) + 20px); left:50%; transform:translateX(-50%); color:#fff; font-size:15px; font-weight:600; background:rgba(0,0,0,.55); padding:4px 12px; border-radius:999px; }
.ri-lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:0; background:rgba(0,0,0,.55); color:#fff; font-size:26px; line-height:1; }
.ri-lb-nav[data-d="-1"] { left:10px; } .ri-lb-nav[data-d="1"] { right:10px; }

/* ครอปบัตร เต็มจอ */
.ri-crop { position:fixed; inset:0; z-index:9000; background:#000; color:#fff; display:flex; flex-direction:column; }
.ri-crop-bar { display:flex; justify-content:space-between; align-items:center; padding:calc(env(safe-area-inset-top) + 10px) 14px 10px; font-weight:600; }
.ri-crop-stage { flex:1; min-height:0; display:grid; place-items:center; padding:8px; }
.ri-crop-wrap { position:relative; touch-action:none; user-select:none; max-width:100%; max-height:100%; }
.ri-crop-wrap img { display:block; max-width:calc(100vw - 16px); max-height:calc(100vh - 200px); }
.ri-crop-box { position:absolute; border:2px solid #0a84ff; box-shadow:0 0 0 9999px rgba(0,0,0,.55); }
.ri-crop-box i { position:absolute; width:22px; height:22px; background:#0a84ff; border-radius:50%; }
.ri-crop-box i[data-h="nw"] { left:-11px; top:-11px; } .ri-crop-box i[data-h="ne"] { right:-11px; top:-11px; }
.ri-crop-box i[data-h="sw"] { left:-11px; bottom:-11px; } .ri-crop-box i[data-h="se"] { right:-11px; bottom:-11px; }
.ri-crop-tip { text-align:center; font-size:13.5px; color:#bbb; margin:6px 12px; }
.ri-crop-foot { display:flex; gap:8px; padding:8px 12px calc(env(safe-area-inset-bottom) + 12px); }
.ri-crop-foot .btn { flex:1; justify-content:center; font-size:14.5px; padding:11px 8px; }

/* ใบสัญญา (กระดาษขาวในแผ่น) */
.ri-paper { background:#fff; color:#111; border-radius:var(--r-inner); padding:12px; overflow-x:auto; margin-bottom:var(--s3); }

/* รับเงิน */
.ri-pick { cursor:pointer; }
.ri-pick.on .name { font-weight:600; }
.ri-feerow { padding-top:6px; padding-bottom:10px; }
.ri-feein { width:110px; background:var(--card-2); border:0; border-radius:10px; color:var(--ink); font:inherit; font-size:16px; padding:8px 10px; text-align:right; }
.ri-acct { margin:var(--s3) 0; }
.ri-acct .kpi-label { margin-bottom:6px; }
.ri-total { font-size:15px; color:var(--muted); display:flex; flex-direction:column; gap:3px; }
.ri-tbig { font-size:22px; font-weight:700; color:var(--ink); }
.ri-qrimg { width:220px; max-width:100%; background:#fff; border-radius:var(--r-inner); padding:8px; }
.ri-slipimg { max-width:100%; max-height:420px; border-radius:var(--r-inner); background:var(--card-2); display:block; margin:10px auto; cursor:zoom-in; }
.ri-msg { font-size:14px; color:var(--muted); margin:6px 2px; min-height:0; }
.ri-msg:empty { display:none; }
.ri-msg.bad { color:var(--red); }
.ri-warn { color:var(--orange) !important; }
.ri-warn:empty { display:none; }

/* ฟอร์ม */
.ri-g3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s2); }
.ri-g3 > div { min-width:0; }
@media (max-width:420px) { .ri-g3 { grid-template-columns:repeat(2, minmax(0, 1fr)); } .ri-g3 > :last-child:nth-child(odd) { grid-column:1 / -1; } }
.ri-sched { padding:12px; }
.ri-sched.paid { opacity:.72; }
.ri-sched .kpi-label { margin-bottom:6px; font-weight:600; }
.ri-cb { display:flex; gap:8px; align-items:center; font-size:14.5px; color:var(--ink-2); margin-top:6px; }
.ri-cb input { width:20px; height:20px; accent-color:var(--tint); }
.ri-msgbox { white-space:pre-wrap; background:var(--card-2); border-radius:var(--r-inner); padding:12px; font:inherit; font-size:14px; }
.ri-addrh { margin-top:var(--s2); }
.ri-addrh a { font-size:14px; }
.ri-addtop { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s3); }
.ri-auto { margin-left:auto; color:var(--muted); }
.ri-map { height:280px; border-radius:var(--r-inner); overflow:hidden; margin-bottom:var(--s3); background:var(--card-2); }

/* LINE */
.row .ic.ri-av { background:var(--card-2); overflow:hidden; border-radius:50%; }
.ri-av img { width:100%; height:100%; object-fit:cover; }
.ri-bigav { width:84px; height:84px; border-radius:50%; object-fit:cover; margin:0 auto 10px; display:block; background:var(--card-2); }
.ri-bigname { font-size:19px; font-weight:700; margin-bottom:6px; }

/* ปุ่มกำลังทำ */
.ri-spin { display:inline-block; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:ri-rot .7s linear infinite; vertical-align:-2px; }
@keyframes ri-rot { to { transform:rotate(360deg); } }

/* ── สลิป ── */
.ri-slip { padding:14px; }
.ri-sname { font-size:16.5px; font-weight:600; }
.ri-sreason { font-size:14px; color:var(--ink-2); margin:2px 0; }
.ri-smeta { background:var(--card-2); border-radius:var(--r-inner); padding:10px 12px; font-size:14px; display:flex; flex-direction:column; gap:3px; margin-bottom:10px; overflow-wrap:anywhere; }
.ri-flag { font-weight:600; display:inline-flex; gap:4px; align-items:center; }
.ri-flag.bad { color:var(--red); }
.ri-flag.wait { color:var(--orange); }
.ri-flag.good { color:var(--green); }
.ri-mono { font-family:ui-monospace, Menlo, monospace; font-size:11.5px; color:var(--muted); }
.ri-slip .ri-btnrow { margin-bottom:0; }
.ri-hrow { align-items:flex-start; cursor:pointer; }
.ri-hr { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; max-width:48%; }
.ri-hr .val { font-size:15px; white-space:normal; }
.ri-hr small { font-size:12px; color:var(--muted); font-weight:400; }
.ri-hact { display:flex; align-items:center; gap:6px; }
.ri-hact .btn.plain { font-size:13.5px; padding:2px; }

/* ── ตั้งค่ารีไฟแนนซ์ ── */
.ri-rr { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.ri-rr input { height:40px; border:0; border-radius:10px; background:var(--card-2); color:var(--ink); font:inherit; padding:0 10px; }
.ri-rrm { width:62px; } .ri-rrf { width:86px; font-weight:700; }
.ri-rrx { flex:1; min-width:0; }

/* ── รายงาน ── */
.ri-tablewrap { overflow-x:auto; background:var(--card); border-radius:var(--r-card); margin-bottom:var(--s3); -webkit-overflow-scrolling:touch; }
.ri-table { border-collapse:collapse; font-size:13px; width:max-content; min-width:100%; }
.ri-table th, .ri-table td { padding:8px 10px; text-align:left; white-space:nowrap; border-bottom:1px solid var(--line); }
.ri-table th { color:var(--muted); font-weight:600; font-size:12px; }
.ri-table .n { text-align:right; font-variant-numeric:tabular-nums; }
.ri-table td.nm { white-space:normal; min-width:110px; }
.ri-table .v-in, .ri-table .st-ok { color:var(--green); }
.ri-table .v-out, .ri-table .st-late { color:var(--red); }
.ri-table .st-done { color:var(--tint); }
.ri-table .st-off { color:var(--muted); }
.ri-table tfoot td { font-weight:700; border-bottom:0; }

/* ── ภาพรวมร้านผ่อน ── */
.ri-alert { display:flex; justify-content:space-between; align-items:center; gap:var(--s3); background:rgba(255,69,58,.12); border:1px solid rgba(255,69,58,.35); }
.ri-ah { color:var(--red); font-weight:600; font-size:14px; }
.ri-av2 { font-size:28px; font-weight:700; color:var(--red); }
.ri-as { font-size:13px; color:var(--muted); }
.ri-barl { display:flex; justify-content:space-between; font-size:14px; margin:10px 0 6px; color:var(--ink-2); }
.ri-inst .card .paybar { flex-wrap:wrap; }
.ri-inst .card .paybar .btn { white-space:nowrap; font-size:15px; padding:11px 12px; min-width:0; }
.ri-drow { min-height:44px; padding-top:10px; padding-bottom:10px; }
/* แก้ในแถวรายละเอียดสัญญา (quick edit) */
.ri-qe-on .ri-dv { max-width:70%; flex:1; }
.ri-qbox { display:flex; align-items:center; gap:6px; justify-content:flex-end; }
.ri-qin { flex:1; min-width:0; width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--card-2); border:1px solid var(--tint); border-radius:10px; padding:6px 10px; text-align:right; outline:none; }
.ri-qok { flex:none; width:32px; height:32px; border-radius:50%; border:0; background:var(--tint); color:#fff; display:grid; place-items:center; font-size:16px; }
.ri-qe-busy { opacity:.55; }
/* ฟอร์มเพิ่มสัญญา: ปุ่มเต็มแถว/แถบปุ่มไม่มีระยะล่าง → ชิดช่องถัดไป (devqueue #71 #72) */
#ri-add > .btn.block:not(:last-child), #ri-add > .paybar:not(:last-child) { margin-bottom:var(--s3); }

/* ปัดเปลี่ยนรูปเอง — ห้ามเบราว์เซอร์เอาไปเป็นท่าย้อนหน้า */
.ri-lightbox { touch-action:pan-y pinch-zoom; overscroll-behavior:contain; }

/* แผ่นที่เปิดทันทีจากข้อมูลในเครื่อง รอของสด (r-pawn.js peekHTML) — จางนิดให้รู้ว่ายังกดไม่ได้ */
.pv-wait { opacity:.6; }
.pv-spin { padding:6px 0 10px; }