/* รอบ 33: ลูกหนี้ ใบแจ้งหนี้ รับชำระ (/debtors + Components/DebtDocs.razor)
   - โครง .fit ของ fit.css + ปุ่มแท็บ .dash-seg ของ dash.css
   - สีอายุหนี้: --ag1 (เกิน 1–30) --ag2 (31–60) --ag3 (เกิน 60) ใช้ตัวแปรธีม (โหมดมืด override ท้ายไฟล์)
   - เอกสารพิมพ์ (.dbt-print): กระดาษขาวเสมอ ทั้งบนจอและตอนพิมพ์
   - พิมพ์: html[data-print="dbt-a4"] = A4, html[data-print="dbt-slip"] = สลิป 80mm (ใช้ @page เริ่มต้นของ app.css)
     ผูกกับหน้าที่มี .dbt-print ด้วย :has() เท่านั้น จึงไม่กระทบการพิมพ์ใบเสร็จ/ฉลากหน้าอื่น */

@media screen {
  .dbt-fit, .drw, .mdl { --ag1: #B7791F; --ag2: #D4561B; --ag3: var(--danger); --dbt-ok: var(--ok); }

  /* ---------- หัว ---------- */
  .dbt-tools { gap: 8px; }
  .dbt-search { width: 270px; }
  .dbt-tabs button { min-width: 0; }

  /* ---------- ตัวเลขสรุป ---------- */
  .dbt-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dbt-stats .fit-stat small { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dbt-st-out { background: var(--brand); color: var(--brand-ink); }
  .dbt-st-out.fit-stat.hl strong { color: var(--brand-ink); }
  .dbt-st-out > span, .dbt-st-out > small { color: var(--brand-ink); opacity: .86; }
  .dbt-st-over strong { color: var(--ag3); }
  .dbt-st-over small { color: var(--ag3); font-weight: 600; }
  .dbt-st-paid strong { color: var(--dbt-ok); }

  /* ---------- แถบตัวกรอง ---------- */
  .dbt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  .dbt-chips { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
  .dbt-chip {
    --c: var(--ink);
    flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; min-height: 34px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
    font: inherit; font-size: .86rem; white-space: nowrap; cursor: pointer;
  }
  .dbt-chip b { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--chip); color: var(--muted); font-size: .76rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
  .dbt-chip:hover { border-color: var(--muted); }
  .dbt-chip.od { --c: var(--ag1); }
  .dbt-chip.od3 { --c: var(--ag3); }
  .dbt-chip.muted-chip { --c: var(--muted); }
  .dbt-chip.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--surface)); font-weight: 700; }
  .dbt-chip.on b { background: var(--c); color: var(--surface); }
  .dbt-zero { font-size: .86rem; color: var(--muted); }
  .dbt-zero input { width: 17px; height: 17px; }
  .dbt-sort { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; }
  .dbt-sort select { min-height: 36px; padding: 4px 30px 4px 10px; border-radius: 10px; font: inherit; font-size: .88rem; }
  .dbt-periods { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
  .dbt-periods .chip { cursor: pointer; font: inherit; font-size: .88rem; padding: 6px 14px; }
  .dbt-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .dbt-dates .field.inline input { min-height: 38px; padding: 6px 10px; }
  .dbt-range { font-size: .85rem; }
  .dbt-inv-chips, .dbt-pay-total { margin-left: auto; }

  /* ---------- ตาราง ---------- */
  .panel.dbt-main { padding: 6px 14px 4px; }
  .dbt-scroll.table-wrap { border: 0; border-radius: 0; background: transparent; }
  .dbt-table th { padding: 10px 10px; font-size: .8rem; white-space: nowrap; }
  .dbt-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .dbt-table tr:last-child td { border-bottom: 0; }
  .dbt-table .r { text-align: right; }
  .dbt-row.clickable { cursor: pointer; }
  .dbt-row:hover td { background: var(--brand-tint); }
  .dbt-row.open td { background: var(--brand-soft); }
  .dbt-row.od td:first-child { box-shadow: inset 3px 0 0 var(--ag1); }
  .dbt-row.od3 td:first-child { box-shadow: inset 3px 0 0 var(--ag3); }
  .dbt-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .dbt-c-name small, .dbt-c-cust small { display: block; font-size: .78rem; }
  .dbt-c-name { min-width: 150px; max-width: 240px; }
  .dbt-c-limit { width: 128px; }
  .dbt-c-limit small { display: block; margin-top: 3px; font-size: .74rem; white-space: nowrap; }
  .dbt-c-out { white-space: nowrap; font-size: .98rem; }
  .dbt-c-ag { white-space: nowrap; font-size: .88rem; }
  .dbt-c-ag.zero { color: var(--muted); opacity: .6; }
  .dbt-c-ag.cur { color: var(--ink); }
  .dbt-c-ag.od1 { color: var(--ag1); font-weight: 600; }
  .dbt-c-ag.od2 { color: var(--ag2); font-weight: 700; }
  .dbt-c-ag.od3 { color: var(--ag3); font-weight: 700; }
  .dbt-c-bills { width: 60px; }
  .dbt-c-due, .dbt-c-last { white-space: nowrap; font-size: .86rem; }
  .dbt-c-last { color: var(--muted); }
  .dbt-c-mobile { display: none; }
  .dbt-c-date { white-space: nowrap; font-size: .86rem; color: var(--muted); }
  .dbt-c-no { white-space: nowrap; font-size: .86rem; font-weight: 600; }
  .dbt-c-amt { white-space: nowrap; }
  .dbt-c-amt .dbt-void-tag { display: table; margin: 2px 0 0 auto; }
  .dbt-c-alloc { max-width: 170px; }
  .dbt-c-alloc small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dbt-c-by { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dbt-c-act { width: 88px; padding-left: 0 !important; padding-right: 4px !important; text-align: right; white-space: nowrap; }
  .dbt-row.voided td { color: var(--muted); }
  .dbt-row.voided .dbt-c-amt strong, .dbt-row.voided .dbt-c-no { text-decoration: line-through; text-decoration-thickness: 1.5px; }

  .dbt-ico-btn { width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--brand-tint); color: var(--brand-strong, var(--brand)); }
  .dbt-ico-btn:hover { background: var(--brand-soft); }
  .dbt-ico-btn.danger { background: var(--danger-soft); color: var(--danger); margin-left: 4px; }

  /* ป้ายเล็ก ๆ */
  .dbt-tag { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; background: var(--chip); color: var(--muted); }
  .dbt-tag.on { background: var(--ok-soft); color: var(--ok); }
  .dbt-unl { font-size: .82rem; color: var(--muted); }
  .dbt-late { display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; background: var(--danger-soft); color: var(--ag3); font-size: .74rem; font-weight: 700; white-space: nowrap; }
  .dbt-ok { color: var(--ok); font-weight: 600; }
  .dbt-void-tag { display: inline-block; padding: 0 8px; border-radius: 999px; white-space: nowrap; background: var(--danger-soft); color: var(--danger); font-size: .72rem; font-weight: 700; text-decoration: none; }
  .dbt-inv-tag { display: inline-flex; padding: 0 8px; border-radius: 6px; background: var(--brand-tint); color: var(--brand-strong, var(--brand)); font-size: .72rem; font-weight: 700; white-space: nowrap; }
  .dbt-method { display: inline-flex; padding: 1px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; background: var(--chip); color: var(--ink); }
  .dbt-method.m-cash { background: var(--ok-soft); color: var(--ok); }
  .dbt-method.m-transfer { background: color-mix(in srgb, #2F6FB3 13%, transparent); color: #2F6FB3; }
  .dbt-method.m-card { background: color-mix(in srgb, #7C3AED 12%, transparent); color: #6D28D9; }
  .dbt-method.m-return { background: var(--warn-soft); color: #8A5A00; }
  .dbt-status { display: inline-flex; padding: 1px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
  .dbt-status.st-open { background: var(--brand-tint); color: var(--brand-strong, var(--brand)); }
  .dbt-status.st-overdue { background: var(--danger-soft); color: var(--danger); }
  .dbt-status.st-paid { background: var(--ok-soft); color: var(--ok); }
  .dbt-status.st-cancelled { background: var(--chip); color: var(--muted); text-decoration: line-through; }

  /* แถบวงเงิน */
  .dbt-meter { display: block; width: 100%; max-width: 120px; height: 7px; border-radius: 999px; background: var(--chip); overflow: hidden; }
  .dbt-meter i { display: block; height: 100%; border-radius: 999px; background: var(--ok); }
  .dbt-meter.near i { background: var(--ag1); }
  .dbt-meter.over i { background: var(--ag3); }

  .dbt-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; margin: auto 0; text-align: center; }
  .dbt-empty p { margin: 0; font-weight: 600; }
  .dbt-empty-ico { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; background: var(--brand-soft); color: var(--brand-strong, var(--brand)); }

  /* ---------- ลิ้นชักลูกค้า ---------- */
  .drw:has(.dbt-cust) { width: min(700px, 100%); }
  .dbt-cust { display: flex; flex-direction: column; gap: 14px; }
  .dbt-csum {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px 18px; align-items: center;
    padding: 14px 16px; border-radius: 18px; background: var(--brand-tint); border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  }
  .dbt-csum-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .dbt-csum-main > span { color: var(--muted); font-size: .82rem; }
  .dbt-csum-main strong { font-size: 1.8rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dbt-csum-main small { align-self: flex-start; font-size: .8rem; }
  .dbt-csum-grid { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .dbt-csum-grid > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 10px; border-radius: 12px; background: var(--surface); }
  .dbt-csum-grid dt { color: var(--muted); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dbt-csum-grid dd { margin: 0; font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dbt-csum-grid .dbt-meter { max-width: none; height: 5px; margin-top: 2px; }
  .dbt-set-link { position: absolute; top: 10px; right: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; text-decoration: none; }
  .dbt-set-link:hover { text-decoration: underline; }
  .dbt-csum:has(.dbt-set-link) { padding-top: 32px; }

  .dbt-bills-sec h3 { align-items: center; }
  .dbt-pickall { margin-left: auto; font-size: .82rem; font-weight: 500; color: var(--muted); }
  .dbt-pickall input { width: 17px; height: 17px; }
  .dbt-none { margin: 0; padding: 8px 2px; font-size: .9rem; }
  .dbt-bills { display: flex; flex-direction: column; gap: 6px; }
  .dbt-bill {
    display: grid; grid-template-columns: auto minmax(0, 1fr) 118px 130px; grid-template-areas: "ck main due amt" "ck sub sub sub";
    align-items: center; gap: 2px 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 14px;
    background: var(--surface); cursor: pointer;
  }
  .dbt-bill:hover { border-color: var(--muted); }
  .dbt-bill:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 1px var(--brand) inset; }
  .dbt-bill.late { border-left: 4px solid var(--ag3); padding-left: 9px; }
  .dbt-bill > input { grid-area: ck; width: 19px; height: 19px; accent-color: var(--brand); }
  .dbt-bill-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
  .dbt-bill-main strong { font-size: .92rem; }
  .dbt-bill-main small { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dbt-bill-due { grid-area: due; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: .86rem; white-space: nowrap; }
  .dbt-bill-due small { font-size: .7rem; }
  .dbt-bill-amt { grid-area: amt; display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
  .dbt-bill-amt strong { font-size: 1.02rem; white-space: nowrap; }
  .dbt-bill-amt small { font-size: .7rem; white-space: nowrap; }
  .dbt-bill-sub { grid-area: sub; display: flex; align-items: center; gap: 8px; min-width: 0; }
  .dbt-bill-sub small { font-size: .74rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dbt-picked {
    position: sticky; bottom: -22px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 4px -4px 0; padding: 9px 12px; border-radius: 12px; background: var(--chip); font-size: .84rem; color: var(--muted);
  }
  .dbt-picked strong { color: var(--ink); font-size: 1rem; }
  .dbt-bills-sec:has(input:checked) .dbt-picked { background: var(--brand); color: var(--brand-ink); }
  .dbt-bills-sec:has(input:checked) .dbt-picked strong { color: var(--brand-ink); }

  .dbt-plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .dbt-plist li + li { border-top: 1px dashed var(--line); }
  .dbt-plist button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 4px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
  .dbt-plist button:hover { background: var(--chip); }
  .dbt-plist-main { display: flex; flex-direction: column; min-width: 0; }
  .dbt-plist-main strong { font-size: .88rem; }
  .dbt-plist-main small { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dbt-plist-amt { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
  .dbt-plist li.voided strong { text-decoration: line-through; color: var(--muted); }
  .dbt-foot-btn { display: inline-flex; align-items: center; gap: 7px; }

  /* ---------- ป๊อปอัปรับชำระ / ฟอร์ม ---------- */
  .dbt-pay, .dbt-form { display: flex; flex-direction: column; gap: 14px; }
  .dbt-pay-who {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px;
    border-radius: 14px; background: var(--chip); font-size: .92rem;
  }
  .dbt-pay-who > span:first-child { display: flex; flex-direction: column; min-width: 0; }
  .dbt-pay-who > span:first-child strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dbt-pay-who small { font-size: .78rem; }
  .dbt-pay-who > :last-child { flex: none; font-weight: 700; }
  .dbt-amount-field { display: flex; flex-direction: column; gap: 6px; font-size: .86rem; color: var(--muted); }
  .dbt-amount-box { display: flex; align-items: center; gap: 8px; padding: 4px 16px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); }
  .dbt-amount-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
  .dbt-amount-box input.dbt-amount { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 6px 0; font: inherit; font-size: 2rem; font-weight: 800; color: var(--ink); }
  .dbt-amount-cur { color: var(--muted); font-size: 1.2rem; }
  .dbt-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
  .dbt-quick .chip { cursor: pointer; font: inherit; font-size: .84rem; padding: 5px 12px; }
  .dbt-fgroup { display: flex; flex-direction: column; gap: 8px; }
  .dbt-flabel { font-size: .86rem; color: var(--muted); font-weight: 600; }
  .dbt-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .dbt-methods button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; padding: 8px;
    border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
  }
  .dbt-methods button:hover:not(:disabled) { border-color: var(--muted); }
  .dbt-methods button.on { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-strong, var(--brand)); box-shadow: 0 0 0 1px var(--brand) inset; }
  .dbt-methods button:disabled { opacity: .45; cursor: not-allowed; }
  .dbt-hint { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--chip); color: var(--muted); font-size: .82rem; line-height: 1.45; }
  .dbt-hint.warn { background: var(--warn-soft); color: #7A5300; }
  .dbt-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dbt-alloc-seg { align-self: flex-start; }
  .dbt-alloc { display: flex; flex-direction: column; gap: 6px; }
  .dbt-alloc-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; }
  .dbt-alloc-bill { display: flex; flex-direction: column; min-width: 0; }
  .dbt-alloc-bill small { font-size: .74rem; }
  .dbt-alloc-row input { width: 100%; min-height: 38px; padding: 6px 10px; text-align: right; font: inherit; font-weight: 700; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
  .dbt-alloc-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; font-size: .84rem; font-weight: 600; }
  .dbt-alloc-sum.ok { background: var(--ok-soft); color: var(--ok); }
  .dbt-alloc-sum.bad { background: var(--danger-soft); color: var(--danger); }
  .dbt-alloc-preview { list-style: none; margin: 0; padding: 4px 12px; border-radius: 12px; background: var(--chip); display: flex; flex-direction: column; }
  .dbt-alloc-preview:empty { display: none; }
  .dbt-alloc-preview li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 6px 0; font-size: .86rem; }
  .dbt-alloc-preview li + li { border-top: 1px dashed var(--line); }
  .dbt-alloc-preview small { font-size: .74rem; }
  .dbt-set-who { margin: 0; font-weight: 600; }
  .mdl-body .dbt-pay > .actions .btn.primary, .mdl-body .dbt-form > .actions .btn { min-width: 120px; }

  /* ---------- ตัวอย่างเอกสาร ---------- */
  .dbt-docview { display: flex; flex-direction: column; gap: 0; }
  .dbt-paper-wrap { margin: -18px -22px 0; padding: 22px; background: var(--chip); overflow-x: auto; }
  .dbt-doc-actions { flex-wrap: wrap; align-items: center; display: flex; gap: 8px; }
  .dbt-doc-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
  .dbt-doc-gap { flex: 1 1 auto; }
  .dbt-doc-opt { font-size: .86rem; }

  .dbt-paper { margin: 0 auto; max-width: 820px; padding: 34px 40px; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.14); }
  .is-receipt .dbt-paper { max-width: 400px; padding: 22px 22px 26px; }
  .is-receipt .dbt-a4-only { display: none; }

  /* แจ้งเตือนลอย */
  .dbt-toast {
    position: fixed; left: 50%; bottom: 28px; z-index: 90; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px)); padding: 10px 10px 10px 18px;
    border-radius: 14px; background: var(--ink); color: var(--surface); box-shadow: var(--shadow-lg); font-size: .92rem; font-weight: 600;
  }
  .dbt-toast.warn { background: #8A5A00; color: #fff; }
  .dbt-toast-x { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: inherit; cursor: pointer; }
}

/* จอคอม: แผงตารางเต็มความสูงที่เหลือ เลื่อนเฉพาะในตาราง */
@media screen and (min-width: 1025px) {
  .dbt-fit .fit-body > .dbt-main { flex: 1 1 auto; min-height: 0; overflow: hidden; }
}
/* จอคอมขนาดกลาง: ตัดคอลัมน์ชำระล่าสุด (ดูได้ในลิ้นชักลูกค้า) ให้ตารางพอดีจอ */
@media screen and (min-width: 761px) and (max-width: 1500px) {
  .dbt-table .dbt-c-last { display: none; }
  .dbt-table th.dbt-c-ag { white-space: normal; line-height: 1.25; }
  .dbt-table td, .dbt-table th { padding-left: 8px; padding-right: 8px; }
  .dbt-c-limit { width: 104px; }
  .dbt-c-name { min-width: 130px; max-width: 200px; }
  .dbt-ptable .dbt-c-by { display: none; }
}

/* ---------- เอกสาร: ใช้ทั้งบนจอและตอนพิมพ์ (กระดาษขาว) ---------- */
.dbt-paper {
  --ink: #111; --muted: #555; --line: #D5D5D5; --chip: #F2F2F2; --surface: #fff;
  display: flex; flex-direction: column; gap: 14px; background: #fff; color: #111; font-size: 13px; line-height: 1.45;
}
.dbt-paper .num { font-variant-numeric: tabular-nums; }
.dbt-paper .pre { white-space: pre-line; }
.dbt-dhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-bottom: 12px; border-bottom: 2px solid #111; }
.dbt-shop { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: .92em; color: #333; }
.dbt-shop-name { font-size: 1.45em; line-height: 1.25; color: #111; }
.dbt-dtitle { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; flex: none; }
.dbt-dtitle strong { font-size: 1.4em; letter-spacing: .01em; }
.dbt-dtitle span { font-weight: 700; color: #333; }
/* รอบ 104: หัวกระดาษชุดเดียว <DocPaperHeader> — โลโก้ซ้ายของชื่อร้าน + ชื่อเอกสาร (ไทย/ลาว + อังกฤษ) + เลขที่ ชิดขวา */
.dph-shop-wrap { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.dph-logo { max-width: 120px; max-height: 70px; }
.dph-title strong { font-size: 1.55em; }
.dph-title-en { font-size: .78em; font-weight: 700; letter-spacing: .16em; color: #555; }
@media screen and (max-width: 760px) {
  .dph-shop-wrap { flex-direction: column; gap: 8px; }
  .dph-logo { max-height: 52px; }
}
.dbt-stamp {
  align-self: center; padding: 4px 22px; border: 3px solid #B3261E; border-radius: 8px; color: #B3261E;
  font-size: 1.4em; font-weight: 800; letter-spacing: .08em; transform: rotate(-3deg);
}
.dbt-meta { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.dbt-meta > div { display: flex; justify-content: space-between; gap: 14px; }
.dbt-meta dt { color: #555; flex: none; }
.dbt-meta dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.dbt-party { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; }
.dbt-box { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 10px 14px; border: 1px solid #BBB; border-radius: 8px; min-width: 0; }
.dbt-box strong { font-size: 1.08em; }
.dbt-box-title { font-size: .78em; font-weight: 700; color: #555; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }
.dbt-box-dates > div { display: flex; justify-content: space-between; gap: 12px; }
.dbt-box-dates dt { color: #555; }
.dbt-box-dates dd { margin: 0; font-weight: 600; text-align: right; }
.dbt-box-dates .due dd { font-weight: 800; font-size: 1.08em; }
.dbt-lines { width: 100%; border-collapse: collapse; font-size: .95em; }
.dbt-lines th {
  padding: 6px 8px; text-align: left; font-size: .86em; font-weight: 700; white-space: nowrap;
  background: #EEE; border-top: 1.5px solid #111; border-bottom: 1.5px solid #111;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.dbt-lines td { padding: 6px 8px; border-bottom: 1px solid #DDD; vertical-align: top; }
.dbt-lines .num { text-align: right; white-space: nowrap; }
.dbt-lines .nw { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dbt-lines .c-no { width: 28px; text-align: center !important; }
.dbt-lines tr { break-inside: avoid; }
.dbt-lines tr.sub td { background: #F6F6F6; font-weight: 600; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dbt-empty-line { text-align: center; color: #777; padding: 14px 8px !important; }
.dbt-sum { display: flex; flex-direction: column; gap: 4px; width: min(100%, 320px); margin-left: auto; break-inside: avoid; }
.dbt-sum-row { display: flex; justify-content: space-between; gap: 14px; }
.dbt-sum-row.total { padding: 6px 0; border-top: 2px solid #111; border-bottom: 2px solid #111; }
.dbt-sum-row.total strong { font-size: 1.3em; }
.dbt-sum-row.due strong { color: #B3261E; }
.dbt-dsub { margin: 6px 0 0; font-size: 1.02em; }
.dbt-note { margin: 0; color: #333; }
.dbt-accounts { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 10px 14px; border: 1px dashed #AAA; border-radius: 8px; break-inside: avoid; }
.dbt-accounts .dbt-box-title { flex: 1 1 100%; }
.dbt-acc { display: flex; flex-direction: column; min-width: 0; }
.dbt-acc small { color: #555; }
.dbt-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 26px; break-inside: avoid; }
.dbt-sign > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dbt-sign span { width: 80%; height: 34px; border-bottom: 1px dotted #333; }
.dbt-sign small { color: #444; }
.dbt-foot { margin: 0; text-align: center; color: #333; font-size: .92em; }

/* ---------- มือถือ ---------- */
@media screen and (max-width: 760px) {
  .dbt-tools { flex-wrap: wrap; }
  .dbt-tabs { flex: 1 1 100%; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dbt-tabs button { justify-content: center; }
  .dbt-search { width: auto; flex: 1 1 100%; }
  .dbt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dbt-stats .fit-stat { padding: 10px 12px; }
  .dbt-bar { gap: 8px; }
  .dbt-chips { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .dbt-chips::-webkit-scrollbar { display: none; }
  .dbt-inv-chips { margin-left: -16px; }
  .dbt-zero { flex: 1 1 auto; min-width: 0; font-size: .8rem; }
  .dbt-sort { margin-left: 0; }
  .dbt-sort > span { display: none; }
  .dbt-sort select { max-width: 150px; }
  .dbt-periods { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .dbt-periods::-webkit-scrollbar { display: none; }
  .dbt-periods .chip { flex: none; }
  .dbt-pay-total { margin-left: 0; display: inline-flex; }

  .panel.dbt-main { padding: 0; background: none; border: 0; box-shadow: none; }
  .dbt-table thead { display: none; }
  .dbt-table, .dbt-table tbody { display: block; width: 100%; }
  .dbt-table tr.dbt-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 8px; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow);
  }
  .dbt-table tr.dbt-row td { display: block; padding: 0 !important; border: 0; background: none !important; box-shadow: none !important; max-width: none; min-width: 0; width: auto; }
  .dbt-table tr.dbt-row:hover td { background: none; }
  .dbt-row.od { border-left: 4px solid var(--ag1) !important; }
  .dbt-row.od3 { border-left: 4px solid var(--ag3) !important; }

  /* การ์ดลูกหนี้ */
  .dbt-table .dbt-c-name { order: 1; flex: 1 1 0; }
  .dbt-table .dbt-c-out { order: 2; flex: none; font-size: 1.08rem; }
  .dbt-table .dbt-c-limit { order: 3; flex: 1 1 100%; display: flex !important; align-items: center; gap: 8px; }
  .dbt-table .dbt-c-limit .dbt-meter { flex: 1 1 auto; max-width: none; }
  .dbt-table .dbt-c-limit small { margin: 0; }
  .dbt-table .dbt-c-ag, .dbt-table .dbt-c-bills, .dbt-table .dbt-c-due, .dbt-table .dbt-c-last { display: none !important; }
  .dbt-table .dbt-c-mobile { order: 4; flex: 1 1 100%; display: flex !important; align-items: center; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--muted); }
  .dbt-mline { display: flex; flex-wrap: wrap; gap: 2px 10px; min-width: 0; }

  /* การ์ดรับชำระ / ใบแจ้งหนี้ */
  .dbt-ptable .dbt-c-cust, .dbt-itable .dbt-c-cust { order: 1; flex: 1 1 0; min-width: 55% !important; }
  .dbt-ptable .dbt-c-amt, .dbt-itable .dbt-c-amt:nth-child(6) { order: 2; flex: none; font-size: 1.04rem; }
  .dbt-itable .dbt-c-amt:nth-child(5) { display: none !important; }
  .dbt-ptable .dbt-c-no, .dbt-itable .dbt-c-no { order: 3; font-size: .8rem; }
  .dbt-ptable .dbt-c-date, .dbt-itable .dbt-c-date { order: 4; font-size: .78rem; }
  .dbt-ptable .dbt-c-method, .dbt-itable .dbt-c-status { order: 5; flex: 1 1 auto; }
  .dbt-ptable .dbt-c-alloc { order: 6; flex: 1 1 60%; max-width: none; }
  .dbt-ptable .dbt-c-by { display: none !important; }
  .dbt-ptable .dbt-c-act, .dbt-itable .dbt-c-act { order: 7; margin-left: auto; width: auto; }
  .dbt-ico-btn { width: 32px; height: 32px; }

  /* ลิ้นชัก */
  .dbt-csum { grid-template-columns: minmax(0, 1fr); }
  .dbt-csum-main strong { font-size: 1.6rem; }
  .dbt-bill { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ck main amt" "ck due due" "ck sub sub"; gap: 3px 10px; }
  .dbt-bill-sub small { white-space: normal; }
  .dbt-bill-sub { flex-wrap: wrap; gap: 2px 8px; }
  .dbt-bill-due { flex-direction: row; align-items: center; gap: 6px; }
  .dbt-bill-amt { min-width: 0; }
  .dbt-picked { bottom: -18px; }
  .drw-foot .dbt-foot-btn { flex: 1 1 0; justify-content: center; padding-left: 6px; padding-right: 6px; font-size: .86rem; min-width: 0; }
  .drw-foot .dbt-foot-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .drw-foot .dbt-foot-btn.primary { flex: 1 1 100%; order: -1; }
  .dbt-csum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dbt-csum-grid > div:last-child { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; }

  /* ฟอร์ม */
  .dbt-amount-box input.dbt-amount { font-size: 1.7rem; }
  .dbt-pgrid { grid-template-columns: minmax(0, 1fr); }
  .dbt-alloc-row { grid-template-columns: minmax(0, 1fr) 130px; }
  .dbt-alloc-seg { align-self: stretch; display: grid !important; grid-template-columns: 1fr 1fr; }
  .dbt-alloc-seg button { justify-content: center; font-size: .82rem; }

  /* เอกสาร */
  .dbt-paper-wrap { margin: -14px -16px 0; padding: 12px; }
  .dbt-paper { padding: 18px 14px; font-size: 11px; }
  .is-receipt .dbt-paper { padding: 16px 14px 20px; font-size: 12.5px; }
  .dbt-party { grid-template-columns: minmax(0, 1fr); }
  .dbt-dhead { gap: 10px; }
  .dbt-lines th, .dbt-lines td { padding: 5px 4px; }
  .dbt-sign { gap: 18px; }
  .dbt-paper .m-hide { display: none; }
  .dbt-doc-gap { display: none; }
  .dbt-doc-actions .btn { flex: 1 1 0; justify-content: center; }
  .dbt-doc-actions .dbt-doc-opt { flex: 1 1 100%; }
  .dbt-toast { bottom: calc(90px + env(safe-area-inset-bottom)); }
}

/* ---------- โหมดมืด ---------- */
@media screen {
  html[data-theme="dark"] .dbt-fit, html[data-theme="dark"] .drw, html[data-theme="dark"] .mdl { --ag1: #F0B44C; --ag2: #F58A5B; }
  html[data-theme="dark"] .dbt-method.m-transfer { background: var(--info-soft); color: var(--info-text); }
  html[data-theme="dark"] .dbt-method.m-card { background: color-mix(in srgb, #A78BFA 18%, transparent); color: #C4B5FD; }
  html[data-theme="dark"] .dbt-method.m-return, html[data-theme="dark"] .dbt-hint.warn { color: var(--warn-text); }
  html[data-theme="dark"] .dbt-st-out { background: color-mix(in srgb, var(--brand) 70%, #1F1D1B); }
  html[data-theme="dark"] .dbt-toast:not(.warn) { background: #ECE7E1; color: #1F1D1B; }
  html[data-theme="dark"] .dbt-paper-wrap { background: #121110; }
  html[data-theme="dark"] .dbt-paper { box-shadow: 0 6px 24px rgba(0,0,0,.6); }
  html[data-theme="dark"] .dbt-amount::placeholder { color: #4A453F; }
}

/* =====================================================================
   พิมพ์: html[data-print="dbt-a4"] (A4) / html[data-print="dbt-slip"] (80mm)
   ===================================================================== */
@page dbt-a4 { size: A4; margin: 12mm; }
@media print {
  html[data-print="dbt-a4"]:has(.dbt-print), html[data-print="dbt-a4"]:has(.dbt-print) body,
  html[data-print="dbt-slip"]:has(.dbt-print), html[data-print="dbt-slip"]:has(.dbt-print) body {
    margin: 0 !important; padding: 0 !important; height: auto !important; overflow: visible !important;
    background: #fff !important; color: #111 !important;
  }
  html[data-print="dbt-a4"]:has(.dbt-print), html[data-print="dbt-a4"]:has(.dbt-print) body { page: dbt-a4; }
  html[data-print="dbt-a4"]:has(.dbt-print) body *:not(:has(.dbt-print)):not(.dbt-print):not(.dbt-print *),
  html[data-print="dbt-slip"]:has(.dbt-print) body *:not(:has(.dbt-print)):not(.dbt-print):not(.dbt-print *) { display: none !important; }
  html[data-print="dbt-a4"]:has(.dbt-print) body *:has(.dbt-print),
  html[data-print="dbt-slip"]:has(.dbt-print) body *:has(.dbt-print) {
    display: block !important; position: static !important; inset: auto !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    width: auto !important; max-width: none !important; min-width: 0 !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow: visible !important; background: none !important; box-shadow: none !important; transform: none !important;
    animation: none !important; zoom: 1 !important;
  }
  html[data-print="dbt-a4"] .dbt-print, html[data-print="dbt-a4"] .dbt-print *,
  html[data-print="dbt-slip"] .dbt-print, html[data-print="dbt-slip"] .dbt-print * { visibility: visible !important; }
  html[data-print="dbt-a4"] .dbt-print, html[data-print="dbt-slip"] .dbt-print { display: block !important; position: static !important; }
  html[data-print="dbt-a4"] .dbt-paper, html[data-print="dbt-slip"] .dbt-paper {
    max-width: none !important; margin: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  }

  /* A4 */
  html[data-print="dbt-a4"] .dbt-paper { padding: 0 !important; font-size: 10.5pt; gap: 4.5mm; }
  html[data-print="dbt-a4"] .dbt-a4-only { display: grid; }

  /* สลิป 80mm: เรียงลงคอลัมน์เดียว ตัวเล็ก */
  html[data-print="dbt-slip"] .dbt-paper { width: 72mm; padding: 0 !important; font-size: 11px; gap: 7px; }
  html[data-print="dbt-slip"] .dbt-a4-only { display: none !important; }
  html[data-print="dbt-slip"] .dbt-dhead { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding-bottom: 6px; border-bottom: 1px dashed #111; }
  html[data-print="dbt-slip"] .dbt-shop { align-items: center; }
  html[data-print="dbt-slip"] .dbt-shop-name { font-size: 1.3em; }
  html[data-print="dbt-slip"] .dbt-dtitle { align-items: center; text-align: center; }
  html[data-print="dbt-slip"] .dbt-dtitle strong { font-size: 1.15em; }
  /* หัวกระดาษชุดเดียว (DocPaperHeader) บนสลิป: คอลัมน์กลาง โลโก้ขาวดำ — ใบสำคัญจ่ายสลิป (pv-slip) ใช้กติกาเดียวกัน */
  html:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dph-shop-wrap { flex-direction: column; align-items: center; align-self: stretch; gap: 4px; }
  html:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dph-logo { max-width: 60%; max-height: 56px; filter: grayscale(1) contrast(1.15); }
  html:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dph-title-en { letter-spacing: .08em; }
  html[data-print="dbt-slip"] .dbt-lines th { background: none; border-top: 1px dashed #111; border-bottom: 1px dashed #111; padding: 3px 2px; }
  html[data-print="dbt-slip"] .dbt-lines td { padding: 3px 2px; border-bottom: 0; }
  html[data-print="dbt-slip"] .dbt-lines .c-no { display: none; }
  html[data-print="dbt-slip"] .dbt-sum { width: 100%; }
  html[data-print="dbt-slip"] .dbt-sum-row.total { border-width: 1px; border-style: dashed none; }
  html[data-print="dbt-slip"] .dbt-stamp { font-size: 1.1em; padding: 2px 12px; }
}

/* ---------- รอบ 105: ลิ้นชักลูกค้าร่วม <CustomerDrawer> (prefix cdr-) — ใช้กับ .dbt-cust/.dbt-csum เดิม ---------- */
@media screen {
  .cdr-name { color: var(--ink); font-weight: 600; text-decoration: none; text-align: left; }
  .cdr-name:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
  .cdr-xlink { margin: 4px 0 0; }
  .cdr-xlink a { font-weight: 600; white-space: nowrap; }
  .fit > .cdr-xlink { margin: -4px 0 10px; }
  .cdr-link {
    display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px;
    background: var(--chip); color: var(--ink); font-size: .88rem; font-weight: 600; text-decoration: none;
  }
  .cdr-link:hover { color: var(--brand); }
  .cdr-stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cdr-stats > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 9px 12px; border-radius: 12px; background: var(--chip); }
  .cdr-stats dt, .cdr-info dt { color: var(--muted); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cdr-stats dd { margin: 0; font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cdr-info { margin: 4px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
  .cdr-info > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .cdr-info > div.wide { grid-column: 1 / -1; }
  .cdr-info dd { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
  .cdr-blist li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px; }
  .cdr-more { margin: 2px 0 0; align-self: flex-start; }
  .cdr-go { align-self: flex-start; margin-top: 4px; }
  .cdr-pts h3 { align-items: center; }
  .cdr-h-act { margin-left: auto; font-size: .82rem; font-weight: 600; }
  .cdr-resv-line { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .92rem; }
}
@media screen and (max-width: 760px) {
  .cdr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdr-stats > div:last-child { grid-column: 1 / -1; }
  .cdr-info { grid-template-columns: minmax(0, 1fr); }
}