/**
 * Styles for Interactive World Map Download Statistics
 * Supports both light and dark themes
 */

/* Smooth transitions for map country paths */
#download-map-container .country {
  transition: fill 0.2s ease, stroke-width 0.2s ease;
}

/* Map container - STATIC (no hover effects) */
#download-map-section {
  margin: 40px 0;
  padding: 30px;
  background: var(--md-default-bg-color);
  border-radius: 12px;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: none !important;
  will-change: auto;
  pointer-events: auto;
}

/* REMOVED hover effect - was causing container shake on click */

#download-map-section h4 {
  text-align: center;
  color: var(--md-primary-fg-color);
  margin-bottom: 20px;
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: auto;
}

#download-map-container {
  height: 500px;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--md-code-bg-color);
  max-height: 500px !important;
  contain: layout style paint;
  isolation: isolate;
  pointer-events: auto;
}

#download-stats-summary {
  margin-top: 20px;
  text-align: center;
  color: var(--md-default-fg-color--light);
  font-size: 0.9em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  pointer-events: auto !important;
  position: relative;
  z-index: 10001 !important;
  transform: none !important;
  will-change: auto !important;
  isolation: isolate;
}

#download-stats-summary span {
  display: inline-block;
  pointer-events: auto !important;
}

#download-stats-summary a {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 10000 !important;
  display: inline !important;
  user-select: auto !important;
}

#download-stats-summary a:hover {
  opacity: 0.8;
}

/* Map SVG styles */
#download-map-container svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Country paths */
#download-map-container .country {
  transition: fill 0.2s ease, stroke-width 0.2s ease;
  outline: none;
}

#download-map-container .country:hover {
  opacity: 1;
  filter: brightness(1.2);
}

#download-map-container .country:focus {
  outline: 2px solid var(--md-primary-fg-color);
  outline-offset: 2px;
}

/* Tooltip styles */
.map-tooltip {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  z-index: 10000;
  font-family: var(--md-text-font-family);
  line-height: 1.6;
  max-width: 280px;
  white-space: nowrap;
}

/* Legend styles */
#download-map-container .legend {
  opacity: 0.95;
}

#download-map-container .legend text {
  font-family: var(--md-text-font-family);
  user-select: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#download-map-container .legend rect {
  transition: opacity 0.2s ease;
}

#download-map-container .legend-item:hover rect {
  opacity: 0.8;
}

/* Dark theme (ONLY theme used on site) */
[data-md-color-scheme="slate"] {
  --map-country-stroke: #3a3a4e;
  --tooltip-bg: rgba(30, 30, 46, 0.98);
  --tooltip-text: #ffffff;
  --tooltip-border: #667eea;
  --tooltip-title: #a5b4fc;
  --tooltip-label: #9ca3af;
  --text-primary: #e0e0e0;
  /* Country color gradient: dark blue → teal → lime green → bright orange */
  --map-color-lowest: #1e3a5f;
  --map-color-low: #1e88e5;
  --map-color-medium: #00acc1;
  --map-color-high: #9FEF00;
  --map-color-highest: #ff9800;
}

[data-md-color-scheme="slate"] #download-map-container {
  background: #1B4F72; /* Deep ocean blue for dark theme */
}

[data-md-color-scheme="slate"] .map-tooltip {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Responsive design */
@media screen and (max-width: 768px) {
  #download-map-section {
    padding: 20px;
    margin: 30px -10px;
    border-radius: 8px;
  }

  #download-map-section h4 {
    font-size: 1.2rem;
    flex-direction: column;
    gap: 4px;
  }

  #download-map-container {
    height: 350px;
  }

  #download-stats-summary {
    font-size: 0.85em;
    flex-direction: column;
    gap: 6px;
  }

  .map-tooltip {
    max-width: 220px;
    font-size: 13px;
    padding: 10px 12px;
  }

  /* Hide legend on small screens */
  #download-map-container .legend {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  #download-map-section {
    padding: 15px;
    margin: 20px -10px;
  }

  #download-map-section h4 {
    font-size: 1.1rem;
  }

  #download-map-container {
    height: 300px;
  }

  .map-tooltip {
    max-width: 200px;
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* Tablet landscape */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  #download-map-container {
    height: 450px;
  }
}

/* Large desktop */
@media screen and (min-width: 1440px) {
  #download-map-section {
    padding: 40px;
  }

  #download-map-container {
    height: 600px;
  }
}

/* Print styles */
@media print {
  #download-map-section {
    page-break-inside: avoid;
    border: 1px solid #ddd;
  }

  #download-map-container {
    height: 400px;
  }

  .map-tooltip {
    display: none !important;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  #download-map-section,
  #download-map-container .country,
  .map-tooltip,
  #download-map-container .legend rect {
    transition: none !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: more) {
  #download-map-section {
    border-width: 2px;
  }

  #download-map-container .country {
    stroke-width: 1px;
  }

  .map-tooltip {
    border-width: 2px;
  }
}

/* Focus visible for keyboard navigation */
.country:focus-visible {
  outline: 3px solid var(--md-primary-fg-color);
  outline-offset: 2px;
}

/* Loading state */
#download-map-container.loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

#download-map-container.loading::after {
  content: 'Loading map...';
  color: var(--md-default-fg-color--light);
  font-size: 14px;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Error state */
#download-map-container.error {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-typeset-color);
}

/* Smooth zoom transitions */
#download-map-container svg g {
  transition: transform 0.3s ease;
}

/* Icon in header */
#download-map-section h4 svg {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Stats summary separator */
#download-stats-summary span:not(:last-child)::after {
  content: '•';
  margin-left: 10px;
  color: var(--md-default-fg-color--lightest);
}

@media screen and (max-width: 768px) {
  #download-stats-summary span::after {
    content: '';
  }
}

/* Connection lines from Oman - animated dotted lines with cascading tier effect */
.connection-line {
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: normal;
  stroke-dasharray: 4 4;
  stroke-dashoffset: 8;
  /* Dual animation: tier fade-in + continuous flow */
  animation:
    tier-cascade 10s ease-in-out infinite,
    flow-line 3s linear infinite;
}

/* Tier-specific delays for cascading effect (5-second reveal) */
.tier-highest {
  animation-delay: 0s, 0s;
}

.tier-high {
  animation-delay: 1s, 0s;
}

.tier-medium {
  animation-delay: 2s, 0s;
}

.tier-low {
  animation-delay: 3.5s, 0s;
}

.tier-lowest {
  animation-delay: 4.5s, 0s;
}

/* Cascading fade-in/out animation (10-second cycle) */
@keyframes tier-cascade {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  85% {
    opacity: 0.8;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* Flowing animation for connection lines - flows FROM Oman TO countries */
@keyframes flow-line {
  from {
    stroke-dashoffset: 8; /* 4 + 4 from dasharray */
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .connection-line {
    animation: none !important;
    opacity: 0.8 !important;
  }
  /* Show all tiers immediately without cascade */
  .tier-highest,
  .tier-high,
  .tier-medium,
  .tier-low,
  .tier-lowest {
    animation-delay: 0s !important;
  }
}

/* Hide connection lines on mobile for better performance */
@media screen and (max-width: 768px) {
  .connection-lines {
    display: none;
  }
}