/* Leaflet overrides */
.leaflet-container {
  font-family: inherit;
  height: 100%;
  width: 100%;
}

.leaflet-popup-content-wrapper {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.leaflet-popup-content {
  margin: 12px 16px;
  font-size: 14px;
}

/* Stop marker */
.stop-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  font-weight: bold;
  font-size: 13px;
  color: white;
  cursor: pointer;
}

.stop-marker-inner {
  transform: rotate(45deg);
}

.stop-marker.selected {
  width: 40px;
  height: 40px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}

/* Activity marker */
.activity-marker {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

/* Map cursor when adding stop */
.map-adding-stop .leaflet-container {
  cursor: crosshair !important;
}

/* Timeline */
.timeline-item {
  position: relative;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}

.timeline-item:last-child::before {
  display: none;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Modal animation */
.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.15s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-content-enter-active,
.modal-content-leave-active {
  transition: transform 0.2s ease, opacity 0.15s ease;
}

.modal-content-enter-from,
.modal-content-leave-to {
  transform: translateY(-10px) scale(0.98);
  opacity: 0;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Budget bars */
.budget-bar {
  height: 8px;
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* Toast */
.toast {
  animation: toast-in 0.3s ease, toast-out 0.3s ease 2.7s forwards;
}

@keyframes toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes toast-out {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(20px); opacity: 0; }
}

/* Route dashed line for non-routable transports */
.transport-dashed {
  stroke-dasharray: 8, 5;
}

/* Print styles */
@media print {
  .no-print { display: none !important; }
  body { background: white; }
}

/* Form focus styles */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 2px #3B82F6;
}

/* Transition for sidebar */
.slide-enter-active, .slide-leave-active {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.slide-enter-from, .slide-leave-to {
  transform: translateX(-10px);
  opacity: 0;
}

/* Draggable list */
.dragging {
  opacity: 0.5;
}

/* Color picker swatches */
.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.1s, transform 0.1s;
}

.color-swatch:hover {
  transform: scale(1.15);
}

.color-swatch.selected {
  border-color: #1e293b;
}