[hidden] { display: none !important; }
:root {
  --bg: #f4f5f7; --panel: #ffffff; --ink: #1d2433; --muted: #667085; --line: #e3e6eb;
  --brand: #1f3a68; --brand-2: #2c5aa0; --accent: #b42318; --ok: #067647; --warn: #b54708;
  --chip: #eef2f8; --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: 'Sarabun', 'Leelawadee UI', 'Tahoma', sans-serif; font-size: 16px; line-height: 1.5; }
a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 19px; margin: 0 0 12px; }
h3 { font-size: 16px; margin: 16px 0 8px; color: var(--brand); }
.muted { color: var(--muted); }
.pad { padding: 24px; }

.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px;
  padding: 10px 24px; background: var(--brand); color: #fff; }
.topbar a { color: #dfe7f5; }
.brand { font-weight: 700; font-size: 18px; color: #fff !important; }
.brand span { font-weight: 400; opacity: .75; font-size: 14px; margin-left: 4px; }
.topbar nav { display: flex; gap: 18px; flex: 1; }
.topbar nav a.active { color: #fff; font-weight: 600; border-bottom: 2px solid #fff; }
.me { font-size: 14px; }
.me .link { color: #dfe7f5; }

main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 80px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 16px; }
.grid .wide { grid-column: 1 / -1; }

label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 3px; font-weight: 500; }
input, select, textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid #cfd4dc;
  border-radius: 8px; background: #fff; color: var(--ink); }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid #b3c7ea; border-color: var(--brand-2); }

button, .btn { font: inherit; font-weight: 500; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--brand-2);
  background: var(--brand-2); color: #fff; cursor: pointer; white-space: nowrap; display: inline-block; }
button:hover { filter: brightness(1.08); }
button.secondary { background: #fff; color: var(--brand-2); }
button.danger { background: #fff; color: var(--accent); border-color: #f1b5af; }
button.small { padding: 4px 10px; font-size: 14px; }
button.link { background: none; border: none; color: var(--brand-2); padding: 0; }
button:disabled { opacity: .5; cursor: default; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 13px; color: var(--muted); font-weight: 600; background: #fafbfc; }
tr.click { cursor: pointer; }
tr.click:hover td { background: #f6f8fc; }

.chip { display: inline-block; padding: 1px 10px; border-radius: 99px; font-size: 13px; background: var(--chip); color: var(--brand); }
.chip.red { background: #fef3f2; color: var(--accent); }
.chip.green { background: #ecfdf3; color: var(--ok); }
.chip.amber { background: #fffaeb; color: var(--warn); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 16px 0; overflow-x: auto; }
.tabs a { padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.active { color: var(--brand); border-color: var(--brand); font-weight: 600; text-decoration: none; }

.alert { padding: 10px 14px; border-radius: 8px; background: #fffaeb; border: 1px solid #fedf89; margin-bottom: 8px; }
.alert.red { background: #fef3f2; border-color: #fecdca; }
.empty { padding: 24px; text-align: center; color: var(--muted); }

.modal-back { position: fixed; inset: 0; background: rgba(16,24,40,.45); display: flex; align-items: flex-start;
  justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 50; }
.modal { background: #fff; border-radius: 12px; width: min(820px, 100%); padding: 22px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #1d2433; color: #fff;
  padding: 10px 18px; border-radius: 8px; z-index: 99; max-width: 90vw; }
.toast.err { background: var(--accent); }

.login { max-width: 380px; margin: 10vh auto; }
.login h1 { text-align: center; margin-bottom: 18px; }
.check { display: flex; gap: 8px; align-items: center; padding: 6px 0; }
.check input { width: auto; }
.hint { font-size: 13px; color: var(--muted); margin-top: 4px; }

@media (max-width: 700px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  .topbar nav { order: 3; width: 100%; }
  main { padding: 16px 12px 60px; }
  th:nth-child(n+4), td:nth-child(n+4) { display: none; }
}
@media print { .topbar, button { display: none !important; } }

/* นำเข้าเอกสาร */
table.imp td, table.imp th { padding: 6px 8px; }
table.imp input, table.imp textarea { font-size: 15px; }
.unsure, tr.unsure td { background: #fffbe6; }
.unsure input, .unsure textarea { border-color: #f5b400; background: #fffdf2; }
.unsure-tag { display: inline-block; font-size: 12px; color: #8a5a00; background: #fff1c2; border-radius: 4px; padding: 0 6px; }
details summary { margin: 4px 0 8px; }

/* แท็บธนาคาร */
table.grid-edit th { white-space: nowrap; background: #1f3a68; color: #fff; font-size: 13px; }
table.grid-edit td { padding: 4px 4px; border-bottom: 1px solid var(--line); }
table.grid-edit input, table.grid-edit select { padding: 6px 8px; font-size: 15px; min-width: 120px; }
table.grid-edit input.num { text-align: right; min-width: 0; }
table.grid-edit tr.saved td { background: #ecfdf3; transition: background .2s; }
table.grid-edit tr.tx-out select[data-k="txn_type"] { background: #fef3f2; border-color: #fecdca; color: var(--accent); }
table.grid-edit input.bad { border-color: var(--accent); background: #fef3f2; }
.tx-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.tx-scroll table.grid-edit { min-width: 1700px; }
.tx-sum { margin-top: 10px; text-align: right; }

/* ปุ่มด้านหลังชื่อผู้ต้องหา */
.sbtns{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.sbtns button{white-space:nowrap}
button.done{background:#dcfce7;color:#166534;border:1px solid #86efac}

/* ข้อมูลเกี่ยวข้องคดี */
.sec-chips{display:flex;flex-wrap:wrap;gap:8px}
.sec-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;cursor:pointer;margin:0;font-weight:normal;background:#fff}
.sec-chip input{width:auto;margin:0}
.sec-chip.on{background:#eff6ff;border-color:#93c5fd;color:#1e3a8a}
.mono{font-family:ui-monospace,Consolas,monospace;word-break:break-all;font-size:13px}

.linkbtn{background:none;border:0;padding:0;color:inherit;text-align:left;cursor:pointer;font:inherit;white-space:normal}
.linkbtn:hover{text-decoration:underline;color:var(--accent,#1d4ed8)}
.reply-cell{max-width:260px}

.acc-act{min-width:130px;white-space:nowrap}
.acc-letter{font-size:13px;margin-top:4px;line-height:1.6}

/* แท็บธนาคาร: แถวแสดงผล / แถวแก้ไข */
.grid-edit.acc td{vertical-align:top}
tr.acc-view td, tr.tx-view td{padding:8px 8px;border-bottom:1px solid var(--line)}
tr.acc-view.side-victim{background:#f0f7ff}
tr.acc-editing, tr.tx-editing{background:#fffbeb}
.mono-num{font-family:ui-monospace,Consolas,monospace;font-size:13px;white-space:nowrap}
td.num{text-align:right;white-space:nowrap}
.row-btns{white-space:nowrap;text-align:right}
button.icon{padding:3px 8px}
tr.tx-back td{color:#166534}
.chip.blue{background:#dbeafe;color:#1e40af}
.grid-edit.acc .chip{white-space:nowrap}
.grid-edit.acc tr.acc-view td:nth-child(2){min-width:110px}
.grid-edit.acc tr.acc-view td:nth-child(4){min-width:170px}
.grid-edit.acc td.acc-act{min-width:130px}
.tx-scroll{overflow-x:auto}

/* หมายธนาคาร: ปุ่มสีเขียวเมื่อส่งแล้ว + แถบรายละเอียดใต้แถว */
button.sent{background:#16a34a;border-color:#16a34a;color:#fff}
button.sent:hover{background:#15803d}
tr.acc-view{cursor:pointer}
tr.acc-view:hover td{background:#f1f5f9}
tr.acc-open td{background:#eff6ff !important}
tr.acc-detail td{background:#eff6ff;padding:0 10px 10px;border-top:none}
.acc-detail-bar{display:flex;flex-wrap:wrap;gap:12px;padding:10px 12px;background:#fff;border:1px solid #bfdbfe;border-radius:8px;animation:accIn .15s ease-out}
.acc-detail-bar .dsec{flex:1 1 300px;line-height:1.9}
.acc-detail-bar .dsec+.dsec{border-left:1px dashed #cbd5e1;padding-left:12px}
.acc-detail-bar .dhead{font-weight:700;color:#475569;margin-bottom:2px}
.acc-detail-bar .dhead.ok{color:#15803d}
.acc-detail-bar .dk{color:#64748b;font-size:13px;margin-left:8px}
.acc-detail-bar .dk:first-child{margin-left:0}
@keyframes accIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1}}
@media (max-width:700px){.acc-detail-bar .dsec+.dsec{border-left:none;padding-left:0;border-top:1px dashed #cbd5e1;padding-top:8px}}

/* ส่งสำนวนให้อัยการ */
.subpanel{border:1px solid #bbf7d0;background:#f0fdf4;border-radius:10px;padding:10px 14px 4px}
.subpanel .subhead{font-weight:700;color:#15803d;margin-bottom:6px}
.sent-line{margin-top:4px;color:#15803d;font-size:14px}

/* เพิ่มบุคคลจากทะเบียนราษฎร์ */
.dopa-drop{background:#f0f9ff;border:1px dashed #7dd3fc;padding:10px 14px}
input.dopa-filled{background:#f0fdf4;border-color:#4ade80}
input.dopa-filled.unsure{background:#fefce8;border-color:#facc15}
.alert.green{background:#f0fdf4;border-color:#86efac;color:#166534}

/* หน้าข้อมูลคดี (แสดงผลอย่างเดียว) */
.case-view h3{margin:18px 0 6px;font-size:15px;color:var(--brand-2,#1e3a8a);border-bottom:1px solid #e2e8f0;padding-bottom:4px}
.kvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 20px}
.kv .k{font-size:12.5px;color:#64748b}
.kv .v{font-size:15px;line-height:1.6;word-break:break-word}
.kv.wide{grid-column:1/-1}
.kv .pre{white-space:pre-wrap}
.subpanel.blue{border-color:#bfdbfe;background:#f8fbff}
.subpanel.blue .subhead{color:#1e40af}

/* ผู้ต้องหานิติบุคคล + กรรมการ (ย่อหน้า) */
tr.juristic td{background:#fafaf9}
tr.sub-party td.indent{padding-left:34px;border-left:3px solid #bbf7d0}
tr.sub-party td{background:#fcfffd}

/* แท็บหลัก (บรรทัดบน) เด่นกว่าแถบปุ่มย่อย (บรรทัดล่าง) */
.tabs { border-bottom: 2px solid var(--line); margin: 18px 0 14px; gap: 2px; }
.tabs a { font-size: 17px; font-weight: 600; color: #475569; padding: 11px 18px; border-bottom-width: 3px; margin-bottom: -2px; border-radius: 8px 8px 0 0; }
.tabs a:hover { background: #f1f5f9; color: var(--brand); text-decoration: none; }
.tabs a.active { color: var(--brand); border-color: var(--brand); background: #eef4ff; font-weight: 700; }
.subbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; margin-bottom: 14px; background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; }
.subbar-label { font-size: 13px; color: var(--muted); margin-right: 4px; }
.subbar button.small { font-size: 14px; }

/* ตรวจแก้คำให้การ */
#qa-list { max-height: 58vh; overflow-y: auto; margin: 8px 0; padding-right: 4px; }
.qa-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.qa-no { font-weight: 700; color: var(--brand); padding-top: 22px; text-align: center; }
.qa-body label { font-size: 13px; color: var(--muted); margin: 2px 0; display: block; }
.qa-body textarea { width: 100%; }
.qa-ctl { display: flex; flex-direction: column; gap: 4px; padding-top: 20px; }

/* บันทึกขอสนับสนุนสืบ: เลือกหน่วย */
.sup-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.sup-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 16px; background: #fff; color: var(--text, #0f172a); border: 1.5px solid var(--line); border-radius: 12px; }
.sup-card b { font-size: 17px; color: var(--brand); }
.sup-card span { font-size: 14px; color: var(--muted); font-weight: 400; }
.sup-card:hover { border-color: var(--brand); background: #f5f9ff; }
@media (max-width: 640px) { .sup-pick { grid-template-columns: 1fr; } }

/* เปิดดูเอกสาร */
.modal.modal-preview { width: min(980px, 96vw); max-width: none; height: 92vh; display: flex; flex-direction: column; padding: 0; }
.pv-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #f8fafc; border-radius: 12px 12px 0 0; }
.pv-tabs { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.pv-act { display: flex; gap: 6px; }
.pv-body { flex: 1; overflow: auto; background: #e5e7eb; }
.pv-body .docx-wrapper { background: #e5e7eb; padding: 20px 0; }
.pv-body .docx-wrapper > section.docx { margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.18); overflow: visible; }

.kbd-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; font-size: 16px; }
kbd { display: inline-block; padding: 3px 9px; border: 1px solid #cbd5e1; border-bottom-width: 3px; border-radius: 6px; background: #f8fafc; font-family: inherit; font-weight: 600; }
#fp-path { width: 100%; font-family: monospace; font-size: 13px; }

/* บันทึกพนักงานสอบสวน: หน้าตรวจทาน */
.modal.wide { width: min(1100px, 96vw); }
.ol-sum { display: flex; gap: 8px; margin-bottom: 10px; }
.ol-h { font-weight: 600; margin: 6px 0; }
.ol-pend { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 12px; }
.ol-prow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px dashed #fde68a; }
.ol-prow:first-of-type { border-top: 0; }
.ol-prow input[type=date] { width: 160px; }
.ol-tbl { width: 100%; border-collapse: collapse; }
.ol-tbl td { vertical-align: top; padding: 6px; border-top: 1px solid #eef0f4; }
.ol-tbl textarea { width: 100%; min-height: 64px; font-size: 14px; }
.ol-tbl input[type=date] { width: 140px; }
.ol-tbl tr.off td { opacity: .45; }
.ol-tbl .ol-d { font-size: 13px; margin-top: 3px; }
.small-t { font-size: 12px; }

/* คำร้องขอออกหมายจับ / รับทราบข้อกล่าวหา / ผลการส่งหมาย */
.wr-list { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.wr-p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.wr-p.off { opacity: .6; }
.ch-pick { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .ch-pick { grid-template-columns: 1fr; } }
.ch-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 6px; }
.qa-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.qa-item label { font-size: 13px; color: var(--muted); margin: 6px 0 2px; display: block; }
.qa-item textarea { width: 100%; }
.qa-head { display: flex; justify-content: space-between; align-items: center; }
.qa-tools { display: flex; gap: 10px; }
.danger-t { color: #b91c1c !important; }
.serve-box { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; }
.sup-pick .sup-card { white-space: normal; min-width: 0; overflow-wrap: anywhere; }

.ci-tbl input:not([type=checkbox]) { width: 100%; }

/* ฝากขัง */
.det-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -4px 0 10px; color: var(--muted, #555); }
.det-tbl { width: 100%; }
.det-tbl select { width: auto; min-width: 150px; }
.det-to { padding: 8px 0; font-weight: 600; }
.ck-list { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 10px; }
.ck-list .ck, label.ck { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; margin: 0; }
.ck input { width: auto; margin: 0; }

/* รูปผู้ต้องหา */
.ph-box { display: flex; gap: 16px; align-items: flex-start; margin: 6px 0 12px; }
.ph-img img, .ph-none { width: 120px; height: 150px; object-fit: cover; border: 1px solid var(--line, #ddd); border-radius: 6px; background: #f3f4f6; }
.ph-none { display: flex; align-items: center; justify-content: center; color: #888; font-size: 13px; }
.ph-thumb { width: 34px; height: 42px; object-fit: cover; border-radius: 4px; float: left; margin: 2px 10px 0 0; border: 1px solid var(--line, #ddd); }

/* งานวันนี้ */
.td h2 { font-size: 20px; }
.td-sec { margin-top: 12px; }
.td-sec h3 { font-size: 15px; margin: 0 0 4px; }
.td-sec ul { margin: 0; padding-left: 18px; }
.td-sec li { margin: 3px 0; line-height: 1.55; }
.td-sec details summary { cursor: pointer; color: var(--brand); font-size: 14px; margin: 2px 0 0 18px; }

/* อัยการ */
.pros-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.pros-card { border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pros-card .muted { font-size: 14px; }
.pros-rule { background: #f8fafc; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; line-height: 1.6; }
.pros-items { list-style: none; padding: 0; margin: 10px 0; }
.pros-items li { display: flex; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line, #eee); }
.pros-items li.done > div { color: #6b7280; }
.pros-items li.done > div > b { text-decoration: line-through; }
.pros-items details summary { cursor: pointer; color: var(--brand); font-size: 13px; margin-top: 4px; }
.pros-text { white-space: pre-wrap; background: #f8fafc; padding: 8px; border-radius: 6px; margin: 6px 0; font-size: 14px; }
.pros-items input[data-note] { width: 100%; }
.pros-prog { display: flex; align-items: center; gap: 8px; min-width: 160px; }
.pros-prog .bar { flex: 1; height: 8px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.pros-prog .bar i { display: block; height: 100%; background: var(--ok, #16a34a); }
a.chip { text-decoration: none; }

/* ---------- รายการตามคำสั่งอัยการ (แถบสีส้ม) ---------- */
tr.pros-mark > td { background: #fff4e6; }
tr.pros-mark > td:first-child { box-shadow: inset 4px 0 0 #f08c00; }
tr.pros-mark.pros-done > td { background: #fffaf3; }
tr.pros-mark.pros-done > td:first-child { box-shadow: inset 4px 0 0 #fcc78a; }
.chip.pros-chip { background: #ffe8cc; color: #a34a00; border: 1px solid #ffc078; text-decoration: none; white-space: nowrap; }
a.chip.pros-chip:hover { background: #ffd8a8; }
.pros-linked { font-size: .88em; color: #a34a00; margin-top: 2px; }
.pros-link-btn { background: #e8590c !important; border-color: #e8590c !important; color: #fff !important; }
.pros-link-btn:hover { background: #d9480f !important; }
table.pros-link input:not([type=checkbox]) { width: 100%; min-width: 180px; }
table.pros-link td, table.pros-link th { vertical-align: middle; }
.wit-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: #f8fafc; margin-top: 4px; }
.wit-box .grid { margin-top: 6px; }
.pros-pick { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.pros-pick .ck-row { display: flex; gap: 8px; align-items: flex-start; font-weight: normal; margin: 0; cursor: pointer; }
.pros-pick .ck-row.linked { background: #fff4e6; border-radius: 6px; padding: 2px 4px; }
/* ---------- รายงานสืบสวน ---------- */
.ir-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.ir-ph { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 110px; font-weight: normal; margin: 0; cursor: pointer; text-align: center; font-size: .9em; }
.ir-ph img { width: 72px; height: 96px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.ir-noph { width: 72px; height: 96px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); font-size: .85em; }
.ir-sigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ir-sig { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #f8fafc; }
.mo-body p { margin: 0 0 8px; text-indent: 2em; line-height: 1.7; }

/* ---------- เมนู: ตัวเลขงานด่วน */
.nav-n { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 2px; border-radius: 99px; background: #f04438; color: #fff; font-size: 12px; line-height: 18px; text-align: center; font-weight: 600; }
.xs-h { padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fafbfc; }
.war-file { margin-top: 14px; padding: 12px; border: 1px dashed #c7d2e3; border-radius: 8px; background: #f8fafd; }

/* ---------- ปฏิทิน (หน้างานวันนี้) */
.cal-head { margin-bottom: 8px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; font-size: 12px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cal-dow { padding: 6px; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); background: #fafbfc; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-dow.we { color: var(--accent); }
.cal-day { min-height: 92px; padding: 4px 5px 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; overflow: hidden; }
.cal-day:hover { background: #f5f8fd; }
.cal-day.we { background: #fcfcfd; }
.cal-day.other { background: #f7f8fa; }
.cal-day.other .cal-num { color: #b0b6c1; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--brand-2); background: #f2f6fc; }
.cal-day.today .cal-num { color: var(--brand-2); font-weight: 700; }
.cal-num { font-size: 14px; margin-bottom: 3px; display: flex; gap: 4px; align-items: baseline; flex-wrap: wrap; }
.cal-hol { color: #c4320a; font-size: 11px; line-height: 1.2; }
.cal-ev { display: block; font-size: 12px; line-height: 1.35; padding: 1px 5px; margin-bottom: 2px; border-radius: 4px; border-left: 3px solid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-legend .cal-ev, .cal-list .cal-ev { display: inline-block; margin: 0; }
.cal-ev.done { text-decoration: line-through; opacity: .55; }
.k-own  { background: #ecfdf3; border-color: #12b76a; color: #05603a; }
.k-sum  { background: #eff4ff; border-color: #2c5aa0; color: #1f3a68; }
.k-det  { background: #fef3f2; border-color: #f04438; color: #b42318; }
.k-pros { background: #fff4ed; border-color: #f97316; color: #b93815; }
.k-pres { background: #fffaeb; border-color: #f79009; color: #b54708; }
.cal-more { font-size: 12px; color: var(--muted); padding-left: 4px; }
.cal-list { list-style: none; padding: 0; margin: 8px 0; }
.cal-list li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.cal-done { text-decoration: line-through; color: var(--muted); }
.cal-acts { float: right; font-size: 13px; }
@media (max-width: 700px) {
  .cal-day { min-height: 56px; padding: 2px; }
  .cal-ev { font-size: 0; height: 6px; padding: 0; border-left-width: 0; margin-bottom: 2px; }
  .cal-hol { display: none; }
  .cal-dow { font-size: 11px; padding: 4px 0; }
  .cal-legend .cal-ev, .cal-list .cal-ev { font-size: 12px; height: auto; padding: 1px 5px; border-left-width: 3px; }
}
#wlist .chip { white-space: nowrap; }

/* ---------- รายงานการสอบสวน */
.is-ai { border: 1px solid #c7d7f2; background: #f6f9ff; border-radius: 10px; padding: 12px 16px; margin: 6px 0 14px; }
.is-ai h4 { margin: 12px 0 6px; font-size: 15px; color: var(--brand); }
.is-issues { margin: 0; padding-left: 18px; } .is-issues li { margin: 4px 0; }
.is-prop { border-top: 1px dashed #c7d7f2; padding: 8px 0; }
.is-text { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; margin-top: 6px; max-height: 260px; overflow: auto; }
.is-text p { margin: 4px 0; text-indent: 2.5em; }
.is-sec textarea { font-size: 15px; line-height: 1.55; }
.is-sigs { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.is-actions { position: sticky; bottom: -20px; background: #fff; padding: 12px 0 4px; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* ---------- ผู้กล่าวหา: กรณีมอบอำนาจ */
.proxy-box { background: #fffbeb; border-color: #fde68a; }
.proxy-box .subhead { font-weight: 700; color: #b45309; margin: 4px 0 6px; }
table.wb td, table.wb th { font-size: 14px; padding: 6px 8px; }
table.wb tr.wb-bad td { background: #fef3f2; }
.st-sug { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: -4px; }
.st-chip { padding: 3px 10px; border-radius: 99px; font-size: 13px; background: #fff; color: var(--brand-2); border: 1px solid #b9c8e6; }
.st-chip.on { background: var(--brand-2); color: #fff; border-color: var(--brand-2); }
/* ปุ่มหนังสือทวงถาม (ขึ้นเมื่อเกินกำหนด) */
.fu-btn { background:#c92a2a!important; border-color:#c92a2a!important; color:#fff!important; white-space:nowrap; }
.fu-btn:hover { background:#a51d1d!important; }
/* ปุ่มลบ */
.del-btn { color:#c92a2a!important; border-color:#f1aeb5!important; }
.del-btn:hover { background:#fff5f5!important; }
.btn-danger, .btn-danger:hover { background:#c92a2a!important; border-color:#c92a2a!important; color:#fff!important; }
.btn-danger:disabled { opacity:.45; cursor:not-allowed; }
.mail-btns { display:inline-flex; gap:4px; margin-right:6px; }
.mail-btns button { padding:3px 8px; }
/* ช่องวันที่ พ.ศ. */
.thdate-wrap { position:relative; display:inline-block; width:100%; vertical-align:middle; }
.thdate-wrap input.thdate { width:100%; padding-right:30px; }
.thdate-wrap input.thdate.bad { border-color:#e03131; background:#fff5f5; }
.thdate-btn { position:absolute; right:3px; top:50%; transform:translateY(-50%); border:0!important; background:none!important; padding:2px 4px!important; cursor:pointer; font-size:14px; line-height:1; box-shadow:none!important; color:inherit; min-height:0; }
.thdate-pick { position:absolute; right:0; bottom:0; width:1px; height:1px; opacity:0; pointer-events:none; border:0; padding:0; }
/* เปลี่ยนฐานะในคดี */
.role-switch { display:flex; flex-wrap:wrap; gap:6px; align-items:center; background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px; padding:8px 12px; margin:0 0 12px; }
/* บุคคลในคดี: แยกหัวกลุ่ม (ปุ่มของทั้งกลุ่ม) ออกจากแถวบุคคล + เส้นคั่น/แถบสีสลับแต่ละคน */
.people-panel { overflow:hidden; border-left:5px solid #94a3b8; }
.people-panel[data-group="suspect"] { border-left-color:#e03131; }
.people-panel[data-group="complainant"], .people-panel[data-group="victim"] { border-left-color:#1c7ed6; }
.people-panel[data-group="witness"], .people-panel[data-group="bank_witness"] { border-left-color:#2f9e44; }
.people-panel .pp-head { background:#f1f5f9; border-bottom:2px solid #dbe2ea; padding-bottom:10px; }
.people-panel .pp-head h3 { font-size:1.05em; }
.people-panel > table > tbody > tr > td { border-top:1px solid #e5e9f0; padding-top:12px; padding-bottom:12px; vertical-align:top; }
.people-panel > table > tbody > tr:first-child > td { border-top:0; }
.people-panel > table > tbody > tr:nth-child(even):not(.sub-party) { background:#fafcff; }
.people-panel > table > tbody > tr:hover { background:#f5f9ff; }
.ph-thumb { width:44px; height:55px; object-fit:cover; border-radius:5px; float:left; margin:2px 12px 4px 0; border:1px solid #cfd6df; box-shadow:0 1px 2px rgba(0,0,0,.08); background:#e9edf2; }
.ph-thumb.ph-none { opacity:.85; border-style:dashed; }
.ph-row { display:flex; gap:12px; align-items:flex-start; }
.ph-row .ph-thumb { float:none; margin:0; flex:none; }
.ph-row .ph-gap { width:44px; flex:none; }
/* สรุปท้ายตารางธุรกรรม */
.tx-sum-grid { display:grid; grid-template-columns:repeat(4, minmax(150px, 1fr)); gap:10px; margin-top:10px; }
.tx-sum-grid > div { background:#f8fafc; border:1px solid #e5e9f0; border-radius:8px; padding:8px 12px; display:flex; flex-direction:column; }
.tx-sum-grid b { font-size:1.15em; }
.tx-sum-out { border-left:4px solid #e03131!important; } .tx-sum-back { border-left:4px solid #2f9e44!important; } .tx-sum-dmg { border-left:4px solid #1c3d6e!important; background:#eef3fb!important; }
/* ตรวจสอบธุรกรรม */
table.txc, table.txc-sum { width:100%; margin:8px 0; font-size:.93em; }
table.txc td, table.txc-sum td { vertical-align:top; border-top:1px solid #eef1f5; }
tr.txc-bad td { background:#fff5f5; }
table.txc code { background:#f1f3f5; padding:0 4px; border-radius:3px; }
/* เช็คลิสต์สำนวน */
.kvgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
table.ck-table { width: 100%; border-collapse: collapse; }
table.ck-table th, table.ck-table td { padding: 6px 10px; border-top: 1px solid var(--line, #e5e7eb); vertical-align: top; text-align: left; }
table.ck-table input[data-f="note"] { width: 100%; }
table.ck-table tr.ck-done td:nth-child(2) b { color: var(--ok); }
@media (max-width: 760px) { table.ck-table thead { display: none; } table.ck-table td { display: block; border: 0; } table.ck-table tr { display: block; border-top: 1px solid #e5e7eb; } }
/* คดีที่กำลังทำ (ปักหมุด) */
.pin-btn { background: none; border: 0; padding: 0 4px; font-size: 20px; line-height: 1; color: #c2c8d0; cursor: pointer; box-shadow: none; }
.pin-btn.on { color: #f5b301; }
.pin-btn:hover { color: #f5b301; background: none; }
tr.pinned td { background: #fffbeb; }
.pin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pin-card { background: #fff; border: 1px solid var(--line, #e5e7eb); border-left: 4px solid #f5b301; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.pin-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.pin-links { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 14px; }
.doc-filters { display: grid; grid-template-columns: minmax(220px, 2fr) 1fr 1fr 1fr 160px 160px; gap: 8px; align-items: center; }
.doc-filters .doc-sheet { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 15px; }
.doc-filters .doc-sheet input { width: auto; margin: 0; }
@media (max-width: 900px) { .doc-filters { grid-template-columns: 1fr 1fr; } .doc-filters #dq { grid-column: 1 / -1; } }
/* ฐานข้อมูลอ้างอิง (CASE ID / CRIME / วงแดง) */
.ref-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ref-chip { display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: 14px; border: 1px solid transparent; }
.ref-chip.blue { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.ref-chip.green { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.ref-chip.red { background: #fef3f2; color: #b42318; border-color: #fecdca; font-weight: 600; }
.ref-chip.off { background: #f2f4f7; color: #98a2b3; }
.ok-tick { color: #067647; font-weight: 700; }
.red-t { color: #b42318; }
table.rp-table td, table.rp-table th { white-space: nowrap; }
table.rp-table td:nth-child(4) { white-space: normal; min-width: 160px; }
/* ช่องกรอกที่มีส่วนหน้าคงที่ (เช่น ตช 0039.25/) */
.pre-input { display: flex; align-items: stretch; }
.pre-input > span { display: flex; align-items: center; padding: 0 10px; background: #eef2f7; border: 1px solid #cfd8e3; border-right: 0; border-radius: 8px 0 0 8px; color: #445; white-space: nowrap; }
.pre-input > input { flex: 1; min-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* ตัวกรองหน้าแรก */
.cfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.cfilter .seg { display: inline-flex; border: 1px solid #cfd8e3; border-radius: 10px; overflow: hidden; background: #fff; }
.cfilter .seg button { background: #fff; color: var(--brand-2, #1e3a8a); border: 0; border-right: 1px solid #e3e8ef; border-radius: 0; padding: 7px 14px; font-weight: 500; }
.cfilter .seg button:last-child { border-right: 0; }
.cfilter .seg button.on { background: var(--brand-2, #1e3a8a); color: #fff; }
.cfilter .seg .n { display: inline-block; min-width: 22px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: #eef2f7; color: #445; font-size: 12px; }
.cfilter .seg button.on .n { background: rgba(255,255,255,.25); color: #fff; }
.cfilter label.ck { margin: 0; }
/* ตามเส้นเงิน */
.tr-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 10px; }
.tr-opts .seg { display: inline-flex; border: 1px solid #cfd8e3; border-radius: 10px; overflow: hidden; background: #fff; }
.tr-opts .seg button { background: #fff; color: var(--brand-2, #1e3a8a); border: 0; border-right: 1px solid #e3e8ef; border-radius: 0; padding: 7px 14px; }
.tr-opts .seg button:last-child { border-right: 0; }
.tr-opts .seg button.on { background: var(--brand-2, #1e3a8a); color: #fff; }
.tr-opts label { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.tr-opts input[type=number] { padding: 4px 6px; }
.tr-chart { overflow: auto; border: 1px solid #e5e7eb; border-radius: 8px; margin: 8px 0; max-height: 75vh; background: #fff; }
.tr-chart svg { display: block; }
.tr-node { cursor: pointer; }
.tr-node:hover circle:first-child { stroke-width: 4; }
.tr-acc > summary { cursor: pointer; padding: 4px 0; }
.tr-acc h3 { margin: 14px 0 6px; font-size: 16px; }
.tr-scroll { overflow: auto; max-height: 460px; border: 1px solid #eef0f3; border-radius: 6px; }
.tr-tbl { font-size: 14px; }
.tr-tbl th { position: sticky; top: 0; background: #f8fafc; z-index: 1; }
.tr-al { padding: 2px 0; }
.tr-big { background: #fffbeb; }
.tr-ips .chip { margin: 2px 2px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
/* ชั้นบัญชีในเส้นเงิน (แท็บธนาคาร) */
.chip.lay-chip { font-weight: 600; }
.chip.lay-1 { background: #fee2e2; color: #b91c1c; }
.chip.lay-2 { background: #ffedd5; color: #c2410c; }
.chip.lay-3 { background: #ede9fe; color: #6d28d9; }
.chip.lay-4 { background: #e2e8f0; color: #334155; }
table.acc tr.acc-sub td.acc-ind { padding-left: calc(12px + var(--d, 0) * 26px); }
table.acc tr.acc-sub.lay-2 td.acc-ind { box-shadow: inset 3px 0 0 #fdba74; }
table.acc tr.acc-sub.lay-3 td.acc-ind { box-shadow: inset 3px 0 0 #c4b5fd; }
table.acc tr.acc-sub.lay-4 td.acc-ind { box-shadow: inset 3px 0 0 #cbd5e1; }
table.acc tr.acc-sub td.acc-ind b::before { content: '└ '; color: #94a3b8; font-weight: 400; }
table.acc tr.acc-sub { background: #fcfcfd; }
table.acc td.acc-ind { white-space: nowrap; }
/* หัวกลุ่มบัญชี (ลำดับรันแยกกลุ่ม) */
table.acc tr.acc-grp td { background: #f1f5f9; color: #1e3a8a; font-weight: 700; font-size: 14px; padding: 6px 12px; border-top: 2px solid #cbd5e1; }
/* ตรวจสอบรายการ: หมวดอัยการสั่งสอบเพิ่ม (แถบสี) */
.ck-sec.ck-pord { border-left: 6px solid #7c3aed; background: #faf5ff; }
.ck-sec.ck-pord h3 { color: #5b21b6; }
.ck-sec.ck-bankwit { border-left: 6px solid #0ea5e9; }
.ck-sec.ck-suspect { border-left: 6px solid #dc2626; }
.ck-sec select[data-f="status"] { width: 100%; }
/* เบิกค่าสำนวน */
.fee-rule { background: #f0f9ff; border-left: 5px solid #0284c7; padding: 10px 14px; font-size: 14.5px; }
table.fee-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.fee-table th, table.fee-table td { padding: 7px 10px; border-top: 1px solid var(--line, #e5e7eb); vertical-align: top; text-align: left; }
table.fee-table th.num, table.fee-table td.num { text-align: right; }
table.fee-table tr.fee-pick { background: #f0fdf4; }
table.fee-table tr.fee-claimed { opacity: .7; }
table.fee-table select { max-width: 220px; }
.fee-sum { font-size: 16px; }
/* บันทึกตรวจสำนวน */
fieldset.cr-insp { border: 1px solid #e2e8f0; border-radius: 8px; margin: 10px 0; padding: 6px 12px 10px; }
fieldset.cr-insp legend { padding: 0 6px; font-weight: 600; }
.cr-marks { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; margin-top: 4px; }
.cr-marks label.ck { margin: 0; font-size: 14.5px; }