@font-face {
  font-family: 'Sarabun';
  src: url('/fonts/Sarabun-Regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Sarabun';
  src: url('/fonts/Sarabun-Bold.ttf') format('truetype');
  font-weight: 700;
}

body { font-family: 'Sarabun', system-ui, sans-serif; background: #f5f6f8; }
.table td, .table th { vertical-align: middle; }
.doc-icon { font-size: 1.6rem; color: #d63333; }
.min-w-0 { min-width: 0; }

#busyOverlay {
  position: fixed; inset: 0; background: rgba(255, 255, 255, .7); z-index: 3000;
  display: none; align-items: center; justify-content: center; font-size: 1.1rem;
}

/* ───── workspace (editor / designer / fill) ───── */
body.workspace { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
body.workspace main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ws-toolbar { min-width: 0; max-width: 100vw; background: #fff; border-bottom: 1px solid #dde1e6; padding: .4rem .75rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.ws-toolbar .sep { width: 1px; align-self: stretch; background: #dde1e6; margin: 0 .25rem; }
.ws-toolbar .btn.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
.ws-body { flex: 1; min-height: 0; display: flex; }
.ws-side { width: 170px; overflow-y: auto; background: #eceff3; border-right: 1px solid #dde1e6; padding: .5rem; }
.ws-props { width: 290px; overflow-y: auto; background: #fff; border-left: 1px solid #dde1e6; padding: .75rem; }
.ws-pages { flex: 1; overflow: auto; padding: 1rem; background: #8a929c; }

.page-wrap { position: relative; margin: 0 auto 1rem; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.page-wrap > canvas.pdf { display: block; }
.page-wrap .overlay { position: absolute; inset: 0; }
.page-wrap .canvas-container { position: absolute !important; left: 0; top: 0; }
.page-label { text-align: center; color: #fff; font-size: .8rem; margin: -0.6rem 0 .6rem; }

.thumb { position: relative; background: #fff; border: 2px solid transparent; border-radius: 4px; margin-bottom: .5rem; cursor: pointer; padding: 4px; }
.thumb.active { border-color: #0d6efd; }
.thumb canvas { width: 100%; display: block; }
.thumb .num { font-size: .75rem; text-align: center; }
.thumb .ops { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; margin-top: 2px; }
.thumb .ops button { padding: 0 4px; font-size: .75rem; line-height: 1.4; }
.thumb .badge-edit { position: absolute; top: 4px; right: 4px; }

/* designer */
.fld { position: absolute; border: 1.5px solid #3d7bfd; background: rgba(61, 123, 253, .14); font-size: 11px; color: #123;
       overflow: hidden; white-space: nowrap; cursor: move; user-select: none; line-height: 1.1; padding: 1px 2px; }
.fld.sel { border-color: #ff6a00; background: rgba(255, 106, 0, .18); z-index: 5; }
.fld.req::after { content: '*'; color: #d00; position: absolute; right: 2px; top: 0; }
.fld .h { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; background: #ff6a00; cursor: nwse-resize; display: none; }
.fld.sel .h { display: block; }
.fld.t-Radio { border-radius: 50%; }
.overlay.drawing { cursor: crosshair; }
.rubber { position: absolute; border: 1px dashed #ff6a00; background: rgba(255, 106, 0, .1); pointer-events: none; }

/* fill */
.fill-pages { background: #8a929c; padding: 1rem .5rem; }
.fin { position: absolute; border: 1px solid rgba(13, 110, 253, .55); background: rgba(232, 240, 255, .75); font-family: 'Sarabun', sans-serif;
       padding: 0 3px; margin: 0; border-radius: 2px; color: #0b1f5c; }
.fin:focus { outline: 2px solid #0d6efd; background: #fff; }
textarea.fin { resize: none; line-height: 1.3; padding-top: 2px; }
.fin.invalid { border-color: #dc3545; background: rgba(255, 220, 220, .85); }
input[type=checkbox].fin, input[type=radio].fin { padding: 0; accent-color: #0b1f5c; }
.fin-sig { display: flex; align-items: center; justify-content: center; cursor: pointer; color: #567; font-size: 12px; }
.fin-sig img { max-width: 100%; max-height: 100%; }
#sigPad { border: 1px dashed #999; background: #fff; touch-action: none; width: 100%; height: 200px; }

/* ช่องฟอร์มเดิมใน PDF (กรอกใน editor) */
.formlayer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.formlayer .fin-pdf { pointer-events: auto; background: #dfe7ff; border: 1px solid #9db2f5; color: #0b1f5c; }
.formlayer .fin-pdf:focus { background: #fff; outline: 2px solid #0d6efd; }
.formlayer .fin-pdf:disabled { background: #eceff4; }
.formlayer.passive .fin-pdf { pointer-events: none; opacity: .55; }
.formlayer.hidden-fields { display: none; }
body.hide-pdf-fields .formlayer { display: none; }

/* ค้นหาข้อความ */
.searchlayer { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.search-hit { position: absolute; background: rgba(255, 213, 0, .45); border-radius: 2px; mix-blend-mode: multiply; }
.search-hit.cur { background: rgba(255, 120, 0, .55); outline: 2px solid #ff6a00; }