/* บันทึกตั้งลูกหนี้ & ใบเสร็จ — full-page workspace (1 สร้างเอกสาร · 2 จับคู่ · 3 ตรวจสอบ · 4 บันทึก).
   Soft grey page, white cards, dark primary buttons, lavender AI actions, status chips. */

#modalAddARReceipt.rcw-page {
  --rcw-ink: #1F2428;
  --rcw-line: #E6E9EC;
  --rcw-muted: #6B7680;
  --rcw-ai: #5B5BD6;
  --rcw-ai-soft: #EEEDFD;
  --rcw-ok: #15803D; --rcw-ok-soft: #E7F6EC;
  --rcw-warn: #B45309; --rcw-warn-soft: #FEF3E2;
  --rcw-err: #DC2626; --rcw-err-soft: #FDECEC;
  --rcw-info: #3F57C9; --rcw-info-soft: #EAF0FE;
  --rcw-shadow: 0 1px 2px rgb(16 24 40 / 4%), 0 10px 28px -16px rgb(16 24 40 / 16%);
  position: fixed; inset: var(--rcw-top, var(--topbar-height)) 0 0 var(--rcw-left, 0);
  width: auto; height: auto; padding: 0 !important; overflow: hidden; z-index: 950;
}
#modalAddARReceipt.rcw-page.fade { transition: opacity .16s ease; }
#modalAddARReceipt .rcw-dialog { max-width: none; width: 100%; height: 100%; margin: 0; transform: none !important; }
#modalAddARReceipt .rcw-content { height: 100%; display: flex; flex-direction: column; border: 0; border-radius: 0; background: var(--bg-main); box-shadow: none; overflow: hidden; }

/* Header */
.rcw-head { position: relative; display: block; flex-shrink: 0; padding: 14px 28px 16px; border-bottom: 1px solid var(--rcw-line);
  background: radial-gradient(ellipse 38% 120% at 78% 30%, rgb(255 255 255 / 60%) 0%, rgb(255 255 255 / 0%) 70%), linear-gradient(90deg, #ffffff 0%, #ffffff 40%, #eceef1 70%, #f5f6f8 100%); overflow: hidden; }
.rcw-head-art { position: absolute; right: 2%; top: -10px; width: 220px; opacity: .6; pointer-events: none; user-select: none; }
.rcw-head-top { position: relative; display: flex; align-items: center; gap: 14px; }
.rcw-back { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; border: 1px solid var(--rcw-line); border-radius: 8px; background: var(--bg-card); color: var(--text-secondary); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rcw-back:hover { color: var(--text-primary); border-color: #c9cdd2; }
.rcw-crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--rcw-muted); white-space: nowrap; }
.rcw-crumb b { font-weight: 600; color: var(--text-secondary); }
.rcw-steps { display: flex; margin: 0 0 0 auto; padding: 0; list-style: none; width: min(520px, 46%); }
.rcw-steps li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; color: var(--rcw-muted); }
.rcw-steps li + li::before { content: ""; position: absolute; top: 14px; right: 50%; width: 100%; height: 2px; background: var(--rcw-line); }
.rcw-steps li.is-done::before, .rcw-steps li.is-active::before { background: var(--rcw-ink); }
.rcw-step-num { position: relative; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-main); border: 1px solid var(--rcw-line); font-size: 13px; font-weight: 700; color: var(--rcw-muted); }
.rcw-steps li.is-active { color: var(--text-primary); font-weight: 700; }
.rcw-steps li.is-active .rcw-step-num, .rcw-steps li.is-done .rcw-step-num { background: var(--rcw-ink); border-color: var(--rcw-ink); color: #fff; }
.rcw-steps li.is-active .rcw-step-num { box-shadow: 0 0 0 4px rgb(31 36 40 / 10%); }
.rcw-title-row { position: relative; margin-top: 8px; }
.rcw-title-row h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--text-primary); }
.rcw-title-row h1 #rcw-title-step { font-weight: 800; }
.rcw-title-row p { margin: 3px 0 0; font-size: 13.5px; color: var(--rcw-muted); }

/* Body */
.rcw-body { flex: 1; overflow-y: auto; padding: 20px 28px 26px !important; background: var(--bg-main); container-type: inline-size; container-name: rcwbody; }
.rcw-step { display: flex; flex-direction: column; gap: 16px; position: relative; max-width: 1560px; margin: 0 auto; }
.rcw-step[hidden] { display: none; }
.rcw-card { position: relative; background: var(--bg-card); border: 1px solid var(--rcw-line); border-radius: 16px; box-shadow: var(--rcw-shadow); padding: 18px 20px; min-width: 0; }
.rcw-sec-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; }

/* Buttons / chips */
.rcw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, opacity .15s; }
.rcw-btn:disabled { opacity: .4; cursor: not-allowed; }
.rcw-btn:focus-visible { outline: 2px solid var(--rcw-ai); outline-offset: 2px; }
.rcw-btn-dark { background: linear-gradient(180deg, #2E353B, #1F2428); color: #fff; box-shadow: 0 6px 14px -8px rgb(17 24 39 / 70%); }
.rcw-btn-dark:hover:not(:disabled) { background: linear-gradient(180deg, #384047, #23292E); }
.rcw-btn-light { background: var(--bg-card); color: var(--text-primary); border-color: #DCE1E5; }
.rcw-btn-light:hover:not(:disabled) { background: var(--bg-main); }
.rcw-btn-ai { background: var(--rcw-ai-soft); color: var(--rcw-ai); border-color: #DCDAFB; }
.rcw-btn-ai:hover { background: #E4E2FC; }
.rcw-btn-danger { background: var(--bg-card); color: var(--rcw-err); border-color: #F5C7C7; }
.rcw-btn-danger:hover:not(:disabled) { background: var(--rcw-err-soft); }
.rcw-btn-sm { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 9px; }
.rcw-btn-xs { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.rcw-btn-lg { height: 46px; padding: 0 22px; font-size: 14.5px; border-radius: 12px; }
.rcw-link { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rcw-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 12px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.rcw-chip.is-ok { background: var(--rcw-ok-soft); color: var(--rcw-ok); }
.rcw-chip.is-warn { background: var(--rcw-warn-soft); color: var(--rcw-warn); }
.rcw-chip.is-err { background: var(--rcw-err-soft); color: var(--rcw-err); }
.rcw-chip.is-info { background: var(--rcw-info-soft); color: var(--rcw-info); }
.rcw-chip.is-muted { background: var(--bg-main); color: var(--rcw-muted); }
.rcw-muted { color: var(--rcw-muted); font-size: 12px; }
.rcw-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px; border: 1px dashed #D5DBE0; border-radius: 12px; color: var(--rcw-muted); font-size: 13px; text-align: center; }

/* Hero / stats */
.rcw-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; }
.rcw-hero-icon { width: 54px; height: 54px; flex-shrink: 0; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(150deg, #FAFBFB, #E7EBEE); border: 1px solid var(--rcw-line); color: #3E4A53; font-size: 26px; box-shadow: inset 0 1px 0 #fff, 0 8px 16px -10px rgb(30 42 51 / 45%); }
.rcw-hero-text { flex: 1; min-width: 240px; }
.rcw-hero-text h2 { margin: 0; font-size: 19px; font-weight: 800; }
.rcw-hero-text p { margin: 3px 0 0; font-size: 13px; color: var(--rcw-muted); }
.rcw-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rcw-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.rcw-stat { display: flex; align-items: center; gap: 10px; min-width: 120px; padding: 10px 14px; border: 1px solid var(--rcw-line); border-radius: 12px; background: var(--bg-card); }
.rcw-stat > .ti { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--bg-main); color: #3E4A53; font-size: 18px; }
.rcw-stat small { display: block; font-size: 11.5px; color: var(--rcw-muted); }
.rcw-stat b { font-size: 16px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Builders */
.rcw-builders { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.rcw-builder { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; }
.rcw-card-head { display: flex; align-items: center; gap: 12px; }
.rcw-card-icon { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(150deg, #FAFBFB, #E7EBEE); border: 1px solid var(--rcw-line); color: #3E4A53; font-size: 22px; }
.rcw-card-head-sm .rcw-card-icon { width: 38px; height: 38px; font-size: 19px; border-radius: 10px; }
.rcw-card-titles h3 { margin: 0; font-size: 16px; font-weight: 800; }
.rcw-card-titles p { margin: 2px 0 0; font-size: 12.5px; color: var(--rcw-muted); }
.rcw-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--rcw-line); }
.rcw-toolbar-actions { display: flex; gap: 8px; padding-bottom: 8px; }
.rcw-tabs { display: flex; gap: 4px; }
.rcw-tab { position: relative; height: 38px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--rcw-muted); cursor: pointer; white-space: nowrap; }
.rcw-tab:hover { color: var(--text-primary); }
.rcw-tab.is-active { color: var(--text-primary); font-weight: 800; }
.rcw-tab.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--rcw-ink); }
.rcw-tabs-sm { border-bottom: 1px solid var(--rcw-line); }
.rcw-tabs-sm .rcw-tab { height: 34px; font-size: 12.5px; }
.rcw-list { display: flex; flex-direction: column; gap: 8px; max-height: 236px; overflow-y: auto; padding: 2px; }
.rcw-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--rcw-line); border-radius: 12px; background: var(--bg-card); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.rcw-item:hover { border-color: #C9D3F0; }
.rcw-item.is-sel { border-color: #9DB0EE; background: #F5F8FF; box-shadow: 0 0 0 3px rgb(79 107 237 / 10%); }
.rcw-item-icon { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--bg-main); color: #3E4A53; font-size: 17px; }
.rcw-item-main { flex: 1; min-width: 0; }
.rcw-item-main b, .rcw-item-amt b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcw-item-main small, .rcw-item-amt small { display: block; font-size: 12px; color: var(--rcw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcw-item-amt { flex-shrink: 0; text-align: left; min-width: 110px; font-variant-numeric: tabular-nums; }
.rcw-pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); }
.rcw-pager-gap { flex: 1; }
.rcw-detail { border-top: 1px solid var(--rcw-line); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.rcw-detail:empty { display: none; }
.rcw-detail-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.rcw-detail-head .ti { color: #3E4A53; font-size: 17px; }
.rcw-tag { padding: 1px 8px; border-radius: 8px; background: var(--rcw-info-soft); color: var(--rcw-info); font-size: 11.5px; font-weight: 700; }
.rcw-detail-head .rcw-muted { margin-left: auto; font-weight: 500; }
.rcw-kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
.rcw-kv > div { min-width: 0; padding: 9px 12px; border: 1px solid var(--rcw-line); border-radius: 10px; background: #FAFBFB; }
.rcw-kv .rcw-kv-wide { grid-column: 1 / -1; }
.rcw-kv small { display: block; font-size: 11.5px; color: var(--rcw-muted); }
.rcw-kv b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcw-kv span { font-size: 12px; color: var(--rcw-muted); }
.rcw-sub-title { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; }
.rcw-lines-wrap { overflow-x: auto; border: 1px solid var(--rcw-line); border-radius: 10px; }
.rcw-lines { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rcw-lines th { padding: 8px 10px; background: #F7F8F9; color: #5B656D; font-weight: 600; text-align: left; white-space: nowrap; }
.rcw-lines td { padding: 8px 10px; border-top: 1px solid var(--rcw-line); }
.rcw-lines .c-r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rcw-lines .c-c { text-align: center; width: 32px; }
.rcw-detail-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 14px; align-items: start; }
.rcw-remark small { font-size: 11.5px; color: var(--rcw-muted); }
.rcw-remark p { margin: 4px 0 6px; padding: 9px 12px; border: 1px solid var(--rcw-line); border-radius: 10px; font-size: 13px; min-height: 40px; white-space: pre-wrap; }
.rcw-totals { padding: 10px 14px; border-radius: 12px; background: #F7F8F9; font-size: 13px; font-variant-numeric: tabular-nums; }
.rcw-totals > div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; color: var(--text-secondary); }
.rcw-totals b { color: var(--text-primary); }
.rcw-totals .is-total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--rcw-line); font-weight: 800; color: var(--text-primary); }
.rcw-totals .is-total b { font-size: 17px; }
.rcw-totals .is-remain b { color: var(--rcw-info); }

/* Receipt builder: show only the selected receipt form (all forms stay in the DOM) */
#crcp-receipt-section-body { display: flex; flex-direction: column; }
#crcp-receipt-section-body > [id^="crcp-rcp-card-"] { display: none; border: 0 !important; background: none !important; overflow: visible !important; }
#crcp-receipt-section-body > [id^="crcp-rcp-card-"].is-sel { display: block; }
#crcp-receipt-section-body > [id^="crcp-rcp-card-"] > div:first-child { display: none !important; }
#crcp-receipt-section-body > [id^="crcp-rcp-card-"].is-sel [id^="crcp-rcp-body-"] { display: flex !important; flex-direction: column; gap: 16px; padding: 0 !important; } /* การ์ดแต่ละส่วนเว้นระยะกัน */

/* STEP 2: matching */
.rcw-match-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.rcw-pool, .rcw-pairs { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.rcw-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid #DCE1E5; border-radius: 10px; background: var(--bg-card); margin: 0; }
.rcw-search .ti { color: var(--rcw-muted); }
.rcw-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 13px; color: var(--text-primary); }
.rcw-search:focus-within { border-color: var(--rcw-ai); box-shadow: 0 0 0 3px var(--rcw-ai-soft); }
.rcw-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); margin: 0; cursor: pointer; }
.rcw-check input { accent-color: var(--rcw-ink); }
.rcw-pool-list { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; padding: 2px; }
.rcw-prow { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border: 1px solid var(--rcw-line); border-radius: 12px; background: var(--bg-card); cursor: pointer; transition: border-color .15s, background .15s; }
.rcw-prow:hover { border-color: #C9D3F0; }
.rcw-prow.is-pick { border-color: var(--rcw-ink); background: #F7F8FA; box-shadow: 0 0 0 3px rgb(31 36 40 / 8%); }
.rcw-prow:focus-visible { outline: 2px solid var(--rcw-ai); outline-offset: 2px; }
.rcw-prow .rcw-item-amt { min-width: 84px; text-align: right; }
.rcw-radio { width: 18px; height: 18px; flex-shrink: 0; border-radius: 5px; border: 2px solid #CDD3D8; }
.rcw-prow.is-pick .rcw-radio { border-color: var(--rcw-ink); background: var(--rcw-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.4 2.4 5-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.rcw-rules { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: #F7F8FA; border: 1px solid var(--rcw-line); font-size: 12.5px; color: var(--text-secondary); }
.rcw-rules b { width: 100%; display: flex; align-items: center; gap: 6px; color: var(--text-primary); }
.rcw-rules b .ti { color: var(--rcw-ai); }
.rcw-rules span { display: inline-flex; align-items: center; gap: 4px; }
.rcw-rules span .ti { color: var(--rcw-ok); }
.rcw-pair-list { display: flex; flex-direction: column; gap: 12px; }
.rcw-pair { border: 1px solid; border-radius: 14px; overflow: hidden; background: var(--bg-card); }
.rcw-pair.is-ok { border-color: #BFE6CD; }
.rcw-pair.is-warn { border-color: #F6D3A2; }
.rcw-pair.is-err { border-color: #F5C7C7; }
.rcw-pair-head { padding: 8px 12px; font-size: 12.5px; font-weight: 700; }
.rcw-pair.is-ok .rcw-pair-head { background: var(--rcw-ok-soft); color: var(--rcw-ok); }
.rcw-pair.is-warn .rcw-pair-head { background: var(--rcw-warn-soft); color: var(--rcw-warn); }
.rcw-pair.is-err .rcw-pair-head { background: var(--rcw-err-soft); color: var(--rcw-err); }
.rcw-pair-body { display: flex; align-items: center; gap: 12px; padding: 12px; }
.rcw-pair-inv { flex: 1; min-width: 0; }
.rcw-pair-inv b, .rcw-pair-inv strong { display: block; font-size: 13.5px; }
.rcw-pair-inv small { display: block; font-size: 12px; color: var(--rcw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcw-pair-arrow { font-size: 20px; color: var(--rcw-muted); flex-shrink: 0; }
.rcw-pair-rcps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rcw-pair-rcp { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: #F7F8FA; }
.rcw-pair-rcp > .ti { color: #3E4A53; }
.rcw-pair-rcp span { flex: 1; min-width: 0; }
.rcw-pair-rcp b { display: block; font-size: 12.5px; }
.rcw-pair-rcp small { display: block; font-size: 11.5px; color: var(--rcw-muted); }
.rcw-x { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--rcw-muted); cursor: pointer; }
.rcw-x:hover { background: var(--rcw-err-soft); color: var(--rcw-err); }
.rcw-pair-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--rcw-line); font-size: 12.5px; color: var(--text-secondary); }
.rcw-pair-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 16px; border: 1.5px dashed #D5DBE0; border-radius: 14px; text-align: center; color: var(--rcw-muted); font-size: 13px; }
.rcw-pair-empty .ti { font-size: 30px; color: #9AA4AC; }
.rcw-pair-empty b { color: var(--text-primary); }
.rcw-pick-hint { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--rcw-info-soft); color: var(--rcw-info); font-size: 12.5px; font-weight: 600; }

/* STEP 3: review list (legacy markup, softened) */
.rcw-review #crcp-pair-list { display: flex; flex-direction: column; gap: 10px; }
.rcw-review .ar-pair-card { border-radius: 12px !important; background: var(--bg-card); }

/* STEP 4: done */
.rcw-done { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 24px 26px; overflow: hidden; }
.rcw-done-check { width: 84px; height: 84px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3A434A, #1B1F23); box-shadow: 0 18px 36px -16px rgb(17 24 39 / 75%); animation: ais-pop .55s cubic-bezier(.2,1.4,.4,1) both; }
.rcw-done-check svg { width: 46px; height: 46px; fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: ais-draw .45s .35s ease forwards; }
.rcw-done-text { flex: 1; min-width: 220px; }
.rcw-done-text h2 { margin: 0; font-size: 22px; font-weight: 800; }
.rcw-done-text p { margin: 4px 0 0; font-size: 13.5px; color: var(--rcw-muted); }
.rcw-done-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.rcw-done-item { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--rcw-line); border-radius: 12px; }
.rcw-done-amt { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rcw-done-ok { color: var(--rcw-ok); font-size: 20px; }
.rcw-done-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
#rcw-step-4 .ais-confetti { position: absolute; inset: -20px 0 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

/* Footer */
.rcw-foot { flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 12px 28px; border-top: 1px solid var(--rcw-line); background: var(--bg-card); flex-wrap: nowrap; }
.rcw-foot > * { margin: 0 !important; }
.rcw-foot-gap { flex: 1; }
.rcw-foot-sum { display: flex; align-items: center; gap: 16px; font-size: 13px; min-width: 0; flex-wrap: wrap; }
.rcw-foot-sum[hidden] { display: none; }
.rcw-foot-sum-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--bg-main); font-size: 18px; }
.rcw-sum-item { display: grid; grid-template-columns: auto auto; column-gap: 6px; align-items: center; }
.rcw-sum-item .ti { grid-row: span 2; font-size: 20px; color: var(--rcw-muted); }
.rcw-sum-item.is-ok .ti { color: var(--rcw-ok); }
.rcw-sum-item.is-warn .ti { color: var(--rcw-warn); }
.rcw-sum-item small { font-size: 11px; color: var(--rcw-muted); }
.rcw-sum-item b { font-size: 14px; }

/* Wide layouts */
@container rcwbody (min-width: 1100px) {
  .rcw-builders { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rcw-match-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); }
}
@container rcwbody (max-width: 640px) {
  .rcw-kv { grid-template-columns: 1fr 1fr; }
  .rcw-detail-foot { grid-template-columns: 1fr; }
  .rcw-item-amt { min-width: 0; }
}
@media (max-width: 1100px) { .rcw-crumb, .rcw-head-art { display: none; } .rcw-steps { width: 100%; } }
@media (max-width: 767.98px) {
  .rcw-head { padding: 12px 16px; }
  .rcw-body { padding: 14px 14px 20px !important; }
  .rcw-foot { padding: 10px 14px; flex-wrap: wrap; }
  .rcw-steps li > span:last-child { display: none; }
  .rcw-title-row h1 { font-size: 19px; }
}
[data-theme="dark"] #modalAddARReceipt.rcw-page { --rcw-line: var(--border-color); }
[data-theme="dark"] .rcw-head { background: linear-gradient(90deg, #1E2226, #262B30 60%, #1B1F23); }
[data-theme="dark"] .rcw-kv > div, [data-theme="dark"] .rcw-totals, [data-theme="dark"] .rcw-lines th, [data-theme="dark"] .rcw-pair-rcp, [data-theme="dark"] .rcw-rules { background: var(--bg-main); }

/* Receipt form inside a half-width builder: stack the document halves, two amount fields per row */
.rcw-builder { container-type: inline-size; container-name: rcwbuilder; }
@container rcwbuilder (max-width: 720px) {
  .rcw-rcp-detail .aro-doc-grid { grid-template-columns: 1fr; }
  .rcw-rcp-detail .aro-doc-meta { border-left: 0; border-top: 1px solid var(--border-color); }
  .rcw-rcp-detail .rcp-amounts .row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
  .rcw-rcp-detail .rcp-amounts .row > [class*="col-"]:first-child { flex-basis: 100%; max-width: 100%; }
  .rcw-rcp-detail .aro-lines-head { flex-wrap: wrap; }
  .rcw-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rcw-detail-foot { grid-template-columns: 1fr; }
}
.rcw-rcp-detail .aro-doc { box-shadow: none; }

/* Pool rows: two lines so numbers and names stay readable in a narrow column */
.rcw-prow { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-areas: "r main amt" "r chip btn"; column-gap: 10px; row-gap: 6px; align-items: center; }
.rcw-prow > .rcw-radio { grid-area: r; align-self: start; margin-top: 2px; }
.rcw-prow > .rcw-item-main { grid-area: main; }
.rcw-prow > .rcw-item-amt { grid-area: amt; min-width: 0; }
.rcw-prow > .rcw-chip { grid-area: chip; justify-self: start; }
.rcw-prow > .rcw-btn { grid-area: btn; justify-self: end; }
.rcw-pair-rcp b { word-break: break-all; }


/* AI buttons here keep the lavender style (workspace-theme forces a slate fill on AI launch buttons) */
#modalAddARReceipt .rcw-btn-ai { background: var(--rcw-ai-soft) !important; box-shadow: none !important; color: var(--rcw-ai); }
#modalAddARReceipt .rcw-btn-ai:hover { background: #E4E2FC !important; }

/* คอลัมน์ซ้าย: Invoice Builder + เอกสารต้นฉบับของใบเสร็จที่เลือก (ติดอยู่ขณะเลื่อนฟอร์มใบเสร็จ) */
.rcw-col-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rcw-src-card { position: sticky; top: 12px; padding: 0; overflow: hidden; }
.rcw-src-card[hidden] { display: none; }
.rcw-src-card .ais-source { border: 0; border-radius: 0; max-height: calc(100vh - 260px); min-height: 420px; }
.rcw-src-card .ais-source-pdf { width: 100%; height: calc(100vh - 330px); min-height: 380px; border: 0; }
.rcw-builders > .rcw-col-left { align-self: stretch; } /* ให้เอกสารต้นฉบับติดหน้าจอตลอดความยาวฟอร์มใบเสร็จ */

/* ── ใบเสร็จรับเงิน / Receipt Builder: ทุกส่วนเป็นการ์ดกว้างเท่ากัน ระยะห่างเท่ากัน (2026-10-05) ──
   เดิม: ส่วนข้อมูลเอกสารเป็นการ์ดเต็มกว้าง แต่ "รายการในใบเสร็จ" / "ช่องทางรับชำระ" อยู่บนพื้นเทา เยื้องเข้า 22px → ขอบไม่ตรงกัน */
.rcw-rcp-detail .rcp-doc-body { padding: 0; gap: 16px; background: transparent; }
.rcw-rcp-detail .rcp-doc-body > section.aro-lines {
  padding: 14px 18px 16px; background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: 12px;
}
.rcw-rcp-detail .rcp-doc-body > section.aro-lines > .aro-lines-head { margin-bottom: 0; min-height: 32px; }
.rcw-rcp-detail .rcp-doc-body > section.aro-lines > .aro-lines-head ~ * { margin-top: 12px; }
.rcw-rcp-detail .rcp-doc-body > section.aro-lines > .aro-lines-head ~ * ~ * { margin-top: 0; }
/* ช่องทาง + สรุปยอด = กล่องเดียว */
.rcw-rcp-detail .rcp-channels-box { padding: 12px 14px; border-radius: 10px 10px 0 0; background: var(--bg-main); }
.rcw-rcp-detail .aro-under { border-radius: 0 0 10px 10px; }
.rcw-rcp-detail .aro-under-left { padding: 14px 16px; }
/* การ์ดข้อมูลเอกสาร: ระยะในเท่ากับการ์ดอื่น */
.rcw-rcp-detail .aro-doc-party, .rcw-rcp-detail .aro-doc-meta { padding: 16px 18px; }
/* การ์ดใบเสร็จแคบ: หมายเหตุ / แนบไฟล์ อยู่บน · สรุปยอดอยู่ล่าง (ไม่บีบช่องจนตัด) */
@container rcwbuilder (max-width: 680px) {
  .rcw-rcp-detail .aro-under { grid-template-columns: 1fr; }
  .rcw-rcp-detail .aro-under > :last-child { border-left: 0; border-top: 1px solid var(--border-color); }
}

/* R-036: แก้ไขใบเสร็จจากหน้าสรุปการสแกน — เฉพาะใบเสร็จ + เอกสารต้นฉบับ (ไม่มีขั้นตอน / ใบกำกับ / ปุ่มไปหน้าจับคู่) */
#modalAddARReceipt.rcw-ai-edit .rcw-steps, #modalAddARReceipt.rcw-ai-edit .rcw-hero, #modalAddARReceipt.rcw-ai-edit .rcw-col-left > .rcw-builder,
#modalAddARReceipt.rcw-ai-edit #rcw-foot-next, #modalAddARReceipt.rcw-ai-edit #rcw-foot-sum { display: none !important; }

/* R-037: ใบเสร็จในชุดตรวจทีละใบ — ใช้แถบชุดตรวจเดียวกับใบกำกับ (ย้ายมาอยู่หน้านี้) */
#modalAddARReceipt .arp-sess-types > .arp-ai-field { display: none; }
#modalAddARReceipt:not(.rcw-ai-sess) .arp-sess-types { display: none; }
/* #60: ซ่อน / ดูเอกสารต้นฉบับในหน้าตรวจใบเสร็จ (เหมือนหน้าตรวจใบกำกับ) */
#modalAddARReceipt.rcw-ai-edit.rcw-src-off .rcw-builders > .rcw-col-left { display: none; }
#modalAddARReceipt.rcw-ai-edit.rcw-src-off .rcw-builders { grid-template-columns: minmax(0, 1fr) !important; }
#modalAddARReceipt.rcw-ai-sess .rcw-head-top .rvf-btn { display: none; }
#modalAddARReceipt.rcw-ai-saved-view .rcw-builders { display: none; }
.rcw-ai-saved { display: flex; align-items: center; gap: 14px; padding: 18px 20px; margin-bottom: 16px; }
.rcw-ai-saved[hidden] { display: none; }
.rcw-ai-saved > div { flex: 1; min-width: 0; }
.rcw-ai-saved small { display: block; color: var(--text-muted); font-size: 12.5px; }
.rcw-ai-saved-ic { color: #15803D; font-size: 28px; line-height: 1; }

/* ══ R-045 (2026-10-12): หน้าตรวจเอกสาร Fast Scan (ใบกำกับ / ใบเสร็จ · AR / AP) — ส่วนหัวไม่กินพื้นที่เอกสารทุกขนาดจอ ══
   1) แถบชุดตรวจเหลือ 1 แถว (เดิม 2–3 แถว ~175px) · ปุ่มต้นฉบับ + ปุ่มกลับไปหน้าเลือกเอกสาร อยู่ในแถบ
   2) ซ่อน breadcrumb ของหน้า + แถบล่าง "กลับไปหน้าเลือกเอกสาร" ระหว่างชุดตรวจ (ย้ายขึ้นแถบแล้ว)
   3) ย่อข้อมูลตามความกว้างของแถบ (container query) — ข้อมูลรองหายก่อน ปุ่มรองเหลือไอคอน (มี title) · ปุ่มบันทึกเห็นเสมอ */
.arp-sess { container: arpsess / inline-size; display: flex; flex-wrap: wrap; align-items: center; }
.arp-sess[hidden] { display: none; }
#arp-ai-bar > .arp-sess-row { flex: 1 1 100% !important; min-width: 0; flex-wrap: nowrap !important; gap: 0 14px !important; padding: 6px 14px !important; min-height: 50px; }
#arp-ai-bar > .arp-sess-types { flex: 1 1 100% !important; padding: 3px 14px 5px !important; gap: 4px 22px !important; border-top: 1px solid var(--border-color); background: var(--bg-main); }
.arp-sess > .arp-sess-saveall { flex: 1 1 100%; padding: 6px 14px; }
.arp-sess-back {
  flex-shrink: 0; height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 9px;
  border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.arp-sess-back:hover { border-color: var(--text-primary); }
.arp-sess .arp-sess-nav { flex-shrink: 0; gap: 6px; font-size: 13px; }
.arp-sess .arp-sess-nav b { font-size: 16px; }
.arp-sess .arp-sess-navbtn { width: 32px; height: 32px; border-radius: 9px; }
.arp-sess .arp-sess-file { flex: 1 1 auto; min-width: 120px; gap: 8px; padding-left: 14px; }
.arp-sess .arp-sess-file > div { min-width: 0; }
.arp-sess .arp-sess-file-icon { display: none; }
.arp-sess .arp-sess-file b { max-width: none !important; font-size: 13.5px; }
.arp-sess .arp-sess-file small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arp-sess #arp-sess-quality { display: none; }
.arp-sess .arp-sess-amt { flex-shrink: 0; padding-left: 14px; }
.arp-sess .arp-sess-amt b { font-size: 17px; }
.arp-sess .arp-sess-ready { flex-shrink: 0; gap: 6px; }
.arp-sess .arp-sess-ready svg { width: 28px; height: 28px; }
.arp-sess .arp-sess-ready b { font-size: 12.5px; }
.arp-sess .arp-sess-status { flex-shrink: 0; height: 28px; padding: 0 10px; font-size: 12px; }
.arp-sess .arp-sess-actions { flex-shrink: 0; margin-left: 0 !important; width: auto !important; flex-wrap: nowrap !important; gap: 6px !important; }
.arp-sess .arp-sess-actions .btn-solid, .arp-sess .arp-sess-listbtn, .arp-sess .rvf-btn, .arp-sess .arp-sess-srcbtn {
  height: 34px !important; padding: 0 11px !important; border-radius: 9px; font-size: 13px !important; gap: 6px; white-space: nowrap;
}
.arp-sess .arp-sess-srcbtn { margin-left: 0; border-color: var(--border-color); }
.arp-sess .arp-sess-listbtn { border: 1px solid var(--border-color); background: var(--bg-card); }
#modalAROther .arp-sess .arp-type-tabs .aro-term-pill { padding: 4px 12px; font-size: 12.5px; }
#modalAROther .arp-sess .arp-ai-field .aro-seg .aro-term-pill { padding: 3px 10px; font-size: 12px; }
.arp-sess .arp-ai-field { gap: 8px; font-size: 12px; }
/* ใบเสร็จ: แถวประเภทไม่มีช่องให้เลือก (ปุ่มต้นฉบับย้ายขึ้นแถบแล้ว) → ไม่แสดงแถวว่าง */
#modalAddARReceipt .arp-sess > .arp-sess-types { display: none !important; }

/* breadcrumb + แถบล่าง ระหว่างชุดตรวจ */
#modalAROther.ai-session .arp-head { display: none; }
#modalAddARReceipt.rcw-ai-sess .rcw-head, #modalAddARReceipt.rcw-ai-sess #rcw-foot { display: none !important; }
/* ใบเสร็จในชุดตรวจ: หัวการ์ด Receipt Builder / แท็บ / รายการการ์ด / ก่อนหน้า-ถัดไป ซ้ำกับแถบชุดตรวจ → เหลือปุ่ม Preview */
#modalAddARReceipt.rcw-ai-sess .rcw-builders > .rcw-builder > .rcw-card-head,
#modalAddARReceipt.rcw-ai-sess .rcw-builders > .rcw-builder > .rcw-toolbar,
#modalAddARReceipt.rcw-ai-sess #rcw-rcp-list,
#modalAddARReceipt.rcw-ai-sess #rcw-rcp-prev, #modalAddARReceipt.rcw-ai-sess #rcw-rcp-pos, #modalAddARReceipt.rcw-ai-sess #rcw-rcp-next,
#modalAddARReceipt.rcw-ai-sess #rcw-rcp-copy, #modalAddARReceipt.rcw-ai-sess #rcw-rcp-remove { display: none !important; }
#modalAddARReceipt.rcw-ai-sess .rcw-pager { justify-content: flex-end; }
/* หัวช่องเอกสารต้นฉบับบางลง (ชื่อไฟล์อยู่ในแถบชุดตรวจแล้ว) */
.arp-source .ais-source-head, #modalAddARReceipt .ais-source-head { padding: 6px 12px; font-size: 12.5px; }
.arp-source .ais-source-open, #modalAddARReceipt .ais-source-open { height: 28px; }

/* ── ย่อตามความกว้างของแถบ (ข้อมูลรองหายก่อน · ชื่อไฟล์หดได้จนเหลือ … · ปุ่มบันทึกเห็นเสมอ) ── */
@container arpsess (max-width: 1640px) {
  .arp-sess-amt > small, .arp-sess-ready > div > small { display: none; }
}
@container arpsess (max-width: 1520px) {
  .arp-sess .arp-lbl, .arp-sess .rvf-btn span, .arp-sess .arp-sess-srcbtn span { display: none; }
  .arp-sess .arp-sess-back, .arp-sess .arp-sess-listbtn, .arp-sess .rvf-btn, .arp-sess .arp-sess-srcbtn { width: 34px; padding: 0 !important; justify-content: center; }
  #arp-sess-save-one .arp-lbl { display: inline; }
  .arp-sess-nav .arp-nav-word { display: none; } /* เหลือ ‹ 1 / 2 › */
}
/* ── R-049 (2026-10-12) #79 เพิ่มเติม: แถบชุดตรวจ "บรรทัดเดียวทุกจอ ไม่ตัดข้อมูลออก" ──
   เดิม (R-045): จอแคบซ่อนสถานะ / ความครบถ้วน / ชื่อไฟล์ / ข้อความปุ่มบันทึก และมือถือขึ้นแถวที่ 2
   ใหม่: ข้อมูลครบเท่ากันทุกขนาด (ไฟล์ + เลขที่ · ยอด · ความครบถ้วน · สถานะ · ปุ่มบันทึก 2 ปุ่ม) — ถ้าจะตกบรรทัดให้ย่อทั้งแถบลงพร้อมกัน (zoom)
   ชื่อไฟล์ยาวหดเป็น … ได้ (ชี้ค้างเห็นเต็ม) · จอเล็กมาก (มือถือ) ยังบรรทัดเดียว เลื่อนแถบซ้าย-ขวาได้ ไม่ดันเนื้อหาลง */
#arp-ai-bar > .arp-sess-row { flex-wrap: nowrap !important; }
/* ขั้นย่อ: ต้องการ ~1,150px ที่ขนาดปกติ (ชื่อไฟล์หดเหลือ ~120px) → ย่อเท่าที่จำเป็น ตัวอักษรเล็กลงน้อยที่สุด */
@container arpsess (max-width: 1150px) { #arp-ai-bar > .arp-sess-row { zoom: 0.95; } }
@container arpsess (max-width: 1090px) { #arp-ai-bar > .arp-sess-row { zoom: 0.9; } }
@container arpsess (max-width: 1030px) { #arp-ai-bar > .arp-sess-row { zoom: 0.85; } }
@container arpsess (max-width: 970px) { #arp-ai-bar > .arp-sess-row { zoom: 0.8; } }
@container arpsess (max-width: 910px) { #arp-ai-bar > .arp-sess-row { zoom: 0.75; } }
@container arpsess (max-width: 850px) { #arp-ai-bar > .arp-sess-row { zoom: 0.7; } }
@container arpsess (max-width: 790px) { #arp-ai-bar > .arp-sess-row { zoom: 0.65; } }
@container arpsess (max-width: 730px)  {
  #arp-ai-bar > .arp-sess-row { zoom: .6; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
  #arp-ai-bar > .arp-sess-row > * { flex-shrink: 0; }
  #arp-ai-bar > .arp-sess-row > .arp-sess-file { flex: 0 0 auto; max-width: 260px; }
  .arp-sess .arp-ai-field > span { display: none; } /* แถวประเภท: ปุ่มบอกความหมายเอง */
  #modalAROther .arp-sess .arp-type-tabs .aro-term-pill, #modalAROther .arp-sess .arp-ai-field .aro-seg .aro-term-pill { padding: 3px 8px; font-size: 12px; }
  #arp-ai-bar > .arp-sess-types { gap: 4px 10px !important; }
}

/* ── R-047 (2026-10-12) #79 เพิ่มเติม: เอกสารต้นฉบับ (PDF / รูป) เต็มกรอบซ้าย ไม่มีช่องว่างรอบ ──
   เดิม: กรอบเนื้อหามี padding 12–14px + PDF สูงขั้นต่ำ 380–520px เกินกรอบ → มีขอบเทารอบ ๆ และแถบเลื่อนขวา
   ใบเสร็จ: การ์ดต้นฉบับสูงพอดีจอ (ติดอยู่ขณะเลื่อนฟอร์ม) แทนความสูงคงที่ */
.arp-source .ais-source-body, .rcw-src-card .ais-source-body { padding: 0; align-items: stretch; }
.arp-source .ais-source-pdf, .rcw-src-card .ais-source-pdf { display: block; width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; }
.arp-source .ais-source-img, .rcw-src-card .ais-source-img { align-self: flex-start; width: 100%; max-width: 100%; border-radius: 0; box-shadow: none; }
.arp-source .ais-source-img.is-zoom, .rcw-src-card .ais-source-img.is-zoom { width: 180%; max-width: none; }
.rcw-src-card .ais-source { height: calc(100vh - 95px); max-height: none; min-height: 360px; }

/* ══ R-050 (2026-10-12): หน้าตรวจเอกสาร (PDF ซ้าย + ฟอร์มขวา) — "เห็นภาพรวมทีเดียว" ลดการเลื่อนขึ้นลง ══
   ใช้เฉพาะระหว่างชุดตรวจ Fast Scan (ใบกำกับ AR / AP) · หน้าตั้งหนี้ปกติไม่เปลี่ยน
   1) ความหนาแน่น: หัวการ์ดเหลือชื่อบรรทัดเดียว (ไม่มีไอคอนใหญ่ / คำอธิบาย / ภาพประกอบ) · ช่องกรอกสูง 34px · ระยะห่างแคบลง
   2) ช่องสั้นวางคู่กันในการ์ด (เลขที่ + วันที่ · VAT + หัก ณ ที่จ่าย …) แทนเรียงลงทีละช่อง
   3) การ์ดเรียงหลายคอลัมน์ตามความกว้างของฝั่งฟอร์ม (container query): ≥ 760px = 2 คอลัมน์ · ≥ 1180px = 3 คอลัมน์
      ลำดับตามการตรวจ: ลูกค้า → เอกสาร → รายการ → สรุปมูลค่า → การชำระเงิน → มัดจำ / แนบไฟล์ / หมายเหตุ */
#modalAROther.ai-session .arp-body { padding: 12px 14px 16px !important; gap: 10px !important; }
#modalAROther.ai-session .arp-top, #modalAROther.ai-session .arp-main, #modalAROther.ai-session .arp-bottom { gap: 10px !important; }
#modalAROther.ai-session .arp-card { border-radius: 12px; }
#modalAROther.ai-session .arp-card-head { padding: 9px 14px 2px !important; gap: 10px !important; min-height: 0; align-items: center; }
#modalAROther.ai-session .arp-card-icon, #modalAROther.ai-session .arp-card-titles > p, #modalAROther.ai-session .arp-art-percent, #modalAROther.ai-session .arp-card > img { display: none !important; }
#modalAROther.ai-session .arp-card-titles h2 { font-size: 14px !important; margin: 0; }
#modalAROther.ai-session .arp-card-tools .aro-term-pill { padding: 3px 10px; font-size: 12px; }
#modalAROther.ai-session .arp-card-tools .btn-solid { height: 30px; padding: 0 10px; font-size: 12.5px; }
#modalAROther.ai-session .arp-card-body { padding: 6px 14px 12px !important; gap: 8px 12px !important; }
#modalAROther.ai-session .arp-card-body.aro-summary { padding: 2px 14px 10px !important; }
#modalAROther.ai-session .arp-lines-body { padding: 0 8px 8px !important; }
#modalAROther.ai-session .arp-deposit, #modalAROther.ai-session .arp-files, #modalAROther.ai-session .arp-remark { padding: 10px 14px 12px !important; gap: 8px !important; }
#modalAROther.ai-session .form-label-custom { font-size: 12px; margin-bottom: 3px; }
#modalAROther.ai-session .arp-body .input-custom, #modalAROther.ai-session .arp-body .select2-container .select2-selection--single { min-height: 34px; height: 34px; font-size: 13px; }
#modalAROther.ai-session .arp-body textarea.input-custom { height: auto; min-height: 34px; }
#modalAROther.ai-session .arp-body .select2-container .select2-selection__rendered { line-height: 32px; }
#modalAROther.ai-session .arp-body .aro-add-btn { width: 34px; height: 34px; }
#modalAROther.ai-session .arp-body .aro-seg .aro-term-pill { padding: 4px 10px; font-size: 12.5px; }
#modalAROther.ai-session .aro-sum-row { padding: 5px 0; }
#modalAROther.ai-session .aro-sum-row.is-total { padding: 8px 0 2px; }
#modalAROther.ai-session #aro-attach-zone { padding: 6px 10px; min-height: 0; gap: 8px; font-size: 12px; }
#modalAROther.ai-session #aro-attach-zone :is(i.ti, .ti) { font-size: 18px; }
#modalAROther.ai-session .arp-meta .arp-row-date { grid-template-columns: minmax(0, 1fr) 110px !important; gap: 8px !important; }
#modalAROther.ai-session .arp-meta .arp-rates { width: 100%; gap: 8px !important; }
#modalAROther.ai-session .arp-meta .ar-meta { padding: 5px 9px; font-size: 11.5px; }
#modalAROther.ai-session .aro-field > small, #modalAROther.ai-session .aro-field > .aro-hint { font-size: 11px; margin-top: 2px; }
#modalAROther.ai-session #aro-remark { min-height: 34px; }
#modalAROther.ai-session .doc-recorder { padding-top: 4px; }

/* ช่องสั้นวางคู่กันในการ์ด */
#modalAROther.ai-session .arp-party .arp-card-body, #modalAROther.ai-session .arp-meta .arp-card-body, #modalAROther.ai-session .arp-pay .arp-card-body { flex-direction: row !important; flex-wrap: wrap; align-items: flex-start; }
#modalAROther.ai-session .arp-party .arp-card-body > *, #modalAROther.ai-session .arp-meta .arp-card-body > *, #modalAROther.ai-session .arp-pay .arp-card-body > * { flex: 1 1 260px; min-width: 0; margin: 0 !important; }
#modalAROther.ai-session .arp-party .arp-card-body > .ar-party-row1, #modalAROther.ai-session .arp-meta .arp-card-body > .ar-meta,
#modalAROther.ai-session .arp-pay .arp-card-body > * { flex-basis: 100%; }
#modalAROther.ai-session .arp-pay-grid, #modalAROther.ai-session .arp-refs-grid { gap: 8px 12px !important; }

/* การ์ดหลายคอลัมน์ — คลาสตั้งโดย _arpOverviewCols() ตามความกว้างจริงของฝั่งฟอร์ม (≥ 760px = 2 คอลัมน์ · ≥ 1180px = 3 คอลัมน์) */
#modalAROther.ai-session .arp-body:is(.arp-ov2, .arp-ov3) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; align-content: start;
  grid-template-areas: "party meta" "sum pay" "lines lines" "dep files" "remark files" "rec rec"; }
#modalAROther.ai-session .arp-body:is(.arp-ov2, .arp-ov3) > :is(.arp-top, .arp-main, .arp-bottom) { display: contents !important; }
#modalAROther.ai-session .arp-body:is(.arp-ov2, .arp-ov3) .arp-card { margin: 0 !important; }
#modalAROther.ai-session .arp-body:is(.arp-ov2, .arp-ov3) .arp-party { grid-area: party; } #modalAROther.ai-session .arp-body:is(.arp-ov2, .arp-ov3) .arp-meta { grid-area: meta; }
#modalAROther.ai-session .arp-body:is(.arp-ov2, .arp-ov3) .arp-lines { grid-area: lines; } #modalAROther.ai-session .arp-body:is(.arp-ov2, .arp-ov3) .arp-summary { grid-area: sum; }
#modalAROther.ai-session .arp-body:is(.arp-ov2, .arp-ov3) .arp-pay { grid-area: pay; } #modalAROther.ai-session .arp-body:is(.arp-ov2, .arp-ov3) .arp-deposit { grid-area: dep; }
#modalAROther.ai-session .arp-body:is(.arp-ov2, .arp-ov3) .arp-files { grid-area: files; } #modalAROther.ai-session .arp-body:is(.arp-ov2, .arp-ov3) .arp-remark { grid-area: remark; }
#modalAROther.ai-session .arp-body:is(.arp-ov2, .arp-ov3) > .doc-recorder { grid-area: rec; }
#modalAROther.ai-session .arp-body.arp-ov3 { grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "party meta pay" "lines lines sum" "dep files remark" "rec rec rec"; }
/* สรุปมูลค่า / แนบไฟล์ / ช่องอ่านอย่างเดียว กระชับ */
#modalAROther.ai-session .arp-card-art { display: none !important; }
#modalAROther.ai-session .aro-sum-row.is-total { flex-direction: row !important; align-items: baseline; justify-content: space-between; }
#modalAROther.ai-session .aro-sum-row.is-total > span { width: auto !important; }
#modalAROther.ai-session .aro-sum-row.is-total > b { width: auto !important; font-size: 20px; }
#modalAROther.ai-session .arp-mini-head { min-height: 0; }
#modalAROther.ai-session .arp-mini-head > .aro-opt { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modalAROther.ai-session .aro-readonly, #modalAROther.ai-session .aro-dep-chip { min-height: 34px; height: 34px; }
#modalAROther.ai-session .aro-attach-list > div { padding: 4px 8px; }
/* ข้อมูลเอกสาร: เลขที่ + วันที่ อยู่แถวเดียวกัน · มูลค่า + ราคาที่กรอก (รวม / ไม่รวม VAT) อยู่แถวเดียวกัน */
#modalAROther.ai-session .arp-meta .arp-card-body > .aro-field:first-child { flex: 1 1 110px; }
#modalAROther.ai-session .arp-meta .arp-card-body > .arp-row-date { flex: 3 1 240px; }
#modalAROther.ai-session .arp-meta .arp-card-body > .aro-field:has(+ .arp-rates) { flex: 1 1 170px; }
#modalAROther.ai-session .arp-meta .arp-card-body > #aro-price-mode-wrap { flex: 0 0 auto; }
#modalAROther.ai-session .arp-meta .arp-card-body > .arp-rates { flex-basis: 100%; order: 9; }

/* R-050 ใบเสร็จ (Receipt Builder ระหว่างชุดตรวจ): กระชับแบบเดียวกับใบกำกับ
   ฝั่งฟอร์มกว้างขึ้นเล็กน้อย (ต้นฉบับ 44% · ฟอร์ม 56% — เดิม 50 / 50) · ช่องสั้นวางคู่กัน · รายการสินค้า 2 แถวต่อรายการ (เดิม 3) · สรุปยอดอยู่ข้างช่องทางรับชำระ */
#modalAddARReceipt.rcw-ai-sess:not(.rcw-src-off) .rcw-builders { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) !important; gap: 12px; }
#modalAddARReceipt.rcw-ai-sess #crcp-receipt-section-body > [id^="crcp-rcp-card-"].is-sel [id^="crcp-rcp-body-"] { gap: 10px !important; }
#modalAddARReceipt.rcw-ai-sess .aro-doc-party, #modalAddARReceipt.rcw-ai-sess .aro-doc-meta { padding: 10px 14px !important; gap: 8px 12px !important; }
#modalAddARReceipt.rcw-ai-sess .rcp-doc-body > section.aro-lines { padding: 10px 14px 12px !important; }
#modalAddARReceipt.rcw-ai-sess .rcp-doc-body > section.aro-lines > .aro-lines-head ~ * { margin-top: 8px !important; }
#modalAddARReceipt.rcw-ai-sess .aro-sec-head { min-height: 0; margin: 0; }
#modalAddARReceipt.rcw-ai-sess .aro-sec-title { font-size: 14px; }
#modalAddARReceipt.rcw-ai-sess .aro-sec-head .aro-term-pill, #modalAddARReceipt.rcw-ai-sess .aro-lines-head .aro-term-pill { padding: 3px 10px; font-size: 12px; }
#modalAddARReceipt.rcw-ai-sess .aro-lines-head .btn-solid { height: 30px; padding: 0 10px; font-size: 12.5px; }
#modalAddARReceipt.rcw-ai-sess .form-label-custom { font-size: 12px; margin-bottom: 3px; }
#modalAddARReceipt.rcw-ai-sess .rcp-doc-body .input-custom, #modalAddARReceipt.rcw-ai-sess .rcp-doc-body .select2-container .select2-selection--single,
#modalAddARReceipt.rcw-ai-sess .rcp-doc-body .aro-readonly { min-height: 34px; height: 34px; font-size: 13px; }
#modalAddARReceipt.rcw-ai-sess .rcp-doc-body textarea.input-custom { height: auto; min-height: 34px; }
#modalAddARReceipt.rcw-ai-sess .rcp-doc-body .select2-container .select2-selection__rendered { line-height: 32px; }
#modalAddARReceipt.rcw-ai-sess .ar-meta { padding: 5px 9px; font-size: 11.5px; }
#modalAddARReceipt.rcw-ai-sess .ar-sumro { padding: 6px 10px; }
/* ช่องสั้นวางคู่กัน */
#modalAddARReceipt.rcw-ai-sess .aro-doc-meta { flex-direction: row !important; flex-wrap: wrap; align-items: flex-start; }
#modalAddARReceipt.rcw-ai-sess .aro-doc-meta > * { flex: 1 1 100%; min-width: 0; margin: 0 !important; }
#modalAddARReceipt.rcw-ai-sess .aro-doc-meta > .aro-field:nth-child(2) { flex: 1 1 120px; }
#modalAddARReceipt.rcw-ai-sess .aro-doc-meta > .aro-row-date { flex: 3 1 260px; grid-template-columns: minmax(0, 1fr) 110px !important; gap: 8px !important; }
#modalAddARReceipt.rcw-ai-sess .aro-doc-meta > .aro-field:has(> select[id^="crcp-rcp-doctype-"]), #modalAddARReceipt.rcw-ai-sess .aro-doc-meta > .aro-field:has(> select.crcp-rcp-type) { flex: 1 1 135px; }
#modalAddARReceipt.rcw-ai-sess .aro-doc-meta > .aro-row-2.rcp-amounts { flex: 2 1 240px; }
#modalAddARReceipt.rcw-ai-sess .aro-doc-meta > .aro-field.rcp-amounts { flex: 1 1 170px; }
#modalAddARReceipt.rcw-ai-sess .aro-doc-meta > .aro-row-2 { gap: 8px 12px !important; }
/* รายการ: แถว 1 = รายละเอียด + ยอดรวม VAT · แถว 2 = จำนวน · ราคา · ส่วนลด · VAT / ก่อน VAT */
#modalAddARReceipt.rcw-ai-sess .rcp-line { grid-template-columns: 26px repeat(4, minmax(0, 1fr)) 30px !important; padding: 6px 8px !important; gap: 4px 8px !important; }
#modalAddARReceipt.rcw-ai-sess .rcp-line > .rcp-line-desc { grid-row: 1 !important; grid-column: 2 / 5 !important; }
#modalAddARReceipt.rcw-ai-sess .rcp-line > .rcp-line-amt { grid-row: 1 !important; grid-column: 5 !important; text-align: right !important; }
#modalAddARReceipt.rcw-ai-sess .rcp-line > .c-center:last-child { grid-row: 1 !important; grid-column: 6 !important; }
#modalAddARReceipt.rcw-ai-sess .rcp-line > .rcp-line-calc { grid-row: 2 !important; grid-column: 5 / 7 !important; align-self: end; text-align: right; }
/* ช่องทางรับชำระ + สรุปยอด วางคู่กัน */
#modalAddARReceipt.rcw-ai-sess .rcp-channels-box { padding: 8px 10px !important; }
#modalAddARReceipt.rcw-ai-sess .aro-under { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 10px !important; align-items: start; }
#modalAddARReceipt.rcw-ai-sess .aro-under-left { padding: 10px 12px !important; gap: 8px !important; }
#modalAddARReceipt.rcw-ai-sess .aro-under > .aro-summary { padding: 10px 14px !important; }
#modalAddARReceipt.rcw-ai-sess .aro-under > .aro-summary .aro-sum-row { padding: 4px 0; }
#modalAddARReceipt.rcw-ai-sess .rcw-step { max-width: none !important; }
#modalAddARReceipt.rcw-ai-sess .rcw-body { padding: 12px 16px 16px !important; }
#modalAddARReceipt.rcw-ai-sess .rcp-lines-box { overflow-x: visible !important; }
#modalAddARReceipt.rcw-ai-sess .rcp-line-head { display: none !important; }
#modalAddARReceipt.rcw-ai-sess .rcp-line { min-width: 0 !important; }
#modalAddARReceipt.rcw-ai-sess .rcp-line > .aro-line-no { grid-row: 1 !important; grid-column: 1 !important; }
#modalAddARReceipt.rcw-ai-sess .rcp-line > [data-l="จำนวน"] { grid-row: 2 !important; grid-column: 2 !important; }
#modalAddARReceipt.rcw-ai-sess .rcp-line > [data-l="ราคา/หน่วย"] { grid-row: 2 !important; grid-column: 3 !important; }
#modalAddARReceipt.rcw-ai-sess .rcp-line > [data-l="ส่วนลด (฿)"] { grid-row: 2 !important; grid-column: 4 !important; }
#modalAddARReceipt.rcw-ai-sess .rcp-line > [data-l]::before { content: attr(data-l); display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 500; color: var(--text-muted); text-align: left; }
/* ฟอร์มใบเสร็จกว้าง (≥ 960px เช่นจอ Full HD): รายการสินค้า | ช่องทางรับชำระ + สรุป วางคู่กัน */
@container rcwbuilder (min-width: 960px) {
  #modalAddARReceipt.rcw-ai-sess #crcp-receipt-section-body > [id^="crcp-rcp-card-"].is-sel [id^="crcp-rcp-body-"] { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  #modalAddARReceipt.rcw-ai-sess .rcp-doc-body > .aro-doc { grid-column: 1 / -1; }
  #modalAddARReceipt.rcw-ai-sess .aro-doc-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } /* ข้อมูลเอกสารมีหลายช่องกว่า → กว้างกว่า */
  #modalAddARReceipt.rcw-ai-sess .rcp-doc-body > section.aro-lines { margin: 0 !important; }
}
#modalAddARReceipt.rcw-ai-sess .ar-wht-slot { min-height: 34px; padding: 6px 10px !important; }
#modalAddARReceipt.rcw-ai-sess .aro-under > .aro-summary .aro-sum-row > span { white-space: nowrap; font-size: 12.5px; }
#modalAddARReceipt.rcw-ai-sess .aro-under > .aro-summary .aro-sum-row:is(.is-total, .is-net) { padding: 6px 0 !important; align-items: center; }
#modalAddARReceipt.rcw-ai-sess .aro-under > .aro-summary .aro-sum-row:is(.is-total, .is-net) > b { font-size: 17px; }
#modalAddARReceipt.rcw-ai-sess .rcw-builder { gap: 6px !important; padding: 8px 10px !important; }
#modalAddARReceipt.rcw-ai-sess .rcw-pager { min-height: 0; margin: 0 !important; }
#modalAddARReceipt.rcw-ai-sess .rcw-pager .btn-solid, #modalAddARReceipt.rcw-ai-sess .rcw-pager button { height: 30px; padding: 0 10px; font-size: 12.5px; }
#modalAddARReceipt.rcw-ai-sess .rcw-rcp-detail { padding: 8px !important; }
#modalAddARReceipt.rcw-ai-sess .rcw-src-card .ais-source { height: calc(100vh - 128px); } /* พอดีพื้นที่ใต้แถบชุดตรวจ ไม่ดันหน้าให้เลื่อน */