/*
 * Aviation Map Custom Styles
 *
 * Custom styles for the aviation map component that complement the
 * app's theme colors and dark mode support.
 */

/* Ensure map container has proper dimensions */
.aviation-map-container {
  position: relative;
  width: 100%;
  min-height: 384px; /* h-96 equivalent */
}

/* Loading state overlay */
.aviation-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(249 250 251); /* gray-50 */
  z-index: 10;
}

@media (prefers-color-scheme: dark) {
  .aviation-map-loading {
    background-color: rgb(31 41 55); /* gray-800 */
  }
}

/* Error state */
.aviation-map-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgb(107 114 128); /* gray-500 */
}

@media (prefers-color-scheme: dark) {
  .aviation-map-error {
    color: rgb(156 163 175); /* gray-400 */
  }
}

/* Hide loading overlay when map is ready */
.aviation-map-container.maplibre-ready .aviation-map-loading {
  display: none;
}

/* Ensure MapLibre canvas fills container */
.aviation-map-container .maplibregl-canvas-container {
  position: absolute;
  inset: 0;
}

.aviation-map-container .maplibregl-canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Custom popup styles matching app theme */
.maplibregl-popup-content {
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  padding: 0.75rem 1rem;
}

/* Larger close button hit area for easier interaction */
.maplibregl-popup-close-button {
  font-size: 1.5rem;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
}

.maplibregl-popup-close-button:hover {
  background-color: rgb(243 244 246); /* gray-100 */
}

@media (prefers-color-scheme: dark) {
  .maplibregl-popup-content {
    background: rgb(31 41 55); /* gray-800 */
    color: rgb(243 244 246); /* gray-100 */
  }

  .maplibregl-popup-tip {
    border-top-color: rgb(31 41 55);
  }

  .maplibregl-popup-close-button {
    color: rgb(156 163 175); /* gray-400 */
  }

  .maplibregl-popup-close-button:hover {
    background-color: rgb(55 65 81); /* gray-700 */
    color: rgb(243 244 246); /* gray-100 */
  }
}

/* Control button styles matching app theme */
.maplibregl-ctrl-group {
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

@media (prefers-color-scheme: dark) {
  .maplibregl-ctrl-group {
    background: rgb(55 65 81); /* gray-700 */
  }

  .maplibregl-ctrl-group button {
    background-color: transparent;
  }

  .maplibregl-ctrl-group button:hover {
    background-color: rgb(75 85 99); /* gray-600 */
  }

  .maplibregl-ctrl-group button + button {
    border-top-color: rgb(75 85 99); /* gray-600 */
  }

  /* Invert the zoom icons for visibility in dark mode */
  .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
    filter: invert(1);
  }
}

/* Attribution styles */
.maplibregl-ctrl-attrib {
  font-size: 0.75rem;
  background-color: rgba(255, 255, 255, 0.7);
}

@media (prefers-color-scheme: dark) {
  .maplibregl-ctrl-attrib {
    background-color: rgba(31, 41, 55, 0.9);
    color: rgb(156 163 175);
  }

  .maplibregl-ctrl-attrib.maplibregl-compact {
    background-color: rgba(31, 41, 55, 0.7);
  }

  .maplibregl-ctrl-attrib a {
    color: rgb(147 197 253); /* blue-300 */
  }

  .maplibregl-ctrl-attrib a:hover {
    color: rgb(147 197 253); /* blue-300 - same as link to avoid flash */
  }

  /* Invert the info icon for visibility */
  .maplibregl-ctrl-attrib-button {
    filter: invert(1);
  }
}

/* Custom airport markers */
.airport-marker {
  cursor: pointer;
  width: 34px;
  height: 42px;
}

.airport-marker svg {
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transition: transform 0.15s ease-out;
}

.airport-marker:hover svg {
  transform: scale(1.15);
}