* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

#map {
  height: 100vh;
  width: 100%;        /* flex child fills remaining space */
  position: relative;
}

/* ── Table inside panel ── */
#tableDiv {
  padding: 0 0 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  position: static;  /* was absolute — that was breaking layout */
}

table th {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888;
  padding: 8px 12px;
  background: #f5f2ec;
  border-bottom: 1px solid #e0ddd6;
  text-align: left;
  font-weight: 500;
}

table td {
  padding: 8px 12px;
  border-bottom: 1px solid #e0ddd6;
  color: #0d0d0d;
}

table, th, td {
  border: none;      /* remove the old black borders */
}

tr:hover td {
  background-color: #f5f2ec;
  cursor: pointer;
}

/* ── Legend ── */
.leaflet-control.legend {
  background: white;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #e0ddd6;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  line-height: 2;
  color: #0d0d0d;
  box-shadow: none;
  max-width: 200px;
}

.leaflet-control.legend strong {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 4px;
}

@media screen and (max-height: 450px) {
  .panel { min-width: 280px; }
}