<template>
  <div class="admin-dashboard-container">
    <div class="page-header">
      <h1 class="page-title">管理员仪表盘</h1>
      <div class="header-actions">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleDateChange"
        />
        <el-button type="primary" @click="refreshData">
          <el-icon class="el-icon--left"><Refresh /></el-icon>
          刷新数据
        </el-button>
      </div>
    </div>

    <!-- 核心指标 -->
    <div class="metrics-section">
      <div class="metric-card card" v-for="metric in coreMetrics" :key="metric.label">
        <div class="metric-header">
          <div class="metric-icon" :style="{ backgroundColor: metric.bgColor }">
            <el-icon :size="32" :color="metric.color">
              <component :is="metric.icon" />
            </el-icon>
          </div>
          <el-dropdown trigger="click" v-if="metric.hasDetail">
            <el-button link>
              <el-icon><More /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="viewDetail(metric)">查看详情</el-dropdown-item>
                <el-dropdown-item @click="exportData(metric)">导出数据</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ metric.value }}</div>
          <div class="metric-label">{{ metric.label }}</div>
          <div class="metric-trend">
            <span class="trend-text">较上期</span>
            <span class="trend-value" :class="metric.trend > 0 ? 'up' : 'down'">
              <el-icon><component :is="metric.trend > 0 ? 'Top' : 'Bottom'" /></el-icon>
              {{ Math.abs(metric.trend) }}%
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <!-- 用户增长趋势 -->
      <div class="chart-card card">
        <div class="chart-header">
          <h3 class="chart-title">用户增长趋势</h3>
          <el-radio-group v-model="userChartType" size="small">
            <el-radio-button label="day">日</el-radio-button>
            <el-radio-button label="week">周</el-radio-button>
            <el-radio-button label="month">月</el-radio-button>
          </el-radio-group>
        </div>
        <div class="chart-container" ref="userChartRef"></div>
      </div>

      <!-- 课程完成情况 -->
      <div class="chart-card card">
        <div class="chart-header">
          <h3 class="chart-title">课程完成情况</h3>
          <el-select v-model="courseChartType" size="small" style="width: 120px">
            <el-option label="按课程" value="course" />
            <el-option label="按部门" value="department" />
            <el-option label="按时间" value="time" />
          </el-select>
        </div>
        <div class="chart-container" ref="courseChartRef"></div>
      </div>
    </div>

    <!-- 实时动态 -->
    <div class="activity-section">
      <div class="activity-card card">
        <h3 class="section-title">系统实时动态</h3>
        <div class="activity-list">
          <div class="activity-item" v-for="activity in systemActivities" :key="activity.id">
            <div class="activity-icon" :style="{ backgroundColor: getActivityColor(activity.type).bg }">
              <el-icon :color="getActivityColor(activity.type).color">
                <component :is="activity.icon" />
              </el-icon>
            </div>
            <div class="activity-content">
              <div class="activity-title">{{ activity.title }}</div>
              <div class="activity-desc">{{ activity.description }}</div>
              <div class="activity-time">{{ activity.time }}</div>
            </div>
          </div>
        </div>
        <div class="activity-footer">
          <el-button link type="primary" @click="viewAllActivities">
            查看全部动态 <el-icon class="el-icon--right"><ArrowRight /></el-icon>
          </el-button>
        </div>
      </div>

      <!-- 待处理事项 -->
      <div class="pending-card card">
        <h3 class="section-title">待处理事项</h3>
        <div class="pending-list">
          <div class="pending-item" v-for="item in pendingItems" :key="item.id">
            <div class="pending-header">
              <el-tag :type="item.urgency" size="small">{{ item.urgencyText }}</el-tag>
              <span class="pending-time">{{ item.time }}</span>
            </div>
            <div class="pending-content">
              <h4 class="pending-title">{{ item.title }}</h4>
              <p class="pending-desc">{{ item.description }}</p>
            </div>
            <div class="pending-actions">
              <el-button size="small" @click="handlePending(item, 'approve')">
                <el-icon class="el-icon--left"><CircleCheck /></el-icon>
                处理
              </el-button>
              <el-button size="small" plain @click="handlePending(item, 'detail')">
                查看
              </el-button>
            </div>
          </div>
        </div>
        <el-empty v-if="pendingItems.length === 0" description="暂无待处理事项" :image-size="80" />
      </div>
    </div>

    <!-- 快捷操作 -->
    <div class="quick-actions-section">
      <h3 class="section-title">快捷操作</h3>
      <div class="action-grid">
        <div class="action-card" v-for="action in quickActions" :key="action.id" @click="handleQuickAction(action)">
          <div class="action-icon" :style="{ backgroundColor: action.bgColor }">
            <el-icon :size="32" :color="action.color">
              <component :is="action.icon" />
            </el-icon>
          </div>
          <div class="action-title">{{ action.title }}</div>
          <div class="action-desc">{{ action.description }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import { getDashboardStats, getUserGrowthData, getCourseCompletionData } from '@/api'

// 日期范围
const dateRange = ref<[Date, Date]>([
  new Date(new Date().setDate(new Date().getDate() - 30)),
  new Date()
])

// 图表类型
const userChartType = ref('week')
const courseChartType = ref('course')

// 图表引用
const userChartRef = ref()
const courseChartRef = ref()
let userChart: any = null
let courseChart: any = null

// 核心指标数据
const coreMetrics = ref([
  {
    label: '用户总数',
    value: '0',
    icon: 'User',
    color: '#667eea',
    bgColor: 'rgba(102, 126, 234, 0.1)',
    trend: 0,
    hasDetail: true
  },
  {
    label: '课程总数',
    value: '0',
    icon: 'Collection',
    color: '#67c23a',
    bgColor: 'rgba(103, 194, 58, 0.1)',
    trend: 0,
    hasDetail: true
  },
  {
    label: '平均学习时长',
    value: '0h',
    icon: 'TrendCharts',
    color: '#e6a23c',
    bgColor: 'rgba(230, 162, 60, 0.1)',
    trend: 0,
    hasDetail: true
  },
  {
    label: '考试通过率',
    value: '0%',
    icon: 'CircleCheck',
    color: '#409eff',
    bgColor: 'rgba(64, 158, 255, 0.1)',
    trend: 0,
    hasDetail: true
  }
])

// 加载状态
const loading = reactive({
  stats: false,
  userChart: false,
  courseChart: false
})

// 系统动态
const systemActivities = ref([
  {
    id: 1,
    type: 'user',
    icon: 'User',
    title: '新用户注册',
    description: '用户 "王小明" 完成注册，等待激活',
    time: '5分钟前'
  },
  {
    id: 2,
    type: 'course',
    icon: 'Collection',
    title: '课程发布',
    description: '管理员发布了新课程 "高级销售技巧"',
    time: '1小时前'
  },
  {
    id: 3,
    type: 'exam',
    icon: 'Document',
    title: '考试完成',
    description: '32名学员完成了 "月度考核" 考试',
    time: '2小时前'
  },
  {
    id: 4,
    type: 'system',
    icon: 'Setting',
    title: '系统更新',
    description: '题库管理模块更新至 v2.1.0',
    time: '3小时前'
  },
  {
    id: 5,
    type: 'alert',
    icon: 'Warning',
    title: '异常提醒',
    description: '检测到异常登录尝试 3 次',
    time: '4小时前'
  }
])

// 待处理事项
const pendingItems = ref([
  {
    id: 1,
    urgency: 'danger',
    urgencyText: '紧急',
    title: '用户激活申请',
    description: '有 5 个新注册用户等待账号激活和岗位分配',
    time: '1小时前',
    count: 5
  },
  {
    id: 2,
    urgency: 'warning',
    urgencyText: '重要',
    title: '课程审核',
    description: '3 个新创建的课程需要审核发布',
    time: '3小时前',
    count: 3
  },
  {
    id: 3,
    urgency: '',
    urgencyText: '一般',
    title: '系统备份提醒',
    description: '距离上次系统备份已超过 7 天，建议立即备份',
    time: '1天前',
    count: 1
  }
])

// 快捷操作
const quickActions = ref([
  {
    id: 1,
    title: '用户管理',
    description: '管理系统用户',
    icon: 'User',
    color: '#667eea',
    bgColor: 'rgba(102, 126, 234, 0.1)',
    path: '/admin/user-management'
  },
  {
    id: 2,
    title: '课程中心',
    description: '管理课程内容',
    icon: 'Collection',
    color: '#67c23a',
    bgColor: 'rgba(103, 194, 58, 0.1)',
    path: '/trainee/course-center'
  },
  {
    id: 3,
    title: '岗位管理',
    description: '管理岗位信息',
    icon: 'OfficeBuilding',
    color: '#e6a23c',
    bgColor: 'rgba(230, 162, 60, 0.1)',
    path: '/admin/position-management'
  },
  {
    id: 4,
    title: '数据导出',
    description: '导出系统数据',
    icon: 'Download',
    color: '#f56c6c',
    bgColor: 'rgba(245, 108, 108, 0.1)',
    action: 'export'
  },
  {
    id: 5,
    title: '系统设置',
    description: '配置系统参数',
    icon: 'Setting',
    color: '#909399',
    bgColor: 'rgba(144, 147, 153, 0.1)',
    path: '/user/settings'
  },
  {
    id: 6,
    title: '日志查看',
    description: '查看系统日志',
    icon: 'Files',
    color: '#409eff',
    bgColor: 'rgba(64, 158, 255, 0.1)',
    path: '/admin/logs'
  }
])

/**
 * 日期变化处理
 */
const handleDateChange = () => {
  ElMessage.info('更新数据中...')
  // 重新加载数据
}

/**
 * 刷新数据
 */
const refreshData = async () => {
  await Promise.all([
    loadDashboardStats(),
    loadUserGrowthData(),
    loadCourseCompletionData()
  ])
  ElMessage.success('数据已刷新')
}

/**
 * 查看详情
 */
const viewDetail = (metric: any) => {
  ElMessage.info(`查看 ${metric.label} 详情`)
}

/**
 * 导出数据
 */
const exportData = (metric: any) => {
  ElMessage.success(`${metric.label} 数据导出成功`)
}

/**
 * 获取活动颜色
 */
const getActivityColor = (type: string) => {
  const colorMap: Record<string, any> = {
    user: { color: '#667eea', bg: 'rgba(102, 126, 234, 0.1)' },
    course: { color: '#67c23a', bg: 'rgba(103, 194, 58, 0.1)' },
    exam: { color: '#e6a23c', bg: 'rgba(230, 162, 60, 0.1)' },
    system: { color: '#409eff', bg: 'rgba(64, 158, 255, 0.1)' },
    alert: { color: '#f56c6c', bg: 'rgba(245, 108, 108, 0.1)' }
  }
  return colorMap[type] || { color: '#909399', bg: 'rgba(144, 147, 153, 0.1)' }
}

/**
 * 查看全部动态
 */
const viewAllActivities = () => {
  ElMessage.info('查看全部动态')
}

/**
 * 处理待办事项
 */
const handlePending = (item: any, action: string) => {
  if (action === 'approve') {
    ElMessage.success(`正在处理: ${item.title}`)
  } else {
    ElMessage.info(`查看详情: ${item.title}`)
  }
}

/**
 * 快捷操作处理
 */
const handleQuickAction = (action: any) => {
  if (action.path) {
    // 跳转到对应页面
    ElMessage.info(`跳转到 ${action.title}`)
  } else if (action.action === 'export') {
    ElMessage.success('开始导出数据...')
  }
}

// 监听课程图表类型变化
watch(courseChartType, () => {
  loadCourseCompletionData()
})

/**
 * 初始化用户增长趋势图
 */
const initUserChart = (data?: any) => {
  if (!userChartRef.value) return
  
  if (!userChart) {
    userChart = echarts.init(userChartRef.value)
  }
  
  const option = {
    title: {
      text: '用户增长趋势',
      left: 'center',
      textStyle: {
        fontSize: 14,
        fontWeight: 'normal',
        color: '#666'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['新增用户', '活跃用户'],
      bottom: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data?.dates || []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '新增用户',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          color: '#667eea'
        },
        itemStyle: {
          color: '#667eea'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(102, 126, 234, 0.3)' },
            { offset: 1, color: 'rgba(102, 126, 234, 0.1)' }
          ])
        },
        data: data?.newUsers || []
      },
      {
        name: '活跃用户',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          color: '#67c23a'
        },
        itemStyle: {
          color: '#67c23a'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
            { offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
          ])
        },
        data: data?.activeUsers || []
      }
    ]
  }
  
  userChart.setOption(option)
}

/**
 * 初始化课程完成情况图
 */
const initCourseChart = (data?: any) => {
  if (!courseChartRef.value) return
  
  if (!courseChart) {
    courseChart = echarts.init(courseChartRef.value)
  }
  
  // 根据图表类型显示不同的图表
  if (courseChartType.value === 'course') {
    // 按课程显示完成率
    const option = {
      title: {
        text: '课程完成率',
        left: 'center',
        textStyle: {
          fontSize: 14,
          fontWeight: 'normal',
          color: '#666'
        }
      },
      tooltip: {
        trigger: 'axis',
        formatter: '{b}: {c}%'
      },
      xAxis: {
        type: 'category',
        data: data?.courses || [],
        axisLabel: {
          interval: 0,
          rotate: 30
        }
      },
      yAxis: {
        type: 'value',
        max: 100,
        axisLabel: {
          formatter: '{value}%'
        }
      },
      series: [{
        data: data?.completionRates || [],
        type: 'bar',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#67c23a' },
            { offset: 1, color: '#409eff' }
          ])
        }
      }]
    }
    courseChart.setOption(option, true)
  } else {
    // 其他类型的图表（首先保持原来的饼图）
    const option = {
      title: {
        text: '课程完成情况',
        left: 'center',
        textStyle: {
          fontSize: 14,
          fontWeight: 'normal',
          color: '#666'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        bottom: 10,
        left: 'center'
      },
      series: [
        {
          name: '课程完成情况',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['50%', '45%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: '已完成', itemStyle: { color: '#67c23a' } },
            { value: 735, name: '进行中', itemStyle: { color: '#e6a23c' } },
            { value: 580, name: '未开始', itemStyle: { color: '#909399' } },
            { value: 484, name: '已过期', itemStyle: { color: '#f56c6c' } }
          ]
        }
      ]
    }
    courseChart.setOption(option, true)
  }
}

/**
 * 加载仪表盘统计数据
 */
const loadDashboardStats = async () => {
  try {
    loading.stats = true
    const response = await getDashboardStats()
    if (response.code === 200) {
      const stats = response.data
      // 更新核心指标
      coreMetrics.value[0].value = stats.users.total.toLocaleString()
      coreMetrics.value[0].trend = parseFloat(stats.users.growthRate)
      
      coreMetrics.value[1].value = stats.courses.total.toString()
      coreMetrics.value[1].trend = 0 // 可以根据需要计算
      
      coreMetrics.value[2].value = `${stats.learning.avgHours}h`
      coreMetrics.value[2].trend = 0 // 可以根据需要计算
      
      coreMetrics.value[3].value = stats.exams.passRate
      coreMetrics.value[3].trend = 0 // 可以根据需要计算
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
  } finally {
    loading.stats = false
  }
}

/**
 * 加载用户增长数据
 */
const loadUserGrowthData = async () => {
  try {
    loading.userChart = true
    const response = await getUserGrowthData()
    if (response.code === 200) {
      initUserChart(response.data)
    }
  } catch (error) {
    console.error('加载用户增长数据失败:', error)
  } finally {
    loading.userChart = false
  }
}

/**
 * 加载课程完成率数据
 */
const loadCourseCompletionData = async () => {
  try {
    loading.courseChart = true
    const response = await getCourseCompletionData()
    if (response.code === 200) {
      initCourseChart(response.data)
    }
  } catch (error) {
    console.error('加载课程完成率数据失败:', error)
  } finally {
    loading.courseChart = false
  }
}

/**
 * 组件挂载时初始化图表
 */
onMounted(async () => {
  // 加载所有数据
  await Promise.all([
    loadDashboardStats(),
    loadUserGrowthData(),
    loadCourseCompletionData()
  ])
  
  // 响应式处理
  window.addEventListener('resize', () => {
    userChart?.resize()
    courseChart?.resize()
  })
})

/**
 * 组件卸载时清理资源
 */
onUnmounted(() => {
  // 销毁图表实例
  userChart?.dispose()
  courseChart?.dispose()
  
  // 移除事件监听
  window.removeEventListener('resize', () => {
    userChart?.resize()
    courseChart?.resize()
  })
})
</script>

<style lang="scss" scoped>
.admin-dashboard-container {
  max-width: 1400px;
  margin: 0 auto;

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

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

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

      .el-button {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
      }
    }
  }

  .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
  }

  .metrics-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;

    .metric-card {
      padding: 24px;

      .metric-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;

        .metric-icon {
          width: 64px;
          height: 64px;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .metric-content {
        .metric-value {
          font-size: 36px;
          font-weight: 600;
          color: #333;
          margin-bottom: 4px;
        }

        .metric-label {
          font-size: 14px;
          color: #666;
          margin-bottom: 12px;
        }

        .metric-trend {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 13px;

          .trend-text {
            color: #909399;
          }

          .trend-value {
            display: flex;
            align-items: center;
            gap: 4px;
            font-weight: 500;

            &.up {
              color: #67c23a;
            }

            &.down {
              color: #f56c6c;
            }
          }
        }
      }
    }
  }

  .charts-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;

    .chart-card {
      padding: 24px;

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

        .chart-title {
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
      }

      .chart-container {
        height: 350px;

        .chart-placeholder {
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background: #f5f7fa;
          border-radius: 8px;
          color: #909399;

          p {
            margin-top: 16px;
            font-size: 14px;
          }
        }
      }
    }
  }

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

    .activity-card,
    .pending-card {
      padding: 24px;
    }

    .activity-list {
      max-height: 400px;
      overflow-y: auto;

      .activity-item {
        display: flex;
        gap: 16px;
        padding: 16px 0;
        border-bottom: 1px solid #f5f7fa;

        &:last-child {
          border-bottom: none;
        }

        .activity-icon {
          width: 40px;
          height: 40px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .activity-content {
          flex: 1;

          .activity-title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
          }

          .activity-desc {
            font-size: 13px;
            color: #666;
            margin-bottom: 4px;
          }

          .activity-time {
            font-size: 12px;
            color: #909399;
          }
        }
      }
    }

    .activity-footer {
      margin-top: 16px;
      text-align: center;
    }

    .pending-list {
      .pending-item {
        padding: 16px;
        background: #f5f7fa;
        border-radius: 8px;
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .pending-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .pending-time {
            font-size: 12px;
            color: #909399;
          }
        }

        .pending-content {
          margin-bottom: 12px;

          .pending-title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
          }

          .pending-desc {
            font-size: 13px;
            color: #666;
            line-height: 1.5;
          }
        }

        .pending-actions {
          display: flex;
          gap: 8px;

          .el-button {
            flex: 1;
          }
        }
      }
    }
  }

  .quick-actions-section {
    margin-bottom: 24px;

    .action-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px;

      .action-card {
        padding: 24px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        }

        .action-icon {
          width: 64px;
          height: 64px;
          margin: 0 auto 16px;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .action-title {
          font-size: 16px;
          font-weight: 600;
          color: #333;
          margin-bottom: 8px;
        }

        .action-desc {
          font-size: 13px;
          color: #666;
        }
      }
    }
  }
}

// 响应式
@media (max-width: 1024px) {
  .admin-dashboard-container {
    .charts-section {
      grid-template-columns: 1fr;
    }

    .activity-section {
      grid-template-columns: 1fr;
    }
  }
}

@media (max-width: 768px) {
  .admin-dashboard-container {
    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .header-actions {
        width: 100%;
        flex-direction: column;

        > * {
          width: 100%;
        }
      }
    }

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