/* =====================================================================
   HP Loan — ส่วนเสริมจาก mockup-base.css / mockup-app.css (หน้าตาเดียวกับ Prototype)
   ฟอร์มจริง ข้อความแจ้งเตือน การแบ่งหน้า หน้าเข้าระบบ และการพิมพ์
   ===================================================================== */

/* ---------- ฟอร์มจริง (mockup ใช้ div.inp แทน input) ---------- */
input.inp, select.inp, textarea.inp {
  width: 100%; font: inherit; font-size: 12px; color: #1e293b; outline: none;
  border: 1px solid #d7dee6; border-radius: 5px; background: #fff; padding: 0 9px; height: 29px;
}
input.inp:focus, select.inp:focus, textarea.inp:focus { border-color: #123c5e; box-shadow: 0 0 0 2px rgba(18,60,94,.12) }
input.inp[readonly], input.inp:disabled, select.inp:disabled, textarea.inp[readonly] { background: #f4f6f9; color: #475569 }
input.inp.num { text-align: right; font-variant-numeric: tabular-nums }
select.inp { padding-right: 24px; appearance: auto }
textarea.inp { height: 60px; padding: 6px 9px; line-height: 1.45; resize: vertical }
.fd.err input.inp, .fd.err select.inp, .fd.err textarea.inp { border-color: #c0335c }
.fd .fe { color: #c0335c; font-size: 10.5px; margin-top: 3px }
.fd .fh { color: #93a1b1; font-size: 10.5px; margin-top: 3px }
.fd.span2 { grid-column: span 2 } .fd.span3 { grid-column: span 3 } .fd.span4 { grid-column: span 4 }
.ck-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; height: 29px }
.ck-inline input { width: 15px; height: 15px }
button.bt, a.bt { cursor: pointer; font-family: inherit; text-decoration: none }
button.bt:disabled { opacity: .5; cursor: not-allowed }
.form-actions { display: flex; gap: 7px; justify-content: flex-end; margin-top: 12px }

/* ---------- ข้อความแจ้งผล ---------- */
.flash { border-radius: 8px; padding: 10px 14px; font-size: 12.5px; display: flex; gap: 8px; align-items: flex-start }
.flash.ok { background: #e0f2ec; color: #0b5f58; border: 1px solid #b7e0d3 }
.flash.err { background: #fbe6ec; color: #8f2442; border: 1px solid #f0c3cf }
.flash.warn { background: #fbf0dd; color: #7d5010; border: 1px solid #efd9ad }
.flash ul { margin: 4px 0 0; padding-left: 18px }

/* ---------- ตาราง / แบ่งหน้า / ค้นหา ---------- */
.pn.flat .tb { margin: 0 }
.tb tr.link { cursor: pointer } .tb tr.link:hover td { background: #f7fafc }
.tb td.actions { white-space: nowrap; text-align: right }
.tb .empty { text-align: center; color: #93a1b1; padding: 22px }
.pager { display: flex; justify-content: space-between; align-items: center; padding: 9px 13px; border-top: 1px solid #eef2f6; font-size: 11.5px; color: #7c8794 }
.pager nav { display: flex; gap: 4px }
.pager a, .pager span.cur { min-width: 26px; height: 24px; padding: 0 7px; border: 1px solid #d7dee6; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: #334155; font-size: 11px }
.pager span.cur { background: #123c5e; color: #fff; border-color: #123c5e }
.pager span.dis { opacity: .4 }
.search { display: flex; gap: 7px; align-items: flex-end; flex-wrap: wrap }
.search .fd { min-width: 150px }
.tbl-scroll { overflow-x: auto }

/* ---------- หน้าหลัก / หัวหน้า ---------- */
.pinfo .pn-tx span { white-space: normal }
.user-box { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #bacbda; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.12) }
.user-box b { color: #fff; font-weight: 600; display: block; font-size: 11.5px }
.user-box form { margin-left: auto }
.user-box button { all: unset; cursor: pointer; font-size: 10.5px; color: #fff; background: rgba(255,255,255,.12); border-radius: 5px; padding: 4px 8px }
.nav-copy { font-size: 9.5px; color: #7f98ad; padding: 0 14px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px }
.tile { background: #fff; border: 1px solid #e3e9ef; border-radius: 9px; padding: 12px 14px; color: #334155; display: block }
.tile:hover { border-color: #123c5e }
.tile b { display: block; color: #123c5e; font-size: 13px; margin-bottom: 3px }
.tile span { font-size: 11px; color: #7c8794 }
.dl2 { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; font-size: 12px }
.dl2 dt { color: #7c8794 } .dl2 dd { margin: 0; color: #0f172a; font-weight: 500 }

/* ---------- หน้าเข้าระบบ ---------- */
body.guest { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #123c5e }
.login { width: 360px; background: #fff; border-radius: 12px; padding: 26px 26px 22px; box-shadow: 0 12px 40px rgba(0,0,0,.25) }
.login h1 { margin: 0 0 4px; font-size: 20px; color: #123c5e; font-family: 'IBM Plex Sans Thai','Sarabun',sans-serif }
.login p { margin: 0 0 16px; font-size: 12px; color: #7c8794 }
.login .fd { margin-bottom: 11px }
.login-copy { margin: 14px 16px 0; font-size: 11px; color: #9fb4c6; text-align: center }
.login .bt { width: 100%; justify-content: center; height: 34px; font-size: 13px }

/* ---------- พิมพ์ ---------- */
@media print {
  .nav, .flow, .burger, .tp-t, .no-print, .pager { display: none !important }
  .main { margin-left: 0 !important }
  body.app { background: #fff }
  .pn { border-color: #ccc; break-inside: avoid }
}

/* ---------- สัญญา / ตารางผ่อน ---------- */
.tb tfoot th { background: #f3f6f9; font-weight: 700; padding: 7px 9px; border-top: 2px solid #d9e2ea }
.tb.sm td, .tb.sm th { padding: 5px 8px; font-size: 12px }
.tb tr.hl td { background: #fff8e6 }
.inline { display: inline }
.checklist { margin: 0; padding-left: 18px } .checklist li { margin: 3px 0 }
.big-num { font-size: 22px; font-weight: 700; color: #123c5e }
@media print {
  .nav, .tp, .pinfo, .no-print, .flash { display: none !important }
  .main { margin: 0 !important; padding: 0 !important }
}

/* ---------- Dashboard: กราฟแท่ง CSS ---------- */
.hbars { display: flex; flex-direction: column; gap: 6px }
.hb { display: grid; grid-template-columns: 140px 1fr 120px; gap: 8px; align-items: center; font-size: 12px }
.hb-l { color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hb-t { background: #eef2f6; border-radius: 4px; height: 14px; overflow: hidden }
.hb-t i, .vb i { display: block; height: 100%; border-radius: 4px; background: #2563eb }
.hb-v { text-align: right; font-variant-numeric: tabular-nums }
.vbars { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding-top: 8px; overflow-x: auto }
.vb { flex: 1; min-width: 34px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; font-size: 10.5px }
.vb i { width: 70%; height: auto }
.vb-v { color: #475569; margin-bottom: 2px } .vb-l { color: #64748b; margin-top: 3px; white-space: nowrap }
i.green { background: #16a34a !important } i.amber { background: #d97706 !important } i.red { background: #dc2626 !important } i.gray { background: #94a3b8 !important }
.funnel .hb-t i { background: #7c3aed }