/* =========================================================
   ระบบ ปคม.01 — ธีม "Blue Heart" ต้านการค้ามนุษย์ (v2 — ICCS mockup)
   โครง: Sidebar นาวี + Topbar + การ์ดหัวฟ้า + Wizard 5 ขั้นตอน
   ========================================================= */
:root {
  --navy:#0d1f52; --navy2:#16295f; --navy3:#1d3573;
  --blue:#1e4fd8; --azure:#2f6fed; --sky:#38bdf8; --softblue:#e8f0fe;
  --teal:#0ea5a4; --danger:#e11d48; --amber:#f59e0b; --green:#16a34a; --pink:#ec4899;
  --bg:#eaf1fa; --ink:#1f2937; --muted:#64748b; --line:#dbe4f2;
  --card-head:#dbeafe; --card-border:#b6ccf0;
  --shadow:0 8px 24px rgba(13,31,82,.12); --shadow-sm:0 2px 10px rgba(13,31,82,.08);
  --sidebar-w:248px;
}
* { box-sizing:border-box; }
body { font-family:'Sarabun',system-ui,Tahoma,sans-serif; font-size:14.5px; color:var(--ink);
  background:var(--bg); margin:0; }
h1,h2,h3,h4,h5 { font-weight:700; }
a { text-decoration:none; }
code { color:#3b50a0; }
.btn { border-radius:10px; font-weight:600; }

/* ---------- Login ---------- */
.heart { color:#2f6fed; }
.brand-emblem { display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,#2f6fed,#1e4fd8);
  color:#fff; font-size:20px; box-shadow:0 4px 12px rgba(30,79,216,.4); }
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; gap:46px; padding:28px;
  background:radial-gradient(900px 520px at 78% -8%, #2a5fe0 0%, transparent 58%),
             radial-gradient(700px 460px at 8% 105%, #7c3aed33 0%, transparent 60%),
             linear-gradient(135deg,#08173a 0%, #0b1f4e 30%, #13285f 62%, #1b3a86 100%);
  position:relative; overflow:hidden; flex-wrap:wrap; }
/* ลายจุดนุ่ม + ริบบิ้นแสงด้านหลัง */
.login-wrap::before { content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.07) 1.5px, transparent 1.5px);
  background-size:26px 26px; opacity:.55; }
.login-wrap::after { content:""; position:absolute; width:760px; height:760px; right:-260px; bottom:-360px;
  border-radius:50%; background:radial-gradient(circle, rgba(236,72,153,.22) 0%, transparent 62%); }

/* ---- แผงซ้าย (hero) ---- */
.login-hero { position:relative; z-index:1; color:#e8f0ff; max-width:520px; }
.hero-inner { animation:heroIn .6s ease-out both; }
@keyframes heroIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.hero-emblem { filter:drop-shadow(0 12px 26px rgba(0,0,0,.4)); margin-bottom:18px; }
.login-hero h1 { font-size:32px; line-height:1.28; margin:0 0 12px; color:#fff; letter-spacing:.2px; }
.hero-sub { font-size:16px; font-weight:700; color:#bcd2ff; margin-bottom:22px; }
.hero-sub span { display:block; font-size:13.5px; font-weight:400; color:#93aee6; margin-top:4px; }
.hero-points { list-style:none; padding:0; margin:0 0 22px; }
.hero-points li { display:flex; gap:11px; align-items:flex-start; font-size:14px; color:#cfdcf7;
  padding:9px 13px; margin-bottom:8px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); backdrop-filter:blur(2px); }
.hero-points li span { font-size:17px; line-height:1.2; flex:none; }
.hero-foot { font-size:11.5px; color:#8fa6da; letter-spacing:.4px; }

/* ---- การ์ดฟอร์ม ---- */
.login-card { width:400px; border:none; border-radius:20px; box-shadow:0 26px 70px rgba(0,0,0,.42);
  position:relative; z-index:1; overflow:hidden; animation:heroIn .6s .1s ease-out both; }
.login-card .login-head { background:linear-gradient(135deg,#1e4fd8,#2f6fed 55%,#5b8cff); color:#fff;
  padding:24px 24px 20px; text-align:center; position:relative; overflow:hidden; }
.login-card .login-head::after { content:""; position:absolute; inset:auto -20% -60% -20%; height:120px;
  background:radial-gradient(circle at 50% 0, rgba(255,255,255,.22), transparent 70%); }
.login-head .big-heart { font-size:40px; line-height:1; }
.login-head h5 { margin:9px 0 3px; font-size:18px; }
.login-head .tagline { font-size:12.5px; opacity:.92; }
.login-body { padding:24px; background:#fff; }
.login-body .form-control { border-radius:11px; padding:.55rem .85rem; }
.login-body .form-control:focus { border-color:#2f6fed; box-shadow:0 0 0 .2rem rgba(47,111,237,.15); }
.login-body .btn-primary { border-radius:12px; background:linear-gradient(135deg,#1e4fd8,#2f6fed); border:none;
  box-shadow:0 6px 18px rgba(30,79,216,.35); }
.login-body .btn-primary:hover { filter:brightness(1.08); }

@media (max-width: 980px) {
  .login-wrap { flex-direction:column; gap:24px; padding:22px 16px; }
  .login-hero { max-width:100%; text-align:center; }
  .login-hero h1 { font-size:25px; }
  .hero-points { display:none; }
  .hero-emblem svg { width:74px; height:74px; }
}

/* =========================================================
   App shell — Sidebar + Topbar
   ========================================================= */
.sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar-w); z-index:1040;
  background:linear-gradient(180deg,var(--navy) 0%, var(--navy2) 70%, var(--navy3) 100%);
  color:#dbe6ff; display:flex; flex-direction:column; box-shadow:4px 0 18px rgba(9,20,55,.25); }
.sb-brand { display:flex; gap:10px; align-items:center; padding:16px 16px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.sb-brand-txt b { display:block; font-size:15px; color:#fff; line-height:1.2; }
.sb-brand-txt small { font-size:10.5px; opacity:.65; }
.sb-nav { padding:12px 10px; display:flex; flex-direction:column; gap:4px; flex:1; }
.sb-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:none; color:#c3d2f5; padding:11px 14px; border-radius:10px;
  font-weight:600; font-size:14px; cursor:pointer; transition:.15s; }
.sb-item:hover { background:rgba(255,255,255,.08); color:#fff; }
.sb-item.active { background:linear-gradient(90deg,var(--azure),#3d7bff); color:#fff; box-shadow:0 4px 12px rgba(47,111,237,.4); }
.sb-ic { width:22px; text-align:center; font-size:15px; }
.sb-foot { padding:12px 10px; border-top:1px solid rgba(255,255,255,.08); }
.sb-user { font-size:12px; color:#9fb4e8; padding:0 14px 8px; line-height:1.35; }
.sb-logout:hover { background:rgba(225,29,72,.25); color:#ffd7df; }
.sidebar-backdrop { display:none; }

.main-wrap { margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:1020; display:flex; align-items:center; gap:14px;
  background:linear-gradient(90deg,var(--navy),#16336f 55%,#1e4fd8); color:#fff;
  padding:10px 18px; box-shadow:0 2px 14px rgba(11,31,78,.3); }
.topbar-title { font-weight:700; font-size:16.5px; white-space:nowrap; }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.searchbox { display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18); border-radius:22px; padding:5px 14px; min-width:230px; }
.searchbox input { background:transparent; border:none; outline:none; color:#fff; width:100%; font-size:13px; }
.searchbox input::placeholder { color:#b9c8ec; }
.user-chip { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.15);
  border-radius:20px; padding:4px 13px; font-size:12.5px; white-space:nowrap; }
.date-chip { background:rgba(255,255,255,.1); border-radius:20px; padding:4px 12px; font-size:12px; opacity:.9; white-space:nowrap; }
.burger { display:none; background:transparent; border:none; color:#fff; font-size:20px; padding:2px 6px; }
.content { padding:18px 20px 32px; flex:1; }

@media (max-width: 992px) {
  .sidebar { transform:translateX(-100%); transition:transform .2s; }
  .sidebar.open { transform:translateX(0); }
  .sidebar-backdrop.show { display:block; position:fixed; inset:0; background:rgba(10,20,50,.5); z-index:1035; }
  .main-wrap { margin-left:0; }
  .burger { display:block; }
  .searchbox { min-width:140px; }
}

/* =========================================================
   Cards / panels (การ์ดหัวฟ้าแบบ mockup)
   ========================================================= */
.panel { background:#fff; border-radius:14px; box-shadow:var(--shadow-sm); border:1px solid var(--line); overflow:hidden; }
.panel-head { padding:11px 16px; border-bottom:1px solid var(--line); font-weight:700; display:flex; align-items:center; gap:9px;
  background:linear-gradient(180deg,#f2f7ff,#e9f1fe); color:#173a7a; }
.panel-head .spacer { margin-left:auto; }
.panel-body { padding:16px; }
.section-title { font-size:20px; display:flex; align-items:center; gap:10px; margin:0; }
.section-title .bar { width:5px; height:24px; border-radius:3px; background:linear-gradient(var(--blue),var(--sky)); }
.badge-soft { background:#eef3ff; color:#1d4ed8; border-radius:20px; padding:2px 10px; font-size:11.5px; font-weight:600; }

/* กรอบส่วนย่อยในฟอร์ม wizard (เหมือน mockup: กรอบน้ำเงินหัวข้อไอคอน) */
.fieldset-card { border:1.5px solid var(--card-border); border-radius:12px; margin-bottom:16px; background:#fff; overflow:visible; }
.fieldset-head { display:flex; align-items:center; gap:9px; padding:10px 14px; font-weight:700; color:#14337a;
  background:linear-gradient(180deg,#eaf2ff,#e0ecfd); border-bottom:1px solid var(--card-border); border-radius:10px 10px 0 0; }
.fieldset-head .fs-ic { font-size:16px; }
.fieldset-body { padding:14px; }
.fieldset-card.locked { background:#f4f6fa; border-color:#cfd8e8; }
.fieldset-card.locked .fieldset-head { background:linear-gradient(180deg,#eceff5,#e3e8f1); color:#475569; border-color:#cfd8e8; }

/* ---------- Stat cards ---------- */
.stat { background:#fff; border-radius:14px; padding:14px 16px; box-shadow:var(--shadow-sm); border:1px solid var(--line);
  display:flex; align-items:center; gap:13px; transition:.18s; }
.stat:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.stat .ic { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff; flex:none; }
.stat .num { font-size:1.55rem; font-weight:800; line-height:1.1; }
.stat .lbl { color:var(--muted); font-size:12.5px; }
.stat .sub { font-size:11.5px; color:var(--muted); }
.ic-blue{background:linear-gradient(135deg,#1e4fd8,#2f6fed);} .ic-teal{background:linear-gradient(135deg,#0ea5a4,#22c1bd);}
.ic-red{background:linear-gradient(135deg,#e11d48,#f43f6e);} .ic-amber{background:linear-gradient(135deg,#f59e0b,#fbbf24);}
.ic-violet{background:linear-gradient(135deg,#7c3aed,#a78bfa);} .ic-green{background:linear-gradient(135deg,#16a34a,#34d27a);}

/* ---------- Tables ---------- */
.tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
.tbl thead th { background:#eaf1fd; color:#33457e; font-weight:700; padding:10px 12px; text-align:left;
  border-bottom:2px solid #d3e0f5; position:sticky; top:0; z-index:1; }
.tbl tbody td { padding:9px 12px; border-bottom:1px solid #eef1f6; vertical-align:middle; }
.tbl tbody tr:hover { background:#f5f9ff; }
.tbl tbody tr.click { cursor:pointer; }

/* ---------- Status pills ---------- */
.pill { display:inline-block; padding:3px 11px; border-radius:20px; font-size:12px; font-weight:700; }
.pill-DRAFT{ background:#eef0f4; color:#475569; } .pill-SUBMITTED{ background:#e0ecff; color:#1d4ed8; }
.pill-ADJUDICATED{ background:#dcfce7; color:#15803d; }
.iccs-primary { font-weight:800; color:#1e3a8a; }
.badge-mini { font-size:10.5px; padding:2px 7px; border-radius:10px; font-weight:700; }

/* ---------- Tag checkbox (chips) ---------- */
.tag-check { display:inline-flex; align-items:center; gap:5px; margin:3px 7px 3px 0; padding:5px 13px;
  border:1.5px solid #cfd9ec; border-radius:22px; cursor:pointer; user-select:none; font-size:13px; transition:.13s; background:#fff; }
.tag-check:hover { border-color:#2f6fed; }
.tag-check input { display:none; }
.tag-check.active { background:linear-gradient(135deg,#1e4fd8,#2f6fed); color:#fff; border-color:#1e4fd8; box-shadow:0 3px 9px rgba(30,79,216,.3); }
.tag-check.disabled { opacity:.55; pointer-events:none; }

/* checkbox แบบมีคำอธิบาย (เหตุเพิ่มโทษ / ประเภทการแสวงหาประโยชน์) */
.check-card { display:flex; gap:10px; align-items:flex-start; border:1.5px solid var(--line); border-radius:11px;
  padding:10px 13px; cursor:pointer; transition:.13s; background:#fff; height:100%; }
.check-card:hover { border-color:var(--azure); }
.check-card input { margin-top:3px; width:17px; height:17px; accent-color:var(--blue); flex:none; }
.check-card .cc-name { font-weight:700; font-size:13.5px; }
.check-card .cc-desc { font-size:11.8px; color:var(--muted); line-height:1.35; }
.check-card.active { border-color:var(--blue); background:#f2f7ff; box-shadow:0 2px 8px rgba(30,79,216,.12); }
.check-card.disabled { opacity:.6; pointer-events:none; }

/* =========================================================
   Wizard 5 ขั้นตอน (ตาม mockup)
   ========================================================= */
.wizard-layout { display:grid; grid-template-columns:250px 1fr; gap:16px; align-items:start; }
@media (max-width: 1100px) { .wizard-layout { grid-template-columns:1fr; } }

.stepper-card { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm); overflow:hidden;
  position:sticky; top:70px; }
.stepper-head { background:linear-gradient(135deg,var(--navy),#1d3573); color:#fff; font-weight:700; padding:12px 16px; font-size:14.5px; }
.stepper-body { padding:14px 12px 6px; }
.step-item { display:flex; gap:11px; cursor:pointer; border-radius:10px; padding:8px 10px; transition:.13s; position:relative; }
.step-item:hover { background:#f2f7ff; }
.step-item .st-rail { display:flex; flex-direction:column; align-items:center; flex:none; }
.step-item .st-dot { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; background:#e5eaf4; color:#8695b5; border:2px solid #d5deee; z-index:1; }
.step-item .st-line { width:2.5px; flex:1; min-height:14px; background:#d5deee; margin-top:2px; }
.step-item:last-child .st-line { display:none; }
.step-item .st-txt { padding-top:4px; padding-bottom:10px; }
.step-item .st-name { font-weight:700; font-size:13.2px; color:#5b6b86; line-height:1.25; }
.step-item .st-sub { font-size:11px; color:#93a3c0; }
.step-item.active .st-dot { background:linear-gradient(135deg,#1e4fd8,#2f6fed); color:#fff; border-color:#1e4fd8; box-shadow:0 3px 9px rgba(30,79,216,.4); }
.step-item.active .st-name { color:var(--navy); }
.step-item.active { background:#eef5ff; }
.step-item.done .st-dot { background:#dcfce7; color:#15803d; border-color:#86efac; }
.step-item.done .st-line { background:#86efac; }
.step-item.done .st-name { color:#15803d; }
.stepper-progress { padding:10px 16px 16px; }
.stepper-progress .sp-lbl { font-size:12px; color:var(--muted); margin-bottom:5px; display:flex; justify-content:space-between; }
.sp-track { background:#e5eaf4; border-radius:8px; height:9px; overflow:hidden; }
.sp-fill { height:100%; border-radius:8px; background:linear-gradient(90deg,#1e4fd8,#38bdf8); transition:width .25s; }

.wizard-main { min-width:0; }
.wizard-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.wizard-head h4 { margin:0; font-size:18px; color:var(--navy); }
.wizard-head .wh-sub { font-size:12.5px; color:var(--muted); }
.wizard-foot { display:flex; align-items:center; gap:9px; margin-top:16px; flex-wrap:wrap; }
.wizard-foot .spacer { flex:1; }
.btn-next { background:linear-gradient(135deg,#1e4fd8,#2f6fed); border:none; color:#fff; padding:9px 26px; }
.btn-next:hover { filter:brightness(1.08); color:#fff; }
.btn-draft { border:1.5px solid var(--azure); color:var(--azure); background:#fff; padding:9px 18px; }
.btn-draft:hover { background:#eef5ff; color:var(--blue); }

.locked-banner { background:linear-gradient(90deg,#fff7ed,#fef3c7); border:1px solid #fcd34d; color:#92400e;
  border-radius:12px; padding:10px 14px; }

/* entity cards (เหยื่อ/ผู้ต้องหา) */
.ecard { border:1px solid var(--line); border-radius:12px; margin-bottom:10px; overflow:hidden; box-shadow:var(--shadow-sm); background:#fff; }
.ecard .eh { background:#f5f8ff; padding:10px 14px; font-weight:700; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.ecard .eb { padding:10px 14px; font-size:13px; color:#374151; }
.ecard.danger { border-color:#f5a7b8; } .ecard.danger .eh { background:#fff1f4; color:#be123c; }
.pulse { animation:pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ opacity:1; } 50%{ opacity:.5; } }

/* chip แสดงรายการบุคคล (แบบ mockup ผู้เสียหาย 1 (Victim 1): …) */
.person-chip { display:flex; align-items:center; gap:10px; border:1.5px solid var(--card-border); background:#f4f8ff;
  border-radius:12px; padding:9px 13px; margin-bottom:8px; font-size:13px; }
.person-chip .pc-ic { width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,#2f6fed,#1e4fd8);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; flex:none; }
.person-chip .pc-txt { flex:1; min-width:0; line-height:1.35; }
.person-chip .pc-txt b { color:#14337a; }
.person-chip .pc-del { border:none; background:#fee2e8; color:#be123c; border-radius:8px; width:30px; height:30px;
  font-size:14px; flex:none; cursor:pointer; }
.person-chip .pc-del:hover { background:#fecdd6; }
.person-chip.suspect .pc-ic { background:linear-gradient(135deg,#e11d48,#be123c); }

/* legal framework tag (มาตรา) */
.law-tag { display:inline-flex; align-items:center; gap:7px; background:#e8f0fe; color:#1d4ed8; border:1px solid #b6ccf0;
  border-radius:9px; padding:5px 11px; font-size:12.8px; font-weight:600; margin:3px 6px 3px 0; }
.law-tag .lt-x { cursor:pointer; color:#7c8bb5; font-weight:700; }
.law-tag .lt-x:hover { color:#e11d48; }
.law-tag.auto { background:#fef9e7; color:#92640e; border-color:#f3dd9a; }

/* mapping table (Auto-Mapped ICCS) */
.map-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.map-table th { background:#dfe7f5; color:#2d3f70; font-weight:700; padding:8px 12px; border:1px solid #c9d6ec; }
.map-table td { padding:8px 12px; border:1px solid #dde6f3; background:#fff; }
.map-table .mt-code { font-weight:800; color:#1e3a8a; }

/* ---------- Dashboard widgets ---------- */
.bar-row { display:flex; align-items:center; gap:8px; margin:7px 0; font-size:12.5px; }
.bar-row .b-ic { width:26px; text-align:center; font-size:15px; flex:none; }
.bar-row .name { width:170px; flex:none; color:#334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-track { flex:1; background:#eef1f6; border-radius:6px; height:14px; overflow:hidden; }
.bar-fill { height:100%; border-radius:6px; background:linear-gradient(90deg,#2f6fed,#38bdf8); }
.bar-fill.pink { background:linear-gradient(90deg,#ec4899,#f9a8d4); }
.bar-fill.navy { background:linear-gradient(90deg,#1d3573,#2f6fed); }
.bar-row .val { width:36px; text-align:right; font-weight:700; color:#33457e; }

.legend-dot { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.pie-wrap { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.pie-legend { font-size:12.5px; line-height:1.9; }

.vbars { display:flex; align-items:flex-end; gap:14px; height:130px; padding:6px 4px 0; }
.vbar { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end; }
.vbar .vb-fill { width:70%; max-width:44px; border-radius:6px 6px 0 0; background:linear-gradient(180deg,#2f6fed,#1d3573); }
.vbar.minor .vb-fill { background:linear-gradient(180deg,#f472b6,#ec4899); }
.vbar .vb-num { font-size:12px; font-weight:700; color:#33457e; }
.vbar .vb-lbl { font-size:11px; color:var(--muted); text-align:center; line-height:1.15; }

.kv-card { background:var(--navy); color:#dbe6ff; border-radius:12px; overflow:hidden; }
.kv-card .kv-head { background:rgba(255,255,255,.08); font-weight:700; padding:10px 14px; color:#fff; font-size:13.5px; }
.kv-card .kv-row { display:flex; gap:10px; padding:7px 14px; font-size:12.5px; border-bottom:1px solid rgba(255,255,255,.06); }
.kv-card .kv-row:nth-child(even) { background:rgba(255,255,255,.04); }
.kv-card .kv-k { width:130px; flex:none; color:#9fb4e8; }
.kv-card .kv-v { color:#fff; min-width:0; }

#hotspotMap { height:430px; border-radius:0 0 12px 12px; }
#miniMap { height:260px; border-radius:10px; }

/* ป้ายปี พ.ศ. ใต้ช่องวันที่ (เบราว์เซอร์แสดงปี ค.ศ.) */
.be-hint { font-size:11.5px; color:#1d4ed8; font-weight:600; margin-top:2px; min-height:14px; }

.autocomplete-box { position:absolute; z-index:1080; background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); max-height:250px; overflow:auto; width:100%; }
.autocomplete-box .opt { padding:8px 12px; cursor:pointer; font-size:13px; border-bottom:1px solid #f1f4f9; }
.autocomplete-box .opt:hover { background:#eef3fc; }
.autocomplete-box .opt small { display:block; }

/* review (step 5) */
.review-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:12px; }
.review-box { border:1px solid var(--line); border-radius:11px; background:#fbfdff; padding:12px 14px; font-size:13px; }
.review-box h6 { color:#14337a; font-size:13.5px; margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.review-box .rv-line { display:flex; gap:8px; padding:2.5px 0; }
.review-box .rv-k { color:var(--muted); width:140px; flex:none; }
.review-warn { color:#b45309; background:#fef3c7; border-radius:8px; padding:6px 10px; font-size:12.3px; margin-top:6px; }
.review-ok { color:#15803d; }

/* ---- QR รหัสอ้างอิง ---- */
.qr-box { display:inline-block; text-align:center; padding:10px 12px; border:1.5px solid var(--card-border);
  border-radius:12px; background:#fbfdff; }
.qr-box .qr-code { line-height:0; }
.qr-box .qr-label { font-size:11.5px; color:var(--muted); margin-top:6px; }
.qr-box .qr-text { display:block; font-size:11px; word-break:break-all; max-width:170px; margin:2px auto 0; }
.law-def { display:inline-block; margin-left:5px; width:18px; height:18px; line-height:17px; text-align:center;
  border-radius:50%; background:#e0ecfd; color:#1d4ed8; font-size:12px; cursor:pointer; font-weight:700; }
.law-def:hover { background:#1d4ed8; color:#fff; }
.digital-row { border:1px dashed var(--card-border); border-radius:10px; padding:10px 12px; margin-bottom:10px; background:#fbfdff; }

/* หัวข้อย่อยภายในกล่อง (เช่น 5.1 / 5.2 ในขั้นตอนที่ 2) */
.sub-head {
  font-weight: 700;
  color: #1e3a8a;
  border-left: 4px solid #2563eb;
  padding: .25rem .6rem;
  background: #f1f5ff;
  border-radius: 0 6px 6px 0;
  margin-bottom: .6rem;
}

/* บัตรรหัส ICCS ประจำตัวบุคคล (ผู้เสียหาย/ผู้ต้องหา) */
.id-card {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid #c7d2fe; background: #f8faff;
  border-radius: 10px; padding: 12px; margin-bottom: 12px;
}
.id-card .id-qr { flex: 0 0 auto; line-height: 0; }
.id-card .id-body { flex: 1 1 auto; min-width: 0; }
.id-card .id-label { font-weight: 700; color: #1e3a8a; margin-bottom: 4px; }
.id-card .id-code {
  display: block; font-size: 11px; line-height: 1.5;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 6px 8px; word-break: break-all; color: #0f172a;
}
@media (max-width: 700px) { .id-card { flex-direction: column; } }

/* หมุดแผนที่แบบ SVG + ปุ่มเลือกชั้นแผนที่ (ไม่ใช้ไฟล์ภาพของ Leaflet) */
.leaflet-div-icon.pin-ic { background: none; border: none; }
.leaflet-control-layers-toggle {
  background-image: none !important;
  width: 30px; height: 30px;
}
.leaflet-control-layers-toggle::after {
  content: "🗺"; display: block; font-size: 18px; line-height: 30px; text-align: center;
}

/* ===== ตารางคลังข้อหา ICCS — คอลัมน์กว้างไม่เท่ากัน เน้นข้อความข้อหาให้อ่านง่าย ===== */
.ch-scroll { max-height: 68vh; overflow: auto; }
.tbl-charges { table-layout: fixed; width: 100%; }
.tbl-charges col.c-law  { width: 17%; }
.tbl-charges col.c-sec  { width: 14%; }
.tbl-charges col.c-text { width: 46%; }
.tbl-charges col.c-tag  { width: 16%; }
.tbl-charges col.c-act  { width: 7%; }
.tbl-charges th, .tbl-charges td {
  vertical-align: top; word-break: break-word; overflow-wrap: anywhere;
}
.tbl-charges thead th { padding: 8px 10px; }
.tbl-charges thead tr.hd th { position: sticky; top: 0; z-index: 3; }
.tbl-charges thead tr.flt th {
  position: sticky; top: 39px; z-index: 2; background: #f4f8ff; padding: 6px 8px;
  border-bottom: 1px solid #d7e2f5;
}
.tbl-charges tbody td { padding: 10px 12px; }
.tbl-charges .ch-law { font-weight: 600; color: #33457e; }
.tbl-charges .ch-text { white-space: pre-wrap; line-height: 1.6; font-size: 13px; }
.tbl-charges .ch-tag .iccs-primary { display: inline-block; margin-bottom: 2px; }
/* จอแคบ: ให้เลื่อนแนวนอนได้แทนการบีบคอลัมน์จนอ่านไม่ออก */
@media (max-width: 980px) { .tbl-charges { min-width: 860px; } }

/* แท่งช่วงอายุแบบซ้อนแยกเพศ */
.vbar .vb-stack {
  width: 70%; max-width: 44px; border-radius: 6px 6px 0 0; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(15,23,42,.18);
}
.vbar .vb-seg { width: 100%; min-height: 2px; }
.vbar .vb-seg.sg-f { background: linear-gradient(180deg, #f472b6, #db2777); }
.vbar .vb-seg.sg-m { background: linear-gradient(180deg, #4b8bf5, #1d3573); }
.vbar .vb-seg.sg-o { background: #cbd5e1; }
.sexbar-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.sexbar-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }

/* ===== ใช้งานบนมือถือ/แท็บเล็ต ===== */
@media (max-width: 992px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .topbar-title { white-space: normal; font-size: 15px; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
  .topbar-right { margin-left: 0; width: 100%; justify-content: flex-start; gap: 6px; }
  .topbar-right .searchbox { flex: 1 1 180px; min-width: 0; }
  .topbar-right .searchbox input { width: 100%; min-width: 0; }
  .topbar-right .date-chip, .topbar-right .user-chip { font-size: 12px; }
  /* ตารางกว้างให้เลื่อนในกล่องของตัวเอง แทนที่จะดันทั้งหน้าจอ */
  .panel-body, .fieldset-body { overflow-x: auto; }
  .pie-wrap svg, .panel svg { max-width: 100%; height: auto; }
  .review-grid { grid-template-columns: 1fr; }
  .content { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 640px) {
  .topbar-title { font-size: 14px; }
  .topbar-right .user-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .stat .num { font-size: 20px; }
  .vbars { gap: 8px; }
  .qr-box { margin: 0 auto; }
  .id-card { padding: 10px; }
  .btn { white-space: normal; }
}