*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Arial, Helvetica, sans-serif}
:root{--vh:100vh;--brand:#0b5fff}
#app{position:relative;height:calc(var(--vh, 100vh));display:flex;flex-direction:row}

#mobileHeader{display:none;position:fixed;top:0;left:0;right:0;height:48px;background:var(--brand);color:#fff;z-index:1001;align-items:center;padding:0 12px;font-weight:600}
#mobileHeader .brand{margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mobileHeader #menuToggle{appearance:none;background:transparent;border:none;color:#fff;font-size:22px;cursor:pointer}

#sidebar{width:380px;max-width:95vw;padding:16px;border-right:1px solid #e5e7eb;background:#fff;overflow:auto;z-index:1000}
#sidebar h1{font-size:1.18rem;margin:0 0 10px 0;line-height:1.22;font-weight:700}
#sidebar h2{font-size:0.95rem;margin:12px 0 4px 0;color:#34495e;font-weight:600;letter-spacing:.2px}
#sidebar select,#sidebar input[type="search"]{width:100%;padding:10px;margin-top:6px;border:1px solid #d1d5db;border-radius:6px}
.inline-row{display:flex;align-items:center;gap:.5rem;margin-top:.35rem}
.legend{display:flex;gap:10px;flex-wrap:wrap;margin:.5rem 0 .25rem}
.legend img{width:12px;height:20px;vertical-align:middle;margin-right:4px}
.results{margin-top:6px;border:1px solid #e5e7eb;border-radius:6px;max-height:240px;overflow:auto}
.results button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:#fff;cursor:pointer;border-bottom:1px solid #f0f0f0}
.results button:hover{background:#f8fafc}
.results button:last-child{border-bottom:0}
.hint{font-size:.85rem;color:#555}

#map{flex:1;min-width:0;height:calc(var(--vh, 100vh));min-height:100vh}
.leaflet-popup-content{max-width:min(86vw,520px)}
.leaflet-popup-content h3{margin:.2rem 0 .3rem;font-size:1.05rem}
.leaflet-popup-content div{margin:.15rem 0}
.btn{display:inline-block;padding:8px 12px;border-radius:8px;background:var(--brand);color:#fff !important;text-decoration:none;font-weight:600;border:1px solid #0848c9}
.btn:hover{filter:brightness(.95)}

.floating{position:absolute;right:14px;bottom:14px;z-index:1100;border:0;border-radius:999px;padding:12px 16px;background:var(--brand);color:#fff;font-weight:600;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.18)}

@media (max-width: 820px){
  #mobileHeader{display:flex}
  #app{height:calc(var(--vh, 100vh));padding-top:48px}
  #sidebar{
    position:fixed;top:48px;bottom:0;left:0;width:min(92vw,420px);
    transform:translateX(-100%);transition:transform .25s ease;border-right:1px solid #e5e7eb;
    box-shadow:0 2px 14px rgba(0,0,0,.12)
  }
  #sidebar.open{transform:translateX(0)}
  #sidebar select,#sidebar input{font-size:16px}
}


/* --- Overrides to ensure grid layout and sidebar toggle --- */

/* Force grid when .layout is present on #app */
#app.layout { display: grid !important; grid-template-columns: var(--sidebar-width) 1fr; grid-template-rows:100%; width:100%; }
/* Hide sidebar only (desktop) */
body.sidebar-hidden #sidebar { display: none !important; }
body.sidebar-hidden #app.layout { grid-template-columns: 0 1fr !important; }
/* Ensure map fills remaining space */
#map { width: 100%; height: 100%; }
/* Mobile keeps overlay behaviour; this rule does not fight your existing mobile CSS */
@media (max-width: 900px) {
  #app.layout { grid-template-columns: 1fr !important; }
}