/**
 * Astro-Cartography Module Styles
 * Custom styles for the Astro-Cartography map interface
 */

/* Map container styling */
.acg-map-container {
  height: 600px;
  width: 100%;
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Map overlay controls */
.acg-map-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  padding: 10px;
}

.acg-map-controls.dark {
  background: #1f2937;
  color: #f3f4f6;
}

/* Legend styling */
.acg-legend {
  padding: 10px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.acg-legend.dark {
  background: #1f2937;
  color: #f3f4f6;
}

.acg-legend-header {
  font-weight: 600;
  margin-bottom: 8px;
}

.acg-legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.acg-legend-color {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border-radius: 50%;
}

.acg-legend-line {
  width: 24px;
  height: 3px;
  margin-right: 8px;
}

/* Planet symbol styles */
.acg-planet-symbol {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-weight: bold;
  border-radius: 50%;
  margin-right: 8px;
}

/* Planet symbol background colors */
.acg-planet-su { background-color: #FF6B35; color: white; } /* Sun - Orange Red */
.acg-planet-mo { background-color: #CBC5EA; color: black; } /* Moon - Pale Lavender */
.acg-planet-me { background-color: #33A1FD; color: white; } /* Mercury - Blue */
.acg-planet-ve { background-color: #5AAA95; color: white; } /* Venus - Teal */
.acg-planet-ma { background-color: #FF5252; color: white; } /* Mars - Red */
.acg-planet-ju { background-color: #9B5DE5; color: white; } /* Jupiter - Purple */
.acg-planet-sa { background-color: #004E89; color: white; } /* Saturn - Dark Blue */
.acg-planet-ra { background-color: #A846A0; color: white; } /* Rahu - Magenta */
.acg-planet-ke { background-color: #4A5859; color: white; } /* Ketu - Dark Gray */

/* Line type styles */
.acg-line-mc { border-top: 2px solid currentColor; } /* Midheaven - solid line */
.acg-line-ic { border-top: 2px solid currentColor; opacity: 0.7; } /* IC - solid line, less opacity */
.acg-line-as { border-top: 2px dashed currentColor; } /* Ascendant - dashed line */
.acg-line-ds { border-top: 2px dotted currentColor; } /* Descendant - dotted line */

/* Popup styles */
.acg-popup {
  max-width: 300px;
}

.acg-popup-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.acg-popup-content {
  font-size: 0.875rem;
}

.acg-popup-footer {
  margin-top: 8px;
  font-size: 0.75rem;
  color: #6b7280;
}

/* Strength meter */
.acg-strength-meter {
  width: 100%;
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
  margin: 8px 0;
}

.acg-strength-meter-fill {
  height: 100%;
  border-radius: 9999px;
}

/* Strength levels */
.acg-strength-high { background-color: #10b981; }
.acg-strength-medium { background-color: #f59e0b; }
.acg-strength-low { background-color: #ef4444; }

/* Location marker */
.acg-location-marker {
  background-color: #f7b801;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Timeline slider */
.acg-timeline-slider {
  width: 100%;
  margin: 20px 0;
}

.acg-timeline-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 0.75rem;
  color: #6b7280;
}

/* Location analysis panel */
.acg-location-panel {
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Planet badges */
.acg-planet-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-right: 4px;
  margin-bottom: 4px;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .acg-map-container {
    height: 400px;
  }
  
  .acg-map-controls {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 10px;
  }
}

/* Print styles */
@media print {
  .acg-map-controls {
    display: none;
  }
  
  .acg-map-container {
    height: 500px;
    page-break-inside: avoid;
  }
}