<template>
  <div class="carbon-emissions-analysis">
    <!-- 时间选择器 -->
    <div class="time-selector">
      <div class="selector-label">时间维度</div>
      <div class="time-periods">
        <div
          v-for="(period, index) in timePeriods"
          :key="index"
          :class="['period-item', { active: activePeriod === index }]"
          @click="handlePeriodChange(index)"
        >
          {{ period }}
        </div>
      </div>
      <div class="date-range" v-if="activePeriod === 3">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="handleDateChange"
          class="custom-picker"
        />
      </div>
    </div>

    <!-- 碳排放核心指标 -->
    <div class="carbon-indicators">
      <div class="indicator-card primary">
        <div class="card-header">
          <div class="card-icon">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
              <path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" fill="currentColor"/>
            </svg>
          </div>
          <div class="card-title">累计碳排放</div>
        </div>
        <div class="card-value">{{ carbonIndicators.totalCarbon }} <span class="unit">tCO₂e</span></div>
        <div class="card-trend" :class="carbonIndicators.carbonTrend >= 0 ? 'up' : 'down'">
          <span v-if="carbonIndicators.carbonTrend >= 0">↑</span>
          <span v-else>↓</span>
          {{ Math.abs(carbonIndicators.carbonTrend) }}%
        </div>
      </div>
      <div class="indicator-card success">
        <div class="card-header">
          <div class="card-icon">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
              <path d="M672 464H352c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
              <path d="M512 592c-4.4 0-8 3.6-8 8v256c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V600c0-4.4-3.6-8-8-8h-48z" fill="currentColor"/>
            </svg>
          </div>
          <div class="card-title">累计碳减排</div>
        </div>
        <div class="card-value">{{ carbonIndicators.totalReduction }} <span class="unit">tCO₂e</span></div>
        <div class="card-trend" :class="carbonIndicators.reductionTrend >= 0 ? 'up' : 'down'">
          <span v-if="carbonIndicators.reductionTrend >= 0">↑</span>
          <span v-else>↓</span>
          {{ Math.abs(carbonIndicators.reductionTrend) }}%
        </div>
      </div>
      <div class="indicator-card warning">
        <div class="card-header">
          <div class="card-icon">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
              <path d="M512 352c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V368c0-8.8-7.2-16-16-16h-48z" fill="currentColor"/>
              <path d="M536 672h-72c-4.4 0-8 3.6-8 8v72c0 4.4 3.6 8 8 8h72c4.4 0 8-3.6 8-8v-72c0-4.4-3.6-8-8-8z" fill="currentColor"/>
            </svg>
          </div>
          <div class="card-title">碳强度</div>
        </div>
        <div class="card-value">{{ carbonIndicators.carbonIntensity }} <span class="unit">kgCO₂/kWh</span></div>
        <div class="card-trend" :class="carbonIndicators.intensityTrend >= 0 ? 'up' : 'down'">
          <span v-if="carbonIndicators.intensityTrend >= 0">↑</span>
          <span v-else>↓</span>
          {{ Math.abs(carbonIndicators.intensityTrend) }}%
        </div>
      </div>
      <div class="indicator-card info">
        <div class="card-header">
          <div class="card-icon">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
              <path d="M688 592H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
            </svg>
          </div>
          <div class="card-title">节能率</div>
        </div>
        <div class="card-value">{{ carbonIndicators.energySavingRate }} <span class="unit">%</span></div>
        <div class="card-trend" :class="carbonIndicators.savingTrend >= 0 ? 'up' : 'down'">
          <span v-if="carbonIndicators.savingTrend >= 0">↑</span>
          <span v-else>↓</span>
          {{ Math.abs(carbonIndicators.savingTrend) }}%
        </div>
      </div>
    </div>

    <!-- 碳排放趋势图 -->
    <div class="chart-section">
      <div class="chart-header">
        <div class="chart-title">碳排放趋势</div>
        <div class="chart-legend">
          <div class="legend-item">
            <span class="legend-dot" style="background: #EE6666;"></span>
            <span>碳排放量</span>
          </div>
          <div class="legend-item">
            <span class="legend-dot" style="background: #91CC75;"></span>
            <span>碳减排量</span>
          </div>
        </div>
      </div>
      <div class="chart" ref="carbonTrendChartRef"></div>
    </div>

    <!-- 碳排放来源分布 -->
    <div class="chart-section half-width">
      <div class="chart-header">
        <div class="chart-title">碳排放来源分布</div>
      </div>
      <div class="chart" ref="carbonSourceChartRef"></div>
    </div>

    <!-- 能耗与碳排放对比 -->
    <div class="chart-section half-width">
      <div class="chart-header">
        <div class="chart-title">能耗与碳排放对比</div>
      </div>
      <div class="chart" ref="energyCarbonChartRef"></div>
    </div>

    <!-- 碳减排量详情表格 -->
    <div class="table-section">
      <div class="section-header">
        <div class="section-title">碳减排量详情</div>
        <el-button type="primary" size="small" @click="exportData">导出数据</el-button>
      </div>
      <div class="table-container">
        <table class="data-table">
          <thead>
            <tr>
              <th>日期</th>
              <th>用电量(kWh)</th>
              <th>碳排放量(tCO₂e)</th>
              <th>基准碳排放(tCO₂e)</th>
              <th>碳减排量(tCO₂e)</th>
              <th>碳减排率(%)</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in carbonDetailList" :key="index">
              <td>{{ item.date }}</td>
              <td>{{ item.energy }}</td>
              <td>{{ item.carbon }}</td>
              <td>{{ item.baselineCarbon }}</td>
              <td>{{ item.reduction }}</td>
              <td>{{ item.reductionRate }}%</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 碳减排贡献分析 -->
    <div class="contribution-section">
      <div class="section-header">
        <div class="section-title">碳减排贡献分析</div>
      </div>
      <div class="contribution-grid">
        <div class="contribution-item" v-for="item in contributionList" :key="item.name">
          <div class="contribution-icon" :style="{ background: item.bg }">
            <span>{{ item.icon }}</span>
          </div>
          <div class="contribution-info">
            <div class="contribution-name">{{ item.name }}</div>
            <div class="contribution-value">{{ item.value }} <span class="unit">tCO₂e</span></div>
            <div class="contribution-percent">{{ item.percent }}%</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "CarbonEmissionsAnalysis",
  data() {
    return {
      // 时间段选项
      timePeriods: ["近七日", "近一月", "近三月", "自定义"],
      activePeriod: 0,
      // 日期范围
      dateRange: [],
      // 碳排放核心指标
      carbonIndicators: {
        totalCarbon: 1256.8,
        carbonTrend: -5.2,
        totalReduction: 89.6,
        reductionTrend: 12.5,
        carbonIntensity: 0.52,
        intensityTrend: -3.8,
        energySavingRate: 28.5,
        savingTrend: 2.3
      },
      // 碳排放详情列表
      carbonDetailList: [
        { date: "2024-03-01", energy: 178000, carbon: 92.56, baselineCarbon: 129.5, reduction: 36.94, reductionRate: 28.5 },
        { date: "2024-03-02", energy: 189000, carbon: 98.28, baselineCarbon: 137.5, reduction: 39.22, reductionRate: 28.5 },
        { date: "2024-03-03", energy: 197000, carbon: 102.44, baselineCarbon: 143.3, reduction: 40.86, reductionRate: 28.5 },
        { date: "2024-03-04", energy: 181000, carbon: 94.12, baselineCarbon: 131.6, reduction: 37.48, reductionRate: 28.5 },
        { date: "2024-03-05", energy: 204000, carbon: 106.08, baselineCarbon: 148.4, reduction: 42.32, reductionRate: 28.5 }
      ],
      // 碳减排贡献分析
      contributionList: [
        { name: "能效提升", icon: "EER", value: 45.6, percent: 50.9, bg: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)" },
        { name: "设备优化", icon: "设备", value: 25.8, percent: 28.8, bg: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)" },
        { name: "运行策略", icon: "策略", value: 12.3, percent: 13.7, bg: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)" },
        { name: "其他措施", icon: "其他", value: 5.9, percent: 6.6, bg: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)" }
      ],
      // 图表实例
      carbonTrendChart: null,
      carbonSourceChart: null,
      energyCarbonChart: null
    };
  },
  mounted() {
    this.initCarbonTrendChart();
    this.initCarbonSourceChart();
    this.initEnergyCarbonChart();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    if (this.carbonTrendChart) this.carbonTrendChart.dispose();
    if (this.carbonSourceChart) this.carbonSourceChart.dispose();
    if (this.energyCarbonChart) this.energyCarbonChart.dispose();
  },
  watch: {
    activePeriod() {
      this.updateAllCharts();
    }
  },
  methods: {
    // 时间段切换
    handlePeriodChange(index) {
      this.activePeriod = index;
    },
    // 日期范围变化
    handleDateChange(value) {
      console.log("自定义日期范围:", value);
      this.updateAllCharts();
    },
    // 导出数据
    exportData() {
      this.$message.success("数据导出成功");
    },
    // 初始化碳排放趋势图
    initCarbonTrendChart() {
      this.carbonTrendChart = echarts.init(this.$refs.carbonTrendChartRef);
      this.updateCarbonTrendChart();
    },
    // 更新碳排放趋势图
    updateCarbonTrendChart() {
      const dataMap = {
        0: { // 近七日
          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          carbon: [92.56, 98.28, 102.44, 94.12, 106.08, 112.56, 104.76],
          reduction: [36.94, 39.22, 40.86, 37.48, 42.32, 44.96, 41.76]
        },
        1: { // 近一月
          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
          carbon: [856, 912, 888, 945, 1012, 956, 892],
          reduction: [341.6, 364.8, 355.2, 378, 404.8, 382.4, 356.8]
        },
        2: { // 近三月
          xData: ["1月", "2月", "3月"],
          carbon: [24120, 27360, 25680],
          reduction: [9648, 10944, 10272]
        },
        3: { // 自定义
          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          carbon: [92.56, 98.28, 102.44, 94.12, 106.08, 112.56, 104.76],
          reduction: [36.94, 39.22, 40.86, 37.48, 42.32, 44.96, 41.76]
        }
      };

      const currentData = dataMap[this.activePeriod];

      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        legend: {
          data: ["碳排放量", "碳减排量"],
          textStyle: {
            color: "#ffffff"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: currentData.xData,
          axisLabel: {
            color: "rgba(255, 255, 255, 0.8)"
          },
          axisLine: {
            lineStyle: {
              color: "#365576"
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          name: "tCO₂e",
          nameTextStyle: {
            color: "rgba(255, 255, 255, 0.8)"
          },
          axisLabel: {
            color: "rgba(255, 255, 255, 0.8)"
          },
          axisLine: {
            lineStyle: {
              color: "#365576"
            }
          },
          splitLine: {
            lineStyle: {
              color: "#1a3d62",
              type: "dashed"
            }
          }
        },
        series: [
          {
            name: "碳排放量",
            type: "bar",
            data: currentData.carbon,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#EE6666"
                  },
                  {
                    offset: 1,
                    color: "#E53935"
                  }
                ]
              }
            }
          },
          {
            name: "碳减排量",
            type: "line",
            smooth: true,
            data: currentData.reduction,
            itemStyle: {
              color: "#91CC75"
            },
            lineStyle: {
              color: "#91CC75",
              width: 3
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(145, 204, 117, 0.5)"
                  },
                  {
                    offset: 1,
                    color: "rgba(145, 204, 117, 0)"
                  }
                ]
              }
            }
          }
        ]
      };
      this.carbonTrendChart.setOption(option);
    },
    // 初始化碳排放来源分布图
    initCarbonSourceChart() {
      this.carbonSourceChart = echarts.init(this.$refs.carbonSourceChartRef);
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c}% ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          textStyle: {
            color: "#ffffff"
          }
        },
        series: [
          {
            name: "碳排放来源",
            type: "pie",
            radius: ["30%", "70%"],
            center: ["60%", "50%"],
            data: [
              { value: 65, name: "主机", itemStyle: { color: "#5470C6" } },
              { value: 20, name: "冷冻泵", itemStyle: { color: "#91CC75" } },
              { value: 10, name: "冷却泵", itemStyle: { color: "#FAC858" } },
              { value: 3, name: "冷却塔风机", itemStyle: { color: "#EE6666" } },
              { value: 2, name: "其他", itemStyle: { color: "#73C0DE" } }
            ],
            label: {
              formatter: "{b}\n{d}%"
            }
          }
        ]
      };
      this.carbonSourceChart.setOption(option);
    },
    // 初始化能耗与碳排放对比图
    initEnergyCarbonChart() {
      this.energyCarbonChart = echarts.init(this.$refs.energyCarbonChartRef);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        legend: {
          data: ["用电量", "碳排放量"],
          textStyle: {
            color: "#ffffff"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          axisLabel: {
            color: "rgba(255, 255, 255, 0.8)"
          },
          axisLine: {
            lineStyle: {
              color: "#365576"
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            type: "value",
            name: "kWh",
            nameTextStyle: {
              color: "rgba(255, 255, 255, 0.8)"
            },
            axisLabel: {
              color: "rgba(255, 255, 255, 0.8)"
            },
            axisLine: {
              lineStyle: {
                color: "#365576"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#1a3d62",
                type: "dashed"
              }
            }
          },
          {
            type: "value",
            name: "tCO₂e",
            nameTextStyle: {
              color: "rgba(255, 255, 255, 0.8)"
            },
            axisLabel: {
              color: "rgba(255, 255, 255, 0.8)"
            },
            axisLine: {
              lineStyle: {
                color: "#365576"
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "用电量",
            type: "bar",
            data: [178000, 189000, 197000, 181000, 204000, 215000, 200000],
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#15e1fd"
                  },
                  {
                    offset: 1,
                    color: "#208fff"
                  }
                ]
              }
            }
          },
          {
            name: "碳排放量",
            type: "line",
            smooth: true,
            yAxisIndex: 1,
            data: [92.56, 98.28, 102.44, 94.12, 106.08, 112.56, 104.76],
            itemStyle: {
              color: "#EE6666"
            },
            lineStyle: {
              color: "#EE6666",
              width: 3
            }
          }
        ]
      };
      this.energyCarbonChart.setOption(option);
    },
    // 更新所有图表
    updateAllCharts() {
      this.updateCarbonTrendChart();
    },
    // 响应式调整
    handleResize() {
      if (this.carbonTrendChart) this.carbonTrendChart.resize();
      if (this.carbonSourceChart) this.carbonSourceChart.resize();
      if (this.energyCarbonChart) this.energyCarbonChart.resize();
    }
  }
};
</script>

<style lang="scss" scoped>
.carbon-emissions-analysis {
  padding: 0.16rem;
}

.time-selector {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.08rem;
  margin-bottom: 0.16rem;
  flex-wrap: wrap;
  gap: 0.15rem;

  .selector-label {
    font-size: 0.15rem;
    color: #ffffff;
    margin-right: 0.15rem;
  }

  .time-periods {
    display: flex;
    gap: 0.08rem;

    .period-item {
      padding: 0.06rem 0.2rem;
      font-size: 0.13rem;
      color: #ffffff;
      opacity: 0.7;
      cursor: pointer;
      border-radius: 0.04rem;
      transition: all 0.3s;

      &:hover {
        opacity: 1;
      }

      &.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 1;
      }
    }
  }

  .date-range {
    margin-left: 0.15rem;

    ::v-deep .custom-picker {
      .el-input__wrapper {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);

        .el-input__inner {
          color: #ffffff;
        }
      }
    }
  }
}

.carbon-indicators {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
  gap: 0.15rem;
  margin-bottom: 0.16rem;

  .indicator-card {
    padding: 0.25rem;
    border-radius: 0.08rem;

    &.primary {
      background: linear-gradient(135deg, rgba(238, 102, 102, 0.2) 0%, rgba(229, 57, 53, 0.2) 100%);
      border: 1px solid rgba(238, 102, 102, 0.3);
    }

    &.success {
      background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
      border: 1px solid rgba(145, 204, 117, 0.3);
    }

    &.warning {
      background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
      border: 1px solid rgba(250, 200, 88, 0.3);
    }

    &.info {
      background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(115, 192, 222, 0.2) 100%);
      border: 1px solid rgba(84, 112, 198, 0.3);
    }

    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 0.15rem;

      .card-icon {
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.12rem;
        background: rgba(255, 255, 255, 0.1);

        svg {
          width: 0.2rem;
          height: 0.2rem;
          fill: #ffffff;
        }
      }

      .card-title {
        font-size: 0.14rem;
        color: #ffffff;
        opacity: 0.8;
      }
    }

    .card-value {
      font-size: 0.32rem;
      color: #15e1fd;
      font-weight: bold;
      margin-bottom: 0.1rem;

      .unit {
        font-size: 0.16rem;
        opacity: 0.8;
      }
    }

    .card-trend {
      font-size: 0.13rem;

      &.up {
        color: #EE6666;
      }

      &.down {
        color: #91CC75;
      }
    }
  }
}

.chart-section {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.08rem;
  padding: 0.2rem;
  margin-bottom: 0.16rem;

  &.half-width {
    display: inline-block;
    width: calc(50% - 0.08rem);
    vertical-align: top;

    &:nth-child(odd) {
      margin-right: 0.16rem;
    }
  }

  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.15rem;

    .chart-title {
      font-size: 0.16rem;
      color: #ffffff;
      font-weight: bold;
      padding-left: 0.12rem;
      border-left: 0.04rem solid #15e1fd;
    }

    .chart-legend {
      display: flex;
      gap: 0.2rem;

      .legend-item {
        display: flex;
        align-items: center;
        font-size: 0.13rem;
        color: #ffffff;

        .legend-dot {
          width: 0.1rem;
          height: 0.1rem;
          border-radius: 50%;
          margin-right: 0.06rem;
        }
      }
    }
  }

  .chart {
    width: 100%;
    height: 3rem;
  }
}

.table-section {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.08rem;
  padding: 0.2rem;
  margin-bottom: 0.16rem;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.15rem;

    .section-title {
      font-size: 0.16rem;
      color: #ffffff;
      font-weight: bold;
      padding-left: 0.12rem;
      border-left: 0.04rem solid #15e1fd;
    }
  }

  .table-container {
    overflow-x: auto;

    .data-table {
      width: 100%;
      border-collapse: collapse;

      thead {
        tr {
          background: rgba(255, 255, 255, 0.05);

          th {
            padding: 0.12rem;
            text-align: left;
            font-size: 0.14rem;
            color: #ffffff;
            font-weight: bold;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          }
        }
      }

      tbody {
        tr {
          &:hover {
            background: rgba(255, 255, 255, 0.05);
          }

          td {
            padding: 0.12rem;
            font-size: 0.13rem;
            color: #ffffff;
            opacity: 0.8;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
          }
        }
      }
    }
  }
}

.contribution-section {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.08rem;
  padding: 0.2rem;

  .section-header {
    margin-bottom: 0.15rem;

    .section-title {
      font-size: 0.16rem;
      color: #ffffff;
      font-weight: bold;
      padding-left: 0.12rem;
      border-left: 0.04rem solid #15e1fd;
    }
  }

  .contribution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
    gap: 0.15rem;

    .contribution-item {
      display: flex;
      align-items: center;
      padding: 0.2rem;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 0.06rem;

      .contribution-icon {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.15rem;

        span {
          font-size: 0.16rem;
          color: #ffffff;
          font-weight: bold;
        }
      }

      .contribution-info {
        flex: 1;

        .contribution-name {
          font-size: 0.14rem;
          color: #ffffff;
          opacity: 0.8;
          margin-bottom: 0.05rem;
        }

        .contribution-value {
          font-size: 0.2rem;
          color: #15e1fd;
          font-weight: bold;
          margin-bottom: 0.03rem;

          .unit {
            font-size: 0.13rem;
            opacity: 0.8;
          }
        }

        .contribution-percent {
          font-size: 0.12rem;
          color: #91CC75;
        }
      }
    }
  }
}

@media (max-width: 1485px) {
  .carbon-indicators {
    grid-template-columns: repeat(2, 1fr);
  }

  .chart-section {
    &.half-width {
      width: 100%;
      margin-right: 0;
    }
  }

  .contribution-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
