<template>
  <a-layout style="min-height: 100vh" class="merchant-layout">
    <a-layout-sider :width="240" theme="dark" collapsible :collapsed-width="64" class="merchant-sider">
      <div class="sider-header">
        <a-avatar :size="36" style="background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%)">
          <icon-home />
        </a-avatar>
        <span class="sider-title" v-if="!$attrs.collapsed">商家后台</span>
      </div>
      <a-menu :selected-keys="[active]" @menu-item-click="(k)=>active=k" theme="dark">
        <a-menu-item key="overview">
          <template #icon><icon-dashboard /></template>
          <span v-if="!$attrs.collapsed">数据概览</span>
        </a-menu-item>
        <a-menu-item key="products">
          <template #icon><icon-apps /></template>
          <span v-if="!$attrs.collapsed">商品管理</span>
        </a-menu-item>
        <a-menu-item key="orders">
          <template #icon><icon-file /></template>
          <span v-if="!$attrs.collapsed">订单管理</span>
        </a-menu-item>
        <a-menu-item key="reviews">
          <template #icon><icon-message /></template>
          <span v-if="!$attrs.collapsed">评价管理</span>
        </a-menu-item>
        <a-menu-item key="logistics">
          <template #icon><icon-send /></template>
          <span v-if="!$attrs.collapsed">物流管理</span>
        </a-menu-item>
        <a-menu-item key="inventory">
          <template #icon><icon-database /></template>
          <span v-if="!$attrs.collapsed">库存管理</span>
        </a-menu-item>
        <a-menu-item key="profile">
          <template #icon><icon-user /></template>
          <span v-if="!$attrs.collapsed">个人信息</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout class="merchant-main">
      <a-layout-header class="merchant-header">
        <div class="header-left">
          <span class="page-title">{{ titleMap[active] }}</span>
        </div>
        <div class="header-right">
          <a-space>
            <a-badge :count="pendingRefundCount">
              <a-button shape="circle" @click="active = 'orders'">
                <template #icon><icon-notification /></template>
              </a-button>
            </a-badge>
            <a-button @click="goHome">
              <template #icon><icon-home /></template>
              去商城
            </a-button>
            <a-dropdown>
              <a-button shape="circle">
                <template #icon><icon-user /></template>
              </a-button>
              <template #content>
                <a-doption @click="active = 'profile'">
                  <template #icon><icon-settings /></template>
                  个人信息
                </a-doption>
                <a-doption @click="logout">
                  <template #icon><icon-export /></template>
                  退出登录
                </a-doption>
              </template>
            </a-dropdown>
          </a-space>
        </div>
      </a-layout-header>
      <a-layout-content class="merchant-content">
        <a-card v-if="active==='overview'" :bordered="false" class="overview-card">
          <div class="stats-row">
            <a-card class="stat-card" :bordered="false">
              <div class="stat-icon orders">
                <icon-file :size="32" />
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ overview.orderCount || 0 }}</div>
                <div class="stat-label">订单总量</div>
              </div>
            </a-card>
            <a-card class="stat-card" :bordered="false">
              <div class="stat-icon sales">
                <icon-gift :size="32" />
              </div>
              <div class="stat-info">
                <div class="stat-value">¥{{ (overview.salesAmount || 0).toLocaleString() }}</div>
                <div class="stat-label">销售额</div>
              </div>
            </a-card>
            <a-card class="stat-card" :bordered="false">
              <div class="stat-icon products">
                <icon-apps :size="32" />
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ products.length }}</div>
                <div class="stat-label">在售商品</div>
              </div>
            </a-card>
            <a-card class="stat-card" :bordered="false">
              <div class="stat-icon reviews">
                <icon-message :size="32" />
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ reviews.length }}</div>
                <div class="stat-label">累计评价</div>
              </div>
            </a-card>
          </div>

          <a-row :gutter="16" style="margin-top: 20px">
            <a-col :xs="24" :md="12">
              <a-card title="品类占比" size="small">
                <div ref="categoryChartRef" style="height: 280px;"></div>
              </a-card>
            </a-col>
            <a-col :xs="24" :md="12">
              <a-card title="热销排行 Top10" size="small">
                <div ref="hotChartRef" style="height: 280px;"></div>
              </a-card>
            </a-col>
          </a-row>

          <a-divider />
          <a-card title="通知公告" size="small">
            <a-timeline v-if="overview.notifications && overview.notifications.length">
              <a-timeline-item v-for="(note, idx) in overview.notifications" :key="idx" :color="idx === 0 ? 'red' : 'green'">
                {{ note }}
              </a-timeline-item>
            </a-timeline>
            <a-empty v-else description="暂无公告" />
          </a-card>
        </a-card>

        <a-card v-if="active==='products'" :bordered="false" class="content-card">
          <template #title>
            <a-space>
              <span>商品管理</span>
              <a-tag color="green">共 {{ products.length }} 件商品</a-tag>
            </a-space>
          </template>
          <template #extra>
            <a-space>
              <a-button type="primary" @click="openProductModal()">
                <template #icon><icon-plus /></template>
                新增商品
              </a-button>
              <a-button @click="loadProducts">
                <template #icon><icon-refresh /></template>
                刷新
              </a-button>
            </a-space>
          </template>
          <a-table :columns="productColumns" :data="products" :pagination="{ pageSize: 8 }" :bordered="false">
            <template #cover="{ record }">
              <img :src="record.imageUrl || 'https://picsum.photos/60/60?baby=' + record.id" style="width: 48px; height: 48px; border-radius: 8px; object-fit: cover" />
            </template>
            <template #actions="{ record }">
              <a-space>
                <a-button size="mini" type="primary" shape="round" @click="openProductModal(record)">编辑</a-button>
                <a-popconfirm content="确定删除此商品吗？" @ok="delProduct(record.id)">
                  <a-button size="mini" status="danger" shape="round">删除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table>
        </a-card>

        <a-card v-if="active==='orders'" :bordered="false" class="content-card">
          <template #title>
            <a-space>
              <span>订单管理</span>
              <a-tag color="arcoblue">共 {{ orders.length }} 个订单</a-tag>
            </a-space>
          </template>
          <template #extra>
            <a-button @click="loadOrders">
              <template #icon><icon-refresh /></template>
              刷新
            </a-button>
          </template>
          <a-table :columns="orderColumns" :data="orders" :pagination="{ pageSize: 8 }" :bordered="false">
            <template #status="{ record }">
              <a-tag :color="getOrderStatusColor(record.status)">{{ getOrderStatusText(record.status) }}</a-tag>
            </template>
            <template #actions="{ record }">
              <a-space>
                <a-button size="mini" type="primary" shape="round" @click="ship(record.id)" v-if="record.status === 'PAID'">
                  <template #icon><icon-send /></template>
                  发货
                </a-button>
                <a-button size="mini" type="primary" shape="round" @click="refund(record.id, true)" v-if="record.status === 'REFUND_REQUESTED'">
                  <template #icon><icon-check-circle /></template>
                  同意退款
                </a-button>
                <a-button size="mini" shape="round" @click="openOrderLogistics(record.id)">
                  <template #icon><icon-send /></template>
                  物流
                </a-button>
              </a-space>
            </template>
          </a-table>
        </a-card>

        <a-card v-if="active==='reviews'" :bordered="false" class="content-card">
          <template #title>
            <a-space>
              <span>评价管理</span>
              <a-tag color="orange">共 {{ reviews.length }} 条评价</a-tag>
            </a-space>
          </template>
          <a-table :columns="reviewColumns" :data="reviews" :pagination="{ pageSize: 8 }" :bordered="false">
            <template #rating="{ record }">
              <a-rate :model-value="record.rating" readonly />
            </template>
          </a-table>
        </a-card>

        <a-card v-if="active==='logistics'" :bordered="false" class="content-card">
          <template #title>物流管理</template>
          <a-table :columns="logisticsColumns" :data="logistics" :pagination="{ pageSize: 8 }" :bordered="false" />
        </a-card>

        <a-card v-if="active==='inventory'" :bordered="false" class="content-card">
          <template #title>库存管理</template>
          <template #extra>
            <a-button @click="loadInventory">
              <template #icon><icon-refresh /></template>
              刷新
            </a-button>
          </template>
          <a-table :columns="inventoryColumns" :data="inventory" :pagination="{ pageSize: 8 }" :bordered="false">
            <template #changeQty="{ record }">
              <a-tag :color="record.changeQty > 0 ? 'green' : 'red'">
                {{ record.changeQty > 0 ? '+' : '' }}{{ record.changeQty }}
              </a-tag>
            </template>
            <template #actions="{ record }">
              <a-popconfirm content="确定删除此库存记录吗？" @ok="deleteInventory(record.id)">
                <a-button size="mini" status="danger" shape="round">删除</a-button>
              </a-popconfirm>
            </template>
          </a-table>
        </a-card>

        <a-card v-if="active==='profile'" :bordered="false" class="content-card">
          <template #title>个人信息</template>
          <a-form :model="profile" layout="vertical" style="max-width: 500px">
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="账号">
                  <a-input v-model="profile.username" disabled>
                    <template #prefix><icon-user /></template>
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="角色">
                  <a-input v-model="profile.role" disabled>
                    <template #prefix><icon-safe /></template>
                  </a-input>
                </a-form-item>
              </a-col>
            </a-row>
<a-form-item label="昵称">
                  <a-input v-model="profile.nickname">
                    <template #prefix><icon-relation /></template>
                  </a-input>
                </a-form-item>
<a-form-item label="手机号">
                  <a-input v-model="profile.phone">
                    <template #prefix><icon-phone /></template>
                  </a-input>
                </a-form-item>
<a-form-item label="地址">
                  <a-input v-model="profile.address">
                    <template #prefix><icon-location /></template>
                  </a-input>
                </a-form-item>
            <a-button type="primary" @click="saveProfile">
              <template #icon><icon-check /></template>
              保存修改
            </a-button>
          </a-form>
        </a-card>
      </a-layout-content>
    </a-layout>
  </a-layout>

  <a-modal v-model:visible="productModalVisible" :title="productForm.id ? '编辑商品' : '新增商品'" :ok-text="productForm.id ? '保存' : '添加'" @ok="submitProduct" width="600">
    <a-form :model="productForm" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="16">
          <a-form-item label="商品名称" required>
            <a-input v-model="productForm.name" placeholder="请输入商品名称" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="分类">
            <a-select v-model="productForm.category" placeholder="选择分类">
              <a-option value="奶粉">奶粉</a-option>
              <a-option value="尿裤">尿裤</a-option>
              <a-option value="辅食">辅食</a-option>
              <a-option value="玩具">玩具</a-option>
              <a-option value="服饰">服饰</a-option>
              <a-option value="用品">用品</a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="商品描述">
        <a-textarea v-model="productForm.description" placeholder="请输入商品描述" :rows="3" />
      </a-form-item>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="价格" required>
            <a-input-number v-model="productForm.price" :min="0" :precision="2" :step="0.01" style="width: 100%" prefix="¥" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="库存" required>
            <a-input-number v-model="productForm.stock" :min="0" style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="商品图片">
        <a-input v-model="productForm.imageUrl" placeholder="请输入图片URL" allow-clear />
      </a-form-item>
    </a-form>
  </a-modal>

  <a-modal v-model:visible="logisticsModalVisible" title="订单物流详情" :footer="null" width="600">
    <a-table :columns="logisticsColumns" :data="filteredLogistics" :pagination="false" :bordered="false" />
  </a-modal>
</template>

<script setup>
import { onMounted, reactive, ref, watch, nextTick, onUnmounted, computed } from 'vue'
import { Message } from '@arco-design/web-vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import { api } from '../api'
import { useUserStore } from '../stores/user'

const router = useRouter()
const userStore = useUserStore()
const active = ref('overview')
const titleMap = {
  overview: '数据概览', products: '商品管理', orders: '订单管理', reviews: '评价管理',
  logistics: '物流管理', inventory: '库存管理', profile: '个人信息'
}

const categoryChartRef = ref(null)
const hotChartRef = ref(null)
let categoryChart = null
let hotChart = null

const overview = reactive({})
const products = ref([])
const orders = ref([])
const reviews = ref([])
const logistics = ref([])
const inventory = ref([])

const productModalVisible = ref(false)
const logisticsModalVisible = ref(false)

const productForm = reactive({ id: null, name: '', category: '', description: '', price: 0, stock: 0, imageUrl: '', approved: false })
const profile = reactive({ username: '', role: '', nickname: '', phone: '', address: '' })
const filteredLogistics = ref([])

const pendingRefundCount = computed(() => orders.value.filter(o => o.status === 'REFUND_REQUESTED').length)

const productColumns = [
  { title: 'ID', dataIndex: 'id', width: 60 },
  { title: '封面', slotName: 'cover', width: 70 },
  { title: '名称', dataIndex: 'name' },
  { title: '分类', dataIndex: 'category', width: 100 },
  { title: '价格', dataIndex: 'price', width: 100 },
  { title: '库存', dataIndex: 'stock', width: 80 },
  { title: '审核', dataIndex: 'approved', width: 80, render: ({ record }) => h(Tag, { color: record.approved ? 'green' : 'orange' }, () => record.approved ? '已上架' : '待审核') },
  { title: '操作', slotName: 'actions', width: 150 }
]

const orderColumns = [
  { title: '订单号', dataIndex: 'orderNo' },
  { title: '金额', dataIndex: 'totalAmount', render: ({ record }) => `¥${record.totalAmount}` },
  { title: '状态', slotName: 'status' },
  { title: '下单时间', dataIndex: 'createdAt', render: ({ record }) => formatDate(record.createdAt) },
  { title: '操作', slotName: 'actions', width: 200 }
]

const reviewColumns = [
  { title: 'ID', dataIndex: 'id', width: 60 },
  { title: '订单号', dataIndex: 'orderNo' },
  { title: '商品名称', dataIndex: 'productName' },
  { title: '评分', slotName: 'rating', width: 180 },
  { title: '内容', dataIndex: 'content', ellipsis: true },
  { title: '时间', dataIndex: 'createdAt', width: 160, render: ({ record }) => formatDate(record.createdAt) }
]

const logisticsColumns = [
  { title: '订单号', dataIndex: 'orderNo' },
  { title: '状态', dataIndex: 'status' },
  { title: '备注', dataIndex: 'note' },
  { title: '时间', dataIndex: 'createdAt', width: 160 }
]

const inventoryColumns = [
  { title: 'ID', dataIndex: 'id', width: 60 },
  { title: '商品名称', dataIndex: 'productName' },
  { title: '变动', slotName: 'changeQty', width: 100 },
  { title: '备注', dataIndex: 'note' },
  { title: '时间', dataIndex: 'createdAt', width: 160 },
  { title: '操作', slotName: 'actions', width: 80 }
]

import { h } from 'vue'
import { Tag } from '@arco-design/web-vue'

const formatDate = (date) => {
  if (!date) return '-'
  return new Date(date).toLocaleString('zh-CN')
}

const getOrderStatusColor = (status) => {
  const colors = { 'PENDING_PAYMENT': 'orange', 'PAID': 'blue', 'SHIPPED': 'cyan', 'COMPLETED': 'green', 'REFUND_REQUESTED': 'orange', 'REFUNDED': 'purple', 'CANCELLED': 'gray' }
  return colors[status] || 'gray'
}

const getOrderStatusText = (status) => {
  const texts = { 'PENDING_PAYMENT': '待支付', 'PAID': '已支付', 'SHIPPED': '已发货', 'COMPLETED': '已完成', 'REFUND_REQUESTED': '退款中', 'REFUNDED': '已退款', 'CANCELLED': '已取消' }
  return texts[status] || status
}

const goHome = () => router.push('/products')
const logout = async () => { await userStore.logout(); router.replace('/login') }

const loadOverview = async () => {
  Object.assign(overview, await api.merchantOverview())
  await nextTick()
  initCharts()
}

const initCharts = () => {
  if (!overview.categoryRatio) overview.categoryRatio = {}
  if (!overview.hotProducts) overview.hotProducts = {}

  const categoryData = Object.entries(overview.categoryRatio).map(([name, value]) => ({ name, value }))
  if (categoryChart) {
    categoryChart.setOption({
      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
      legend: { orient: 'vertical', left: 'left' },
      series: [{ type: 'pie', radius: ['40%', '70%'], data: categoryData, itemStyle: { borderRadius: 8, borderColor: '#fff', borderWidth: 2 } }]
    })
  } else if (categoryChartRef.value) {
    categoryChart(categoryChartRef.value)
    categoryChart = echarts.init.setOption({
      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
      legend: { orient: 'vertical', left: 'left' },
      series: [{ type: 'pie', radius: ['40%', '70%'], data: categoryData, itemStyle: { borderRadius: 8, borderColor: '#fff', borderWidth: 2 } }]
    })
  }

  const hotEntries = Object.entries(overview.hotProducts).sort((a, b) => b[1] - a[1]).slice(0, 10)
  const hotData = hotEntries.map(([name, value]) => ({ name: name.length > 8 ? name.substring(0, 8) + '...' : name, value }))
  if (hotChart) {
    hotChart.setOption({
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'value' },
      yAxis: { type: 'category', data: hotData.map(d => d.name).reverse() },
      series: [{ type: 'bar', data: hotData.map(d => d.value).reverse(), itemStyle: { borderRadius: [0, 4, 4, 0] } }]
    })
  } else if (hotChartRef.value) {
    hotChart = echarts.init(hotChartRef.value)
    hotChart.setOption({
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'value' },
      yAxis: { type: 'category', data: hotData.map(d => d.name).reverse() },
      series: [{ type: 'bar', data: hotData.map(d => d.value).reverse(), itemStyle: { borderRadius: [0, 4, 4, 0] } }]
    })
  }
}

const handleResize = () => { categoryChart?.resize(); hotChart?.resize() }

watch(active, async (v) => {
  if (v === 'overview') { await loadOverview(); await nextTick(); initCharts() }
  if (v === 'products') return loadProducts()
  if (v === 'orders') return loadOrders()
  if (v === 'reviews') return loadReviews()
  if (v === 'logistics') return loadLogistics()
  if (v === 'inventory') return loadInventory()
})

const loadProducts = async () => { products.value = await api.merchantProducts() }
const loadOrders = async () => { orders.value = await api.merchantOrders() }
const loadReviews = async () => { reviews.value = await api.merchantReviews() }
const loadLogistics = async () => { logistics.value = await api.merchantLogistics() }
const loadInventory = async () => { inventory.value = await api.merchantInventory() }

const openProductModal = (row = null) => {
  if (row) {
    productForm.id = row.id
    productForm.name = row.name
    productForm.category = row.category
    productForm.description = row.description
    productForm.price = row.price
    productForm.stock = row.stock
    productForm.imageUrl = row.imageUrl
  } else {
    productForm.id = null
    productForm.name = ''
    productForm.category = ''
    productForm.description = ''
    productForm.price = 0
    productForm.stock = 0
    productForm.imageUrl = ''
  }
  productModalVisible.value = true
}

const submitProduct = async () => {
  if (!productForm.name.trim()) return Message.warning('请输入商品名称')
  await api.saveMerchantProduct({ ...productForm })
  Message.success(productForm.id ? '商品已更新' : '商品已添加')
  productModalVisible.value = false
  await loadProducts()
}

const delProduct = async (id) => {
  await api.deleteMerchantProduct(id)
  Message.success('商品已删除')
  await loadProducts()
}

const ship = async (id) => {
  await api.shipOrder(id, { note: '已发货，请注意查收' })
  Message.success('发货成功')
  await loadOrders()
}

const refund = async (id, agree) => {
  await api.merchantRefund(id, { agree })
  Message.success(agree ? '已同意退款' : '已拒绝退款')
  await loadOrders()
}

const deleteInventory = async (id) => {
  await api.deleteMerchantInventory(id)
  Message.success('库存记录已删除')
  await loadInventory()
}

const openOrderLogistics = async (orderId) => {
  await loadLogistics()
  filteredLogistics.value = logistics.value.filter((l) => l.orderId === orderId)
  logisticsModalVisible.value = true
}

const loadProfile = async () => {
  const me = await api.me()
  profile.username = me.username
  profile.role = me.role
  profile.nickname = me.nickname || ''
  profile.phone = me.phone || ''
  profile.address = me.address || ''
}

const saveProfile = async () => {
  await api.updateMe({ nickname: profile.nickname, phone: profile.phone, address: profile.address })
  Message.success('已保存')
}

import { IconHome, IconDashboard, IconApps, IconFile, IconMessage, IconSend, IconStorage, IconUser, IconNotification, IconExport, IconSettings, IconGift, IconPlus, IconRefresh, IconCheckCircle, IconLocation, IconPhone, IconRelation, IconSafe, IconCheck } from '@arco-design/web-vue/es/icon'

onMounted(async () => {
  await userStore.fetchMe()
  if (userStore.role !== 'MERCHANT') return router.replace('/login')
  await Promise.all([loadOverview(), loadProducts(), loadOrders(), loadReviews(), loadLogistics(), loadInventory(), loadProfile()])
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  categoryChart?.dispose()
  hotChart?.dispose()
})
</script>

<style scoped>
.merchant-layout {
  background: #f5f7fa;
}

.merchant-sider {
  background: linear-gradient(180deg, #1f1f1f 0%, #2d2d2d 100%);
}

.sider-header {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sider-title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.merchant-main {
  background: #f5f7fa;
}

.merchant-header {
  background: #fff;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  height: 64px;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.merchant-content {
  padding: 24px;
  overflow: auto;
}

.overview-card {
  border-radius: 12px;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-card {
  border-radius: 12px;
  background: linear-gradient(135deg, #f0f5ff 0%, #fff 100%);
  border: none;
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.stat-icon.orders {
  background: linear-gradient(135deg, #1890ff 0%, #69c0ff 100%);
  color: #fff;
}

.stat-icon.sales {
  background: linear-gradient(135deg, #52c41a 0%, #95de64 100%);
  color: #fff;
}

.stat-icon.products {
  background: linear-gradient(135deg, #722ed1 0%, #b37feb 100%);
  color: #fff;
}

.stat-icon.reviews {
  background: linear-gradient(135deg, #fa8c16 0%, #ffc069 100%);
  color: #fff;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #333;
}

.stat-label {
  font-size: 14px;
  color: #888;
  margin-top: 4px;
}

.content-card {
  border-radius: 12px;
}

:deep(.arco-btn-primary) {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  border-color: transparent;
}

:deep(.arco-card-header) {
  border-bottom: 1px solid #f0f0f0;
}

@media (max-width: 768px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
