/* ============================================================
   app.css — ส่วนติดต่อโปรแกรม (เมนู / ฟอร์ม / พรีวิว)
   ไม่ถูกพิมพ์ (ซ่อนด้วย @media print ผ่านคลาส .app-chrome)
   ============================================================ */
:root {
  --deep:#0E4C46; --teal:#157A6E; --teal-2:#2E9C8D; --mint:#E8F3F0; --mint-2:#F3FAF8;
  --gold:#C89B2C; --ink:#232B2F; --muted:#6B7780; --line:#CBDDE0; --line-2:#E4EEEC;
  --app-font:"Leelawadee UI","Tahoma","Sarabun","Segoe UI",sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; height:100%; }
body { font-family: var(--app-font); color: var(--ink); background:#eef4f3; }

.app { display: flex; flex-direction: column; height: 100vh; }

/* แถบบน */
.appbar { flex: 0 0 auto; display:flex; align-items:center; gap:12px; padding:10px 18px; background: linear-gradient(90deg,var(--deep),var(--teal)); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.appbar .logo { width:34px; height:34px; object-fit:contain; background:#fff; border-radius:6px; padding:2px; }
.appbar h1 { font-size:16px; margin:0; font-weight:800; letter-spacing:.3px; }
.appbar .sub { font-size:11px; opacity:.85; margin-left:2px; }
.appbar .spacer { flex:1; }
.appbar .btn { background:rgba(255,255,255,.14); }
.appbar .btn:hover { background:rgba(255,255,255,.26); }

/* โครง 3 คอลัมน์ */
.body { flex:1 1 auto; display:flex; min-height:0; }
.menu { flex:0 0 232px; padding:14px; overflow:auto; background:#e7efee; border-right:1px solid var(--line); }
.formpane { flex:0 0 380px; padding:16px 18px; overflow:auto; background:#f6faf9; border-right:1px solid var(--line); }
.previewpane { flex:1 1 auto; overflow:auto; padding:20px; background:#dfe8e7; }

/* เมนูเอกสาร */
.menu h2 { font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin:4px 4px 10px; }
.doc-card { display:block; width:100%; text-align:left; border:1px solid var(--line); background:#fff; border-radius:10px; padding:12px 13px; margin-bottom:10px; cursor:pointer; transition:.15s; }
.doc-card:hover { border-color:var(--teal-2); box-shadow:0 2px 8px rgba(21,122,110,.12); transform:translateY(-1px); }
.doc-card.active { border-color:var(--teal); background:linear-gradient(180deg,#fff,var(--mint)); box-shadow:0 3px 12px rgba(14,76,70,.16); }
.doc-card .t { font-weight:800; color:var(--deep); font-size:14px; }
.doc-card .e { font-size:11px; color:var(--teal); font-weight:600; letter-spacing:.4px; }
.doc-card .d { font-size:11px; color:var(--muted); margin-top:4px; line-height:1.4; }

/* ฟอร์ม */
.formpane h2 { font-size:15px; color:var(--deep); margin:0 0 2px; }
.formpane .hint { font-size:11px; color:var(--muted); margin-bottom:14px; }
fieldset { border:1px solid var(--line); border-radius:10px; padding:12px 13px; margin:0 0 14px; background:#fff; }
legend { font-size:12px; font-weight:800; color:var(--teal); padding:0 6px; }
label.f { display:block; font-size:11px; color:var(--muted); margin:8px 0 3px; }
input.i, select.i, textarea.i { width:100%; font-family:inherit; font-size:13px; padding:7px 9px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); }
input.i:focus, select.i:focus, textarea.i:focus { outline:none; border-color:var(--teal-2); box-shadow:0 0 0 3px rgba(46,156,141,.15); }
.row { display:flex; gap:10px; }
.row > * { flex:1; }
.checks { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:6px; }
.checks label { font-size:12px; color:var(--ink); display:flex; align-items:center; gap:5px; }
textarea.i { resize:vertical; min-height:52px; }

/* ตัวแก้ไขรายการ (items) */
.items-edit { width:100%; border-collapse:collapse; font-size:12px; }
.items-edit th { font-size:10px; color:var(--muted); text-align:left; padding:2px 3px; font-weight:600; }
.items-edit td { padding:2px; }
.items-edit input { width:100%; font-family:inherit; font-size:12px; padding:5px 6px; border:1px solid var(--line); border-radius:6px; }
.items-edit input.num { text-align:right; }
.items-edit .c-code{width:70px} .items-edit .c-desc{width:auto} .items-edit .c-qty{width:52px}
.items-edit .c-unit{width:46px} .items-edit .c-price{width:70px} .items-edit .c-disc{width:60px}
.items-edit .c-rm{width:26px}
.items-edit button.rm { width:22px; height:22px; border:0; background:#f3d3d0; color:#8a2b20; border-radius:5px; cursor:pointer; font-weight:800; }
.mini { font-size:12px; padding:6px 10px; border:1px solid var(--teal-2); background:#fff; color:var(--teal); border-radius:7px; cursor:pointer; margin-top:8px; }
.mini:hover { background:var(--mint); }

/* ปุ่มหลัก */
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.btn { font-family:inherit; font-size:13px; font-weight:700; padding:9px 14px; border-radius:8px; border:1px solid var(--teal); background:var(--teal); color:#fff; cursor:pointer; transition:.15s; }
.btn:hover { background:var(--deep); border-color:var(--deep); }
.btn.ghost { background:#fff; color:var(--teal); }
.btn.ghost:hover { background:var(--mint); color:var(--deep); }
.btn.gold { background:var(--gold); border-color:var(--gold); color:#3a2c00; }
.btn.gold:hover { filter:brightness(.95); }

/* พรีวิว */
.preview-tip { font-size:12px; color:var(--muted); margin-bottom:10px; }
.preview-scroll { }

/* responsive เบา ๆ */
@media (max-width:1180px){ .formpane{flex-basis:330px} .menu{flex-basis:200px} }
@media (max-width:920px){ .body{flex-direction:column; overflow:auto} .menu,.formpane,.previewpane{flex:none; width:100%; border:0; border-bottom:1px solid var(--line)} .previewpane{min-height:60vh} }

/* ============================================================
   PRINT — app.css โหลดท้ายสุด จึงอยู่ที่นี่เพื่อให้ชนะ layout เดิม
   ซ่อนส่วนติดต่อทั้งหมด แบน container แล้วพิมพ์เฉพาะ .sheet
   ============================================================ */
@media print {
  html, body { background:#fff !important; height:auto !important; overflow:visible !important; }
  .app { display:block !important; height:auto !important; }
  .appbar, .menu, .formpane, .preview-tip, .no-print { display:none !important; }
  .body { display:block !important; }
  .previewpane { display:block !important; overflow:visible !important; padding:0 !important; background:#fff !important; }
  .preview-scroll { overflow:visible !important; height:auto !important; padding:0 !important; }
  #doc { display:block !important; }
  .sheet { box-shadow:none !important; border:0 !important; margin:0 !important; width:210mm; min-height:0 !important; }
  * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  /* กันไม่ให้ตาราง/บล็อกถูกตัดกลางแถว */
  .tbl tr, .trow, .sign, .inwords, .callout, .notes, .totals-wrap { break-inside:avoid; }
  .tbl thead { display:table-header-group; }
  .doc-head { break-after:avoid; }
}