/* --- Reset-ish / base --- */
* { box-sizing: border-box; }
html, body { height: 100%; }
:root {
  --pad: 12px;
  --radius: 12px;
  --maxw: 1200px;
  --bg: #f7fff7;
  --fg: #3f3f3f;
  --line: #e6e6e6;
  --btn: #2e7d32;
  --btn-accent: #1565c0;
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.4;
  color: var(--fg);
  background: var(--bg);
}

/* --- Header / footer --- */
.page-header, .page-footer { text-align: center; padding: 8px 16px; }
.page-footer p { margin: 12px 0; color: #666; }
h1 { margin: 12px 0; font-size: clamp(1.1rem, 2.5vw + 0.6rem, 1.6rem); }

/* --- Layout: mobile first = single column --- */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad) var(--pad);
}

/* --- Map: fill available viewport on phones --- */
#map {
  width: 100%;
  height: calc(100dvh - 160px); /* room for header/footer on small screens */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* --- Leaflet search control: better touch targets --- */
.leaflet-control-search {
  max-width: min(90vw, 320px);
  font-size: 16px; /* avoid iOS zoom-on-focus */
}
.leaflet-control-search .search-input {
  padding: 8px 10px;
  border-radius: 8px;
}
.leaflet-control-search .search-button {
  width: 36px;
  height: 36px;
  background: url('images/searchIcon.png') no-repeat 50% 50% #fff !important;
  background-size: 18px 18px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

/* --- Panel (details) --- */
#add-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  overflow: clip;
}
#add-panel > summary {
  list-style: none;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}
#add-panel[open] > summary { border-bottom: 1px solid var(--line); }

#add-form {
  display: grid;
  gap: 10px;
  padding: 12px 16px 16px;
}
#add-form label { display: flex; flex-direction: column; gap: 6px; font-size: .95rem; }
#add-form input[type="text"],
#add-form input[type="number"] {
  width: 100%;
  font-size: 16px;             /* iOS-friendly */
  padding: 12px 14px;
  border: 1px solid #cfd8dc;
  border-radius: 10px;
  background: #fff;
}
#add-form .inline { flex-direction: row; align-items: center; gap: 8px; }

.button-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#add-form button {
  flex: 1 1 48%;
  min-height: 44px;            /* thumb-sized */
  font-size: 16px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
#save-btn { background: var(--btn); color: #fff; }
#cancel-edit.secondary { background: #efefef; color: #333; }
#download-json.accent { background: var(--btn-accent); color: #fff; }

/* --- Larger screens: give the map more vertical space and show 2 columns --- */
@media (min-width: 768px) {
  #map { height: 70vh; }
}
@media (min-width: 1024px) {
  .layout { grid-template-columns: 1fr 360px; align-items: start; }
  #map { height: 75vh; }
}