/* ---------- MAP & TACTICAL CANVAS ---------- */
#map-wrap {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
  background: #090c0e;
}

#map {
  height: 100%;
  width: 100%;
  background: #090c0e;
}

/* Moldura e Cantoneiras Militares Táticas */
.corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: var(--accent);
  opacity: 0.65;
  z-index: 1000;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.corner.tl { top: 12px; left: 12px; border-top: 2px solid; border-left: 2px solid; }
.corner.tr { top: 12px; right: 12px; border-top: 2px solid; border-right: 2px solid; }
.corner.bl { bottom: 12px; left: 12px; border-bottom: 2px solid; border-left: 2px solid; }
.corner.br { bottom: 12px; right: 12px; border-bottom: 2px solid; border-right: 2px solid; }

/* Rótulos das Células (Tooltips Leaflet) */
.cell-address-label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-shadow: 0 0 3px #000, 0 0 5px #000, 0 0 8px #000;
  pointer-events: none !important;
}

.cell-address-label.marked {
  font-size: 11px !important;
  color: #fff !important;
}

.cell-address-label::before {
  display: none !important;
}

/* Badges numerados dos passos de Trajeto / Perseguição */
.step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-family: var(--mono);
  font-size: 10.5px;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0,0,0,0.6);
  border: 1.5px solid #ffffff;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.step-badge:hover {
  transform: scale(1.22);
  border-color: var(--accent);
}

/* Vértices de Edição / Desenho */
.vertex-handle {
  background: var(--accent);
  border: 2px solid #ffffff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  cursor: move;
  transition: transform var(--transition-fast);
}

.vertex-handle:hover {
  transform: scale(1.3);
}

/* Customização dos Controles Leaflet */
.leaflet-bar {
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
}

.leaflet-bar a {
  background-color: var(--panel) !important;
  border-bottom: 1px solid var(--line-soft) !important;
  color: var(--text) !important;
  transition: all var(--transition-fast);
}

.leaflet-bar a:hover {
  background-color: var(--panel-elevated) !important;
  color: var(--accent) !important;
}

.leaflet-control-layers {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
}

.leaflet-control-layers-expanded {
  padding: 10px 14px !important;
  background: var(--panel) !important;
}

.leaflet-control-scale-line {
  background: rgba(20, 26, 31, 0.85) !important;
  border: 1px solid var(--accent) !important;
  border-top: none !important;
  color: var(--text) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  padding: 2px 5px !important;
  text-shadow: 0 0 2px #000;
}