/* 群组选择器专用样式 */

/* 文本截断样式 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 群组卡片悬停效果 */
.group-card {
  transition: all 0.2s ease-in-out;
}

.group-card:hover {
  transform: translateY(-2px);
  border-color: #e5e7eb;
}

/* 状态徽章样式 */
.status-badge-active {
  background-color: #dcfce7;
  color: #166534;
}

.status-badge-expiring {
  background-color: #fef3c7;
  color: #92400e;
}

.status-badge-expired {
  background-color: #fee2e2;
  color: #991b1b;
}

/* 渐变背景样式 */
.gradient-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
}

.gradient-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
}

.gradient-green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.gradient-orange {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

/* 响应式网格布局 */
@media (max-width: 640px) {
  .group-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  .group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .group-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 1025px) {
  .group-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* 加载动画 */
.loading-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* 图片加载状态 */
.image-loading {
  position: relative;
  overflow: hidden;
}

.image-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: loading-sweep 1.5s infinite;
}

@keyframes loading-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
