.gmap-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  height: calc(100vh - 210px);
  min-height: 460px;
}

.gmap {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 10px);
  background: #143a5c;
  touch-action: none;
  user-select: none;
  cursor: grab;
  outline: none;
}
.gmap:active { cursor: grabbing; }
.gmap:focus-visible { box-shadow: var(--focus-ring); }

.gmap__tiles, .gmap__markers, .gmap__trail { position: absolute; inset: 0; }
.gmap__tiles img { position: absolute; left: 0; top: 0; max-width: none; image-rendering: auto; pointer-events: none; }
.gmap__trail { width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.gmap__trail polyline { fill: none; stroke: #F5C542; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; opacity: .9; }
.gmap__markers { pointer-events: none; }

.gmap__controls {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gmap__controls .icon-btn { background: var(--surface-raised); border: 1px solid var(--border-default); }

.gmap-marker {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  --dot: var(--blue-500);
}
.gmap-marker__dot {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--dot);
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.gmap-marker--vehicle .gmap-marker__dot { border-radius: 4px; width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.gmap-marker--officer { --dot: #5BA4F5; }
.gmap-marker--vehicle { --dot: #1F5FBF; }
.gmap-marker--player { --dot: #9AA3AD; }
.gmap-marker--alert { --dot: #E5484D; }
.gmap-marker__arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid #FFFFFF;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateY(-11px);
}
.gmap-marker__label {
  display: none;
  margin-top: -7px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(10, 14, 20, .78);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.gmap-marker.has-label .gmap-marker__label { display: block; }
.gmap-marker.is-offline { opacity: .55; }
.gmap-marker.is-offline .gmap-marker__dot { border-style: dashed; }
.gmap-marker.is-selected { z-index: 2; }
.gmap-marker.is-selected .gmap-marker__dot { box-shadow: 0 0 0 4px rgba(227, 179, 65, .9), 0 1px 4px rgba(0, 0, 0, .55); }

.gmap-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.gmap-side__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.gmap-side__filters .control { flex: 1 1 100%; }
.gmap-side__list { flex: 1; overflow: auto; padding: 6px 0 10px; }
.gmap-side__group {
  padding: 10px 16px 4px;
  font-size: var(--fs-xs, 12px);
  color: var(--text-muted);
}

.gmap-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 7px 16px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.gmap-item:hover { background: var(--surface-hover); }
.gmap-item.is-selected { background: var(--surface-active); }
.gmap-item.is-offline .gmap-item__title { color: var(--text-secondary); }
.gmap-item__dot {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--dot, #5BA4F5);
}
.gmap-item__dot--vehicle { --dot: #1F5FBF; border-radius: 3px; }
.gmap-item__dot--officer { --dot: #5BA4F5; }
.gmap-item__dot--player { --dot: #9AA3AD; }
.gmap-item__dot--alert { --dot: #E5484D; }
.gmap-item__dot.is-offline { opacity: .5; }
.gmap-item__body { display: flex; flex-direction: column; min-width: 0; }
.gmap-item__title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmap-item__sub { font-size: var(--fs-sm, 13px); color: var(--text-secondary); }
.gmap-item__warn { font-size: var(--fs-sm, 13px); color: var(--danger-fg); font-weight: 500; }

.gmap-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-2);
}
.gmap-info__head { display: flex; justify-content: space-between; gap: 10px; }
.gmap-info__row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.gmap-info__row > :last-child { text-align: right; }
.gmap-info__trail { display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 960px) {
  .gmap-layout { grid-template-columns: 1fr; height: auto; }
  .gmap { height: 62vh; min-height: 360px; }
  .gmap-side { max-height: 70vh; }
}

.gmap__styles { position: absolute; left: 12px; top: 12px; z-index: 3; background: var(--surface-raised); }
.gmap__styles .seg__item { border-top: 0; border-bottom: 0; font: inherit; cursor: pointer; }
.gmap__styles .seg__item:not(.is-active) { background: none; }
.gmap__tiles img.is-base { z-index: 0; }
.gmap__tiles img.is-main { z-index: 1; }
.gmap__controls { z-index: 3; }
.gmap__tiles { z-index: 0; }
.gmap__trail { z-index: 1; }
.gmap__markers { z-index: 2; }
.gmap[data-style="atlas"] { background: #1fa3d6; }
.gmap-marker--call { --dot: #F59E0B; }
.gmap-marker--call .gmap-marker__dot { border-radius: 3px; transform: rotate(45deg); }
.gmap-marker--prio-high { --dot: #E5484D; }
.gmap-marker--prio-low { --dot: #A3A3A3; }
.gmap-item__dot--call { --dot: #F59E0B; border-radius: 2px; transform: rotate(45deg); }
.gmap-item__dot--prio-high { --dot: #E5484D; }
.gmap-item__dot--prio-low { --dot: #A3A3A3; }