/**
 * Map Components Styling
 *
 * Beautiful Gepesat-branded styling for Leaflet maps and layer controls
 *
 * Features:
 * - Custom layer control styling with Gepesat orange branding
 * - Mobile-responsive design
 * - Smooth animations and transitions
 * - Accessible and touch-friendly
 */

/* ============================================
   LAYER CONTROL - GEPESAT BRANDED
   ============================================ */

/* Layer Control Container */
.leaflet-control-layers {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: white;
  font-family: 'Montserrat', Arial, sans-serif;
  transition: all 0.3s ease;
  border: none !important; /* Remove all borders */
}

.leaflet-control-layers:hover {
  box-shadow: 0 6px 16px rgba(255, 124, 30, 0.25); /* Orange glow on hover */
}

/* Layer Control Toggle Button */
.leaflet-control-layers-toggle {
  width: 44px;
  height: 44px;
  background-color: #FF7C1E; /* Gepesat orange */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>');
  background-size: 26px 26px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.leaflet-control-layers-toggle:hover {
  background-color: #E66A0F; /* Darker orange on hover */
  transform: scale(1.05);
}

.leaflet-control-layers-toggle:active {
  transform: scale(0.95);
}

/* Layer Control Expanded State */
.leaflet-control-layers-expanded {
  padding: 16px;
  min-width: 200px;
}

.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  display: none; /* Hide toggle button when expanded */
}

/* Section Titles */
.leaflet-control-layers-base,
.leaflet-control-layers-overlays {
  margin-bottom: 12px;
}

/* Layer Labels */
.leaflet-control-layers-base label,
.leaflet-control-layers-overlays label {
  font-size: 14px;
  font-weight: 500;
  color: #071D4A; /* Gepesat navy */
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  border-radius: 6px;
  margin: 2px 0;
}

.leaflet-control-layers-base label:hover,
.leaflet-control-layers-overlays label:hover {
  color: #FF7C1E; /* Gepesat orange on hover */
  background-color: rgba(255, 124, 30, 0.1);
  transform: translateX(2px);
}

/* Selected layer - prominent background highlight */
.leaflet-control-layers-base label:has(input:checked),
.leaflet-control-layers-overlays label:has(input:checked) {
  background-color: rgba(255, 124, 30, 0.15);
  color: #FF7C1E;
  font-weight: 600;
  border-left: 3px solid #FF7C1E;
  padding-left: 9px; /* Compensate for border */
}

/* Radio Buttons & Checkboxes - HIDDEN */
.leaflet-control-layers-selector {
  display: none; /* Hide radio buttons and checkboxes */
}

/* Section Separator */
.leaflet-control-layers-separator {
  border-top: 2px solid #E5E7EB;
  margin: 12px 0;
  height: 0;
}

/* Scrollable content for many layers */
.leaflet-control-layers-list {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Custom scrollbar for layer list */
.leaflet-control-layers-list::-webkit-scrollbar {
  width: 6px;
}

.leaflet-control-layers-list::-webkit-scrollbar-track {
  background: #F3F4F6;
  border-radius: 3px;
}

.leaflet-control-layers-list::-webkit-scrollbar-thumb {
  background: #FF7C1E;
  border-radius: 3px;
}

.leaflet-control-layers-list::-webkit-scrollbar-thumb:hover {
  background: #E66A0F;
}

/* ============================================
   MAP CONTAINER STYLING
   ============================================ */

/* Ensure map containers have proper height */
.leaflet-container {
  font-family: 'Montserrat', Arial, sans-serif;
  background: #F3F4F6; /* Light gray background while loading */
}

/* Map loading state */
.leaflet-container.leaflet-touch {
  -webkit-tap-highlight-color: transparent;
}

/* ============================================
   ZOOM CONTROL STYLING
   ============================================ */

/* Zoom control buttons */
.leaflet-control-zoom {
  border: 2px solid #FF7C1E !important;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.leaflet-control-zoom a {
  background-color: white;
  color: #071D4A;
  font-weight: 600;
  transition: all 0.2s ease;
}

.leaflet-control-zoom a:hover {
  background-color: #FF7C1E;
  color: white;
}

.leaflet-control-zoom a:active {
  background-color: #E66A0F;
}

/* ============================================
   ATTRIBUTION CONTROL
   ============================================ */

.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.leaflet-control-attribution a {
  color: #1046B1; /* Gepesat blue */
  text-decoration: none;
}

.leaflet-control-attribution a:hover {
  color: #FF7C1E; /* Gepesat orange */
  text-decoration: underline;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
  /* Smaller layer control on mobile */
  .leaflet-control-layers-toggle {
    width: 40px;
    height: 40px;
    background-size: 22px 22px;
  }

  .leaflet-control-layers-expanded {
    padding: 12px;
    min-width: 180px;
    max-width: 220px;
  }

  .leaflet-control-layers-base label,
  .leaflet-control-layers-overlays label {
    font-size: 13px;
    padding: 8px 10px;
  }

  /* Selected layer on mobile */
  .leaflet-control-layers-base label:has(input:checked),
  .leaflet-control-layers-overlays label:has(input:checked) {
    padding-left: 7px; /* Compensate for border */
  }

  /* Limit height on mobile */
  .leaflet-control-layers-list {
    max-height: 300px;
  }

  /* Zoom control adjustments */
  .leaflet-control-zoom a {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 18px;
  }
}

/* ============================================
   TABLET RESPONSIVE
   ============================================ */

@media (min-width: 641px) and (max-width: 1024px) {
  .leaflet-control-layers-expanded {
    min-width: 190px;
  }

  .leaflet-control-layers-base label,
  .leaflet-control-layers-overlays label {
    font-size: 13px;
  }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus states for keyboard navigation */
.leaflet-control-layers-toggle:focus,
.leaflet-control-layers-selector:focus {
  outline: 3px solid #FF7C1E;
  outline-offset: 2px;
}

.leaflet-control-layers-base label:focus-within,
.leaflet-control-layers-overlays label:focus-within {
  background-color: rgba(255, 124, 30, 0.1);
  outline: 2px solid #FF7C1E;
  outline-offset: 1px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .leaflet-control-layers {
    border-width: 3px;
  }

  .leaflet-control-layers-base label,
  .leaflet-control-layers-overlays label {
    font-weight: 600;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .leaflet-control-layers,
  .leaflet-control-layers-toggle,
  .leaflet-control-layers-base label,
  .leaflet-control-layers-overlays label,
  .leaflet-control-zoom a {
    transition: none;
  }

  .leaflet-control-layers-toggle:hover {
    transform: none;
  }
}

/* ============================================
   DARK MODE SUPPORT (DISABLED)
   ============================================ */

/* Dark mode removed - was causing black rectangle issue
   Layer control should always be light/white for consistency */

/* ============================================
   VEHICLE MARKERS (INDUSTRY STANDARD)
   ============================================ */

/* Vehicle Marker - Larger, vehicle-specific icons (Industry Standard) */
/* Design Philosophy: Vehicles are PRIMARY focus - larger than POI/Geofence clusters */
/* Size: 36px (larger than POI clusters 26-38px) */
/* Style: White circle + status-colored border + vehicle icon */
.vehicle-marker-wrapper {
  /* Remove default Leaflet icon styles */
  background: none !important;
  border: none !important;
}

.vehicle-marker {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  border: 3px solid;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Vehicle Icon Size */
.vehicle-marker i {
  font-size: 18px;
  transition: all 0.3s ease;
}

/* Status Colors (Border) - Matches Ditrack color scheme */
.vehicle-marker.moving {
  border-color: #10b981;  /* Green - Moving */
}

.vehicle-marker.stopped {
  border-color: #f59e0b;  /* Yellow - Stopped */
}

.vehicle-marker.offline {
  border-color: #6b7280;  /* Gray - Offline */
}

.vehicle-marker.inactive {
  border-color: #9ca3af;  /* Light Gray - Inactive */
}

/* Hover Effect - Scale up and enhance shadow */
.vehicle-marker:hover {
  transform: scale(1.2);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

.vehicle-marker:hover i {
  transform: scale(1.1);
}

/* ============================================
   POI CLUSTER ICONS (INDUSTRY STANDARD)
   ============================================ */

/* POI Cluster Icon - Minimal, Contextual Style (Industry Standard) */
/* Design Philosophy: POIs are contextual data, not primary focus */
/* Smaller, semi-transparent, subtle - vehicles should dominate visual hierarchy */
.poi-cluster-icon {
  background-color: rgba(16, 70, 177, 0.2);   /* Light blue, semi-transparent */
  border: 2px solid #1046B1;                   /* Blue border */
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(16, 70, 177, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 600;
  color: #1046B1;                              /* Blue text (not white) */
  opacity: 0.75;                               /* Subtle by default */
  transition: all 0.3s ease;
}

.poi-cluster-icon:hover {
  background-color: rgba(16, 70, 177, 0.35);  /* Slightly darker on hover */
  box-shadow: 0 4px 12px rgba(16, 70, 177, 0.4);
  opacity: 1.0;                                /* Full opacity on hover */
  transform: scale(1.15);                      /* Slightly larger on hover */
  border-width: 2.5px;                         /* Thicker border on hover */
}

/* POI Cluster Count - Smaller, more subtle */
.poi-cluster-count {
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
}

/* POI Cluster Size Variations - SMALLER than vehicle markers */
/* This ensures vehicles remain the primary visual focus */
.poi-cluster-small {
  width: 26px;
  height: 26px;
}

.poi-cluster-small .poi-cluster-count {
  font-size: 10px;
}

.poi-cluster-medium {
  width: 32px;
  height: 32px;
}

.poi-cluster-medium .poi-cluster-count {
  font-size: 11px;
}

.poi-cluster-large {
  width: 38px;
  height: 38px;
}

.poi-cluster-large .poi-cluster-count {
  font-size: 12px;
  font-weight: 700;
}

/* ============================================
   GEOFENCE CLUSTER ICONS (INDUSTRY STANDARD)
   ============================================ */

/* Geofence Cluster Icon - Minimal, Contextual Style (Industry Standard) */
/* Design Philosophy: Geofences are contextual data, not primary focus */
/* Smaller, semi-transparent, subtle - vehicles should dominate visual hierarchy */
.geofence-cluster-icon {
  background-color: rgba(139, 92, 246, 0.2);  /* Light purple, semi-transparent */
  border: 2px solid #8B5CF6;                   /* Purple border */
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 600;
  color: #8B5CF6;                              /* Purple text (not white) */
  opacity: 0.75;                               /* Subtle by default */
  transition: all 0.3s ease;
}

.geofence-cluster-icon:hover {
  background-color: rgba(139, 92, 246, 0.35); /* Slightly darker on hover */
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
  opacity: 1.0;                                /* Full opacity on hover */
  transform: scale(1.15);                      /* Slightly larger on hover */
  border-width: 2.5px;                         /* Thicker border on hover */
}

/* Geofence Cluster Count - Smaller, more subtle */
.geofence-cluster-count {
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
}

/* Geofence Cluster Size Variations - SMALLER than vehicle markers */
/* This ensures vehicles remain the primary visual focus */
.geofence-cluster-small {
  width: 26px;
  height: 26px;
}

.geofence-cluster-small .geofence-cluster-count {
  font-size: 10px;
}

.geofence-cluster-medium {
  width: 32px;
  height: 32px;
}

.geofence-cluster-medium .geofence-cluster-count {
  font-size: 11px;
}

.geofence-cluster-large {
  width: 38px;
  height: 38px;
}

.geofence-cluster-large .geofence-cluster-count {
  font-size: 12px;
  font-weight: 700;
}

/* ============================================
   CLUSTER ANIMATIONS
   ============================================ */

/* Smooth cluster appearance */
.poi-cluster-icon,
.geofence-cluster-icon {
  animation: clusterFadeIn 0.3s ease;
}

@keyframes clusterFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
  .poi-cluster-small,
  .geofence-cluster-small {
    width: 36px;
    height: 36px;
  }

  .poi-cluster-medium,
  .geofence-cluster-medium {
    width: 44px;
    height: 44px;
  }

  .poi-cluster-large,
  .geofence-cluster-large {
    width: 52px;
    height: 52px;
  }

  .poi-cluster-count,
  .geofence-cluster-count {
    font-size: 12px;
  }

  .poi-cluster-large .poi-cluster-count,
  .geofence-cluster-large .geofence-cluster-count {
    font-size: 14px;
  }
}

/* ============================================
   MAPBOX GL POPUP STYLING
   Matches Ditrack Design System
   ============================================ */

/* Popup container - rounded corners, shadow, border */
.mapboxgl-popup-content {
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(7, 29, 74, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(7, 29, 74, 0.1) !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Popup tip/arrow - match the border color */
.mapboxgl-popup-tip {
  border-top-color: white !important;
}

/* Close button - visible and easy to click */
.mapboxgl-popup-close-button {
  /* Size - larger touch target */
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;

  /* Position - inside the popup, top-right */
  top: 8px !important;
  right: 8px !important;

  /* Appearance - Ditrack orange accent */
  background-color: #fff7ed !important;
  border-radius: 50% !important;
  border: 1.5px solid #FF7C1E !important;

  /* Text styling */
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  color: #FF7C1E !important;

  /* Interaction */
  cursor: pointer !important;
  transition: all 0.2s ease !important;

  /* Display */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Ensure it's above content */
  z-index: 10 !important;
}

.mapboxgl-popup-close-button:hover {
  background-color: #FF7C1E !important;
  border-color: #FF7C1E !important;
  color: white !important;
  transform: scale(1.1) !important;
}

.mapboxgl-popup-close-button:active {
  background-color: #E66A0F !important;
  transform: scale(0.95) !important;
}

/* Focus state for accessibility */
.mapboxgl-popup-close-button:focus {
  outline: 2px solid #FF7C1E !important;
  outline-offset: 2px !important;
}

/* Add padding to popup content wrapper to accommodate the close button */
.mapboxgl-popup-content > div:first-child {
  padding-right: 36px !important;
}