:root{
  --bg:#0a0f0c; --panel:#131f1a; --panel-2:#0f1a16; --line:#22332b;
  --ink:#eaf1ec; --muted:#8ea89a;
  --owners:#b000e8; --permits:#2979ff; --violations:#ff1744; --baskets:#ffea00;
  --search:#d500f9;
  --radius:14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Cairo',sans-serif;height:100%;overflow:hidden;}

#mapwrap{position:fixed;inset:0;overflow:hidden;display:grid;place-items:center;background:#050807;touch-action:none;cursor:default;}
#mapwrap.is-zoomed{cursor:grab;}
#mapwrap.is-panning{cursor:grabbing;}
#stage{position:relative;width:min(100vw,calc(100vh * var(--stage-ratio, 1797 / 1440)));aspect-ratio:var(--stage-ratio, 1797 / 1440);}
#stage img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none;}
#layer{position:absolute;inset:0;pointer-events:none;}

.dot{
  position:absolute;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:3px;
  border:2px solid rgba(5,8,7,.9);cursor:pointer;pointer-events:auto;
  box-shadow:0 0 0 2px rgba(0,0,0,.25);transition:transform .15s ease,box-shadow .15s ease;
}
.dot::after{
  content:attr(data-unit);position:absolute;right:50%;bottom:calc(100% + 7px);
  transform:translateX(50%) translateY(3px);padding:3px 7px;border:1px solid currentColor;
  border-radius:5px;background:rgba(10,15,12,.95);color:var(--ink);font:700 11px 'JetBrains Mono',monospace;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;
}
.dot:hover{transform:translate(-50%,-50%) scale(1.35);z-index:5;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 35%,transparent);}
.dot:hover::after{opacity:1;transform:translateX(50%) translateY(0);}
.villa{
  position:absolute;
  pointer-events:auto;
  overflow:visible;
  cursor:pointer;
}
.villa .shape{
  fill:color-mix(in srgb, currentColor 38%, transparent);
  stroke:color-mix(in srgb, currentColor 62%, #000 38%);
  stroke-width:2.4;
  vector-effect:non-scaling-stroke;
}
.villa:hover .shape{
  fill:color-mix(in srgb, currentColor 52%, transparent);
  stroke-width:3.2;
  filter:drop-shadow(0 0 7px color-mix(in srgb, currentColor 75%, transparent));
}
.villa.search-temp .shape{
  fill:color-mix(in srgb, var(--search) 30%, transparent);
  stroke:var(--search);
  stroke-width:2.6;
  animation:villa-search-pulse 1.25s ease-in-out infinite;
}
@keyframes villa-search-pulse{
  0%,100%{opacity:.55;filter:drop-shadow(0 0 1px color-mix(in srgb, var(--search) 35%, transparent));}
  50%{opacity:1;filter:drop-shadow(0 0 7px color-mix(in srgb, var(--search) 75%, transparent));}
}
#stage{transition:transform .15s ease;will-change:transform;}
#zoomControls{
  position:fixed;top:0.5px;left:50%;z-index:30;width:auto;padding:6px 6px;
  display:flex;flex-direction:row;align-items:center;gap:7px;background:transparent;
  transform:translateX(-50%);
  border:0;border-radius:14px;box-shadow:none;opacity:1;
}
#zoomControls button{width:28px;height:28px;border:.5px solid rgba(15,23,42,.12);border-radius:7px;background:rgba(255,255,255,.78);color:#17202a;font-size:19px;line-height:1;cursor:pointer;}
#zoomControls button:hover{border-color:var(--ink);}
#zoomRange{height:18px;width:128px;direction:ltr;accent-color:var(--search);cursor:pointer;}

/* زرار القايمة العائم */
@keyframes menuPulse{
  0%,100%{transform:scale(1);opacity:0;}
  45%{opacity:.65;}
  70%{transform:scale(1.32);opacity:0;}
}
#menuBtn{
  position:fixed;top:16px;left:16px;z-index:30;
  width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid #d8dee8;
  color:#17202a;font-size:20px;cursor:pointer;box-shadow:0 5px 16px rgba(15,23,42,.18);
  isolation:isolate;
  transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
#menuBtn::after{
  content:"";position:absolute;inset:-3px;border:2px solid #94a3b8;border-radius:50%;
  pointer-events:none;z-index:-1;animation:menuPulse 2.8s ease-out infinite;
}
#menuBtn:hover{background:#eef2f7;border-color:#94a3b8;box-shadow:0 7px 20px rgba(15,23,42,.24);transform:translateY(-1px);}
@media (prefers-reduced-motion:reduce){#menuBtn{animation:none;}}

#statusPill{
  position:fixed;top:16px;right:16px;z-index:30;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 16px;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);display:none !important;align-items:center;gap:8px;
}
#statusPill .dot2{width:8px;height:8px;border-radius:50%;background:var(--muted);}
#statusPill.ok .dot2{background:var(--owners);}
#statusPill.err .dot2{background:var(--violations);}

/* اللوحة الجانبية العائمة */
#panel{
  position:fixed;top:0;bottom:0;left:0;width:300px;
  --panel:#ffffff;--panel-2:#eef2f7;--line:#d8dee8;--ink:#17202a;--muted:#64748b;
  background:#f5f7fb;backdrop-filter:blur(6px);border-left:1px solid var(--line);
  z-index:25;transform:translateX(-100%);transition:transform .22s ease;
  display:flex;flex-direction:column;box-shadow:10px 0 30px rgba(0,0,0,.16);color:var(--ink);
}
#panel.open{transform:translateX(0);}
.panelHead{padding:16px;border-bottom:1px solid var(--line);}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;}
.panelHead h2{margin:4px 0 0;font-size:16px;}

.searchBox{margin:14px 12px 10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 3px 10px rgba(15,23,42,.06);}
.searchTitle{margin-bottom:10px;color:var(--ink);font-size:13px;font-weight:800;text-align:right;}
.searchRow{display:flex;align-items:stretch;gap:7px;direction:rtl;}
.searchBox input{
  min-width:0;flex:1;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  padding:9px 10px;color:var(--ink);font-family:'Cairo',sans-serif;font-size:13px;text-align:center;outline:none;
}
.searchBox input:focus{border-color:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.18);}
.searchRow button{border:0;border-radius:8px;padding:0 14px;background:#17202a;color:#fff;font-family:'Cairo',sans-serif;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .2s ease,transform .15s ease;}
.searchRow button:hover{background:#334155;}
.searchRow button:active{transform:translateY(1px);}

.layers{padding:10px 12px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;flex:1;}
.layerBtn{
  display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);cursor:pointer;font-size:13.5px;font-weight:700;
}
.layerBtn:hover{background:color-mix(in srgb,var(--layer-color) 12%,#f5f7fb);border-color:var(--layer-color);}
.layerBtn.active{background:color-mix(in srgb,var(--layer-color) 10%,#f5f7fb);border-color:var(--layer-color);box-shadow:0 0 0 1px var(--layer-color) inset;}
.swatch{width:12px;height:12px;border-radius:50%;background:var(--layer-color);box-shadow:0 0 8px var(--layer-color);flex-shrink:0;}
.layerBtn .count{margin-right:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);}
.layerBtn[data-l="owners"]{--layer-color:var(--owners);}
.layerBtn[data-l="permits"]{--layer-color:var(--permits);}
.layerBtn[data-l="violations"]{--layer-color:var(--violations);}
.layerBtn[data-l="baskets"]{--layer-color:var(--baskets);}
.clearBtn{
  margin:6px 12px 14px;padding:10px 12px;border-radius:10px;background:#fff;
  border:1px solid #d8dee8;color:#64748b;font-family:'Cairo',sans-serif;font-size:12.5px;
  font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease,box-shadow .2s ease;
}
.clearBtn::before{content:"×";font-size:18px;font-weight:400;line-height:12px;}
.clearBtn:hover{background:#eef2f7;color:#17202a;border-color:#94a3b8;box-shadow:0 3px 10px rgba(15,23,42,.08);}
.clearBtn:active{transform:translateY(1px);}

/* بوب أب بيانات الوحدة */
#popup{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 22px;
  min-width:260px;max-width:90vw;z-index:40;box-shadow:0 20px 50px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transition:.2s;
}
#popup.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
#popup .pu-id{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;}
#popup .pu-layer{font-size:11px;color:var(--muted);margin-top:2px;}
#popup .pu-fields{margin-top:10px;display:flex;flex-direction:column;gap:5px;}
#popup .pu-field{display:flex;justify-content:space-between;gap:16px;font-size:13px;}
#popup .pu-field .k{color:var(--muted);}
#popup .pu-close{position:absolute;top:10px;left:12px;background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;}
#popup .pu-empty{color:var(--muted);font-size:12.5px;margin-top:8px;}