<template>
  <div class="page dashboard">
    <!-- 背景装饰 -->
    <div class="dashboard-bg">
      <div class="bg-blob blob-1"></div>
      <div class="bg-blob blob-2"></div>
      <div class="bg-blob blob-3"></div>
    </div>
    
    <div class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h2 class="page-title">
            <span class="title-icon">🏥</span>
            仪表盘
          </h2>
          <p class="page-subtitle">
            <span class="wave">👋</span> 欢迎回来，今日数据概览
            <t-tag theme="success" variant="light" size="small" class="live-tag">
              <span class="pulse-dot"></span>
              实时
            </t-tag>
          </p>
        </div>
        <div class="header-date">
          <div class="date-card">
            <t-icon name="calendar" class="date-icon" />
            <span>{{ currentDate }}</span>
          </div>
        </div>
      </div>
      <div class="header-actions">
        <t-button theme="default" variant="outline" class="action-btn" @click="load">
          <template #icon><t-icon name="refresh" class="refresh-icon" /></template>
          刷新数据
        </t-button>
        <t-button theme="primary" class="action-btn primary-btn">
          <template #icon><t-icon name="add" /></template>
          新增预约
        </t-button>
      </div>
    </div>
    
    <!-- 统计卡片 -->
    <t-row :gutter="[24, 24]" class="stats-row">
      <t-col :xs="12" :sm="6" :md="3" v-for="(item, index) in cards" :key="item.label">
        <div class="stat-card" :class="`card-${index}`" :style="{ animationDelay: `${index * 0.1}s` }">
          <div class="card-glow"></div>
          <div class="card-icon">
            <t-icon :name="item.icon" />
            <div class="icon-ring"></div>
          </div>
          <div class="card-content">
            <div class="card-label">{{ item.label }}</div>
            <div class="card-value">
              <span class="counter">{{ item.value }}</span>
            </div>
            <div class="card-trend" :class="item.trend > 0 ? 'up' : 'down'">
              <span class="trend-badge">
                <t-icon :name="item.trend > 0 ? 'arrow-up' : 'arrow-down'" />
                {{ Math.abs(item.trend) }}%
              </span>
              <span class="trend-text">较昨日</span>
            </div>
          </div>
          <div class="card-decoration"></div>
        </div>
      </t-col>
    </t-row>
    
    <!-- 图表区域 -->
    <t-row :gutter="[24, 24]" class="charts-row">
      <t-col :xs="12" :md="8">
        <div class="panel chart-panel">
          <div class="panel-header">
            <div class="header-title">
              <div class="title-icon-bg">
                <t-icon name="chart-bar" />
              </div>
              <h3>就诊趋势</h3>
            </div>
            <t-radio-group v-model="chartPeriod" size="small" class="period-selector">
              <t-radio-button value="week">
                <t-icon name="calendar" class="btn-icon" />本周
              </t-radio-button>
              <t-radio-button value="month">
                <t-icon name="calendar-1" class="btn-icon" />本月
              </t-radio-button>
              <t-radio-button value="year">
                <t-icon name="calendar-2" class="btn-icon" />本年
              </t-radio-button>
            </t-radio-group>
          </div>
          <div class="chart-stats">
            <div class="stat-item">
              <span class="stat-label">总就诊</span>
              <span class="stat-number">{{ chartTotal }}</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
              <span class="stat-label">环比增长</span>
              <span class="stat-number" :class="chartGrowthRate >= 0 ? 'positive' : 'negative'">
                {{ chartGrowthRate >= 0 ? '+' : '' }}{{ chartGrowthRate }}%
              </span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
              <span class="stat-label">平均日接诊</span>
              <span class="stat-number">{{ chartAverage }}</span>
            </div>
          </div>
          <div class="chart-placeholder">
            <div class="mock-chart">
              <div v-for="(height, i) in chartData" :key="i" class="bar-wrapper">
                <div class="bar" :style="{ height: `${height}%` }">
                  <div class="bar-tooltip">{{ chartValues[i] }}人</div>
                </div>
              </div>
            </div>
            <div class="chart-labels">
              <span v-for="(label, i) in chartLabels" :key="i">{{ label }}</span>
            </div>
          </div>
        </div>
      </t-col>
      
      <t-col :xs="12" :md="4">
        <div class="panel quick-actions">
          <div class="panel-header">
            <div class="header-title">
              <div class="title-icon-bg quick-icon">
                <t-icon name="rocket" />
              </div>
              <h3>快捷操作</h3>
            </div>
          </div>
          <div class="action-list">
            <div v-for="(action, index) in quickActions" :key="action.title" class="action-item" :style="{ animationDelay: `${index * 0.1}s` }">
              <div class="action-icon-wrapper">
                <div class="action-icon" :style="{ background: action.bg }">
                  <t-icon :name="action.icon" />
                </div>
                <div class="action-shine"></div>
              </div>
              <div class="action-info">
                <div class="action-title">{{ action.title }}</div>
                <div class="action-desc">{{ action.desc }}</div>
              </div>
              <t-button theme="default" variant="text" shape="circle" class="action-arrow">
                <t-icon name="chevron-right" />
              </t-button>
            </div>
          </div>
          <div class="quick-actions-footer">
            <t-button theme="default" variant="text" block>
              <t-icon name="view-list" />
              查看全部功能
            </t-button>
          </div>
        </div>
      </t-col>
    </t-row>
    
    <!-- 待办事项 -->
    <t-row :gutter="[24, 24]" class="todo-row">
      <t-col :span="12">
        <div class="panel todo-panel">
          <div class="panel-header">
            <div class="header-title">
              <div class="title-icon-bg todo-icon">
                <t-icon name="checklist" />
              </div>
              <div class="title-content">
                <h3>今日待办</h3>
                <span class="subtitle">{{ todoList.length || 0 }} 项待处理</span>
              </div>
            </div>
            <div class="header-actions-right">
              <t-button theme="default" variant="text" class="filter-btn">
                <t-icon name="filter" />
                筛选
              </t-button>
              <t-button theme="default" variant="text" class="view-all-btn">
                查看全部
                <t-icon name="chevron-right" />
              </t-button>
            </div>
          </div>
          <div class="todo-table-wrapper">
            <t-table 
              :data="todoList" 
              :columns="todoColumns" 
              stripe 
              hover 
              class="todo-table"
            />
          </div>
          <div class="todo-progress">
            <div class="progress-info">
              <span>今日进度</span>
              <span class="progress-percent">{{ todoProgress }}%</span>
            </div>
            <div class="progress-bar">
              <div class="progress-fill" :style="{ width: `${todoProgress}%` }"></div>
            </div>
          </div>
        </div>
      </t-col>
    </t-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed, watch } from 'vue';
import { api } from '../api';

const chartPeriod = ref('week');

const currentDate = computed(() => {
  const date = new Date();
  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${weekdays[date.getDay()]}`;
});

const cards = ref([
  { label: '今日预约', value: 0, icon: 'calendar', trend: 0 },
  { label: '待就诊', value: 0, icon: 'medical', trend: 0 },
  { label: '药品库存', value: 0, icon: 'drug', trend: 0 },
  { label: '总收入', value: 0, icon: 'money', trend: 0 },
]);

const quickActions = [
  { title: '新增预约', desc: '快速创建预约', icon: 'calendar-add', bg: 'linear-gradient(135deg, #0d9488, #14b8a6)' },
  { title: '登记就诊', desc: '记录就诊信息', icon: 'file-add', bg: 'linear-gradient(135deg, #f093fb, #f5576c)' },
  { title: '开处方', desc: '开具药品处方', icon: 'edit', bg: 'linear-gradient(135deg, #4facfe, #00f2fe)' },
  { title: '库存管理', desc: '查看药品库存', icon: 'database', bg: 'linear-gradient(135deg, #43e97b, #38f9d7)' },
];

const todoColumns = [
  { colKey: 'time', title: '时间', width: 100 },
  { colKey: 'customer', title: '客户' },
  { colKey: 'pet', title: '宠物' },
  { colKey: 'service', title: '服务' },
  { colKey: 'status', title: '状态' },
  { colKey: 'action', title: '操作', align: 'center' },
];

const todoList = ref([]);

// 图表数据
const chartLabels = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日']);
const chartValues = ref([0, 0, 0, 0, 0, 0, 0]);
const chartTotal = ref(0);
const chartGrowthRate = ref(0);
const chartAverage = ref(0);

// 计算柱状图高度百分比
const chartData = computed(() => {
  const max = Math.max(...chartValues.value, 1);
  return chartValues.value.map(v => (v / max) * 100);
});

// 计算今日进度（假设今日预约都是待办）
const todoProgress = computed(() => {
  const total = cards.value[0]?.value || 0;
  const completed = total - (todoList.value?.length || 0);
  return total > 0 ? Math.round((completed / total) * 100) : 0;
});

// 加载统计数据
const loadStats = async () => {
  try {
    const res = await api.stats();
    if (res.code === 0) {
      cards.value = [
        { label: '今日预约', value: res.data.appointments || 0, icon: 'calendar', trend: 0 },
        { label: '待就诊', value: res.data.visits || 0, icon: 'medical', trend: 0 },
        { label: '药品库存', value: res.data.drugs || 0, icon: 'drug', trend: 0 },
        { label: '总收入', value: '¥' + (res.data.revenue || 0), icon: 'money', trend: 0 },
      ];
    }
  } catch (error) {
    console.error('加载统计数据失败:', error);
  }
};

// 加载图表数据
const loadTrends = async () => {
  try {
    const res = await api.statsTrends(chartPeriod.value);
    if (res.code === 0) {
      chartLabels.value = res.data.labels;
      chartValues.value = res.data.values;
      chartTotal.value = res.data.total;
      chartGrowthRate.value = res.data.growthRate;
      chartAverage.value = res.data.average;
    }
  } catch (error) {
    console.error('加载图表数据失败:', error);
  }
};

// 加载待办事项
const loadTodos = async () => {
  try {
    const res = await api.todayTodos();
    if (res.code === 0) {
      todoList.value = res.data || [];
    }
  } catch (error) {
    console.error('加载待办事项失败:', error);
  }
};

// 监听周期变化
watch(chartPeriod, () => {
  loadTrends();
});

const load = async () => {
  await Promise.all([
    loadStats(),
    loadTrends(),
    loadTodos()
  ]);
};

onMounted(load);
</script>

<style scoped>
.dashboard {
  padding-bottom: 40px;
  position: relative;
}

/* 背景装饰 */
.dashboard-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: blobFloat 20s infinite ease-in-out;
}

.blob-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.3), rgba(20, 184, 166, 0.3));
  top: -200px;
  right: -100px;
  animation-delay: 0s;
}

.blob-2 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.2), rgba(0, 242, 254, 0.2));
  bottom: 10%;
  left: -100px;
  animation-delay: -7s;
}

.blob-3 {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, rgba(67, 233, 123, 0.2), rgba(56, 249, 215, 0.2));
  top: 40%;
  right: 10%;
  animation-delay: -14s;
}

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -30px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}

.header-content {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.title-section {
  flex: 1;
}

.title-icon {
  display: inline-block;
  margin-right: 8px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.wave {
  display: inline-block;
  animation: wave 2s infinite;
}

@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
}

.live-tag {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

.header-date {
  display: flex;
  align-items: center;
}

.date-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.1), rgba(20, 184, 166, 0.1));
  border-radius: 12px;
  color: var(--primary);
  font-weight: 500;
  font-size: 14px;
}

.date-icon {
  animation: spin 20s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.page-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

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

.action-btn {
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: translateY(-2px);
}

.primary-btn:hover {
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.refresh-icon {
  transition: transform 0.5s ease;
}

.action-btn:hover .refresh-icon {
  transform: rotate(180deg);
}

.stats-row {
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.stat-card {
  background: white;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  animation: slideUp 0.6s ease-out backwards;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.card-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.stat-card:hover .card-glow {
  opacity: 0.5;
}

.card-0::before { background: linear-gradient(90deg, #0d9488, #14b8a6); }
.card-1::before { background: linear-gradient(90deg, #f093fb, #f5576c); }
.card-2::before { background: linear-gradient(90deg, #4facfe, #00f2fe); }
.card-3::before { background: linear-gradient(90deg, #43e97b, #38f9d7); }

.stat-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  position: relative;
  overflow: hidden;
}

.icon-ring {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  animation: ringPulse 2s infinite;
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.5; }
}

.card-0 .card-icon { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.card-1 .card-icon { background: linear-gradient(135deg, #f093fb, #f5576c); }
.card-2 .card-icon { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.card-3 .card-icon { background: linear-gradient(135deg, #43e97b, #38f9d7); }

.card-content {
  flex: 1;
}

.card-label {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 6px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
}

.counter {
  background: linear-gradient(135deg, var(--text) 0%, var(--text-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 28px;
}

.card-trend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
}

.trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.card-trend.up .trend-badge {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.card-trend.down .trend-badge {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.trend-text {
  color: var(--text-muted);
}

.card-decoration {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: 0.1;
  pointer-events: none;
}

.card-0 .card-decoration { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.card-1 .card-decoration { background: linear-gradient(135deg, #f093fb, #f5576c); }
.card-2 .card-decoration { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.card-3 .card-decoration { background: linear-gradient(135deg, #43e97b, #38f9d7); }

.charts-row {
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

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

.header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon-bg {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.1), rgba(20, 184, 166, 0.1));
  color: var(--primary);
  font-size: 20px;
}

.quick-icon {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.1));
  color: #f59e0b;
}

.todo-icon {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.1));
  color: #10b981;
}

.panel-header h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}

.title-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.title-content .subtitle {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.period-selector {
  background: var(--app-bg);
  padding: 4px;
  border-radius: 10px;
}

.period-selector :deep(.t-radio-button) {
  border: none;
  background: transparent;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

.period-selector :deep(.t-radio-button.t-is-checked) {
  background: white;
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}

.btn-icon {
  margin-right: 4px;
  font-size: 14px;
}

.chart-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 0 24px;
  margin-bottom: 20px;
  border-bottom: 1px dashed var(--border-light);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

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

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

.stat-divider {
  width: 1px;
  height: 40px;
  background: var(--border-light);
}

.chart-panel {
  min-height: 420px;
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mock-chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  height: 200px;
  padding: 20px 0;
  width: 100%;
}

.bar-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 60px;
}

.mock-chart .bar {
  width: 100%;
  max-width: 40px;
  background: linear-gradient(180deg, #0d9488, #14b8a6);
  border-radius: 10px 10px 0 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: growUp 1s ease-out backwards;
  position: relative;
  cursor: pointer;
}

.mock-chart .bar:hover {
  transform: scaleY(1.05);
  filter: brightness(1.1);
}

.bar-tooltip {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  background: var(--text);
  color: white;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.3s ease;
  opacity: 0;
}

.bar:hover .bar-tooltip {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}

@keyframes growUp {
  from { transform: scaleY(0); transform-origin: bottom; }
  to { transform: scaleY(1); transform-origin: bottom; }
}

.chart-labels {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
  padding-top: 12px;
}

.chart-labels span {
  flex: 1;
  max-width: 60px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.quick-actions {
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.action-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  animation: slideIn 0.5s ease-out backwards;
  border: 1px solid transparent;
}

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

.action-item:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
  border-color: rgba(13, 148, 136, 0.1);
  transform: translateX(4px);
}

.action-icon-wrapper {
  position: relative;
  flex-shrink: 0;
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.action-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%);
  z-index: 2;
  pointer-events: none;
}

.action-info {
  flex: 1;
}

.action-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--text);
}

.action-desc {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.action-arrow {
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}

.action-item:hover .action-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--primary);
}

.quick-actions-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.todo-row {
  position: relative;
  z-index: 1;
}

.todo-panel {
  overflow: hidden;
  padding-bottom: 20px;
}

.header-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-btn, .view-all-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.view-all-btn {
  color: var(--primary);
}

.todo-table-wrapper {
  margin: 0 -24px;
  padding: 0 24px;
}

.todo-table :deep(.t-table__row) {
  transition: all 0.2s ease;
}

.todo-table :deep(.t-table__row:hover) {
  transform: scale(1.01);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  z-index: 1;
  position: relative;
}

.todo-progress {
  margin-top: 20px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
  border-radius: 12px;
  border: 1px solid rgba(13, 148, 136, 0.1);
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.progress-percent {
  color: var(--primary);
  font-weight: 700;
  font-size: 14px;
}

.progress-bar {
  height: 8px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

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

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 12px;
  }
  
  .header-actions {
    width: 100%;
  }
  
  .stat-card {
    padding: 16px;
  }
  
  .card-value {
    font-size: 24px;
  }
  
  .chart-stats {
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .stat-divider {
    display: none;
  }
  
  .mock-chart {
    gap: 8px;
  }
  
  .chart-labels {
    gap: 8px;
  }
}
</style>
