/* distance-filter.css - Styling untuk filter jarak */

/* Animasi slide panel */
.distance-filter-slide-in {
  animation: slide-in 0.3s forwards;
}

.distance-filter-slide-out {
  animation: slide-out 0.3s forwards;
}

@keyframes slide-in {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Customization untuk panel filter */
#distance-filter-panel {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  border: none;
  border-radius: 8px;
  overflow: hidden;
}

#distance-filter-panel .card-header {
  background-color: #343a40;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 15px;
}

#distance-filter-panel .card-body {
  background-color: #f8f9fa;
  padding: 15px;
}

/* Styling untuk slider */
#distance-filter-panel .form-range {
  height: 6px;
}

#distance-filter-panel .form-range::-webkit-slider-thumb {
  background: #0d6efd;
  border: 2px solid white;
  height: 16px;
  width: 16px;
}

#distance-filter-panel .form-range::-moz-range-thumb {
  background: #0d6efd;
  border: 2px solid white;
  height: 16px;
  width: 16px;
}

/* Statistik filter */
#distance-stats {
  border-top: 1px solid #dee2e6;
  padding-top: 10px;
  margin-top: 10px;
}

#distance-filter-panel .form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

/* Preset buttons */
#distance-filter-panel .btn-group .btn {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
}

/* Histogram canvas */
#distance-histogram {
  border: 1px solid #e9ecef;
  border-radius: 4px;
  background-color: #ffffff;
}

/* Download button */
#download-filtered-data {
  margin-top: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #distance-filter-panel {
    width: 80% !important; /* Override inline style */
    right: 10% !important;
  }
}