/* München Verkehrsstationen - Styles */

html, body, #map {
  height: 100%;
  margin: 0;
  padding: 0;
}

.controls {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  padding: 12px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  font-family: sans-serif;
  font-size: 13px;
  max-width: 450px;
}

.controls input[type=file] {
  display: block;
  margin-bottom: 6px;
}

.small {
  font-size: 12px;
  color: #666;
  margin-top: 6px;
}

.status {
  margin-top: 6px;
  font-weight: 600;
}

.search-box {
  margin-top: 10px;
  margin-bottom: 10px;
}

.search-box input {
  width: 100%;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
}

.filter-group {
  margin-top: 10px;
  padding: 8px;
  background: #f5f5f5;
  border-radius: 4px;
}

.filter-group label {
  display: block;
  margin: 4px 0;
  cursor: pointer;
}

.filter-group input[type=checkbox] {
  margin-right: 6px;
}

.hidden {
  display: none;
}

.maps-button {
  display: inline-block;
  margin-top: 8px;
  margin-right: 6px;
  padding: 6px 12px;
  background-color: #4285f4;
  color: #ffffff !important;
  text-decoration: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.maps-button:hover {
  background-color: #3367d6;
  color: #ffffff !important;
}

.wiki-button {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  background-color: #ff9800;
  color: #ffffff !important;
  text-decoration: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.wiki-button:hover {
  background-color: #f57c00;
  color: #ffffff !important;
}

.collapse-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 6px 8px;
  background: #f0f0f0;
  border-radius: 4px;
  margin-top: 10px;
  margin-bottom: 6px;
  user-select: none;
  font-size: 12px;
  color: #666;
}

.collapse-button:hover {
  background: #e0e0e0;
}

.toggle-icon {
  font-size: 12px;
  transition: transform 0.2s;
}

.toggle-icon.collapsed {
  transform: rotate(-90deg);
}

.collapsible-content {
  max-height: 2000px;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 1;
}

.collapsible-content.collapsed {
  max-height: 0;
  opacity: 0;
}

/* User Location Marker Styles */
.user-location-marker {
  background: transparent;
  border: none;
}

.user-location-dot {
  width: 20px;
  height: 20px;
  background: #4285F4;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(66, 133, 244, 0.5);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 10px rgba(66, 133, 244, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(66, 133, 244, 0.8);
  }
  100% {
    box-shadow: 0 0 10px rgba(66, 133, 244, 0.5);
  }
}

/* Station Name Clickable Styles */
.station-name-clickable {
  transition: color 0.2s, text-decoration 0.2s;
}

.station-name-clickable:hover {
  color: #1976d2;
  text-decoration: underline;
}

.station-name-clickable:active {
  color: #0d47a1;
}