/* ════════════════════════════════════════════════════════
   map.css — Styles Leaflet + popups bus + tracés lignes
   ════════════════════════════════════════════════════════ */

/* ── Container Leaflet ── */
.leaflet-container {
  background: #0d1520 !important;
  font-family: var(--font-body) !important;
}

.leaflet-tile-pane {
  opacity: 1 !important;
}

/* ── Popup wrapper ── */
.leaflet-popup-content-wrapper {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  padding: 0 !important;
  overflow: hidden;
}

.leaflet-popup-content {
  margin: 0 !important;
  width: auto !important;
}

.leaflet-popup-tip { background: var(--surface2) !important; }

.leaflet-popup-close-button {
  color: var(--muted) !important;
  top: 8px !important;
  right: 8px !important;
  font-size: 18px !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Popup contenu ── */
.popup-content {
  padding: var(--space-md);
  min-width: 200px;
  max-width: 240px;
}

.popup-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: 6px;
}

.popup-ligne {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.popup-name {
  font-size: 11px;
  color: var(--muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popup-pos {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.popup-meta {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: 6px;
}

.popup-age {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 600;
}

.popup-actions {
  display: flex;
  gap: var(--space-sm);
}

.popup-btn-details {
  flex: 1;
  padding: 7px 10px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.popup-btn-details:hover {
  border-color: var(--border-hover);
  color: var(--text);
}

.popup-btn-confirm {
  flex: 1;
  padding: 7px 10px;
  background: var(--green-dim);
  border: 1px solid rgba(0, 214, 127, 0.3);
  border-radius: var(--radius-md);
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.popup-btn-confirm:hover { background: rgba(0, 214, 127, 0.2); }
.popup-btn-confirm.loading { opacity: 0.6; cursor: wait; }

/* ── Marker bus ── */
.bus-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-head);
  font-weight: 800;
  color: white;
  cursor: pointer;
  transition: transform 0.15s ease;
  will-change: transform;
}

.bus-marker:hover {
  transform: scale(1.12);
}

/* ── Animation pulse ring (bus sélectionné) ── */
@keyframes markerPulse {
  0%   { transform: scale(1);    opacity: 0.6; }
  70%  { transform: scale(1.6);  opacity: 0; }
  100% { transform: scale(1.6);  opacity: 0; }
}

/* ── Animation nouveau signalement ── */
.bus-marker.pulse {
  animation: markerBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 3;
}

@keyframes markerBounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}

/* ── Tooltip tracé de ligne ── */
.leaflet-tooltip.trace-tooltip {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-family: var(--font-head) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  white-space: nowrap;
}

.leaflet-tooltip.trace-tooltip::before {
  border-top-color: var(--border) !important;
}

/* ── Tooltip arrêt ── */
.leaflet-tooltip.stop-tooltip {
  background: var(--surface1) !important;
  border: 1px solid var(--border-hover) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  white-space: nowrap;
}

.leaflet-tooltip.stop-tooltip::before {
  border-top-color: var(--border-hover) !important;
}

/* ── Contrôles Leaflet ── */
.leaflet-control-zoom {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  box-shadow: var(--shadow-md) !important;
}

.leaflet-control-zoom a {
  background: var(--surface2) !important;
  color: var(--text) !important;
  border-bottom-color: var(--border) !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  font-size: 16px !important;
  transition: background var(--transition-fast);
}

.leaflet-control-zoom a:hover {
  background: var(--surface3) !important;
}

.leaflet-attribution-flag { display: none !important; }

/* ── Attribution ── */
.leaflet-control-attribution {
  background: rgba(10, 15, 30, 0.75) !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  backdrop-filter: blur(4px);
}

.leaflet-control-attribution a {
  color: var(--muted) !important;
}