/* map.css — Leaflet map container + route polyline + markers. */
#map {
  block-size: 100%;
  inline-size: 100%;
}

/* Active navigation route — a Google-Maps-style layered path (ported from the reference
   app): a faded grey "completed" trail behind the user, a white casing, and the vibrant
   blue "remaining ahead" line on top. map.js stacks three Leaflet polylines tagged with
   these classes (draw order grey → white → blue) so the look lives here rather than in JS.
   The blue is fixed (matching the reference) so the selected route reads as blue against
   the golden path network below, independent of the tenant primary colour. */
.wf-route-done {
  stroke: #9aa0a6;
  stroke-width: 8;
  stroke-opacity: 0.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.wf-route-casing {
  stroke: #ffffff;
  stroke-width: 14;
  stroke-opacity: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.wf-route {
  stroke: #4285f4;
  stroke-width: 8;
  stroke-opacity: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Live user-location ("you are here") — a pulsing blue dot with a directional heading
   cone (Google-Maps-style puck). The cone only shows once a compass heading is known
   (parent gets .wf-user--has-heading during live navigation). */
.wf-user {
  position: relative;
}
.wf-user-dot {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: #1a73e8;
  border: 3px solid #fff;
  box-shadow: 0 0 0 rgba(26, 115, 232, 0.5);
  animation: wf-gps-pulse 1.8s ease-out infinite;
}
/* Heading chevron: a solid arrowhead pointing in the direction of travel, pivoting around
   the dot like a compass needle. Rotated by the --wf-heading CSS var (travel heading + the
   map's current bearing, set in map.js) so it stays correct even as the map rotates
   heading-up; eased at 0.15s to match the reference puck. Hidden until a heading is known. */
.wf-user-heading {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 0;
  border-inline: 9px solid transparent;
  border-block-end: 18px solid #1a73e8;
  transform-origin: 50% 100%;
  translate: -50% -100%;
  rotate: calc(var(--wf-heading, 0) * 1deg);
  transition: rotate 0.15s ease-out;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  opacity: 0;
  pointer-events: none;
}
.wf-user--has-heading .wf-user-heading {
  opacity: 1;
}
.wf-user--has-heading .wf-user-dot {
  inline-size: 12px;
  block-size: 12px;
}
@keyframes wf-gps-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.5);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(26, 115, 232, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(26, 115, 232, 0);
  }
}

/* Campus geometry (rendered beneath the markers). Building footprints + the walkable
   path network, styled here so the look is white-label-tunable. */
.wf-building {
  fill: #cfd8dc;
  fill-opacity: 0.7;
  stroke: #b0bec5;
  stroke-width: 1.5;
}
/* Walkable path/road network — golden, matching the demo ("unselected route" yellow). */
.wf-path {
  fill: none;
  stroke: #f0c040;
  stroke-width: 4;
  stroke-opacity: 0.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Permanent place labels (one per POI) — frosted white pill, matching the demo. */
.leaflet-tooltip.wf-poi-label {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #1f2d3d;
  white-space: nowrap;
  backdrop-filter: blur(2px);
  /* Interactive tooltip → make the pill an easy, obvious tap target. */
  pointer-events: auto;
  cursor: pointer;
}
/* Kill Leaflet's default tooltip arrow for the pill look. */
.leaflet-tooltip.wf-poi-label::before {
  display: none;
}

/* POI markers — CSS dots (divIcons), coloured by location type. No image sprite, so
   they render reliably offline. The dot is a coloured disc with a white ring + shadow;
   `--poi` is set per type below and defaults to the tenant primary colour. */
.wf-poi {
  --poi: var(--color-primary);
}
.wf-poi__dot {
  display: block;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: var(--poi);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.wf-poi__dot:hover {
  transform: scale(1.25);
}

/* Type palette. building falls through to the tenant primary (--poi default). */
.wf-poi--gate {
  --poi: #34a853;
}
.wf-poi--parking {
  --poi: #5f6368;
}
.wf-poi--amenity {
  --poi: #f29900;
}
.wf-poi--landmark {
  --poi: #a142f4;
}
.wf-poi--department {
  --poi: #12b5cb;
}