@font-face{font-family:Sarabun;src:url('vendor/pt7/Sarabun-Regular.ttf') format('truetype');font-display:swap}@font-face{font-family:Kanit;src:url('vendor/pt7/Kanit-Regular.ttf') format('truetype');font-display:swap}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --dark: #0f172a;
  --panel: rgba(15,23,42,.98);
  --accent: #10b981;
  --blue: #3b82f6;
  --text: #e2e8f0;
  --muted: #64748b;
  --border: rgba(255,255,255,.1);
}

html, body {
  height: 100%;
  font-family: 'Kanit', sans-serif;
  background: var(--dark);
  color: var(--text);
  overflow: hidden;
}

/* ===== APP LAYOUT ===== */
#app { display: flex; height: 100vh; overflow: hidden; }

/* ===== SIDEBAR ===== */
#ctrl {
  width: 290px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
}

#ctrl-head {
  padding: 12px 14px 10px;
  background: rgba(16,185,129,.1);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
#ctrl-head h1 { font-size: 14px; font-weight: 700; color: #10b981; line-height: 1.2; }
#ctrl-head p  { font-size: 10px; color: var(--muted); margin-top: 1px; }

#ctrl-body {
  flex: 1;
  min-height: 0;              /* ให้ flex ย่อได้เพื่อให้ overflow-y ทำงาน */
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* ห้ามแต่ละส่วนหด (ไม่งั้นเนื้อหาถูกบีบ/ตัดจนดูเหมือนเมนูทับกัน) — ให้ body เลื่อนแทน */
#ctrl-body > * { flex-shrink: 0; }

#ctrl-foot {
  padding: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-shrink: 0;
}

/* ===== CTRL COMPONENTS ===== */
.sect {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
}
.sect-hdr {
  padding: 7px 11px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sect-body { padding: 9px 11px; display: flex; flex-direction: column; gap: 7px; }

.cl { font-size: 10.5px; color: #94a3b8; display: block; margin-bottom: 2px; }

input.ci, select.cs {
  width: 100%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px;
  color: #e2e8f0;
  padding: 5px 8px;
  font-size: 12px;
  font-family: 'Kanit', sans-serif;
  outline: none;
}
input.ci:focus, select.cs:focus { border-color: #10b981; }
select.cs option { background: #1e293b; }

.org-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.org-grid .org-wide { grid-column: 1 / -1; }
.org-logo-row { display: flex; align-items: center; gap: 8px; }
.org-logo-preview {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 6px;
  border: 1px dashed rgba(255,255,255,.2); background: rgba(255,255,255,.04);
  display: flex; align-items: center; justify-content: center; overflow: hidden; color: #64748b;
}
.org-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.org-logo-actions { display: flex; flex: 1; gap: 5px; flex-wrap: wrap; }

/* Layer rows */
.lrow {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.lrow:last-child { border-bottom: none; }
.ldot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.lname { flex: 1; font-size: 11px; }
.lcnt  { font-size: 9.5px; color: var(--muted); }
.limp  {
  font-size: 9.5px; padding: 2px 7px;
  border-radius: 4px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color: #94a3b8; cursor: pointer;
}
.limp:hover { background: rgba(255,255,255,.12); color: #e2e8f0; }
.limp.ok { border-color: #10b981; color: #10b981; }

/* Block list */
#zone-list {
  display: flex; gap: 5px; overflow-x: auto; padding: 1px 0 7px;
  scrollbar-width: thin;
}
.zone-pick {
  flex: 0 0 auto; min-width: 46px; padding: 5px 8px; border-radius: 6px;
  border: 1px solid rgba(45,212,191,.3); background: rgba(15,118,110,.12);
  color: #99f6e4; font: 600 10.5px 'Kanit', sans-serif; cursor: pointer;
}
.zone-pick:hover { background: rgba(20,184,166,.22); }
.zone-pick.active { background: #0d9488; border-color: #2dd4bf; color: #fff; }
#block-list {
  max-height: 180px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px;
}
.blk-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 7px; border-radius: 5px; cursor: pointer;
  font-size: 11px; border: 1px solid transparent; transition: background .15s;
}
.blk-item:hover { background: rgba(255,255,255,.06); }
.blk-item.active { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); }
.blk-item input[type=checkbox] { flex-shrink: 0; cursor: pointer; accent-color: #10b981; }
.blk-id { font-weight: 700; color: #10b981; min-width: 36px; font-size: 11px; }
.blk-cnt { font-size: 9.5px; color: var(--muted); margin-left: auto; }

/* Buttons */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 12px; border-radius: 6px; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: 'Kanit', sans-serif; transition: opacity .15s;
}
.btn:hover { opacity: .85; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-g  { background: #10b981; color: #fff; }
.btn-b  { background: #3b82f6; color: #fff; }
.btn-p  { background: #7c3aed; color: #fff; }
.btn-gr { background: rgba(255,255,255,.09); color: #e2e8f0; border: 1px solid var(--border); }
.btn-sm { padding: 4px 9px; font-size: 11px; }

/* Paper toggle */
.pap-opts { display: flex; gap: 5px; }
.pap-opt {
  flex: 1; padding: 5px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.12); background: transparent;
  color: #94a3b8; font-size: 10.5px; cursor: pointer; text-align: center;
  font-family: 'Kanit', sans-serif; transition: all .15s;
}
.pap-opt.sel { border-color: #3b82f6; background: rgba(59,130,246,.15); color: #93c5fd; }

/* ===== PREVIEW AREA ===== */
#preview-wrap {
  flex: 1;
  background: #4b5563;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  gap: 14px;
}

#preview-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#pages-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

#placeholder {
  color: #9ca3af; font-size: 14px; text-align: center;
  padding: 60px 40px;
  background: rgba(0,0,0,.2); border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.1);
}

#ctrl-toggle, #ctrl-backdrop { display: none; }

@media (max-width: 700px) {
  #ctrl {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, 320px);
    transform: translateX(-102%);
    transition: transform .2s ease;
    box-shadow: 10px 0 30px rgba(0,0,0,.45);
    z-index: 1100;
  }
  #ctrl.mobile-open { transform: translateX(0); }
  #ctrl-toggle {
    display: flex;
    position: fixed;
    left: 10px;
    bottom: 10px;
    z-index: 1200;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: #10b981;
    color: #fff;
    box-shadow: 0 5px 18px rgba(0,0,0,.35);
    font-size: 17px;
  }
  #ctrl-backdrop.mobile-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(2,6,23,.62);
  }
  #preview-wrap { width: 100%; padding: 8px; }
  #preview-bar {
    padding-left: 50px;
    min-height: 40px;
    gap: 5px;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  #nav-lbl { min-width: 88px !important; font-size: 11px !important; }
  #preview-bar > span:nth-of-type(2) { display: none; }
  #gen-status { display: none; }
  #preview-bar > div:last-child {
    margin-left: auto !important;
    flex: 0 0 auto;
    gap: 5px !important;
  }
  #preview-bar > div:last-child .btn {
    width: 34px;
    padding: 7px 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0;
  }
  #preview-bar > div:last-child .btn i { font-size: 12px; margin: 0; }
  #placeholder { padding: 40px 18px; }
}

/* ===== ผ.ท.7 PAPER ===== */
.tm-paper {
  background: #fff; color: #000;
  display: flex; flex-direction: row;
  font-family: 'Sarabun', 'TH SarabunPSK', 'Arial', sans-serif;
  box-shadow: 0 8px 40px rgba(0,0,0,.7);
  border: 1.5px solid #444;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.tm-paper *, .tm-paper *::before, .tm-paper *::after { box-sizing: border-box; }

/* A3 landscape */
.paper-a3 { width: 420mm; height: 297mm; }
/* A4 landscape */
.paper-a4 { width: 297mm; height: 210mm; }

/* ===== หน้าปก / ภาพรวม (Cover / Overview) ===== */
.tm-ov { flex-direction: column !important; }
.tm-ov-title { text-align:center; font-weight:700; color:#111; padding:7mm 8mm 4mm; line-height:1.3; }
.paper-a3 .tm-ov-title { font-size:30pt; }
.paper-a4 .tm-ov-title { font-size:20pt; }
.tm-ov-title small { display:block; font-weight:600; margin-top:1mm; }
.paper-a3 .tm-ov-title small { font-size:22pt; }
.paper-a4 .tm-ov-title small { font-size:15pt; }
.tm-ov-mapwrap { flex:1; position:relative; margin:0 8mm 8mm; border:1px solid #888; overflow:hidden; }
.tm-ov-map { position:absolute; inset:0; }
.tm-ov-logo { position:absolute; top:8px; left:8px; z-index:600; background:transparent; padding:0; }
.paper-a3 .tm-ov-logo { width:30mm; height:30mm; }
.paper-a4 .tm-ov-logo { width:20mm; height:20mm; }
.tm-ov-logo img { width:100%; height:100%; object-fit:contain;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.55)) drop-shadow(0 0 2px rgba(0,0,0,.35)); }
.tm-ov-compass { position:absolute; top:8px; right:8px; z-index:600; }
.paper-a3 .tm-ov-compass { width:22mm; height:22mm; }
.paper-a4 .tm-ov-compass { width:15mm; height:15mm; }
/* labels บนหน้าภาพรวม */
.ov-znum.leaflet-tooltip { background:#fff!important; border:2px solid #222!important; border-radius:50%!important;
  width:26px; height:26px; line-height:22px; padding:0!important; text-align:center; font-weight:700; font-size:12pt;
  color:#111; box-shadow:none!important; }
.paper-a4 .ov-znum.leaflet-tooltip { width:20px; height:20px; line-height:16px; font-size:9pt; }
.ov-blbl.leaflet-tooltip { background:transparent!important; border:none!important; box-shadow:none!important;
  color:#fff; font-weight:700; font-size:7pt; text-shadow:0 0 2px #000,0 0 2px #000,0 0 3px #000; padding:0!important; }
.ov-glbl.leaflet-tooltip { background:transparent!important; border:none!important; box-shadow:none!important;
  color:#38f0c0; font-weight:700; font-size:6.5pt; text-shadow:0 0 2px #000,0 0 2px #000; padding:0!important; }
.ov-mlbl.leaflet-tooltip { background:rgba(255,255,255,.88)!important; border:1.5px solid #dc2626!important; border-radius:3px!important; box-shadow:none!important;
  color:#b91c1c; font-weight:900; font-size:9pt; line-height:1.15; text-align:center;
  text-shadow:1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff; padding:1px 3px!important; white-space:nowrap; }
.paper-a4 .ov-mlbl.leaflet-tooltip { font-size:7.5pt; padding:1px 2px!important; }
.leaflet-tooltip.ov-znum:before, .leaflet-tooltip.ov-blbl:before,
.leaflet-tooltip.ov-glbl:before, .leaflet-tooltip.ov-mlbl:before { display:none!important; }

/* Map column */
.tm-left {
  flex: 1;
  border-right: 2px solid #222;
  position: relative;
  overflow: hidden;
}

.tm-inner {
  position: absolute;
  inset: 7mm;
  overflow: hidden;
  border: 1px solid #777;
  background: #c8d5e8;
}

.tm-inner .leaflet-container { background: #c8d5e8; }
/* overview (มุมบนขวา) เป็นแผนผังบล็อคล้วน — พื้นสว่างสะอาด ไม่มีภาพพื้นหลัง */
.tm-nav .leaflet-container { background: #f8fafc; }

/* Right column */
.tm-right {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.paper-a3 .tm-right { width: 127mm; }
.paper-a4 .tm-right { width: 89mm; }

/* North + overview */
.tm-nav {
  border-bottom: 1.5px solid #333;
  position: relative;
  overflow: hidden;
}
.paper-a3 .tm-nav { height: 93mm; }
.paper-a4 .tm-nav { height: 65mm; }

.tm-north-svg {
  position: absolute;
  top: 3mm; right: 3mm;
  width: 18mm; height: 18mm;
  z-index: 5;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.paper-a4 .tm-north-svg { width: 14mm; height: 14mm; }

.tm-ov-lbl {
  position: absolute;
  bottom: 1.5mm; left: 2mm;
  font-size: 7pt; color: #444;
  background: rgba(255,255,255,.8);
  padding: 0 2px; z-index: 5;
}

/* Legend */
.tm-leg {
  border-bottom: 1.5px solid #333;
  padding: 2mm 3mm;
}
.paper-a4 .tm-leg { padding: 1.5mm 2.5mm; }

.tm-leg-ttl {
  font-size: 9pt; font-weight: 700; text-align: center;
  border-bottom: 1px solid #aaa; padding-bottom: 1.5mm; margin-bottom: 1.5mm;
}
.paper-a4 .tm-leg-ttl { font-size: 8pt; margin-bottom: 1mm; padding-bottom: 1mm; }

.tm-leg-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5mm 2.5mm;
}
.paper-a4 .tm-leg-grid { gap: 1mm 2mm; }

.tm-leg-item { display: flex; align-items: center; gap: 1.5mm; font-size: 7.5pt; line-height: 1.2; }
.paper-a4 .tm-leg-item { font-size: 7pt; }

.tm-sym {
  width: 11mm; height: 5mm; flex-shrink: 0;
  border: 1px solid #555;
  display: flex; align-items: center; justify-content: center;
  font-size: 6pt; font-weight: 700;
}
.paper-a4 .tm-sym { width: 9mm; height: 4mm; }

.tm-lline {
  width: 11mm; height: 0; flex-shrink: 0;
  border-top: 2px solid #888;
}
.paper-a4 .tm-lline { width: 9mm; }

/* History table */
.tm-hist {
  flex: 1;
  border-bottom: 1.5px solid #333;
  overflow: hidden;
  display: flex; flex-direction: column;
}

.tm-hist-ttl {
  font-size: 9pt; font-weight: 700; text-align: center;
  padding: 1mm; background: #f0f0f0;
  border-bottom: 1px solid #333; flex-shrink: 0;
}
.paper-a4 .tm-hist-ttl { font-size: 8pt; }

.tm-hist-table {
  width: 100%; border-collapse: collapse; font-size: 7pt; flex: 1;
}
.paper-a4 .tm-hist-table { font-size: 6.5pt; }

.tm-hist-table th {
  background: #f5f5f5; border: 0.5px solid #999;
  padding: 1mm 1mm; text-align: center; font-weight: 600;
}
.tm-hist-table td {
  border: 0.5px solid #ccc; padding: 0.5mm 1mm;
}
.paper-a3 .tm-hist-table td { height: 6.5mm; }
.paper-a4 .tm-hist-table td { height: 5.5mm; }

/* Footer */
.tm-foot {
  display: flex; flex-direction: column;
}
.paper-a3 .tm-foot { height: 48mm; }
.paper-a4 .tm-foot { height: 33mm; }

.tm-foot-top {
  flex: 1; display: flex; border-bottom: 1px solid #333;
}

.tm-logo-box {
  border-right: 1px solid #333;
  display: flex; align-items: center; justify-content: center; padding: 2mm;
}
.paper-a3 .tm-logo-box { width: 22mm; }
.paper-a4 .tm-logo-box { width: 16mm; }

.tm-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }

.tm-title-box {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 2mm;
  border-right: 1px solid #333; text-align: center;
}
.tm-title1 { font-size: 11pt; font-weight: 700; line-height: 1.3; }
.tm-title2 { font-size: 8pt; line-height: 1.4; color: #333; margin-top: 1mm; }
.paper-a4 .tm-title1 { font-size: 8.5pt; }
.paper-a4 .tm-title2 { font-size: 7pt; }

.tm-blkid {
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: #000;
}
.paper-a3 .tm-blkid { width: 24mm; font-size: 26pt; }
.paper-a4 .tm-blkid { width: 18mm; font-size: 18pt; }

.tm-foot-rows { display: flex; flex-direction: column; }
.tm-foot-row  { flex: 1; display: flex; border-top: 0.5px solid #ccc; }
.tm-foot-cell {
  flex: 1; border-right: 0.5px solid #ccc;
  padding: 1mm 2mm; font-size: 8pt;
  display: flex; align-items: flex-start; gap: 1mm;
}
.tm-foot-cell:last-child { border-right: none; }
.tm-foot-cell span { color: #444; white-space: nowrap; }
.paper-a4 .tm-foot-cell { font-size: 7pt; }

/* Scale value cell */
.tm-scale-val { font-size: 10pt; font-weight: 700; }
.paper-a4 .tm-scale-val { font-size: 8.5pt; }

/* Parcel label tooltip */
.parcel-lbl {
  background: transparent !important; border: none !important;
  box-shadow: none !important; font-size: 7.5pt !important;
  font-weight: 700 !important; color: #1a1000 !important;
  white-space: nowrap !important; padding: 0 !important;
  text-shadow: 1px 1px 0 rgba(255,255,255,.9), -1px -1px 0 rgba(255,255,255,.9),
               1px -1px 0 rgba(255,255,255,.9), -1px 1px 0 rgba(255,255,255,.9) !important;
}

/* Highlighted (adjusted) parcel label */
.parcel-lbl-hi {
  color: #b91c1c !important; font-size: 8.5pt !important; font-weight: 800 !important;
}

/* Overview map label */
.ov-lbl {
  background: rgba(220,38,38,.9) !important; border: none !important;
  color: white !important; font-size: 7pt !important; font-weight: 700 !important;
  padding: 1px 3px !important; border-radius: 2px !important;
  white-space: nowrap !important; box-shadow: none !important;
}

/* Leaflet attribution hide */
.leaflet-control-attribution { display: none !important; }

/* ===== แผนที่แนวเขตตำบล (Zone boundary map) ===== */
.zn-paper { flex-direction: row !important; }
.zn-main  { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.zn-title { text-align: center; color: #111; padding: 4mm 4mm 2mm; line-height: 1.2; }
.zn-title-main { font-weight: 800; display: block; }
.zn-title-sub  { font-weight: 600; display: block; margin-top: 1mm; }
.paper-a3 .zn-title-main { font-size: 26pt; }
.paper-a3 .zn-title-sub  { font-size: 17pt; }
.paper-a4 .zn-title-main { font-size: 18pt; }
.paper-a4 .zn-title-sub  { font-size: 12pt; }
.zn-mapframe {
  flex: 1; position: relative; margin: 0 3mm 4mm 4mm;
  border: 1.5px solid #111; background: #c8d5e8; overflow: hidden;
}
.zn-map {
  position: absolute; top: 9mm; bottom: 9mm; left: 12mm; right: 9mm;
  border: 1px solid #111; overflow: hidden; background: #c8d5e8;
}
.paper-a4 .zn-map { top: 7mm; bottom: 7mm; left: 10mm; right: 7mm; }
.zn-map .leaflet-container { background: #c8d5e8; }
.zn-north {
  position: absolute; top: 11mm; left: 14mm; width: 15mm; height: 15mm;
  z-index: 600; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.paper-a4 .zn-north { top: 9mm; left: 12mm; width: 11mm; height: 11mm; }
/* UTM graticule edge labels */
.zn-grid-lbl {
  position: absolute; font-family: 'Sarabun', sans-serif; font-size: 9pt;
  color: #111; font-weight: 700; white-space: nowrap; z-index: 550;
  transform: translate(-50%, -50%); pointer-events: none;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff;
}
.paper-a4 .zn-grid-lbl { font-size: 7pt; }
.zn-grid-lbl.rot { transform: translate(-50%, -50%) rotate(-90deg); }
/* zone number circle + block code labels on map */
.zn-znum.leaflet-tooltip {
  background: #fff !important; border: 2px solid #111 !important; border-radius: 50% !important;
  width: 24px; height: 24px; line-height: 20px; padding: 0 !important; text-align: center;
  font-weight: 700; font-size: 11pt; color: #111; box-shadow: none !important;
}
.paper-a4 .zn-znum.leaflet-tooltip { width: 18px; height: 18px; line-height: 14px; font-size: 8pt; }
.zn-blbl.leaflet-tooltip {
  background: transparent !important; border: none !important; box-shadow: none !important;
  color: #fff; font-weight: 700; font-size: 6pt; padding: 0 !important;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 3px #000;
}
.paper-a4 .zn-blbl.leaflet-tooltip { font-size: 5pt; }
.zn-znum.leaflet-tooltip:before, .zn-blbl.leaflet-tooltip:before { display: none !important; }
/* หมุดหลักเขต (boundary marker) label — ชื่อหมุด + MGRS + UTM (ไม่มีกรอบ/พื้นหลัง) */
.zn-mk-lbl.leaflet-tooltip {
  background: transparent !important; border: none !important; box-shadow: none !important;
  color: #111827; font-weight: 700; font-size: 6.5pt; line-height: 1.25; text-align: left;
  padding: 0 !important; white-space: nowrap;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
.paper-a4 .zn-mk-lbl.leaflet-tooltip { font-size: 5.5pt; }
.zn-mk-lbl .mk-nm { color: #b91c1c; font-weight: 800; }
.zn-mk-lbl .mk-mg { color: #1d4ed8; }
.zn-mk-lbl.leaflet-tooltip:before { display: none !important; }
/* right legend column */
.zn-side {
  width: 76mm; flex-shrink: 0; border-left: 1.5px solid #111;
  display: flex; flex-direction: column; padding: 5mm 5mm 4mm;
  min-width: 0; min-height: 0; overflow: hidden;
}
.paper-a4 .zn-side { width: 56mm; padding: 4mm; }
.zn-logo { text-align: center; margin-bottom: 4mm; }
.zn-logo img { max-width: 36mm; max-height: 36mm; object-fit: contain;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.4)); }
.paper-a4 .zn-logo img { max-width: 26mm; max-height: 26mm; }
.zn-summary { font-size: 9.5pt; color: #111; margin-bottom: 3mm; line-height: 1.35;
  border-bottom: 1px solid #ccc; padding-bottom: 2mm; }
.paper-a4 .zn-summary { font-size: 7.5pt; margin-bottom: 2mm; }
.zn-leg-row { display: flex; align-items: center; gap: 3mm; font-size: 10pt; margin-bottom: 3mm; }
.paper-a4 .zn-leg-row { font-size: 8pt; gap: 2mm; margin-bottom: 2mm; }
.zn-blk-sym { width: 13mm; height: 7mm; border: 2px solid #ef4444; background: transparent; flex-shrink: 0; }
.paper-a4 .zn-blk-sym { width: 10mm; height: 5.5mm; }
.zn-par-sym { width: 13mm; height: 7mm; border: 1px solid #d4a017; background: rgba(253,230,138,.35); flex-shrink: 0; }
.paper-a4 .zn-par-sym { width: 10mm; height: 5.5mm; }
.zn-mk-sym { width: 13mm; height: 7mm; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.zn-mk-sym::before { content: ''; width: 4mm; height: 4mm; border-radius: 50%;
  background: #fff200; border: 2px solid #b91c1c; }
.paper-a4 .zn-mk-sym { width: 10mm; height: 5.5mm; }
.zn-bnd-sym { width: 13mm; height: 7mm; flex-shrink: 0; display: flex; align-items: center; }
.zn-bnd-sym::before { content: ''; width: 100%; height: 3.4px;
  background: repeating-linear-gradient(90deg, #d0009c 0 5px, transparent 5px 8px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.paper-a4 .zn-bnd-sym { width: 10mm; height: 5.5mm; }
.zn-leg-hd { font-size: 11pt; font-weight: 700; margin: 1mm 0 3mm; }
.paper-a4 .zn-leg-hd { font-size: 8.5pt; margin: 1mm 0 2mm; }
.zn-zone-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--zone-rows, 1), minmax(0, auto));
  grid-template-columns: repeat(var(--zone-cols, 1), minmax(0, 1fr));
  gap: 1.5mm 2mm;
  min-width: 0;
}
.paper-a4 .zn-zone-grid { gap: 1mm 1.4mm; }
.zn-zone-item { display: flex; align-items: center; min-width: 0; gap: 1.5mm; font-size: 9pt; line-height: 1.1; }
.zn-zone-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paper-a4 .zn-zone-item { font-size: 7.2pt; gap: 1mm; }
.zn-zone-sw { width: 11mm; height: 5.5mm; border: 1px solid #555; flex-shrink: 0; }
.paper-a4 .zn-zone-sw { width: 8mm; height: 4.5mm; }
.zn-paper.zn-dense .zn-logo { margin-bottom: 2mm; }
.zn-paper.zn-dense .zn-logo img { max-width: 24mm; max-height: 24mm; }
.zn-paper.zn-dense .zn-summary { margin-bottom: 1.5mm; padding-bottom: 1mm; }
.zn-paper.zn-dense .zn-leg-row { margin-bottom: 1.5mm; font-size: 8.5pt; }
.zn-paper.zn-dense .zn-leg-hd { margin: .5mm 0 1.5mm; font-size: 9pt; }
.zn-paper.zn-dense .zn-zone-grid { gap: .9mm 1.4mm; }
.zn-paper.zn-dense .zn-zone-item { font-size: 7.5pt; gap: .8mm; }
.zn-paper.zn-dense .zn-zone-sw { width: 7mm; height: 3.8mm; }
.zn-paper.zn-dense .zn-sat { margin: 2mm 0 1mm; font-size: 8pt; }
.zn-paper.zn-ultra .zn-logo { display: none; }
.zn-paper.zn-ultra .zn-summary { font-size: 7pt; margin-bottom: 1mm; padding-bottom: .7mm; }
.zn-paper.zn-ultra .zn-leg-row { margin-bottom: .8mm; font-size: 7pt; gap: 1mm; }
.zn-paper.zn-ultra .zn-leg-hd { margin: .3mm 0 .8mm; font-size: 7.5pt; }
.zn-paper.zn-ultra .zn-zone-grid { gap: .45mm 1mm; }
.zn-paper.zn-ultra .zn-zone-item { font-size: 6pt; gap: .6mm; }
.zn-paper.zn-ultra .zn-zone-sw { width: 5mm; height: 2.7mm; }
.zn-paper.zn-ultra .zn-sat { margin: 1mm 0 .5mm; font-size: 7pt; }
.zn-paper.zn-ultra .zn-crs { font-size: 5.5pt; margin-top: 1mm; }
.zn-paper.zn-ultra .zn-foot { font-size: 7pt; margin-top: 1mm; padding-top: 1mm; }
.zn-zone-more { grid-column: 1 / -1; font-size: 7pt; color: #555; line-height: 1.2; }
.paper-a4 .zn-zone-more { font-size: 5.8pt; }
.zn-sat { font-size: 10pt; margin: 4mm 0 2mm; }
.paper-a4 .zn-sat { font-size: 8pt; margin: 3mm 0 1mm; }
.zn-scalewrap { margin-top: auto; }
.zn-crs { font-size: 8pt; color: #111; margin-top: 2.5mm; line-height: 1.35; }
.paper-a4 .zn-crs { font-size: 6.5pt; margin-top: 2mm; }
.zn-foot { text-align: center; font-size: 10pt; font-weight: 600; margin-top: 3mm;
  border-top: 1px solid #111; padding-top: 2mm; line-height: 1.3; }
.paper-a4 .zn-foot { font-size: 8pt; }

/* ===== PRINT ===== */
@media print {
  html, body { width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; background: white !important; }
  #ctrl, #preview-bar, #ctrl-toggle, #ctrl-backdrop { display: none !important; }
  #preview-wrap { background: white !important; padding: 0 !important; overflow: visible !important; align-items: flex-start !important; }
  #pages-container { display: block !important; gap: 0; }
  .tm-paper {
    zoom: 1 !important;
    margin: 0 auto !important;
    box-shadow: inset 0 0 0 1px #333 !important;
    border: 1px solid #333 !important;
    page-break-after: always;
    page-break-inside: avoid;
  }
  /* ขอบปลอดภัยจริงประมาณ 9 มม. และจัดกึ่งกลาง กัน Chrome/ไดรเวอร์ปัดเศษจนตัดกรอบ */
  .tm-paper.paper-a3 { width: 402mm !important; height: 279mm !important; }
  .tm-paper.paper-a4 { width: 279mm !important; height: 192mm !important; }
  .tm-paper:last-child { page-break-after: auto; }
}
@page { margin: 8mm; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }

/* Status badge */
#gen-status { font-size: 11px; color: #94a3b8; }

/* Back link */
.back-link {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: #475569; text-decoration: none; padding: 2px 0;
}
.back-link:hover { color: #94a3b8; }

[hidden]{display:none!important}.survey-layer-row{display:grid;grid-template-columns:70px minmax(0,1fr);gap:5px;margin:5px 0}.survey-layer-row .lcnt{grid-column:2}.survey-layer-row select{width:100%;min-width:0}#survey-pt7-status{font-size:12px;overflow-wrap:anywhere}#survey-pt7-gate{padding:20px;color:#164655}#ctrl .ci{font-family:Tahoma,Arial,sans-serif}#ctrl-body{padding-bottom:16px}#ctrl-head{background:#174b50}#preview-bar{background:#eaf2f3;color:#244b50}#ctrl .btn-g{background:#087d88}#ctrl .sect{border-radius:6px}@media(max-width:700px){#ctrl .ci{font-size:16px;min-height:40px}#ctrl button{min-height:40px}}@media print{#survey-pt7-gate{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

#survey-pt7-app{width:100%;min-width:0}#preview-wrap{min-width:0}.survey-layer-row{font-size:12px;align-items:center}#preview-bar button{flex-shrink:0}#preview-bar{color:#233d48;background:#eaf2f3}#preview-bar .nav-info{color:#233d48}@media print{#app{display:block!important;height:auto!important;overflow:visible!important}#survey-pt7-app{height:auto!important;overflow:visible!important}}

#preview-bar{background:#1b4850;color:#fff;padding:6px;border-radius:4px}#preview-bar #nav-lbl{color:#fff!important}#preview-bar .btn-gr{background:#ffffff20;color:#fff;border-color:#ffffff55}