/* Insights Tab Styling */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(400px, auto); /* Set minimum row height */
  gap: 20px;
  margin: 20px 0;
}

.insight-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.insight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.card-header {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f3f4f6;
}

.card-header h3 {
  margin: 0;
  color: #374151;
  font-size: 1.1rem;
  font-weight: 600;
}

.card-content {
  color: #6b7280;
}

/* Stats Card */
.stats-card .stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}

.stats-card .stat-item:last-child {
  border-bottom: none;
}

.stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #059669;
}

.stat-label {
  font-size: 0.9rem;
  color: #6b7280;
}

/* Activity Times */
.activity-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}

.activity-time:last-child {
  border-bottom: none;
}

.activity-time strong {
  color: #374151;
}

.activity-time span {
  font-weight: 600;
  color: #059669;
}

/* Location Items */
.location-item {
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}

.location-item:last-child {
  border-bottom: none;
}

.location-name {
  font-weight: 500;
  color: #374151;
}

/* Recent Activity */
.activity-item {
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-text {
  color: #6b7280;
  font-size: 0.9rem;
}

/* AI Insights */
.insight-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.insight-item:last-child {
  border-bottom: none;
}

.insight-icon {
  font-size: 1.2rem;
  margin-top: 2px;
}

.insight-text {
  flex: 1;
}

.insight-text strong {
  color: #374151;
  display: block;
  margin-bottom: 4px;
}

.insight-text span {
  color: #6b7280;
  font-size: 0.9rem;
}

/* Weather Patterns */
.weather-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}

.weather-item:last-child {
  border-bottom: none;
}

.weather-condition {
  color: #374151;
  font-weight: 500;
}

/* Action Buttons */
.insights-actions {
  margin-top: 30px;
  text-align: center;
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.insights-actions button {
  min-width: 150px;
}

/* Tab Description */
.tab-description {
  color: #6b7280;
  font-size: 1rem;
  margin-bottom: 20px;
  text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
  .insights-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .insight-card {
    padding: 15px;
  }
  
  .insights-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .insights-actions button {
    width: 100%;
    max-width: 250px;
  }
}

/* Loading states */
.loading-placeholder {
  color: #9ca3af;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

/* Special styling for specific cards */
.ai-insights {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color: #0284c7;
}

.weather-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfccb 100%);
  border-color: #059669;
}

.recent-activity {
  background: linear-gradient(135deg, #fef7ff 0%, #faf5ff 100%);
  border-color: #7c3aed;
}

/* Explicitly define where the heatmap should go */
.insights-grid .chart-container:nth-child(5),
.insights-grid .chart-container:nth-child(6) {
  grid-column: auto;
}

.insights-grid .heatmap-container {
  grid-column: 1 / -1; /* Make the heatmap span full width */
  margin-top: 20px;
}

/* Fix for chart container and wrapper */
.chart-container {
  position: relative;
  overflow: hidden; /* Prevent content from spilling out */
  display: flex;
  flex-direction: column;
  height: 100%; /* Take full height of grid cell */
  min-height: 400px; /* Increase from 250px to 400px */
}

.chart-wrapper {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%; /* Ensure wrapper fills container */
  overflow: visible; /* Allow chart labels to be visible */
  min-height: 350px; /* Add minimum height for the wrapper */
}

/* Fix for the heatmap specifically */
.heatmap-container {
  grid-column: 1 / -1; /* Make the heatmap span full width */
  margin-top: 20px;
  position: relative;
  min-height: 450px; /* Increase from 300px */
  height: auto;
}

/* Ensure chart titles stay within containers */
.chart-title {
  position: relative; /* Not absolute */
  margin-bottom: 10px;
  text-align: center;
  font-size: 16px; /* Adjust if titles are too large */
  line-height: 1.2;
}

/* Fix for "No species detections yet" message */
.empty-state-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #666;
  font-style: italic;
}

/* ===============================
   DARK THEME STYLES
   =============================== */

/* Dark Theme Variables - Consistent with main styles */
body.dark-theme {
    --dark-bg-primary: #121212;
    --dark-bg-secondary: #1e1e1e;
    --dark-bg-tertiary: #2d2d2d;
    --dark-surface-1: #2c2c2c;
    --dark-surface-2: #383838;
    --dark-surface-3: #404040;
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #b3b3b3;
    --dark-text-muted: #8a8a8a;
    --dark-border: #404040;
    --dark-border-light: #525252;
    --dark-primary: #66BB6A;
    --dark-primary-dark: #4CAF50;
    --dark-accent: #FFB74D;
}

/* Insight Cards Dark Theme */
body.dark-theme .insight-card {
    background-color: var(--dark-surface-1);
    border: 1px solid var(--dark-border);
    color: var(--dark-text-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.dark-theme .insight-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

/* Card Headers Dark Theme */
body.dark-theme .card-header {
    border-bottom: 2px solid var(--dark-border);
}

body.dark-theme .card-header h3 {
    color: var(--dark-text-primary);
}

/* Card Content Dark Theme */
body.dark-theme .card-content {
    color: var(--dark-text-secondary);
}

/* Stats Items Dark Theme */
body.dark-theme .stats-card .stat-item {
    border-bottom: 1px solid var(--dark-border);
}

body.dark-theme .stat-label {
    color: var(--dark-text-secondary);
}

body.dark-theme .stat-value {
    color: var(--dark-text-primary);
}

/* Chart Containers Dark Theme */
body.dark-theme .chart-container {
    background-color: var(--dark-surface-2);
    border: 1px solid var(--dark-border);
}

body.dark-theme .chart-wrapper {
    background-color: var(--dark-surface-2);
}

/* Chart Titles Dark Theme */
body.dark-theme .chart-title {
    color: var(--dark-text-primary);
}

body.dark-theme .chart-subtitle {
    color: var(--dark-text-secondary);
}

/* Empty State Message Dark Theme */
body.dark-theme .empty-state-message {
    color: var(--dark-text-muted);
}

/* Heatmap Container Dark Theme */
body.dark-theme .heatmap-container {
    background-color: var(--dark-surface-1);
    border: 1px solid var(--dark-border);
}

/* Improve chart canvas backgrounds for better visibility */
body.dark-theme canvas {
    background-color: var(--dark-surface-2) !important;
    border-radius: 8px;
}

/* Activity Timeline Dark Theme */
body.dark-theme .activity-timeline {
    background-color: var(--dark-surface-1);
    border: 1px solid var(--dark-border);
}

body.dark-theme .timeline-hour {
    background-color: var(--dark-surface-2);
    border: 1px solid var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-theme .timeline-hour.active {
    background-color: var(--dark-primary);
    color: var(--dark-bg-primary);
}

/* Species Detection Cards Dark Theme */
body.dark-theme .species-card {
    background-color: var(--dark-surface-1);
    border: 1px solid var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-theme .species-name {
    color: var(--dark-text-primary);
}

body.dark-theme .species-count {
    color: var(--dark-primary);
}

body.dark-theme .confidence-score {
    color: var(--dark-accent);
}