.map-body{overflow:hidden;height:100vh}

.map-layout{
  position:fixed;top:70px;left:0;right:0;bottom:0;
  display:grid;grid-template-columns:340px 1fr;
}

.map-sidebar{
  background:var(--bg-2);border-right:1px solid var(--border);
  overflow-y:auto;padding:24px;
  scrollbar-width:thin;scrollbar-color:var(--accent) transparent;
}
.map-sidebar::-webkit-scrollbar{width:6px}
.map-sidebar::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}

.sidebar-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.sidebar-head h2{font-family:'Orbitron',sans-serif;font-size:1.3rem}
.count-badge{
  background:var(--accent);color:#000;padding:4px 12px;
  border-radius:20px;font-weight:700;font-size:.85rem;
}

.sidebar-search input{
  width:100%;background:var(--surface-solid);border:1px solid var(--border);
  color:var(--text);padding:12px 16px;border-radius:10px;
  font-family:inherit;outline:none;transition:.3s;margin-bottom:24px;
}
.sidebar-search input:focus{border-color:var(--accent)}

.sidebar-filters h3{
  font-family:'Orbitron',sans-serif;font-size:.75rem;letter-spacing:2px;
  color:var(--muted);text-transform:uppercase;margin-bottom:10px;
}
.filter-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.filter-chips .chip{padding:6px 14px;font-size:.8rem}

.sidebar-list{margin-top:14px}
.sidebar-item{
  display:flex;gap:12px;padding:12px;margin-bottom:8px;
  background:var(--surface-solid);border:1px solid var(--border);
  border-radius:12px;cursor:pointer;transition:.25s;
}
.sidebar-item:hover{border-color:var(--accent);transform:translateX(4px)}
.sidebar-item img{width:60px;height:60px;border-radius:8px;object-fit:cover;flex-shrink:0}
.sidebar-item-info{flex:1;min-width:0}
.sidebar-item-info h4{font-size:.95rem;margin-bottom:4px;font-weight:600}
.sidebar-item-info small{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:1px}
.sidebar-item-info p{font-size:.8rem;color:var(--muted);margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

.map-wrap {
  position: relative;
  height: 100%;
  overflow: hidden;
}

#map{position:absolute;inset:0;background:#111}

.map-fullscreen,.sidebar-toggle{
  position:absolute;top:14px;z-index:500;
  width:42px;height:42px;display:grid;place-items:center;
  background:var(--surface-solid);border:1px solid var(--border);
  border-radius:10px;color:var(--text);cursor:pointer;transition:.25s;
}
.map-fullscreen{right:14px}
.map-fullscreen:hover{border-color:var(--accent);color:var(--accent)}
.sidebar-toggle{left:14px;width:auto;padding:0 16px;display:none;font-weight:600;font-size:.85rem}

/* Leaflet overrides */
.leaflet-container{background:#0a0b10 !important;font-family:inherit}
.leaflet-popup-content-wrapper{
  background:var(--surface-solid) !important;color:var(--text) !important;
  border-radius:14px !important;border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.leaflet-popup-tip{background:var(--surface-solid) !important}
.leaflet-popup-content{margin:0 !important;width:240px !important}
.popup-card img{width:100%;height:130px;object-fit:cover;border-radius:14px 14px 0 0}
.popup-card-body{padding:14px}
.popup-card-body h4{font-family:'Orbitron',sans-serif;margin-bottom:6px;font-size:1rem}
.popup-card-body small{color:var(--cyan);text-transform:uppercase;letter-spacing:1.5px;font-size:.7rem}
.popup-card-body p{color:var(--muted);font-size:.85rem;margin:8px 0}
.popup-card-body a{
  display:inline-block;margin-top:6px;color:var(--accent);font-weight:600;font-size:.85rem;
}

/* Custom marker */
.fpv-marker{
  width:36px;height:36px;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  display:grid;place-items:center;color:#000;font-weight:900;
  box-shadow:0 4px 12px rgba(0,0,0,.5),0 0 20px rgba(255,138,0,.5);
  border:2px solid #000;
}
.fpv-marker span{transform:rotate(45deg);font-size:.9rem}

.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{
  background:rgba(255,138,0,.25) !important;
}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{
  background:linear-gradient(135deg,var(--accent),var(--accent-2)) !important;
  color:#000 !important;font-family:'Orbitron',sans-serif !important;font-weight:900 !important;
  box-shadow:0 0 20px rgba(255,138,0,.4);
}
