<template>
  <div class="beauty-dashboard-container">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20" class="stats-cards">
      <el-col :span="6">
        <div class="stat-card customer-card">
          <div class="stat-icon">
            <i class="el-icon-user"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">
              <count-to :start-val="0" :end-val="1248" :duration="2000" />
            </div>
            <div class="stat-label">总客户数</div>
            <div class="stat-trend positive">+12.5%</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card revenue-card">
          <div class="stat-icon">
            <i class="el-icon-money"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">
              ¥<count-to :start-val="0" :end-val="89650" :duration="2000" />
            </div>
            <div class="stat-label">本月营收</div>
            <div class="stat-trend positive">+8.3%</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card appointment-card">
          <div class="stat-icon">
            <i class="el-icon-date"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">
              <count-to :start-val="0" :end-val="156" :duration="2000" />
            </div>
            <div class="stat-label">今日预约</div>
            <div class="stat-trend positive">+5.2%</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card service-card">
          <div class="stat-icon">
            <i class="el-icon-service"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">
              <count-to :start-val="0" :end-val="89" :duration="2000" />
            </div>
            <div class="stat-label">服务项目</div>
            <div class="stat-trend neutral">0%</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-section">
      <!-- 营收趋势图 -->
      <el-col :span="16">
        <div class="chart-card">
          <div class="chart-header">
            <h3>营收趋势分析</h3>
            <el-radio-group v-model="revenueTimeRange" size="small">
              <el-radio-button label="week">本周</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="quarter">本季度</el-radio-button>
            </el-radio-group>
          </div>
          <div id="revenueChart" class="chart-container"></div>
        </div>
      </el-col>
      
      <!-- 客户来源饼图 -->
      <el-col :span="8">
        <div class="chart-card">
          <div class="chart-header">
            <h3>客户来源分布</h3>
          </div>
          <div id="customerSourceChart" class="chart-container"></div>
        </div>
      </el-col>
    </el-row>

    <!-- 服务项目分析 -->
    <el-row :gutter="20" class="charts-section">
      <el-col :span="12">
        <div class="chart-card">
          <div class="chart-header">
            <h3>热门服务项目</h3>
          </div>
          <div id="serviceRankChart" class="chart-container"></div>
        </div>
      </el-col>
      
      <el-col :span="12">
        <div class="chart-card">
          <div class="chart-header">
            <h3>员工绩效排行</h3>
          </div>
          <div id="employeeRankChart" class="chart-container"></div>
        </div>
      </el-col>
    </el-row>

    <!-- 实时数据监控 -->
    <el-row :gutter="20" class="realtime-section">
      <el-col :span="12">
        <div class="chart-card">
          <div class="chart-header">
            <h3>今日预约时间分布</h3>
          </div>
          <div id="appointmentTimeChart" class="chart-container"></div>
        </div>
      </el-col>
      
      <el-col :span="12">
        <div class="chart-card">
          <div class="chart-header">
            <h3>客户满意度趋势</h3>
          </div>
          <div id="satisfactionChart" class="chart-container"></div>
        </div>
      </el-col>
    </el-row>

    <!-- 底部信息卡片 -->
    <el-row :gutter="20" class="info-section">
      <el-col :span="8">
        <div class="info-card">
          <div class="info-header">
            <h4>最新预约</h4>
            <el-button type="text" size="small">查看全部</el-button>
          </div>
          <div class="info-list">
            <div v-for="(item, index) in latestAppointments" :key="index" class="info-item">
              <div class="info-avatar">
                <img :src="item.avatar" :alt="item.name">
              </div>
              <div class="info-content">
                <div class="info-title">{{ item.name }}</div>
                <div class="info-desc">{{ item.service }} - {{ item.time }}</div>
              </div>
              <div class="info-status" :class="item.status">{{ item.statusText }}</div>
            </div>
          </div>
        </div>
      </el-col>
      
      <el-col :span="8">
        <div class="info-card">
          <div class="info-header">
            <h4>热门产品</h4>
            <el-button type="text" size="small">查看全部</el-button>
          </div>
          <div class="info-list">
            <div v-for="(item, index) in hotProducts" :key="index" class="info-item">
              <div class="info-avatar">
                <img :src="item.image" :alt="item.name">
              </div>
              <div class="info-content">
                <div class="info-title">{{ item.name }}</div>
                <div class="info-desc">销量: {{ item.sales }} | 评分: {{ item.rating }}</div>
              </div>
              <div class="info-price">¥{{ item.price }}</div>
            </div>
          </div>
        </div>
      </el-col>
      
      <el-col :span="8">
        <div class="info-card">
          <div class="info-header">
            <h4>系统通知</h4>
            <el-button type="text" size="small">查看全部</el-button>
          </div>
          <div class="info-list">
            <div v-for="(item, index) in systemNotifications" :key="index" class="info-item">
              <div class="info-icon" :class="item.type">
                <i :class="item.icon"></i>
              </div>
              <div class="info-content">
                <div class="info-title">{{ item.title }}</div>
                <div class="info-desc">{{ item.time }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 会员分析区域 -->
    <el-row :gutter="20" class="charts-section">
      <el-col :span="12">
        <div class="chart-card">
          <div class="chart-header">
            <h3>会员等级分布</h3>
          </div>
          <div id="memberLevelChart" class="chart-container"></div>
        </div>
      </el-col>
      
      <el-col :span="12">
        <div class="chart-card">
          <div class="chart-header">
            <h3>产品库存监控</h3>
          </div>
          <div id="inventoryChart" class="chart-container"></div>
        </div>
      </el-col>
    </el-row>

    <!-- 快速操作区域 -->
    <el-row :gutter="20" class="quick-actions">
      <el-col :span="24">
        <div class="quick-actions-card">
          <div class="quick-actions-header">
            <h3>快速操作</h3>
          </div>
          <div class="quick-actions-grid">
            <div class="quick-action-item" @click="handleQuickAction('newAppointment')">
              <div class="action-icon">
                <i class="el-icon-plus"></i>
              </div>
              <div class="action-text">新增预约</div>
            </div>
            <div class="quick-action-item" @click="handleQuickAction('newCustomer')">
              <div class="action-icon">
                <i class="el-icon-user-solid"></i>
              </div>
              <div class="action-text">新增客户</div>
            </div>
            <div class="quick-action-item" @click="handleQuickAction('inventory')">
              <div class="action-icon">
                <i class="el-icon-box"></i>
              </div>
              <div class="action-text">库存管理</div>
            </div>
            <div class="quick-action-item" @click="handleQuickAction('reports')">
              <div class="action-icon">
                <i class="el-icon-document"></i>
              </div>
              <div class="action-text">生成报表</div>
            </div>
            <div class="quick-action-item" @click="handleQuickAction('settings')">
              <div class="action-icon">
                <i class="el-icon-setting"></i>
              </div>
              <div class="action-text">系统设置</div>
            </div>
            <div class="quick-action-item" @click="handleQuickAction('help')">
              <div class="action-icon">
                <i class="el-icon-question"></i>
              </div>
              <div class="action-text">帮助中心</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import * as echarts from 'echarts'

export default {
  name: 'BeautyDashboard',
  components: {
    CountTo
  },
  data() {
    return {
      revenueTimeRange: 'month',
      charts: {},
      latestAppointments: [
        { name: '张女士', service: '面部护理', time: '14:30', status: 'confirmed', statusText: '已确认', avatar: 'https://via.placeholder.com/40x40' },
        { name: '李女士', service: '美甲服务', time: '15:00', status: 'pending', statusText: '待确认', avatar: 'https://via.placeholder.com/40x40' },
        { name: '王女士', service: '美发造型', time: '16:00', status: 'confirmed', statusText: '已确认', avatar: 'https://via.placeholder.com/40x40' }
      ],
      hotProducts: [
        { name: '玫瑰精华面霜', sales: 128, rating: 4.8, price: 299, image: 'https://via.placeholder.com/40x40' },
        { name: '胶原蛋白面膜', sales: 95, rating: 4.6, price: 89, image: 'https://via.placeholder.com/40x40' },
        { name: '美白精华液', sales: 87, rating: 4.7, price: 199, image: 'https://via.placeholder.com/40x40' }
      ],
      systemNotifications: [
        { title: '新客户注册提醒', time: '2分钟前', type: 'info', icon: 'el-icon-info' },
        { title: '预约时间冲突警告', time: '5分钟前', type: 'warning', icon: 'el-icon-warning' },
        { title: '库存不足提醒', time: '10分钟前', type: 'error', icon: 'el-icon-error' }
      ]
    }
  },
  mounted() {
    this.initCharts()
  },
  beforeDestroy() {
    Object.values(this.charts).forEach(chart => {
      if (chart) {
        chart.dispose()
      }
    })
  },
  methods: {
    initCharts() {
      this.initRevenueChart()
      this.initCustomerSourceChart()
      this.initServiceRankChart()
      this.initEmployeeRankChart()
      this.initAppointmentTimeChart()
      this.initSatisfactionChart()
      this.initMemberLevelChart()
      this.initInventoryChart()
    },
    
    initRevenueChart() {
      const chart = echarts.init(document.getElementById('revenueChart'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLine: { lineStyle: { color: '#E0E6F1' } },
          axisLabel: { color: '#666' }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#E0E6F1' } },
          axisLabel: { color: '#666' },
          splitLine: { lineStyle: { color: '#F0F0F0' } }
        },
        series: [{
          name: '营收',
          type: 'line',
          smooth: true,
          data: [8200, 9320, 9010, 9340, 12900, 13300, 13200],
          itemStyle: { color: '#409EFF' },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(64,158,255,0.3)' },
                { offset: 1, color: 'rgba(64,158,255,0.1)' }
              ]
            }
          }
        }]
      }
      chart.setOption(option)
      this.charts.revenue = chart
    },
    
    initCustomerSourceChart() {
      const chart = echarts.init(document.getElementById('customerSourceChart'))
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [{
          name: '客户来源',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['50%', '50%'],
          data: [
            { value: 335, name: '线上推广', itemStyle: { color: '#409EFF' } },
            { value: 310, name: '老客户推荐', itemStyle: { color: '#67C23A' } },
            { value: 234, name: '门店自然客流', itemStyle: { color: '#E6A23C' } },
            { value: 135, name: '社交媒体', itemStyle: { color: '#F56C6C' } },
            { value: 148, name: '其他渠道', itemStyle: { color: '#909399' } }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      chart.setOption(option)
      this.charts.customerSource = chart
    },
    
    initServiceRankChart() {
      const chart = echarts.init(document.getElementById('serviceRankChart'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#E0E6F1' } },
          axisLabel: { color: '#666' }
        },
        yAxis: {
          type: 'category',
          data: ['面部护理', '美甲服务', '美发造型', '身体护理', '化妆服务'],
          axisLine: { lineStyle: { color: '#E0E6F1' } },
          axisLabel: { color: '#666' }
        },
        series: [{
          name: '预约次数',
          type: 'bar',
          data: [320, 302, 301, 334, 390],
          itemStyle: {
            color: {
              type: 'linear',
              x: 0, y: 0, x2: 1, y2: 0,
              colorStops: [
                { offset: 0, color: '#409EFF' },
                { offset: 1, color: '#67C23A' }
              ]
            }
          }
        }]
      }
      chart.setOption(option)
      this.charts.serviceRank = chart
    },
    
    initEmployeeRankChart() {
      const chart = echarts.init(document.getElementById('employeeRankChart'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#E0E6F1' } },
          axisLabel: { color: '#666' }
        },
        yAxis: {
          type: 'category',
          data: ['张美容师', '李美甲师', '王发型师', '赵化妆师', '孙护理师'],
          axisLine: { lineStyle: { color: '#E0E6F1' } },
          axisLabel: { color: '#666' }
        },
        series: [{
          name: '客户评分',
          type: 'bar',
          data: [4.9, 4.8, 4.7, 4.6, 4.5],
          itemStyle: {
            color: {
              type: 'linear',
              x: 0, y: 0, x2: 1, y2: 0,
              colorStops: [
                { offset: 0, color: '#E6A23C' },
                { offset: 1, color: '#F56C6C' }
              ]
            }
          }
        }]
      }
      chart.setOption(option)
      this.charts.employeeRank = chart
    },
    
    initAppointmentTimeChart() {
      const chart = echarts.init(document.getElementById('appointmentTimeChart'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
          axisLine: { lineStyle: { color: '#E0E6F1' } },
          axisLabel: { color: '#666' }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#E0E6F1' } },
          axisLabel: { color: '#666' },
          splitLine: { lineStyle: { color: '#F0F0F0' } }
        },
        series: [{
          name: '预约数量',
          type: 'bar',
          data: [5, 8, 12, 3, 6, 15, 18, 22, 16, 9],
          itemStyle: { color: '#67C23A' }
        }]
      }
      chart.setOption(option)
      this.charts.appointmentTime = chart
    },
    
    initSatisfactionChart() {
      const chart = echarts.init(document.getElementById('satisfactionChart'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisLine: { lineStyle: { color: '#E0E6F1' } },
          axisLabel: { color: '#666' }
        },
        yAxis: {
          type: 'value',
          min: 4.0,
          max: 5.0,
          axisLine: { lineStyle: { color: '#E0E6F1' } },
          axisLabel: { color: '#666' },
          splitLine: { lineStyle: { color: '#F0F0F0' } }
        },
        series: [{
          name: '满意度评分',
          type: 'line',
          smooth: true,
          data: [4.2, 4.3, 4.5, 4.4, 4.6, 4.7],
          itemStyle: { color: '#E6A23C' },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(230,162,60,0.3)' },
                { offset: 1, color: 'rgba(230,162,60,0.1)' }
              ]
            }
          }
        }]
      }
      chart.setOption(option)
      this.charts.satisfaction = chart
    },
    
    initMemberLevelChart() {
      const chart = echarts.init(document.getElementById('memberLevelChart'))
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['钻石会员', '金卡会员', '银卡会员', '普通会员']
        },
        series: [{
          name: '会员等级',
          type: 'pie',
          radius: '50%',
          center: ['60%', '50%'],
          data: [
            { value: 45, name: '钻石会员', itemStyle: { color: '#FFD700' } },
            { value: 120, name: '金卡会员', itemStyle: { color: '#FFA500' } },
            { value: 280, name: '银卡会员', itemStyle: { color: '#C0C0C0' } },
            { value: 803, name: '普通会员', itemStyle: { color: '#CD7F32' } }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      chart.setOption(option)
      this.charts.memberLevel = chart
    },
    
    initInventoryChart() {
      const chart = echarts.init(document.getElementById('inventoryChart'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['玫瑰精华', '胶原蛋白', '美白精华', '保湿面霜', '清洁产品'],
          axisLine: { lineStyle: { color: '#E0E6F1' } },
          axisLabel: { color: '#666', rotate: 45 }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#E0E6F1' } },
          axisLabel: { color: '#666' },
          splitLine: { lineStyle: { color: '#F0F0F0' } }
        },
        series: [{
          name: '库存数量',
          type: 'bar',
          data: [120, 85, 95, 150, 200],
          itemStyle: {
            color: function(params) {
              const value = params.data
              if (value < 100) return '#F56C6C'
              if (value < 150) return '#E6A23C'
              return '#67C23A'
            }
          }
        }]
      }
      chart.setOption(option)
      this.charts.inventory = chart
    },
    
    handleQuickAction(action) {
      switch(action) {
        case 'newAppointment':
          this.$message.success('跳转到新增预约页面')
          break
        case 'newCustomer':
          this.$message.success('跳转到新增客户页面')
          break
        case 'inventory':
          this.$message.success('跳转到库存管理页面')
          break
        case 'reports':
          this.$message.success('跳转到报表生成页面')
          break
        case 'settings':
          this.$message.success('跳转到系统设置页面')
          break
        case 'help':
          this.$message.success('跳转到帮助中心页面')
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.beauty-dashboard-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.stats-cards {
  margin-bottom: 20px;
  
  .stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
    
    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      font-size: 24px;
      color: #fff;
    }
    
    .customer-card .stat-icon {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    .revenue-card .stat-icon {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    
    .appointment-card .stat-icon {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    
    .service-card .stat-icon {
      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }
    
    .stat-content {
      flex: 1;
      
      .stat-number {
        font-size: 28px;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 4px;
      }
      
      .stat-label {
        font-size: 14px;
        color: #7f8c8d;
        margin-bottom: 4px;
      }
      
      .stat-trend {
        font-size: 12px;
        font-weight: 500;
        
        &.positive { color: #27ae60; }
        &.negative { color: #e74c3c; }
        &.neutral { color: #95a5a6; }
      }
    }
  }
}

.charts-section {
  margin-bottom: 20px;
  
  .chart-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    
    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      h3 {
        margin: 0;
        color: #2c3e50;
        font-size: 18px;
        font-weight: 600;
      }
    }
    
    .chart-container {
      height: 300px;
    }
  }
}

.realtime-section {
  margin-bottom: 20px;
  
  .chart-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    
    .chart-header {
      margin-bottom: 20px;
      
      h3 {
        margin: 0;
        color: #2c3e50;
        font-size: 18px;
        font-weight: 600;
      }
    }
    
    .chart-container {
      height: 250px;
    }
  }
}

.info-section {
  .info-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    
    .info-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      
      h4 {
        margin: 0;
        color: #2c3e50;
        font-size: 16px;
        font-weight: 600;
      }
    }
    
    .info-list {
      .info-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .info-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 12px;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        
        .info-icon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 12px;
          font-size: 18px;
          color: #fff;
          
          &.info { background: #409EFF; }
          &.warning { background: #E6A23C; }
          &.error { background: #F56C6C; }
        }
        
        .info-content {
          flex: 1;
          
          .info-title {
            font-size: 14px;
            color: #2c3e50;
            margin-bottom: 4px;
            font-weight: 500;
          }
          
          .info-desc {
            font-size: 12px;
            color: #7f8c8d;
          }
        }
        
        .info-status {
          font-size: 12px;
          padding: 4px 8px;
          border-radius: 12px;
          
          &.confirmed {
            background: #f0f9ff;
            color: #27ae60;
          }
          
          &.pending {
            background: #fff7e6;
            color: #e6a23c;
          }
        }
        
        .info-price {
          font-size: 16px;
          color: #e74c3c;
          font-weight: 600;
        }
      }
    }
  }
}

.quick-actions {
  margin-bottom: 20px;
  
  .quick-actions-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    
    .quick-actions-header {
      margin-bottom: 20px;
      
      h3 {
        margin: 0;
        color: #2c3e50;
        font-size: 18px;
        font-weight: 600;
      }
    }
    
    .quick-actions-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 20px;
      
      .quick-action-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        border-radius: 8px;
        background: #f8f9fa;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          background: #e3f2fd;
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .action-icon {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 12px;
          font-size: 24px;
          color: #fff;
        }
        
        .action-text {
          font-size: 14px;
          color: #2c3e50;
          font-weight: 500;
          text-align: center;
        }
      }
    }
  }
}
</style>
