body { font-family: 'Sarabun', 'Tahoma', sans-serif; background: #f3f5f9; font-size: 15px; }
.app-nav { background: linear-gradient(90deg, #1e2a44, #2f4a80); }
.app-nav .nav-link.active { font-weight: 600; border-bottom: 2px solid #fff; }
.card { border: 0; box-shadow: 0 1px 4px rgba(20, 30, 60, .08); border-radius: 10px; }
.card-header { background: #fff; border-bottom: 1px solid #eef0f4; }
.company-logo-sm { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid #e3e6ec; }
.stat-card { border-left: 5px solid #2f6fed; }
.stat-dn { border-left-color: #f0a020; }
.stat-rc { border-left-color: #20a060; }
.stat-bn { border-left-color: #8a4fd6; }
.badge-qt { background: #2f6fed; }
.badge-dn { background: #f0a020; }
.badge-rc { background: #20a060; }
.badge-bn { background: #8a4fd6; }
.login-bg { min-height: 100vh; background: linear-gradient(135deg, #1e2a44, #2f4a80); }
@media print { .no-print { display: none !important; } body { background: #fff; } .card { box-shadow: none; } }
.items-table textarea { resize: vertical; min-height: 31px; }
.items-table td { padding: .35rem; }
.row-no::before { content: counter(row); }
#itemsBody { counter-reset: row; }
#itemsBody tr { counter-increment: row; }

.hand-wrap .hand-note { display: none; }
.hand-wrap.is-hand .hand-note { display: block; }
.hand-wrap.is-hand input[type=date] { opacity: .45; }
.hand-wrap.is-hand .sender-name { text-decoration: line-through; opacity: .55; }

/* ตัวเลือกรูปแบบเอกสาร */
.tpl-card { display: block; cursor: pointer; border: 2px solid #e3e6ec; border-radius: 10px; padding: 10px; transition: border-color .15s; }
.tpl-card:hover { border-color: #9fb3e8; }
.tpl-card.on { border-color: #2f6fed; box-shadow: 0 0 0 3px rgba(47,111,237,.15); }
.tpl-card .tpl-check { display: none; font-size: 12px; color: #2f6fed; }
.tpl-card.on .tpl-check { display: inline; }
.tpl-thumb { position: relative; width: 100%; aspect-ratio: 210 / 297; overflow: hidden; border: 1px solid #e3e6ec; border-radius: 4px; background: #fff; }
.tpl-thumb iframe { position: absolute; top: 0; left: 0; width: 794px; height: 1123px; border: 0; transform-origin: 0 0; pointer-events: none; }
.swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #ccd; padding: 0; }
.swatch.on { box-shadow: 0 0 0 2px #1d2433; }

/* ผู้ลงนาม */
.sign-wrap .sign-input { display: none; }
.sign-wrap.is-custom .sign-input { display: block; }
.sign-wrap.is-custom .sign-default { text-decoration: line-through; opacity: .55; }

/* เอกสารแนบของบริษัท */
.cf-item { width: 140px; }
.cf-thumb { display: flex; align-items: center; justify-content: center; width: 140px; height: 100px; border: 1px solid #e3e6ec; border-radius: 6px; overflow: hidden; background: #f6f7f9; }
.cf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cf-pdf { font-weight: 700; color: #b23a48; font-size: 22px; }

/* ===== เฉพาะเวอร์ชัน HTML ===== */
/* หน้าพิมพ์: แถบเครื่องมือ + iframe เต็มจอ */
.print-shell { display: flex; flex-direction: column; height: 100vh; background: #e9ecf1; }
.toolbar-app { background: #1e2a44; color: #fff; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.toolbar-app a, .toolbar-app .tb-btn { font: inherit; color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: 6px; padding: 6px 12px; text-decoration: none; cursor: pointer; }
.toolbar-app a.on { background: rgba(255,255,255,.35); }
.toolbar-app .tb-primary { background: #2f6fed; font-weight: 600; }
.toolbar-app .tpl-switch { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-left: 8px; }
.toolbar-app .tpl-switch a { padding: 4px 9px; font-size: 13px; }
.toolbar-app .tb-hint { font-size: 12px; opacity: .7; width: 100%; }
.toolbar-app .tb-label { display: flex; align-items: center; gap: 4px; }
.toolbar-app input[type=number] { width: 64px; font: inherit; padding: 3px 6px; border-radius: 4px; border: 0; }
.ps-flash { max-width: 210mm; margin: 12px auto 0; background: #e7f6ec; color: #155c32; border: 1px solid #b7e2c5; border-radius: 6px; padding: 8px 12px; font-size: 13px; }
.ps-frame { flex: 1; width: 100%; border: 0; }