/* ========================================
   Map pin avatar — circular marker for Leaflet divIcon
   Used by site/js/map.js pinIconHtml() chain:
     image_id (USER- → /img/profile/<id>.jpg, else /img/icons/<id>)
     → bootstrap glyph from location_types.icon
     → initials bubble (first letter of name)
   ======================================== */

/* Leaflet adds .leaflet-marker-icon to the wrapper; iconSize: [40, 40]
   from the divIcon gives the wrapper width/height inline. We clear the
   default tear-drop look by replacing className with .map-pin-avatar. */
.leaflet-marker-icon.map-pin-avatar {
  background: transparent;
  border: none;
  box-shadow: none;
}

.map-pin-avatar-ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  background: #1f2937;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-pin-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.map-pin-initials {
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  user-select: none;
}

/* Bootstrap glyph from location_types.icon, tinted by location_types.color
   (inline style on the <i>). Sized to fill the ring tastefully. */
.map-pin-avatar-ring > i.bi {
  font-size: 22px;
  line-height: 1;
}

/* ========================================
   Name labels — zoom-gated permanent tooltips
   map.js toggles body.map-show-labels on zoomend at LABEL_ZOOM_MIN.
   ======================================== */

.map-pin-name-label.leaflet-tooltip {
  display: none;                /* hidden by default — body class flips it */
  background: rgba(15, 23, 42, 0.88);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

body.map-show-labels .map-pin-name-label.leaflet-tooltip {
  display: block;
}

/* Kill the Leaflet tooltip arrow — the dark pill reads cleaner without it. */
.map-pin-name-label.leaflet-tooltip-top::before,
.map-pin-name-label.leaflet-tooltip-bottom::before,
.map-pin-name-label.leaflet-tooltip-left::before,
.map-pin-name-label.leaflet-tooltip-right::before {
  display: none;
}

/* ========================================
   Minimap variant — smaller ring for inc/alert detail-pane minimaps.
   Used by main.js minimapPointToLayer.
   ======================================== */

.map-pin-avatar--minimap .map-pin-avatar-ring {
  width: 32px;
  height: 32px;
  border-width: 2px;
}

.map-pin-avatar--minimap .map-pin-initials {
  font-size: 14px;
}

.map-pin-avatar--minimap .map-pin-avatar-ring > i.bi {
  font-size: 18px;
}

/* incident_pin minimap features carry `level-<name>` on the ring so the
   border colour tracks the alert level — same hex tokens that drive the
   pill/dot styling in alert-levels.css. Falls through to the default
   white ring when no alert level is set. */
.map-pin-avatar-ring.level-none     { border-color: rgb(var(--color-alert-level-none)); }
.map-pin-avatar-ring.level-normal   { border-color: rgb(var(--color-alert-level-normal)); }
.map-pin-avatar-ring.level-advisory { border-color: rgb(var(--color-alert-level-advisory)); }
.map-pin-avatar-ring.level-alert    { border-color: rgb(var(--color-alert-level-alert)); }
.map-pin-avatar-ring.level-warning  { border-color: rgb(var(--color-alert-level-warning)); }
.map-pin-avatar-ring.level-ics      { border-color: rgb(var(--color-alert-level-ics)); }
.map-pin-avatar-ring.level-dfa      { border-color: rgb(var(--color-alert-level-warning)); }
.map-pin-avatar-ring.level-major    { border-color: rgb(var(--color-alert-level-major)); }