/* 客服页面全局样式 */

// 全局变量定义
$primary-color: #165DFF;
$primary-dark: #0E42CB;
$secondary-color: #4E5BA6;
$success-color: #00B42A;
$warning-color: #FF7D00;
$danger-color: #F53F3F;
$text-primary: #1D2129;
$text-secondary: #4E5969;
$text-tertiary: #86909C;
$border-color: #E5E6EB;
$background-primary: #FFFFFF;
$background-secondary: #F2F3F5;
$background-tertiary: #F7F8FA;
$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
$shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
$border-radius: 8px;
$transition: all 0.3s ease;

/* 客服页面通用组件样式 */
.stat-card {
  background-color: $background-primary;
  border-radius: $border-radius;
  padding: 20px;
  box-shadow: $shadow-sm;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: $transition;
  border: 1px solid $border-color;

  &:hover {
    box-shadow: $shadow-md;
    transform: translateY(-2px);
  }

  .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;

    &.primary {
      background-color: $primary-color;
    }

    &.secondary {
      background-color: $secondary-color;
    }

    &.warning {
      background-color: $warning-color;
    }

    &.success {
      background-color: $success-color;
    }
  }

  .stat-content {
    flex: 1;

    .stat-value {
      font-size: 24px;
      font-weight: 600;
      color: $text-primary;
      margin-bottom: 4px;
    }

    .stat-label {
      font-size: 14px;
      color: $text-secondary;
    }
  }

  .stat-trend {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;

    &.positive {
      background-color: color-mix(in srgb, $success-color 5%, transparent);
      color: $success-color;
    }

    &.negative {
      background-color: color-mix(in srgb, $danger-color 5%, transparent);
      color: $danger-color;
    }

    &.neutral {
      background-color: $background-tertiary;
      color: $text-secondary;
    }
  }
}

/* 按钮样式 */
.btn-primary {
  background-color: $primary-color;
  color: white;
  border: none;
  border-radius: $border-radius;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: $transition;

  &:hover {
    background-color: $primary-dark;
  }

  &:disabled {
    background-color: $text-tertiary;
    cursor: not-allowed;
  }
}

.btn-secondary {
  background-color: $background-tertiary;
  color: $text-secondary;
  border: 1px solid $border-color;
  border-radius: $border-radius;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: $transition;

  &:hover {
    background-color: $background-secondary;
    border-color: $text-tertiary;
  }
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: $text-tertiary;

  svg {
    margin-bottom: 16px;
    opacity: 0.5;
  }

  p {
    font-size: 14px;
  }
}

/* 卡片样式 */
.card {
  background-color: $background-primary;
  border-radius: $border-radius;
  padding: 20px;
  box-shadow: $shadow-sm;
  border: 1px solid $border-color;

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

    h3 {
      font-size: 16px;
      font-weight: 600;
      color: $text-primary;
    }
  }
}

/* 列表样式 */
.task-item, .update-item {
  background-color: $background-primary;
  border-radius: $border-radius;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid $border-color;
  transition: $transition;

  &:hover {
    box-shadow: $shadow-sm;
  }
}