/**
 * WILDFIRE PANEL STYLING
 * Modern, glassmorphic design with smooth animations
 */

/* Panel slide-in animation */
@keyframes panel-slide-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Wildfire Panel Container */
.wildfire-panel {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
}

/* Panel Header */
.wildfire-panel-header button#wildfire-close:hover {
  background: rgba(248, 113, 113, 0.2) !important;
  color: #f87171 !important;
}

/* Region Filter Buttons */
.region-filter-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.region-filter-btn:active {
  transform: translateY(0);
}

/* Wildfire Item */
.wildfire-item:hover {
  background: rgba(51, 65, 85, 0.8) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.wildfire-item:active {
  transform: translateY(0);
}

/* Weather Chips */
.weather-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(51, 65, 85, 0.6);
  color: #cbd5e1;
  border: 1px solid rgba(71, 85, 105, 0.6);
  transition: all 0.2s;
}

/* Wind severity */
.weather-chip.wind-critical {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.weather-chip.wind-high {
  background: rgba(251, 146, 60, 0.2);
  border-color: rgba(251, 146, 60, 0.4);
  color: #fdba74;
}

/* Humidity severity */
.weather-chip.humidity-critical {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.weather-chip.humidity-low {
  background: rgba(251, 146, 60, 0.2);
  border-color: rgba(251, 146, 60, 0.4);
  color: #fdba74;
}

/* Temperature severity */
.weather-chip.temp-critical {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.weather-chip.temp-high {
  background: rgba(251, 146, 60, 0.2);
  border-color: rgba(251, 146, 60, 0.4);
  color: #fdba74;
}

/* Fusion Analysis Chips */
.fusion-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.3);
  transition: all 0.2s;
}

/* Fusion threat levels */
.fusion-chip.fusion-extreme {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.fusion-chip.fusion-high {
  background: rgba(251, 146, 60, 0.2);
  border-color: rgba(251, 146, 60, 0.4);
  color: #fdba74;
}

.fusion-chip.fusion-moderate {
  background: rgba(250, 204, 21, 0.2);
  border-color: rgba(250, 204, 21, 0.4);
  color: #fde047;
}

.fusion-chip.fusion-low {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.4);
  color: #86efac;
}

/* Risk Badges */
.risk-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.risk-badge.risk-critical {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.risk-badge.risk-high {
  background: rgba(251, 146, 60, 0.2);
  border: 1px solid rgba(251, 146, 60, 0.4);
  color: #fdba74;
}

.risk-badge.risk-moderate {
  background: rgba(250, 204, 21, 0.2);
  border: 1px solid rgba(250, 204, 21, 0.4);
  color: #fde047;
}

.risk-badge.risk-low {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #86efac;
}

/* Scrollbar styling */
.wildfire-panel-content::-webkit-scrollbar {
  width: 8px;
}

.wildfire-panel-content::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.4);
  border-radius: 4px;
}

.wildfire-panel-content::-webkit-scrollbar-thumb {
  background: rgba(71, 85, 105, 0.6);
  border-radius: 4px;
  transition: background 0.2s;
}

.wildfire-panel-content::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.6);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .wildfire-panel {
    width: calc(100vw - 32px) !important;
    right: 16px !important;
    left: 16px !important;
    max-height: calc(100vh - 80px) !important;
  }
}

@media (max-width: 480px) {
  .wildfire-panel {
    top: 60px !important;
    width: calc(100vw - 20px) !important;
    right: 10px !important;
    left: 10px !important;
  }
  
  .wildfire-item {
    font-size: 13px;
  }
  
  .weather-chip,
  .fusion-chip {
    font-size: 10px;
    padding: 3px 6px;
  }
}

/* Loading state animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.wildfire-panel .loading {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}