@use '@/styles/variables' as *;
@use '@/styles/mixins' as *;

.dashboard {
  display: flex;
  flex-direction: column;
  gap: $spacing-xl;

  &__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: $spacing-lg;

    @include respond-below(xl) {
      grid-template-columns: repeat(2, 1fr);
    }

    @include respond-below(md) {
      grid-template-columns: 1fr;
    }
  }

  &__statsError {
    grid-column: 1 / -1;
  }

  // [2026-01-07] 新增：热钱包余额区域样式
  &__walletBalance {
    display: flex;
    gap: $spacing-lg;

    @include respond-below(md) {
      flex-direction: column;
    }
  }

  &__walletCard {
    flex: 1;
    background: linear-gradient(135deg, #1a1f2e 0%, #252b3b 100%);
    border-radius: $border-radius-lg;
    padding: $spacing-lg $spacing-xl;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  &__walletLabel {
    font-size: 14px;
    font-weight: 500;
    color: $color-text-secondary;
    letter-spacing: 0.5px;
  }

  &__walletValue {
    display: flex;
    align-items: baseline;
    gap: $spacing-xs;
  }

  &__walletAmount {
    font-size: 24px;
    font-weight: 700;
    color: #4ade80;
    font-variant-numeric: tabular-nums;
  }

  &__walletUnit {
    font-size: 12px;
    font-weight: 500;
    color: $color-text-tertiary;
    margin-left: 4px;
  }

  &__walletLoading {
    font-size: 14px;
    color: $color-text-tertiary;
  }

  &__walletNA {
    font-size: 20px;
    color: $color-text-tertiary;
  }

  &__charts {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: $spacing-lg;

    @include respond-below(xl) {
      grid-template-columns: 1fr;
    }
  }

  &__mainChart {
    min-height: 400px;
  }

  &__sidePanel {
    min-height: 400px;
  }

  &__bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: $spacing-lg;
  }

  &__regionChart {
    min-height: 300px;
  }

  // 骨架屏样式
  &__skeleton {
    background: $color-bg-secondary;
    border-radius: $border-radius-lg;
    padding: $spacing-lg;
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
  }

  &__skeletonTitle {
    width: 60%;
    height: 16px;
    background: linear-gradient(90deg, $color-border 25%, $color-bg-tertiary 50%, $color-border 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: $border-radius-sm;
  }

  &__skeletonValue {
    width: 80%;
    height: 32px;
    background: linear-gradient(90deg, $color-border 25%, $color-bg-tertiary 50%, $color-border 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: $border-radius-sm;
  }

  &__skeletonChange {
    width: 40%;
    height: 14px;
    background: linear-gradient(90deg, $color-border 25%, $color-bg-tertiary 50%, $color-border 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: $border-radius-sm;
  }

  // 错误提示样式
  &__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: $spacing-md;
    padding: $spacing-xl;
    background: $color-bg-secondary;
    border-radius: $border-radius-lg;
    color: $color-text-secondary;
    min-height: 120px;
  }

  // 空数据提示样式
  &__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $spacing-xl;
    background: $color-bg-secondary;
    border-radius: $border-radius-lg;
    color: $color-text-tertiary;
    grid-column: 1 / -1;
    min-height: 120px;
  }

  // 加载中提示
  &__activitiesLoading,
  &__regionLoading {
    display: flex;
    align-items: center;
    justify-content: center;
    background: $color-bg-secondary;
    border-radius: $border-radius-lg;
    color: $color-text-secondary;
    min-height: 100%;
  }
}

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