/* Styling for the MapLibre GL beta map engine. */

/* The GL map sits behind the (emptied) leaflet container, which keeps hosting the HTML overlay UI. */
#maplibreMap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.navlogmapdiv {
  position: relative;
}

/* While the beta is active the leaflet container stays in place (all the on-map UI lives inside it),
   but its tile panes and controls are hidden and it stops capturing pointer events, so gestures
   fall through to the GL map below. */
#map.leafletHiddenForBeta {
  position: relative;
  z-index: 2;
  background: transparent !important;
  pointer-events: none;
}

#map.leafletHiddenForBeta > .leaflet-pane,
#map.leafletHiddenForBeta > .leaflet-control-container {
  display: none !important;
}

/* Re-enable pointer events on the interactive overlay UI that lives inside the leaflet container. */
#map.leafletHiddenForBeta button,
#map.leafletHiddenForBeta .directToOverlay,
#map.leafletHiddenForBeta .flightLogButtonBox,
#map.leafletHiddenForBeta .closestFieldsLineContent {
  pointer-events: auto;
}

/* Beta badge in the bottom center of the map */
.maplibreBetaBadge {
  display: none;
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  background-color: #191532;
  color: #ffffff;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  opacity: 0.85;
  pointer-events: none;
  white-space: nowrap;
}

/* Airspace proximity warning banner (persistent while a threat is within ~5 min ahead).
   Full-width bar pinned under the top nav so it never collides with the on-map controls. */
.airspaceWarningBanner {
  display: none;
  position: absolute;
  top: var(--topnav-height);
  left: 0;
  right: 0;
  z-index: 6;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.airspaceWarning-restricted {
  background-color: #c0392b; /* red */
  color: #ffffff;
}

.airspaceWarning-controlled {
  background-color: #e0a800; /* amber */
  color: #1b1b1b;
}

.airspaceWarning-rmz {
  background-color: #b8bcc2; /* light grey */
  color: #1b1b1b;
}

/* Toast messages on the GL map (mirrors the leaflet messagebox) */
.maplibreToast {
  display: none;
  position: absolute;
  top: calc(var(--topnav-height) + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  background-color: #191532;
  color: #ffffff;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  opacity: 0.92;
  pointer-events: none;
  max-width: 80%;
  text-align: center;
}

/* Route drawing controls (top left, mirrors the position of the leaflet-draw toolbar).
   Both offsets below are measured from the top nav rather than from the top of the map, because
   the nav now floats over it. They must stay derived from the same variable: a hardcoded pushed
   value would send these buttons back up underneath the nav during an airspace warning, i.e.
   exactly when they most need to stay reachable. */
.maplibreControlStack {
  position: absolute;
  top: calc(var(--topnav-height) + 12px);
  left: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: top 0.2s ease;
}

/* while the full-width airspace warning bar is showing, drop the draw controls below it so
   they stay fully usable instead of being hidden behind the bar */
.maplibreControlStack.airspaceWarningPushed {
  top: calc(var(--topnav-height) + 58px);
}

/* MapLibre's own control corners on the main map only. The weather and aerodrome maps live inside
   scrolling panels that are already padded, so they must not be offset a second time. */
#maplibreMap .maplibregl-ctrl-top-left,
#maplibreMap .maplibregl-ctrl-top-right {
  margin-top: var(--topnav-height);
}

.maplibreControlButton {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 2px solid #04041e7a;
  border-right:#1111737a;
  border-top:#1111737a;
  background-color: #04041e;
  color: #edeee0;
  font-size: 18px;
  cursor: pointer;
  /* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); */
}

.maplibreControlButton:active {
  background-color: #dddddd;
}

.maplibreControlButtonActive {
  background-color: rgb(228, 195, 47);
  color: #1b1b1b;
}

/* Own ship icon (same sizing behaviour as the leaflet marker) */
.maplibreOwnshipIcon {
  width: 60px;
  height: auto;
  pointer-events: none;
}

/* Mirrored traffic markers */
.maplibreTrafficMarker {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.maplibreTrafficIcon {
  width: 32px;
  height: auto;
}

/* Traffic label: callsign on the first line, altitude on the second.
   The label always stays upright because the marker element is never rotated - only the
   icon <img> inside it is (see applyTrafficIconRotation in maplibreBetaMap.js). */
.maplibreTrafficLabel {
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  line-height: 1.15;
  padding: 1px 3px;
  white-space: pre-line; /* renders the \n between callsign and altitude as a line break */
  /* black outline. paint-order draws the stroke behind the fill, so the white glyphs stay
     full weight instead of being eaten into by the stroke. */
  -webkit-text-stroke: 2.5px #000000;
  paint-order: stroke fill;
}

/* Draggable waypoint edit handles */
.maplibreEditHandle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 4px solid #c600d4;
  cursor: grab;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.maplibreAirspacePopupEntry {
  color:#191532;
  border-bottom: 1px solid #ddd;
  padding: 3px 0;
  font-size: 12px;
}

.maplibreAirspacePopupEntry:last-child {
  border-bottom: none;
}