/* base.css — global resets, page layout, toolbar, map container */

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

html, body {
  height: 100%;
  font-family: sans-serif;
  font-size: 14px;
  background: #1a1a1a;
  color: #e0e0e0;
}

#main {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #2a2a2a;
  border-bottom: 1px solid #444;
  z-index: 1000;
  flex-shrink: 0;
}

#toolbar label { font-size: 12px; color: #aaa; }

#toolbar input[type="text"],
#toolbar input[type="datetime-local"],
#toolbar select {
  background: #333;
  color: #e0e0e0;
  border: 1px solid #555;
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 12px;
}

#toolbar button {
  background: #3a6ea8;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
}
#toolbar button:hover { background: #4a7ec0; }

#toolbar .sep {
  width: 1px;
  height: 24px;
  background: #555;
  margin: 0 4px;
}

#app-version {
    font-size: 11px;
    color: #aaa;
    font-family: monospace;
    margin-left: auto;
    padding: 0 10px;
    align-self: center;
    user-select: none;
    white-space: nowrap;
}

#point-count {
  font-size: 11px;
  color: #888;
  margin-left: 4px;
}


#map {
  flex: 1;
  width: 100%;
}

/* Override Leaflet's default grab cursor */
.leaflet-container {
  cursor: default;
}

/* Show grab hand only while actively dragging */
.leaflet-dragging .leaflet-container {
  cursor: grabbing;
}

/* Cursor for draggable circle */
.leaflet-circle-marker[style*="cursor: move"],
.leaflet-circle-marker:hover {
    cursor: move !important;
}

/* Ensure the circle itself is clickable */
.leaflet-circle-marker {
    pointer-events: all;
}

#radius-circle-preview > div {
    display: flex;
    gap: 6px;
}

#clear-radius-center,
#move-radius-circle-btn {
    flex: 1;
    padding: 6px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}

#clear-radius-center          { background: #7a2020; color: #fff; }
#clear-radius-center:hover    { background: #a03030; }

#move-radius-circle-btn       { background: #3a6ea8; color: #fff; }
#move-radius-circle-btn:hover { background: #4a7ec0; }