/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Leaflet CSS */
@import url('https://unpkg.com/leaflet@1.9.4/dist/leaflet.css');

/* Custom Leaflet overrides */
.leaflet-container {
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;
}

.leaflet-popup-content-wrapper {
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.leaflet-popup-tip {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Leaflet Map Controls Z-Index Override */
@layer components {
  .leaflet-control-container {
    z-index: 50 !important;
  }

  .leaflet-control-zoom {
    z-index: 50 !important;
  }

  .leaflet-control-zoom-in,
  .leaflet-control-zoom-out {
    z-index: 50 !important;
  }

  /* Ensure search results always appear above map controls */
  [data-map-picker-target="searchResults"] {
    z-index: 999 !important;
  }

  [data-map-picker-modal-target="searchResults"] {
    z-index: 999 !important;
  }

  /* Ensure map size toggle button appears above everything */
  [data-action*="toggleMapSize"] {
    z-index: 1000 !important;
  }

  [data-map-picker-target="sizeToggleText"] {
    z-index: 1000 !important;
  }

  /* Force button container to be above map */
  .relative [data-action*="toggleMapSize"] {
    z-index: 1000 !important;
  }
}

/* Direction arrows for routes */
.direction-arrow {
  pointer-events: none;
}

.direction-arrow div {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Enhanced route lines */
.leaflet-interactive {
  cursor: pointer;
}

/* Improved popup styling for route information */
.leaflet-popup-content {
  margin: 0;
  padding: 0;
}

/* Better legend styling */
.map-legend {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.95);
}

/* Assignment color indicators */
.assignment-color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Route styling */
.actual-route {
  /* Solid line for routes that follow roads */
  stroke-dasharray: none !important;
}

.cached-route {
  /* Slightly different styling for cached routes */
  opacity: 0.85 !important;
}

.fallback-route {
  /* Dashed line for straight-line routes */
  stroke-dasharray: 8, 4 !important;
}

/* Route disclaimer styling */
.route-disclaimer {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-left: 3px solid #f59e0b;
}

/* Routing progress indicator */
.routing-progress {
  animation: slideInFromTop 0.3s ease-out;
  backdrop-filter: blur(4px);
}

@keyframes slideInFromTop {
  from {
    transform: translate(-50%, -100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

/* Enhanced disclaimer box */
.disclaimer-box {
  background: linear-gradient(135deg, #fef7e7 0%, #fef3c7 100%);
  border: 1px solid #f3d0a1;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.1);
}

/* Slide to confirm button styles */
.slide-confirm-container {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.slide-confirm-slider {
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
  will-change: transform;
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.slide-confirm-slider:hover {
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.2),
    0 3px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.slide-confirm-slider.dragging {
  transition: none;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.25),
    0 4px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.slide-confirm-progress {
  transition: width 0.15s ease-out;
  will-change: width;
}

.slide-confirm-progress.dragging {
  transition: none;
}

/* Pulse animation for the slider button */
@keyframes slider-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.slide-confirm-slider:not(.dragging):hover .bg-emerald-500 {
  animation: slider-pulse 2s ease-in-out infinite;
}

/* Multiple Surat Jalan Styling */
.surat-jalan-item {
  background-color: white;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
  border-left: 2px solid #fed7aa;
  margin-bottom: 0.25rem;
}

.surat-jalan-item:last-child {
  margin-bottom: 0;
}

.surat-jalan-container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Textarea for multiple surat jalan */
textarea[name="surat_jalan_list"] {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  line-height: 1.4;
}