:root{--bg:#0b1220;--panel:#0f172a;--muted:#8b95a7;--brand:#f59e0b;--border:#1f2937}
html, body {height:100%; margin:0; background:var(--bg);} 
#app {height:calc(100vh - var(--wp-admin--admin-bar--height,0px)); display:grid; grid-template-rows:56px 1fr; color:#e5e7eb;}
.map-header{display:flex; align-items:center; gap:10px; padding:0 14px; background:#0f172a; box-shadow:0 1px 0 #101826}
.map-header .logo{font-weight:700}
.map-header .actions{margin-left:auto; display:flex; gap:10px}
.btn{background:#131c2b; color:#e5e7eb; border:1px solid var(--border); padding:6px 10px; border-radius:10px; cursor:pointer}
#shell{position:relative}
#map{height:100%; z-index:0}

.legend, .searchbar, .panel, .bottombar, .saved-pill{position:absolute; z-index:1000; pointer-events:auto}
.legend{left:12px; top:50%; background:#0e1626; border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.25); padding:8px 10px; font:12px system-ui}
.legend .item{display:flex; align-items:center; gap:8px; margin:4px 0}
.legend .swatch{width:16px; height:12px; border:1px solid #0b0e14}
.legend .swatch.odt{background:#fbb6ce}
.legend .swatch.dgt{background:#a7f3d0}
.legend .swatch.cx{background:#fde68a}
.legend .swatch.cln{background:#fecaca}
.legend .legend-hint{opacity:.7; margin-top:6px}
.legend input[type=file]{display:none}

.searchbar{left:50%; transform:translateX(-50%); display:flex; gap:8px; background:#0e1626; border:1px solid var(--border); border-radius:12px; padding:6px 8px; box-shadow:0 8px 24px rgba(0,0,0,.25)}
.searchbar input{background:#0b1220; border:1px solid #223047; color:#e5e7eb; padding:6px 8px; border-radius:8px; width:120px}

.bottombar{left:50%; transform:translateX(-50%); bottom:14px; display:flex; gap:8px; background:#0e1626; border:1px solid var(--border); border-radius:12px; padding:6px 8px; box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toggle{padding:6px 10px; border:1px solid #223047; background:#0b1220; color:#e5e7eb; border-radius:8px; cursor:pointer; font-size:12px}
.toggle.active{border-color:#f59e0b; box-shadow:0 0 0 1px #f59e0b inset}

.panel{right:12px; top:72px; width:380px; max-width:92vw; background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:0 8px 28px rgba(0,0,0,.35); overflow:hidden}
.panel header{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:#0e1626}
.panel .body{padding:12px; max-height:60vh; overflow:auto}
.row{display:flex; justify-content:space-between; gap:12px; margin:6px 0; font-size:13px}
.row span:first-child{color:#9aa4b5}
.badges{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0}
.badge{font-size:11px; border:1px solid #2b3447; background:#121a2b; padding:3px 6px; border-radius:8px}

.edge-label{background:#0b1220; color:#e5e7eb; border:1px solid #223047; padding:2px 4px; border-radius:6px; font-size:11px}
.saved-pill{right:12px; bottom:14px; background:#0e1626; border:1px solid var(--border); border-radius:12px; padding:6px 10px; font-size:12px}
button, input { pointer-events:auto }

/* Đặt header/map UI nổi cao hơn mọi thứ của theme */
.map-header { position: relative; z-index: 5000; }
.legend, .searchbar, .panel, .bottombar, .saved-pill { z-index: 4800; }

/* Bản đồ luôn phía dưới các UI nổi */
#map, .leaflet-container { z-index: 0; }

/* Nếu theme có search/overlay/mega-menu đang nằm phủ — vô hiệu bắt click */
.site-search, .header-overlay, .menu-overlay, .drawer, .offcanvas {
  pointer-events: none;
}
.site-search * { pointer-events: auto; } /* cho phép click bên trong ô tìm kiếm của theme */

/* Không kill hành vi button/input */
button, input { pointer-events: auto; }
/* Đảm bảo thanh công cụ đo luôn nổi và click được */
.leaflet-pm-toolbar, .leaflet-pm-draw, .leaflet-pm-toolbar .button-active,
.leaflet-control-measure, .leaflet-control-container {
  z-index: 4800 !important;
}
#clearMeasure { display: none; } /* ẩn nút xóa đo đạc ban đầu */
#measureBtn.active + #clearMeasure { display: inline-block; } /* hiện nút xóa đo khi đo đạc đang hoạt động */ 

/* ======= Theme ======= */
:root{
  --bg:#0b1220;
  --surface:#0f172a;
  --surface-2:#111a2e;
  --border:#1f2937;
  --text:#e5e7eb;
  --muted:#9aa4b5;
  --brand:#f59e0b;
  --good:#22c55e;
  --danger:#ef4444;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

html,body{height:100%}
body{background:var(--bg); color:var(--text);}

/* ======= Layout ======= */
.map-app{height:100vh; display:grid; grid-template-rows:64px 1fr; overflow:hidden;}
.map-header{
  position:sticky; top:0; z-index:1001;
  display:flex; align-items:center; gap:14px;
  padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 #0b1220;
}
.logo{font-weight:700; letter-spacing:.3px; color:var(--text); text-decoration:none}
.actions{margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap}

.map-shell{position:relative; height:100%}
.map-canvas{height:100%;}

/* ======= Controls ======= */
.btn, .input, .toggle{
  height:36px; display:inline-flex; align-items:center; gap:8px;
  padding:0 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font:500 14px/1 system-ui,Segoe UI,Roboto,Arial;
  cursor:pointer; transition:.2s ease;
}
.btn:hover, .toggle:hover{border-color:#2c3a52; transform:translateY(-1px)}
.btn:active, .toggle:active{transform:translateY(0)}
.btn-icon{width:36px; padding:0; justify-content:center}

.input{min-width:200px; outline:none}
.input:focus{box-shadow:0 0 0 2px #1f2a3f, 0 0 0 1px var(--brand) inset; border-color:var(--brand)}
.input.sm{width:88px}

.toggle{background:#0d1527}
.toggle.active{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand) inset}

/* ======= Legend ======= */
.legend{
  position:absolute; left:12px; top:50%; z-index:900;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow); padding:10px 12px; width:210px;
}
.legend-list{margin:0 0 6px; padding:0; list-style:none}
.legend .item{display:flex; align-items:center; gap:8px; padding:4px 0; font-size:13px; color:var(--muted)}
.legend .swatch{width:16px; height:12px; border-radius:3px; border:1px solid #0b0e14}
.legend .odt{background:#fbb6ce}
.legend .dgt{background:#a7f3d0}
.legend .cx {background:#fde68a}
.legend .cln{background:#fecaca}
.legend .legend-hint{margin:8px 0 0; font-size:12px; color:#93a0b3; opacity:.85}

/* ======= Top search (tờ/thửa) ======= */
.searchbar{
  position:absolute; left:50%; transform:translateX(-50%); top:50%; z-index:900;
  display:flex; gap:8px; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:8px; box-shadow:var(--shadow);
}

/* ======= Bottom toggles ======= */
.bottombar{
  position:absolute; left:50%; transform:translateX(-50%); bottom:16px; z-index:900;
  display:flex; gap:10px; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:8px; box-shadow:var(--shadow);
}

/* ======= Info panel ======= */
.panel{
  position:absolute; right:12px; top:50%; z-index:900;
  width:380px; max-width:92vw;
  background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  overflow:hidden;
}
.panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background:#0d1527; border-bottom:1px solid var(--border);
}
.panel .body{padding:12px; max-height:64vh; overflow:auto}
.badges{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0}
.badge{font-size:12px; border:1px solid #2b3447; background:#121a2b; padding:4px 8px; border-radius:8px; color:#cdd6e3}

/* ======= Pills / labels ======= */
.saved-pill{
  position:absolute; right:12px; bottom:16px; z-index:900;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:6px 10px; font-size:13px; box-shadow:var(--shadow); color:#cbd5e1;
}
.edge-label{
  background:#0b1220; border:1px solid #223047; color:#e5e7eb;
  font-size:11px; padding:2px 4px; border-radius:6px;
}

/* ======= Map helpers ======= */
.leaflet-popup-content{color:#e8eef9}
.leaflet-control-attribution{background:rgba(0,0,0,.35); color:#cbd5e1; border-radius:8px; padding:2px 6px}
.leaflet-control-zoom a{background:#0d1527; border:1px solid var(--border); color:#e5e7eb}
.leaflet-control-zoom a:hover{border-color:#2c3a52}

/* ======= Responsive ======= */
@media (max-width: 1200px){
  .actions{gap:8px}
  .input{min-width:160px}
}
@media (max-width: 900px){
  .map-header{row-gap:8px}
  .actions{width:100%; order:2}
  .logo{order:1}
  .legend{top:92px}
  .searchbar{top:144px}
  .panel{top:144px; width:min(92vw,380px)}
}
@media (max-width: 680px){
  .actions{gap:6px}
  .input{min-width:140px}
  .bottombar{left:12px; transform:none}
}
/* ===== Modal MĐXD ===== */
.mdxd-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:grid; place-items:center; z-index:1100;
}
.mdxd-card{
  width:min(860px, 92vw); background:var(--surface); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow); overflow:hidden;
}
.mdxd-head{display:flex; align-items:center; justify-content:space-between; padding:12px; background:#0d1527; border-bottom:1px solid var(--border)}
.mdxd-body{padding:14px}
.mdxd-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.mdxd-grid label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted)}
.mdxd-actions{display:flex; gap:10px; margin:12px 0}
.mdxd-results{margin-top:10px; background:#0e1626; border:1px solid var(--border); border-radius:12px; padding:12px}
.mdxd-results .row{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed #223047}
.mdxd-results .row:last-child{border-bottom:0}
.mdxd-results b{color:#fff}
@media (max-width:720px){ .mdxd-grid{grid-template-columns:1fr} }

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.modal-content {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  width: 300px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  animation: fadeIn 0.3s ease;
}
.modal-content h3 {
  margin-top: 0;
  font-size: 16px;
}
.modal-content input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin: 10px 0;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.modal-actions button {
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}
#addrOk { background: #4CAF50; color: white; }
#addrCancel { background: #f44336; color: white; }
#hoverTip{
  position:absolute; pointer-events:none; z-index:1200;
  background:#0f172a; border:1px solid #1f2937; color:#e5e7eb;
  padding:6px 8px; border-radius:8px; font:12px system-ui;
  box-shadow:0 8px 24px rgba(0,0,0,.35); display:none; max-width:320px;
}
#addrSuggest{
  position:absolute; z-index:1200; display:none;
  background:#0f172a; border:1px solid #1f2937; border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.35); padding:6px; max-height:50vh; overflow:auto;
}
#addrSuggest .addr-item{ padding:8px 10px; border-radius:8px; cursor:pointer; }
#addrSuggest .addr-item:hover,
#addrSuggest .addr-item.active{ background:#111b33; }
#addrSuggest .addr-item .title{ color:#e5e7eb; font-size:13px; line-height:1.3; }