Dashboard Widgets

.dashboard-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #f8fafc;
  min-height: 100vh;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}

.dashboard-title {
  font-size: 32px;
  font-weight: 700;
  color: #1a202c;
  margin: 0;
}

.dashboard-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.refresh-btn:hover {
  background: #5a67d8;
  transform: translateY(-1px);
}

.refresh-btn svg {
  width: 16px;
  height: 16px;
}

.time-filter {
  padding: 10px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  font-size: 14px;
  color: #4a5568;
  cursor: pointer;
}

.time-filter:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Statistics Cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

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

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.stat-card.revenue::before {
  background: linear-gradient(90deg, #10b981, #059669);
}

.stat-card.users::before {
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.stat-card.orders::before {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.stat-card.conversion::before {
  background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card.revenue .stat-icon {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.stat-card.users .stat-icon {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.stat-card.orders .stat-icon {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.stat-card.conversion .stat-icon {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.stat-icon svg {
  width: 24px;
  height: 24px;
}

.stat-content {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  margin: 0 0 4px 0;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 8px 0;
  line-height: 1;
}

.stat-change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
}

.stat-change.positive {
  color: #10b981;
}

.stat-change.negative {
  color: #ef4444;
}

.stat-change svg {
  width: 16px;
  height: 16px;
}

/* Widgets Grid */
.widgets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
}

.widget {
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.widget-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.widget-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
  margin: 0;
}

.widget-actions {
  display: flex;
  gap: 8px;
}

.widget-btn {
  padding: 6px 12px;
  border: 1px solid #e2e8f0;
  background: white;
  color: #6b7280;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.widget-btn:hover {
  background: #f7fafc;
  border-color: #cbd5e0;
}

.widget-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

/* Chart Widget */
.chart-container {
  padding: 24px;
  height: 300px;
  position: relative;
}

#revenueChart {
  width: 100%;
  height: 100%;
}

/* Progress Widget */
.progress-list {
  padding: 24px;
}

.progress-item {
  margin-bottom: 24px;
}

.progress-item:last-child {
  margin-bottom: 0;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.progress-label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.progress-value {
  font-size: 12px;
  color: #6b7280;
}

.progress-bar {
  height: 8px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 4px;
  transition: width 1s ease;
  width: 0;
}

.progress-percentage {
  font-size: 12px;
  font-weight: 600;
  color: #667eea;
  text-align: right;
  display: block;
}

/* Activity Widget */
.activity-list {
  padding: 24px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

.activity-item:last-child {
  margin-bottom: 0;
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-icon.new-user {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.activity-icon.order {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.activity-icon.payment {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.activity-icon.alert {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.activity-icon svg {
  width: 16px;
  height: 16px;
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: 14px;
  color: #374151;
  margin: 0 0 4px 0;
  line-height: 1.4;
}

.activity-time {
  font-size: 12px;
  color: #9ca3af;
}

/* Quick Stats Widget */
.quick-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 24px;
}

.quick-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
}

.quick-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quick-stat-icon svg {
  width: 16px;
  height: 16px;
}

.quick-stat-content {
  flex: 1;
}

.quick-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #1a202c;
  line-height: 1;
  margin-bottom: 2px;
}

.quick-stat-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .widgets-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 16px;
  }
  
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .dashboard-title {
    font-size: 24px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .stat-card {
    padding: 20px;
  }
  
  .stat-value {
    font-size: 24px;
  }
  
  .widgets-grid {
    grid-template-columns: 1fr;
  }
  
  .quick-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* Animations */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-value {
  animation: countUp 0.6s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.activity-item {
  animation: slideIn 0.4s ease;
}

document.addEventListener('DOMContentLoaded', () => {
  // Animate statistics values
  function animateValue(element, start, end, duration) {
    const startTime = performance.now();
    const isPercentage = element.textContent.includes('%');
    const isCurrency = element.textContent.includes('$');
    
    function updateValue(currentTime) {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);
      
      const current = start + (end - start) * easeOutQuart(progress);
      
      if (isCurrency) {
        element.textContent = '$' + Math.floor(current).toLocaleString();
      } else if (isPercentage) {
        element.textContent = current.toFixed(1) + '%';
      } else {
        element.textContent = Math.floor(current).toLocaleString();
      }
      
      if (progress < 1) {
        requestAnimationFrame(updateValue);
      }
    }
    
    requestAnimationFrame(updateValue);
  }
  
  function easeOutQuart(t) {
    return 1 - Math.pow(1 - t, 4);
  }
  
  // Animate stat values on load
  const statValues = document.querySelectorAll('.stat-value');
  statValues.forEach(element => {
    const targetValue = parseFloat(element.dataset.value);
    animateValue(element, 0, targetValue, 2000);
  });
  
  // Animate progress bars
  function animateProgressBars() {
    const progressBars = document.querySelectorAll('.progress-fill');
    progressBars.forEach((bar, index) => {
      setTimeout(() => {
        const progress = bar.dataset.progress;
        bar.style.width = progress + '%';
      }, index * 200);
    });
  }
  
  // Start progress animation after a delay
  setTimeout(animateProgressBars, 1000);
  
  // Refresh button functionality
  const refreshBtn = document.getElementById('refreshBtn');
  refreshBtn.addEventListener('click', () => {
    // Add loading state
    refreshBtn.disabled = true;
    refreshBtn.style.opacity = '0.6';
    
    const icon = refreshBtn.querySelector('svg');
    icon.style.animation = 'spin 1s linear infinite';
    
    // Simulate data refresh
    setTimeout(() => {
      // Reset animations
      statValues.forEach(element => {
        const targetValue = parseFloat(element.dataset.value);
        // Add some random variation
        const variation = (Math.random() - 0.5) * 0.1;
        const newValue = targetValue * (1 + variation);
        element.dataset.value = newValue.toFixed(0);
        animateValue(element, 0, newValue, 1500);
      });
      
      // Reset progress bars
      const progressBars = document.querySelectorAll('.progress-fill');
      progressBars.forEach(bar => {
        bar.style.width = '0%';
      });
      
      setTimeout(() => {
        animateProgressBars();
      }, 500);
      
      // Reset button state
      refreshBtn.disabled = false;
      refreshBtn.style.opacity = '1';
      icon.style.animation = '';
    }, 2000);
  });
  
  // Time filter functionality
  const timeFilter = document.getElementById('timeFilter');
  timeFilter.addEventListener('change', (e) => {
    console.log('Time filter changed to:', e.target.value);
    // Here you would typically fetch new data based on the selected period
  });
  
  // Chart period buttons
  const chartButtons = document.querySelectorAll('.widget-btn[data-period]');
  chartButtons.forEach(button => {
    button.addEventListener('click', () => {
      // Remove active class from all buttons
      chartButtons.forEach(btn => btn.classList.remove('active'));
      // Add active class to clicked button
      button.classList.add('active');
      
      console.log('Chart period changed to:', button.dataset.period);
      // Here you would update the chart data
    });
  });
  
  // Simple chart simulation (you would use a real charting library like Chart.js)
  function drawSimpleChart() {
    const canvas = document.getElementById('revenueChart');
    const ctx = canvas.getContext('2d');
    
    // Set canvas size
    const rect = canvas.getBoundingClientRect();
    canvas.width = rect.width * window.devicePixelRatio;
    canvas.height = rect.height * window.devicePixelRatio;
    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
    
    // Clear canvas
    ctx.clearRect(0, 0, rect.width, rect.height);
    
    // Sample data points
    const data = [30, 45, 35, 60, 55, 70, 65, 80, 75, 90, 85, 95];
    const maxValue = Math.max(...data);
    
    // Chart dimensions
    const padding = 40;
    const chartWidth = rect.width - padding * 2;
    const chartHeight = rect.height - padding * 2;
    
    // Draw grid lines
    ctx.strokeStyle = '#f1f5f9';
    ctx.lineWidth = 1;
    
    for (let i = 0; i <= 5; i++) {
      const y = padding + (chartHeight / 5) * i;
      ctx.beginPath();
      ctx.moveTo(padding, y);
      ctx.lineTo(rect.width - padding, y);
      ctx.stroke();
    }
    
    // Draw line chart
    ctx.strokeStyle = '#667eea';
    ctx.lineWidth = 3;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    
    ctx.beginPath();
    data.forEach((value, index) => {
      const x = padding + (chartWidth / (data.length - 1)) * index;
      const y = padding + chartHeight - (value / maxValue) * chartHeight;
      
      if (index === 0) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }
    });
    ctx.stroke();
    
    // Draw data points
    ctx.fillStyle = '#667eea';
    data.forEach((value, index) => {
      const x = padding + (chartWidth / (data.length - 1)) * index;
      const y = padding + chartHeight - (value / maxValue) * chartHeight;
      
      ctx.beginPath();
      ctx.arc(x, y, 4, 0, Math.PI * 2);
      ctx.fill();
    });
  }
  
  // Draw chart after a delay to ensure canvas is ready
  setTimeout(drawSimpleChart, 100);
  
  // Redraw chart on window resize
  window.addEventListener('resize', () => {
    setTimeout(drawSimpleChart, 100);
  });
  
  // Add CSS for spin animation
  const style = document.createElement('style');
  style.textContent = `
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
  `;
  document.head.appendChild(style);
  
  // Intersection Observer for animations
  const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  };
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.opacity = '1';
        entry.target.style.transform = 'translateY(0)';
      }
    });
  }, observerOptions);
  
  // Observe widgets for scroll animations
  const widgets = document.querySelectorAll('.widget, .stat-card');
  widgets.forEach((widget, index) => {
    widget.style.opacity = '0';
    widget.style.transform = 'translateY(20px)';
    widget.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
    observer.observe(widget);
  });
});