/**
 * 骨架屏加载样式
 * 为列表页提供优雅的加载体验
 */

/* ==================== 基础骨架元素 ==================== */

.skeleton-line {
  height: 16px;
  background: linear-gradient(
    90deg,
    var(--gray-200) 0%,
    var(--gray-100) 50%,
    var(--gray-200) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

.skeleton-line--short {
  width: 60%;
}

.skeleton-line--medium {
  width: 80%;
}

.skeleton-line--large {
  height: 20px;
}

.skeleton-line--xl {
  height: 24px;
}

/* 缩略图骨架 */
.skeleton-thumb {
  width: 48px;
  height: 48px;
  background: var(--gray-200);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* 圆形头像骨架 */
.skeleton-avatar {
  width: 40px;
  height: 40px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* ==================== 表格骨架屏 ==================== */

.skeleton-table {
  opacity: 0.7;
}

.skeleton-table tbody tr {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
}

.skeleton-table tbody td {
  padding: var(--space-md);
}

/* ==================== 卡片骨架屏（移动端） ==================== */

.skeleton-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
}

.skeleton-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.skeleton-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-light);
}

.skeleton-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.skeleton-card__footer {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

.skeleton-card__footer .skeleton-line {
  width: 80px;
  height: 32px;
  margin: 0;
}

/* ==================== 动画 ==================== */

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

/* ==================== 响应式 ==================== */

/* 桌面端：显示表格骨架 */
@media (min-width: 768px) {
  .skeleton-card-list {
    display: none;
  }
}

/* 移动端：显示卡片骨架 */
@media (max-width: 767px) {
  .skeleton-table {
    display: none !important;
  }
}

/* ==================== 暗色模式 ==================== */

[data-theme="dark"] .skeleton-line,
[data-theme="dark"] .skeleton-thumb,
[data-theme="dark"] .skeleton-avatar {
  background: linear-gradient(
    90deg,
    var(--gray-700) 0%,
    var(--gray-600) 50%,
    var(--gray-700) 100%
  );
  background-size: 200% 100%;
}

/* ==================== 辅助类 ==================== */

/* 隐藏骨架屏 */
.skeleton-hidden {
  display: none !important;
}

/* 显示骨架屏时降低真实内容透明度 */
.content-loading {
  opacity: 0.3;
  pointer-events: none;
}