rwadurian/frontend/admin-web/src/app/(dashboard)/users/[id]/user-detail.module.scss

/* 用户详情页面样式 */
@use '@/styles/variables' as *;
@use '@/styles/mixins' as *;

// ============================================================================
// 基础布局
// ============================================================================

.loading,
.error {
  @include flex-center;
  flex-direction: column;
  min-height: 300px;
  gap: $spacing-lg;
  color: $text-secondary;
}

.error {
  p {
    color: $error-color;
    margin: 0;
  }
}

.userDetail {
  @include flex-column;
  gap: $spacing-xl;
  width: 100%;
}

// ============================================================================
// 返回按钮
// ============================================================================

.userDetail__backBar {
  margin-bottom: $spacing-sm;
}

.userDetail__backBtn {
  @include flex-start;
  gap: $spacing-sm;
  padding: $spacing-sm $spacing-base;
  border: none;
  border-radius: $border-radius-base;
  background: transparent;
  color: $text-secondary;
  font-size: $font-size-sm;
  cursor: pointer;
  @include transition-fast;

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

.userDetail__backIcon {
  font-size: $font-size-md;
}

// ============================================================================
// 基本信息卡片
// ============================================================================

.userDetail__basicCard {
  @include card-base;
  padding: $padding-card;
}

.userDetail__basicHeader {
  @include flex-start;
  gap: $spacing-xl;
  margin-bottom: $spacing-xl;
  padding-bottom: $spacing-xl;
  border-bottom: 1px solid $border-color;
}

.userDetail__avatar {
  width: 80px;
  height: 80px;
  border-radius: $border-radius-round;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: $background-color;
  position: relative;
  flex-shrink: 0;
}

.userDetail__status {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 2px;
  bottom: 2px;
  border-radius: $border-radius-round;
  box-shadow: 0 0 0 3px $card-background;

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

  &--offline {
    background-color: $text-disabled;
  }
}

.userDetail__basicInfo {
  flex: 1;
}

.userDetail__nickname {
  @include flex-start;
  gap: $spacing-md;
  font-size: $font-size-xxl;
  font-weight: $font-weight-bold;
  color: $text-primary;
  margin: 0 0 $spacing-sm;
}

.userDetail__statusBadge {
  display: inline-block;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
  font-size: $font-size-xs;
  font-weight: $font-weight-medium;

  &--active {
    background-color: rgba($success-color, 0.1);
    color: $success-color;
  }

  &--frozen {
    background-color: rgba($warning-color, 0.1);
    color: $warning-color;
  }

  &--deactivated {
    background-color: rgba($error-color, 0.1);
    color: $error-color;
  }
}

.userDetail__basicMeta {
  @include flex-start;
  flex-wrap: wrap;
  gap: $spacing-lg;
  font-size: $font-size-sm;
  color: $text-secondary;
  margin-bottom: $spacing-xs;

  strong {
    color: $text-primary;
    font-weight: $font-weight-medium;
  }
}

// ============================================================================
// 统计卡片
// ============================================================================

.userDetail__statsGrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: $spacing-base;
  margin-bottom: $spacing-xl;

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

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

.userDetail__statCard {
  @include flex-column;
  align-items: center;
  justify-content: center;
  padding: $spacing-lg;
  background-color: $background-color;
  border-radius: $border-radius-base;
  text-align: center;
}

.userDetail__statLabel {
  font-size: $font-size-xs;
  color: $text-secondary;
  margin-bottom: $spacing-sm;
}

.userDetail__statValue {
  font-family: $font-family-number;
  font-size: $font-size-xl;
  font-weight: $font-weight-bold;
  color: $text-primary;

  &--gold {
    color: #d4a537;
  }
}

// ============================================================================
// 推荐人信息
// ============================================================================

.userDetail__referrerInfo {
  @include flex-start;
  flex-wrap: wrap;
  gap: $spacing-md;
  padding: $spacing-base;
  background-color: rgba($primary-color, 0.05);
  border-radius: $border-radius-base;
  font-size: $font-size-sm;
}

.userDetail__referrerLabel {
  color: $text-secondary;
}

.userDetail__referrerLink {
  color: $primary-color;
  font-weight: $font-weight-medium;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.userDetail__referrerMeta {
  color: $text-secondary;
}

// ============================================================================
// Tab 导航
// ============================================================================

.userDetail__tabs {
  @include flex-start;
  gap: $spacing-xs;
  padding: $spacing-xs;
  background-color: $background-color;
  border-radius: $border-radius-base;
}

.userDetail__tab {
  padding: $spacing-sm $spacing-lg;
  border: none;
  border-radius: $border-radius-sm;
  background: transparent;
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  color: $text-secondary;
  cursor: pointer;
  @include transition-fast;

  &:hover {
    color: $text-primary;
    background-color: rgba($white, 0.5);
  }

  &--active {
    background-color: $card-background;
    color: $primary-color;
    box-shadow: $shadow-sm;
  }
}

.userDetail__tabContent {
  @include card-base;
  padding: $padding-card;
}

// ============================================================================
// 推荐关系 Tab
// ============================================================================

.referralTab {
  @include flex-column;
  gap: $spacing-xl;
}

.referralTab__header {
  @include flex-between;

  h3 {
    margin: 0;
    font-size: $font-size-lg;
    font-weight: $font-weight-semibold;
    color: $text-primary;
  }
}

.referralTab__loading,
.referralTab__empty {
  @include flex-center;
  min-height: 200px;
  color: $text-secondary;
}

// ============================================================================
// 推荐关系树
// ============================================================================

.referralTree {
  @include flex-column;
  align-items: center;
  gap: $spacing-lg;
  padding: $spacing-xl;
  background-color: $background-color;
  border-radius: $border-radius-lg;
}

.referralTree__ancestors {
  @include flex-column;
  align-items: center;
  gap: $spacing-sm;
}

.referralTree__label {
  font-size: $font-size-xs;
  color: $text-secondary;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: $spacing-sm;
}

.referralTree__nodeList {
  @include flex-column;
  align-items: center;
  gap: $spacing-sm;
}

.referralTree__nodeWrapper {
  @include flex-column;
  align-items: center;
}

.referralTree__connector {
  color: $text-disabled;
  font-size: $font-size-lg;
  padding: $spacing-xs 0;
}

.referralTree__current {
  @include flex-column;
  align-items: center;
}

.referralTree__toggleButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: $spacing-sm;
  background-color: $primary-color;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  @include transition-fast;

  &:hover {
    background-color: darken($primary-color, 10%);
    transform: scale(1.1);
  }
}

.referralTree__node {
  @include flex-column;
  align-items: center;
  padding: $spacing-base $spacing-xl;
  background-color: $card-background;
  border: 2px solid $border-color;
  border-radius: $border-radius-base;
  cursor: pointer;
  @include transition-fast;

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

  &--current {
    border-color: $primary-color;
    background-color: rgba($primary-color, 0.05);
  }

  &--highlight {
    border-width: 3px;
    box-shadow: 0 0 0 4px rgba($primary-color, 0.2);
  }
}

.referralTree__nodeSeq {
  font-family: $font-family-number;
  font-size: $font-size-md;
  font-weight: $font-weight-bold;
  color: $text-primary;
}

.referralTree__nodeNickname {
  font-size: $font-size-xs;
  color: $text-secondary;
  margin-top: $spacing-xs;
}

.referralTree__nodeAdoptions {
  font-size: $font-size-xs;
  color: $text-secondary;
  margin-top: $spacing-xs;
}

.referralTree__nodeCount {
  font-size: $font-size-xs;
  color: $primary-color;
  margin-top: $spacing-xs;
  font-weight: $font-weight-medium;
}

// 递归节点组件样式
.referralTree__currentWrapper {
  @include flex-column;
  align-items: center;
  width: 100%;
}

.referralTree__nodeItem {
  @include flex-column;
  align-items: center;
}

.referralTree__nodeContent {
  @include flex-column;
  align-items: center;
}

.referralTree__children {
  @include flex-column;
  align-items: center;
  margin-top: $spacing-sm;
  padding-left: $spacing-xl;
  border-left: 2px dashed $border-color;
  width: 100%;
}

.referralTree__childrenGrid {
  display: flex;
  flex-wrap: wrap;
  gap: $spacing-md;
  justify-content: center;
  margin-top: $spacing-sm;
}

.referralTree__directReferrals {
  @include flex-column;
  align-items: center;
  gap: $spacing-md;
  width: 100%;
}

.referralTree__nodeGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: $spacing-md;
  width: 100%;
  max-width: 800px;
}

.referralTree__empty {
  @include flex-center;
  min-height: 100px;
  color: $text-secondary;
}

// 总部节点样式
.referralTree__headquarters {
  @include flex-center;
  padding: $spacing-sm $spacing-lg;
  background: linear-gradient(135deg, rgba($primary-color, 0.1) 0%, rgba($success-color, 0.1) 100%);
  border: 2px solid $primary-color;
  border-radius: $border-radius-base;
  min-width: 100px;
  cursor: default;
}

.referralTree__headquartersLabel {
  font-size: $font-size-base;
  font-weight: $font-weight-bold;
  color: $primary-color;
}

// ============================================================================
// 认种信息 Tab
// ============================================================================

.plantingTab {
  @include flex-column;
  gap: $spacing-xl;
}

.plantingTab__loading,
.plantingTab__empty {
  @include flex-center;
  min-height: 200px;
  color: $text-secondary;
}

.plantingTab__summary,
.plantingTab__ledger {
  @include flex-column;
  gap: $spacing-lg;

  h3 {
    margin: 0;
    font-size: $font-size-lg;
    font-weight: $font-weight-semibold;
    color: $text-primary;
  }
}

.plantingTab__summaryGrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: $spacing-base;

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

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

.plantingTab__summaryItem {
  @include flex-column;
  padding: $spacing-base;
  background-color: $background-color;
  border-radius: $border-radius-base;
  text-align: center;
}

.plantingTab__summaryLabel {
  font-size: $font-size-xs;
  color: $text-secondary;
  margin-bottom: $spacing-sm;
}

.plantingTab__summaryValue {
  font-family: $font-family-number;
  font-size: $font-size-md;
  font-weight: $font-weight-semibold;
  color: $text-primary;
}

// ============================================================================
// 钱包信息 Tab
// ============================================================================

.walletTab {
  @include flex-column;
  gap: $spacing-xl;
}

.walletTab__loading,
.walletTab__empty {
  @include flex-center;
  min-height: 200px;
  color: $text-secondary;
}

.walletTab__summary,
.walletTab__ledger {
  @include flex-column;
  gap: $spacing-lg;

  h3 {
    margin: 0;
    font-size: $font-size-lg;
    font-weight: $font-weight-semibold;
    color: $text-primary;
  }
}

.walletTab__summaryGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: $spacing-base;

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

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

.walletTab__summaryItem {
  @include flex-column;
  padding: $spacing-base;
  background-color: $background-color;
  border-radius: $border-radius-base;
  text-align: center;
}

.walletTab__summaryLabel {
  font-size: $font-size-xs;
  color: $text-secondary;
  margin-bottom: $spacing-sm;
}

.walletTab__summaryValue {
  font-family: $font-family-number;
  font-size: $font-size-md;
  font-weight: $font-weight-semibold;
  color: $text-primary;
}

// ============================================================================
// 授权信息 Tab
// ============================================================================

.authTab {
  @include flex-column;
  gap: $spacing-xl;
}

.authTab__loading,
.authTab__empty {
  @include flex-center;
  min-height: 200px;
  color: $text-secondary;
}

.authTab__roles,
.authTab__assessments,
.authTab__systemLedger {
  @include flex-column;
  gap: $spacing-lg;

  h3 {
    margin: 0;
    font-size: $font-size-lg;
    font-weight: $font-weight-semibold;
    color: $text-primary;
  }
}

.authTab__roleGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: $spacing-base;
}

.authTab__roleCard {
  @include flex-column;
  padding: $spacing-lg;
  background-color: $background-color;
  border-radius: $border-radius-base;
  border: 1px solid $border-color;
}

.authTab__roleHeader {
  @include flex-between;
  margin-bottom: $spacing-md;
  padding-bottom: $spacing-md;
  border-bottom: 1px solid $border-color;
}

.authTab__roleType {
  font-size: $font-size-md;
  font-weight: $font-weight-semibold;
  color: $text-primary;
}

.authTab__roleStatus {
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
  font-size: $font-size-xs;
  font-weight: $font-weight-medium;

  &--pending {
    background-color: rgba($warning-color, 0.1);
    color: $warning-color;
  }

  &--authorized {
    background-color: rgba($success-color, 0.1);
    color: $success-color;
  }

  &--revoked {
    background-color: rgba($error-color, 0.1);
    color: $error-color;
  }

  &--expired {
    background-color: rgba($text-disabled, 0.2);
    color: $text-secondary;
  }
}

.authTab__roleInfo {
  @include flex-column;
  gap: $spacing-xs;

  p {
    margin: 0;
    font-size: $font-size-sm;
    color: $text-secondary;

    strong {
      color: $text-primary;
      margin-right: $spacing-xs;
    }
  }
}

.authTab__benefitActive {
  color: $success-color;
  font-weight: $font-weight-medium;
}

.authTab__benefitInactive {
  color: $text-disabled;
}

// ============================================================================
// 通用分类账表格
// ============================================================================

.ledgerTable {
  width: 100%;
  overflow-x: auto;
  @include custom-scrollbar;
}

.ledgerTable__header {
  display: flex;
  background-color: $background-color;
  border-bottom: 2px solid $border-color;
  min-width: 900px;
}

.ledgerTable__row {
  display: flex;
  border-bottom: 1px solid $border-color;
  min-width: 900px;
  @include transition-fast;

  &:hover {
    background-color: rgba($primary-color, 0.02);
  }

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

.ledgerTable__cell {
  flex: 1;
  padding: $spacing-md $spacing-base;
  font-size: $font-size-sm;
  color: $text-primary;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  // 流水ID
  &:nth-child(1) { flex: 0.6; }
  // 资产
  &:nth-child(2) { flex: 0.5; }
  // 金额
  &:nth-child(3) { flex: 0.8; }
  // 余额快照
  &:nth-child(4) { flex: 0.8; }
  // 备注 - 最宽，允许换行
  &:nth-child(5) {
    flex: 2.5;
    white-space: normal;
    word-break: break-all;
  }
  // 时间
  &:nth-child(6) { flex: 1.2; }

  .ledgerTable__header & {
    font-weight: $font-weight-medium;
    color: $text-secondary;
    text-transform: uppercase;
    font-size: $font-size-xs;
  }

  &--positive {
    color: $success-color;
  }

  &--negative {
    color: $error-color;
  }
}

.ledgerTable__empty {
  @include flex-center;
  min-height: 120px;
  color: $text-secondary;
  font-size: $font-size-sm;
}

.ledgerTable__status {
  display: inline-block;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
  font-size: $font-size-xs;
  font-weight: $font-weight-medium;

  &--created {
    background-color: rgba($info-color, 0.1);
    color: $info-color;
  }

  &--paid {
    background-color: rgba($primary-color, 0.1);
    color: $primary-color;
  }

  &--fund_allocated {
    background-color: rgba($warning-color, 0.1);
    color: $warning-color;
  }

  &--mining_enabled {
    background-color: rgba($success-color, 0.1);
    color: $success-color;
  }

  &--cancelled {
    background-color: rgba($error-color, 0.1);
    color: $error-color;
  }

  &--expired {
    background-color: rgba($text-disabled, 0.2);
    color: $text-secondary;
  }
}

.ledgerTable__result {
  display: inline-block;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
  font-size: $font-size-xs;
  font-weight: $font-weight-medium;

  &--not_assessed {
    background-color: rgba($text-disabled, 0.2);
    color: $text-secondary;
  }

  &--passed {
    background-color: rgba($success-color, 0.1);
    color: $success-color;
  }

  &--failed {
    background-color: rgba($error-color, 0.1);
    color: $error-color;
  }

  &--bypassed {
    background-color: rgba($warning-color, 0.1);
    color: $warning-color;
  }
}

// 权益操作类型标签
.ledgerTable__benefitAction {
  display: inline-block;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
  font-size: $font-size-xs;
  font-weight: $font-weight-medium;

  &--activated {
    background-color: rgba($success-color, 0.1);
    color: $success-color;
  }

  &--renewed {
    background-color: rgba($primary-color, 0.1);
    color: $primary-color;
  }

  &--deactivated {
    background-color: rgba($error-color, 0.1);
    color: $error-color;
  }

  &--no_change {
    background-color: rgba($text-disabled, 0.2);
    color: $text-secondary;
  }
}

// ============================================================================
// 分页
// ============================================================================

.pagination {
  @include flex-center;
  gap: $spacing-md;
  padding-top: $spacing-lg;

  button {
    padding: $spacing-sm $spacing-base;
    border: 1px solid $border-color;
    border-radius: $border-radius-sm;
    background-color: $card-background;
    font-size: $font-size-sm;
    color: $text-primary;
    cursor: pointer;
    @include transition-fast;

    &:hover:not(:disabled) {
      border-color: $primary-color;
      color: $primary-color;
    }

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

  span {
    font-size: $font-size-sm;
    color: $text-secondary;
  }
}