/* Base styles for the sidebar */
#sidebar {
    transition: transform 0.3s ease-in-out;
}

/* On small screens (max-width: 639px), the sidebar is positioned off-screen to the left */
@media (max-width: 639px) {
    #sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        z-index: 50;
        transform: translateX(-100%);
        width: 16rem; /* w-64 */
    }
}

/* On medium screens and up (min-width: 640px), the sidebar is always visible */
@media (min-width: 640px) {
    #sidebar {
        transform: translateX(0) !important;
    }
}

.truck-marker-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

.truck-marker-icon-green {
    background-color: #22c55e; /* green-500 */
}
.truck-marker-icon-yellow {
    background-color: #f59e0b; /* yellow-500 */
}
.truck-marker-icon-red {
    background-color: #ef4444; /* red-500 */
}
.truck-marker-icon-gray {
    background-color: #9ca3af; /* gray-400 */
}

/* Toggle Switch Styles */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #3b82f6;
}

input:focus + .slider {
  box-shadow: 0 0 1px #3b82f6;
}

input:checked + .slider:before {
  -webkit-transform: translateX(22px);
  -ms-transform: translateX(22px);
  transform: translateX(22px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}