{% extends 'base.html' %}

{% block content %}
<div class="dashboard-container">
  <!-- Dashboard Header -->
  <div class="dashboard-header">
    <div class="header-content">
      <h1>📊 Admin Dashboard</h1>
      <p class="header-subtitle">Welcome back! Here's your business overview</p>
    </div>
    <div class="header-actions">
      <a href="{{ url_for('purchase_new') }}" class="btn-primary">📦 New Purchase</a>
      <a href="{{ url_for('sale_new') }}" class="btn-outline">💰 New Sale</a>
    </div>
  </div>

  <!-- Alert Messages -->
  {% if inventory_kg <= 0 %}
    <div class="alert alert-danger">
      <div class="alert-icon">⚠️</div>
      <div class="alert-content">
        <h4>Critical: No Inventory Available</h4>
        <p>You cannot make any sales until you purchase more meat from farms.</p>
      </div>
      <a href="{{ url_for('purchase_new') }}" class="btn-primary">Purchase Meat</a>
    </div>
  {% elif inventory_kg < 100 %}
    <div class="alert alert-warning">
      <div class="alert-icon">⚠️</div>
      <div class="alert-content">
        <h4>Low Inventory Warning</h4>
        <p>Only {{ inventory_kg|kg }} remaining. Consider purchasing more meat soon.</p>
      </div>
      <a href="{{ url_for('purchase_new') }}" class="btn-outline">Purchase Meat</a>
    </div>
  {% endif %}

  <!-- Key Metrics Cards -->
  <div class="metrics-grid">
    <div class="metric-card sales-card">
      <div class="card-icon">💰</div>
      <div class="card-content">
        <div class="card-title">Total Sales</div>
        <div class="card-value">{{ total_sales_amount|currency }}</div>
        <div class="card-subtitle">{{ total_sold_kg|kg }} sold</div>
      </div>
    </div>

    <div class="metric-card customers-card">
      <div class="card-icon">👥</div>
      <div class="card-content">
        <div class="card-title">Total Customers</div>
        <div class="card-value">{{ total_customers }}</div>
        <div class="card-subtitle">Active customers</div>
      </div>
    </div>

    <div class="metric-card profit-card">
      <div class="card-icon">📈</div>
      <div class="card-content">
        <div class="card-title">Total Revenue</div>
        <div class="card-value">{{ total_revenue|currency }}</div>
        <div class="card-subtitle">Sales - Purchases</div>
      </div>
    </div>

    <div class="metric-card products-card">
      <div class="card-icon">📦</div>
      <div class="card-content">
        <div class="card-title">Available Inventory</div>
        <div class="card-value">{{ inventory_kg|kg }}</div>
        <div class="card-subtitle">
          {% if inventory_kg <= 0 %}Cannot sell
          {% elif inventory_kg < 100 %}Low stock
          {% else %}In stock{% endif %}
        </div>
      </div>
    </div>
  </div>

  <!-- Charts Section -->
  <div class="charts-section">
    <div class="chart-container">
      <div class="chart-header">
        <h3>📊 Sales vs Purchases (Last 7 Days)</h3>
        <div class="chart-legend">
          <div class="legend-item">
            <div class="legend-color sales"></div>
            <span>Sales</span>
          </div>
          <div class="legend-item">
            <div class="legend-color purchases"></div>
            <span>Purchases</span>
          </div>
        </div>
      </div>
      <div class="chart-wrapper">
        <canvas id="salesChart"></canvas>
      </div>
    </div>

    <div class="chart-container">
      <div class="chart-header">
        <h3>📦 Inventory Trend (Last 30 Days)</h3>
      </div>
      <div class="chart-wrapper">
        <canvas id="inventoryChart"></canvas>
      </div>
    </div>
  </div>

  <!-- Pie Charts Section -->
  <div class="pie-charts-section">
    <div class="chart-container">
      <div class="chart-header">
        <h3>💰 Revenue Breakdown</h3>
      </div>
      <div class="chart-wrapper">
        <canvas id="revenueChart"></canvas>
      </div>
    </div>

    <div class="chart-container">
      <div class="chart-header">
        <h3>📋 Order Status Distribution</h3>
      </div>
      <div class="chart-wrapper">
        <canvas id="ordersChart"></canvas>
      </div>
    </div>
  </div>

  <!-- Business Overview -->
  <div class="overview-section">
    <div class="overview-card">
      <div class="overview-header">
        <h3>👥 Business Overview</h3>
      </div>
      <div class="overview-grid">
        <div class="overview-item">
          <div class="overview-icon">👤</div>
          <div class="overview-content">
            <div class="overview-value">{{ total_customers }}</div>
            <div class="overview-label">Customers</div>
          </div>
        </div>
        <div class="overview-item">
          <div class="overview-icon">👷</div>
          <div class="overview-content">
            <div class="overview-value">{{ total_employees }}</div>
            <div class="overview-label">Employees</div>
          </div>
        </div>
        <div class="overview-item">
          <div class="overview-icon">📋</div>
          <div class="overview-content">
            <div class="overview-value">{{ pending_orders + approved_orders + assigned_orders + delivered_orders }}</div>
            <div class="overview-label">Total Orders</div>
          </div>
        </div>
      </div>
    </div>

    <div class="overview-card">
      <div class="overview-header">
        <h3>📋 Order Status</h3>
      </div>
      <div class="status-grid">
        <div class="status-item pending">
          <div class="status-icon">⏳</div>
          <div class="status-content">
            <div class="status-value">{{ pending_orders }}</div>
            <div class="status-label">Pending</div>
          </div>
        </div>
        <div class="status-item approved">
          <div class="status-icon">✅</div>
          <div class="status-content">
            <div class="status-value">{{ approved_orders }}</div>
            <div class="status-label">Approved</div>
          </div>
        </div>
        <div class="status-item assigned">
          <div class="status-icon">🚚</div>
          <div class="status-content">
            <div class="status-value">{{ assigned_orders }}</div>
            <div class="status-label">Assigned</div>
          </div>
        </div>
        <div class="status-item delivered">
          <div class="status-icon">📦</div>
          <div class="status-content">
            <div class="status-value">{{ delivered_orders }}</div>
            <div class="status-label">Delivered</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Account Balances -->
  {% if account_names %}
  <div class="accounts-section">
    <div class="accounts-card">
      <div class="accounts-header">
        <h3>🏦 Account Balances</h3>
      </div>
      <div class="accounts-grid">
        {% for i in range(account_names|length) %}
        <div class="account-item">
          <div class="account-name">{{ account_names[i] }}</div>
          <div class="account-balance" style="color: {% if account_balances[i] >= 0 %}#059669{% else %}#dc2626{% endif %};">
            {{ account_balances[i]|currency }}
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}

  <!-- Recent Activity -->
  <div class="activity-section">
    <div class="activity-card">
      <div class="activity-header">
        <h3>📈 Recent Sales</h3>
        <a href="{{ url_for('sales_list') }}" class="btn-outline">View All</a>
      </div>
      <div class="activity-list">
        {% for sale in recent_sales %}
        <div class="activity-item">
          <div class="activity-icon">💰</div>
          <div class="activity-content">
            <div class="activity-title">{{ sale.customer.name }}</div>
            <div class="activity-subtitle">{{ sale.weight_kg|kg }} • {{ sale.date|date_format }}</div>
          </div>
          <div class="activity-amount">{{ sale.total_amount|currency }}</div>
        </div>
        {% else %}
        <div class="activity-empty">No recent sales</div>
        {% endfor %}
      </div>
    </div>

    <div class="activity-card">
      <div class="activity-header">
        <h3>📦 Recent Purchases</h3>
        <a href="{{ url_for('purchases_list') }}" class="btn-outline">View All</a>
      </div>
      <div class="activity-list">
        {% for purchase in recent_purchases %}
        <div class="activity-item">
          <div class="activity-icon">📦</div>
          <div class="activity-content">
            <div class="activity-title">{{ purchase.farm.name if purchase.farm else 'Direct Purchase' }}</div>
            <div class="activity-subtitle">{{ purchase.weight_kg|kg }} • {{ purchase.date|date_format }}</div>
          </div>
          <div class="activity-amount">{{ purchase.total_amount|currency }}</div>
        </div>
        {% else %}
        <div class="activity-empty">No recent purchases</div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<!-- Chart.js Library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
// Chart.js configuration
Chart.defaults.responsive = true;
Chart.defaults.maintainAspectRatio = false;
Chart.defaults.plugins.legend.display = false;

// Sales vs Purchases Chart
const salesCtx = document.getElementById('salesChart').getContext('2d');
new Chart(salesCtx, {
  type: 'line',
  data: {
    labels: {{ sales_chart_labels|tojson }},
    datasets: [{
      label: 'Sales',
      data: {{ sales_chart_data|tojson }},
      borderColor: '#059669',
      backgroundColor: 'rgba(5, 150, 105, 0.1)',
      borderWidth: 3,
      fill: true,
      tension: 0.4,
      pointBackgroundColor: '#059669',
      pointBorderColor: '#ffffff',
      pointBorderWidth: 2,
      pointRadius: 5
    }, {
      label: 'Purchases',
      data: {{ purchase_chart_data|tojson }},
      borderColor: '#dc2626',
      backgroundColor: 'rgba(220, 38, 38, 0.1)',
      borderWidth: 3,
      fill: true,
      tension: 0.4,
      pointBackgroundColor: '#dc2626',
      pointBorderColor: '#ffffff',
      pointBorderWidth: 2,
      pointRadius: 5
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    interaction: {
      intersect: false,
      mode: 'index'
    },
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        titleColor: '#ffffff',
        bodyColor: '#ffffff',
        borderColor: '#e5e7eb',
        borderWidth: 1,
        cornerRadius: 8,
        displayColors: true
      }
    },
    scales: {
      x: {
        grid: {
          display: false
        },
        ticks: {
          color: '#6b7280'
        }
      },
      y: {
        beginAtZero: true,
        grid: {
          color: 'rgba(0, 0, 0, 0.05)'
        },
        ticks: {
          color: '#6b7280',
          callback: function(value) {
            return 'PKR ' + value.toLocaleString();
          }
        }
      }
    }
  }
});

// Inventory Trend Chart
const inventoryCtx = document.getElementById('inventoryChart').getContext('2d');
new Chart(inventoryCtx, {
  type: 'line',
  data: {
    labels: {{ inventory_chart_labels|tojson }},
    datasets: [{
      label: 'Inventory (kg)',
      data: {{ inventory_chart_data|tojson }},
      borderColor: '#2563eb',
      backgroundColor: 'rgba(37, 99, 235, 0.1)',
      borderWidth: 3,
      fill: true,
      tension: 0.4,
      pointBackgroundColor: '#2563eb',
      pointBorderColor: '#ffffff',
      pointBorderWidth: 2,
      pointRadius: 4
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    interaction: {
      intersect: false,
      mode: 'index'
    },
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        titleColor: '#ffffff',
        bodyColor: '#ffffff',
        borderColor: '#e5e7eb',
        borderWidth: 1,
        cornerRadius: 8
      }
    },
    scales: {
      x: {
        grid: {
          display: false
        },
        ticks: {
          color: '#6b7280',
          maxTicksLimit: 10
        }
      },
      y: {
        beginAtZero: true,
        grid: {
          color: 'rgba(0, 0, 0, 0.05)'
        },
        ticks: {
          color: '#6b7280',
          callback: function(value) {
            return value.toFixed(0) + ' kg';
          }
        }
      }
    }
  }
});

// Revenue Breakdown Pie Chart
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
new Chart(revenueCtx, {
  type: 'doughnut',
  data: {
    labels: ['Sales Revenue', 'Purchase Costs'],
    datasets: [{
      data: [{{ total_sales_amount or 0 }}, {{ total_purchase_amount or 0 }}],
      backgroundColor: [
        'rgba(5, 150, 105, 0.8)',
        'rgba(220, 38, 38, 0.8)'
      ],
      borderColor: [
        '#059669',
        '#dc2626'
      ],
      borderWidth: 2,
      hoverOffset: 10
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    cutout: '60%',
    plugins: {
      legend: {
        display: true,
        position: 'bottom',
        labels: {
          padding: 20,
          usePointStyle: true,
          color: '#374151'
        }
      },
      tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        titleColor: '#ffffff',
        bodyColor: '#ffffff',
        borderColor: '#e5e7eb',
        borderWidth: 1,
        cornerRadius: 8,
        callbacks: {
          label: function(context) {
            return context.label + ': PKR ' + context.parsed.toLocaleString();
          }
        }
      }
    }
  }
});

// Order Status Distribution Pie Chart
const ordersCtx = document.getElementById('ordersChart').getContext('2d');
new Chart(ordersCtx, {
  type: 'doughnut',
  data: {
    labels: ['Pending', 'Approved', 'Assigned', 'Delivered'],
    datasets: [{
      data: [{{ pending_orders or 0 }}, {{ approved_orders or 0 }}, {{ assigned_orders or 0 }}, {{ delivered_orders or 0 }}],
      backgroundColor: [
        'rgba(245, 158, 11, 0.8)',
        'rgba(5, 150, 105, 0.8)',
        'rgba(37, 99, 235, 0.8)',
        'rgba(99, 102, 241, 0.8)'
      ],
      borderColor: [
        '#f59e0b',
        '#059669',
        '#2563eb',
        '#6366f1'
      ],
      borderWidth: 2,
      hoverOffset: 10
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    cutout: '60%',
    plugins: {
      legend: {
        display: true,
        position: 'bottom',
        labels: {
          padding: 20,
          usePointStyle: true,
          color: '#374151'
        }
      },
      tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        titleColor: '#ffffff',
        bodyColor: '#ffffff',
        borderColor: '#e5e7eb',
        borderWidth: 1,
        cornerRadius: 8,
        callbacks: {
          label: function(context) {
            return context.label + ': ' + context.parsed + ' orders';
          }
        }
      }
    }
  }
});

// Handle window resize for charts
window.addEventListener('resize', function() {
  Chart.helpers.each(Chart.instances, function(chart) {
    chart.resize();
  });
});
</script>

<style>
.dashboard-container {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding: 24px;
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  border-radius: 16px;
  color: white;
}

.header-content h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
}

.header-subtitle {
  margin: 8px 0 0 0;
  opacity: 0.9;
  font-size: 16px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.alert {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.alert-danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.alert-warning {
  background: #fffbeb;
  border: 1px solid #fed7aa;
  color: #92400e;
}

.alert-icon {
  font-size: 24px;
}

.alert-content h4 {
  margin: 0 0 4px 0;
  font-weight: 600;
}

.alert-content p {
  margin: 0;
  font-size: 14px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.metric-card {
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: none;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 100px;
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  z-index: 0;
}

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

/* Sales Card - Light Blue/Teal Gradient */
.sales-card {
  background: linear-gradient(135deg, #e0f2fe 0%, #b3e5fc 100%);
}

.sales-card::before {
  background: linear-gradient(135deg, #0277bd 0%, #0288d1 100%);
}

/* Customers Card - Light Purple/Pink Gradient */
.customers-card {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
}

.customers-card::before {
  background: linear-gradient(135deg, #7b1fa2 0%, #8e24aa 100%);
}

/* Profit Card - Light Orange/Yellow Gradient */
.profit-card {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}

.profit-card::before {
  background: linear-gradient(135deg, #f57c00 0%, #ff9800 100%);
}

/* Products Card - Light Green Gradient */
.products-card {
  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
}

.products-card::before {
  background: linear-gradient(135deg, #388e3c 0%, #4caf50 100%);
}

.card-icon {
  font-size: 28px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px);
}

.card-content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.card-title {
  font-size: 14px;
  color: #374151;
  font-weight: 600;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

.card-value {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.card-subtitle {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
  line-height: 1.3;
  opacity: 0.9;
}

.charts-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.pie-charts-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.chart-container {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.chart-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.chart-wrapper {
  flex: 1;
  position: relative;
  min-height: 300px;
  max-height: 400px;
}

.chart-wrapper canvas {
  max-width: 100% !important;
  height: auto !important;
}

.chart-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #6b7280;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-color.sales {
  background: #059669;
}

.legend-color.purchases {
  background: #dc2626;
}

.overview-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.overview-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}

.overview-header h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.overview-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 12px;
}

.overview-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 8px;
}

.overview-value {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.overview-label {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
}

.status-item.pending {
  background: #fef3c7;
  border: 1px solid #f59e0b;
}

.status-item.approved {
  background: #d1fae5;
  border: 1px solid #059669;
}

.status-item.assigned {
  background: #dbeafe;
  border: 1px solid #2563eb;
}

.status-item.delivered {
  background: #e0e7ff;
  border: 1px solid #6366f1;
}

.status-icon {
  font-size: 20px;
}

.status-value {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.status-label {
  font-size: 12px;
  margin: 0;
}

.accounts-section {
  margin-bottom: 32px;
}

.accounts-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}

.accounts-header h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.account-item {
  padding: 16px;
  background: #f9fafb;
  border-radius: 12px;
  text-align: center;
}

.account-name {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 8px;
}

.account-balance {
  font-size: 18px;
  font-weight: 700;
}

.activity-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.activity-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.activity-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.activity-icon {
  font-size: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 6px;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 2px 0;
}

.activity-subtitle {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
}

.activity-amount {
  font-size: 14px;
  font-weight: 700;
  color: #059669;
}

.activity-empty {
  text-align: center;
  color: #9ca3af;
  font-style: italic;
  padding: 20px;
}

@media (max-width: 1200px) {
  .charts-section,
  .pie-charts-section {
    grid-template-columns: 1fr;
  }
  
  .chart-container {
    min-height: 350px;
  }
  
  .chart-wrapper {
    min-height: 250px;
    max-height: 350px;
  }
}

@media (max-width: 1024px) {
  .overview-section,
  .activity-section {
    grid-template-columns: 1fr;
  }
  
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .chart-legend {
    align-self: flex-end;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 16px;
  }
  
  .dashboard-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .header-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .header-actions .btn-primary,
  .header-actions .btn-outline {
    width: 100%;
    text-align: center;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .metric-card {
    padding: 16px;
  }
  
  .card-value {
    font-size: 20px;
  }
  
  .overview-grid,
  .status-grid {
    grid-template-columns: 1fr;
  }
  
  .chart-container {
    padding: 16px;
    min-height: 300px;
  }
  
  .chart-wrapper {
    min-height: 200px;
    max-height: 300px;
  }
  
  .chart-header h3 {
    font-size: 16px;
  }
  
  .accounts-grid {
    grid-template-columns: 1fr;
  }
  
  .activity-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .activity-amount {
    align-self: flex-end;
  }
}

@media (max-width: 480px) {
  .dashboard-container {
    padding: 12px;
  }
  
  .dashboard-header {
    padding: 16px;
  }
  
  .header-content h1 {
    font-size: 24px;
  }
  
  .metric-card {
    padding: 16px;
  }
  
  .metric-value {
    font-size: 24px;
  }
  
  .chart-container {
    padding: 12px;
    min-height: 250px;
  }
  
  .chart-wrapper {
    min-height: 180px;
    max-height: 250px;
  }
  
  .overview-item,
  .status-item {
    padding: 12px;
  }
  
  .overview-value,
  .status-value {
    font-size: 18px;
  }
}
</style>
{% endblock %}