/* ── Mapa mostova (Leaflet) ─────────────────────────────────── */

/* Ekran: mapa puni prostor ispod headera */
#screen-mapa .mapa-body {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 24px 24px;
  border: 1px solid #dfe5ec;
  border-radius: 8px;
  overflow: hidden;
}
#mapa-canvas { position: absolute; inset: 0; }

.mapa-legend {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 800; /* iznad Leaflet panela (600), ispod popup-a (700+) nije bitno */
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid #dfe5ec;
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: #37474f;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.mapa-legend-item { display: flex; align-items: center; gap: 7px; }
.mapa-legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

/* ── Pretraga mosta ─────────────────────────────────────────── */
.mapa-search { position: relative; width: 280px; }
#mapa-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-family: inherit;
  color: var(--clr-text);
  background: #fff;
}
#mapa-search-input:focus { outline: none; border-color: var(--clr-primary); }

.mapa-search-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 950; /* iznad mape i legende */
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  max-height: 320px;
  overflow-y: auto;
}
.mapa-search-item { padding: 7px 12px; cursor: pointer; }
.mapa-search-item:hover, .mapa-search-item.active { background: #edf2f7; }
.mapa-search-item.disabled { cursor: default; opacity: 0.55; }
.mapa-search-item.disabled:hover { background: none; }
.mapa-search-item + .mapa-search-item { border-top: 1px solid #f1f4f8; }
.mapa-search-name { font-size: var(--fs-sm); font-weight: 600; color: var(--clr-primary); }
.mapa-search-meta { font-size: 11px; color: var(--clr-muted); margin-top: 1px; }
.mapa-search-empty { padding: 10px 12px; font-size: var(--fs-sm); color: var(--clr-muted); font-style: italic; }

@media (max-width: 900px) {
  .mapa-search { width: 200px; }
}

/* ── Pin (divIcon) ──────────────────────────────────────────── */
.map-pin-wrap { background: none; border: none; }
.map-pin {
  width: 22px; height: 22px;
  margin: 3px 0 0 4px;
  background: var(--pin-color, #1a3550);
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  position: relative;
}
.map-pin::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  top: 6px; left: 6px;
  background: #fff;
  border-radius: 50%;
}

/* puls izabranog pina (pretraga) — rotacija mora ostati u transformu */
@keyframes map-pin-pulse {
  0%, 100% { transform: rotate(-45deg) scale(1); }
  50%      { transform: rotate(-45deg) scale(1.35); }
}
.map-pin-pulse .map-pin { animation: map-pin-pulse 0.55s ease-in-out 3; transform-origin: center; }

/* ── Popup ──────────────────────────────────────────────────── */
.map-popup { font-family: inherit; }
.map-popup-name { font-size: 13px; font-weight: 700; color: #1a3550; }
.map-popup-code { font-size: 11px; font-family: monospace; color: #607d8b; margin-top: 1px; }
.map-popup-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.map-popup-date { font-size: 11px; color: #78909c; margin-top: 5px; }
.map-popup-btn { margin-top: 8px; padding: 4px 10px; font-size: 11px; cursor: pointer; }
.leaflet-popup-content { margin: 12px 14px; }

/* ── Mini-mapa u detalju mosta ──────────────────────────────── */
#detail-map {
  height: 230px;
  border-radius: 6px;
  border: 1px solid #dfe5ec;
}

/* ── Picker u modalu Dodaj/Izmijeni most ────────────────────── */
#f-map-pick {
  height: 240px;
  border-radius: 6px;
  border: 1px solid #dfe5ec;
}
.map-pick-hint { font-size: 11px; color: #78909c; margin-top: 5px; }