body {
  padding-top: 56px;
  background-color: #222;
  color: #fff;
}

#map-canvas {
  width: 100%;
  height: 55vh;
  min-height: 300px;
}

.legend-danger {
  background-color: #dc3545;
  color: #fff;
  padding: 4px 0;
  font-size: 0.85rem;
}

.legend-warn {
  background-color: #ffc107;
  color: #000;
  padding: 4px 0;
  font-size: 0.85rem;
}

.legend-safe {
  background-color: #198754;
  color: #fff;
  padding: 4px 0;
  font-size: 0.85rem;
}

.action-buttons .btn {
  width: 100%;
}

footer {
  text-align: center;
  padding: 1rem;
  color: #999;
}

#directionsOffcanvas {
  max-width: 320px;
}

#directionsOffcanvas .offcanvas-body {
  font-size: 0.9rem;
}