/* Legend box */
.leaflet-html-legend {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);

  max-height: 600px;    /* batas tinggi box */
  overflow-y: auto;     /* aktifkan scroll vertikal */
  overflow-x: hidden;   /* cegah scroll horizontal */
}

/* Scrollbar styling untuk browser berbasis WebKit (Chrome, Edge, Safari) */
.leaflet-html-legend::-webkit-scrollbar {
  width: 10px;               /* lebar scrollbar */
}

.leaflet-html-legend::-webkit-scrollbar-track {
  background: #f1f1f1;        /* warna background track */
  border-radius: 8px;
}

.leaflet-html-legend::-webkit-scrollbar-thumb {
  background: #888;           /* warna batang scroll */
  border-radius: 8px;
}

.leaflet-html-legend::-webkit-scrollbar-thumb:hover {
  background: #555;           /* warna saat hover */
}

/* Untuk Firefox */
.leaflet-html-legend {
  scrollbar-width: thin;          /* tipis */
  scrollbar-color: #888 #f1f1f1;  /* thumb dan track */
}
/* Elemen setiap simbol + label */
.leaflet-html-legend .legend-element {
  display: flex;
  align-items: center;
  margin: 4px 0;   /* jarak antar baris */
}

/* Supaya kotak polygon/ikon agak jauh dari teks */
.leaflet-html-legend .legend-element img {
  margin-right: 10px;   /* tambah jarak kanan */
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
}