/* ==========================================================
   โคตรเศรษฐี — สไตล์เอกสารสำหรับพิมพ์และบันทึกเป็น PDF
   ออกแบบบนกระดาษ A4 ขาว-ดำอ่านง่าย ไม่พึ่งสีพื้นเข้ม
   ========================================================== */
:root{
  --ink:#1C1416; --muted:#6B5D60; --line:#D8CFCF; --red:#C1121F; --good:#12735A; --bad:#A93A2A; --mid:#B07A12;
}
*{box-sizing:border-box}
body{margin:0;background:#F2EFEE;color:var(--ink);
  font-family:"Prompt","Segoe UI",system-ui,sans-serif;font-size:13px;line-height:1.6}
.mono{font-family:"Prompt",ui-monospace,monospace;font-variant-numeric:tabular-nums}

.toolbar{position:sticky;top:0;background:#1C1416;color:#FFF6EA;padding:.6rem 1rem;
  display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;font-size:.85rem;z-index:10}
.toolbar .btn-print{background:#C1121F;color:#fff;border:0;border-radius:7px;padding:.4rem 1rem;
  font:inherit;font-weight:600;cursor:pointer}
.toolbar .btn-print:hover{background:#7E0C14}
.toolbar .btn-back{color:#F0C45A;text-decoration:none}
.toolbar .hint{color:rgba(255,246,234,.6);margin-left:auto}

.sheet{background:#fff;width:210mm;min-height:297mm;margin:1rem auto;padding:16mm 14mm;
  box-shadow:0 4px 24px -12px rgba(0,0,0,.4)}
.sheet + .sheet{margin-top:1rem}

.doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;
  border-bottom:2px solid var(--ink);padding-bottom:.8rem;margin-bottom:1.2rem}
.doc-head h1{font-family:"Prompt",serif;font-size:1.5rem;margin:0 0 .2rem}
.doc-head .shop{font-weight:600;font-size:1.05rem}
.doc-head .meta{text-align:right;font-size:.82rem;color:var(--muted);white-space:nowrap}
.doc-head .meta b{color:var(--ink)}
.logo-img{max-height:46px;max-width:150px;margin-bottom:.4rem;display:block}

h2.sec{font-family:"Prompt",serif;font-size:1rem;margin:1.4rem 0 .5rem;
  padding-bottom:.25rem;border-bottom:1px solid var(--line)}

table.doc{width:100%;border-collapse:collapse;font-size:.85rem}
table.doc th{text-align:left;background:#F7F3F2;border:1px solid var(--line);padding:.45rem .6rem;font-size:.75rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
table.doc td{border:1px solid var(--line);padding:.45rem .6rem;vertical-align:top}
table.doc tfoot td{font-weight:700;background:#F7F3F2}
.num{text-align:right;font-family:"Prompt",monospace;font-variant-numeric:tabular-nums}

.big-number{font-family:"Prompt",monospace;font-size:2rem;font-weight:600;letter-spacing:1px}
.price-total{font-family:"Prompt",monospace;font-size:1.6rem;font-weight:700;color:var(--red)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;font-size:.85rem;margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.box{border:1px solid var(--line);border-radius:6px;padding:.7rem .9rem}
.muted{color:var(--muted)}
.good{color:var(--good)} .bad{color:var(--bad)} .mid{color:var(--mid)}
.sign{margin-top:2.5rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.sign div{border-top:1px dotted var(--ink);padding-top:.4rem;text-align:center;font-size:.8rem;color:var(--muted)}
.qr-box{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.qr-box canvas{border:1px solid var(--line);border-radius:6px}
.qr-fallback{font-size:.7rem;color:var(--muted);word-break:break-all;max-width:200px}
.qr-download{font-size:.75rem;color:var(--red)}
.foot-note{margin-top:1.5rem;padding-top:.6rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}

/* บันไดคู่เลขแบบย่อสำหรับเอกสาร */
.pairline{display:grid;grid-template-columns:repeat(20,1fr);max-width:340px;margin:.4rem 0}
.pairline .d{grid-column:span 2;text-align:center;font-family:"Prompt",monospace;font-size:1.15rem}
.pairline .pr{grid-column:span 2;height:4px;border-radius:2px;margin:.1rem .15rem 0;background:var(--line)}
.pairline .pr.g{background:var(--good)} .pairline .pr.b{background:var(--bad)}
.pairline .pr.x{background:transparent;border-top:2px dotted var(--line)}
.pairline .sp{grid-column:span 1}

@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff;font-size:11.5px}
  .no-print{display:none !important}
  .sheet{width:auto;min-height:0;margin:0;padding:0;box-shadow:none;page-break-after:always}
  .sheet:last-child{page-break-after:auto}
  table.doc th{background:#eee !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .price-total,.pairline .pr{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
