/* 助教看板页 — H5 px × 2 × 0.875 精确转换 */

/* ===== 三态 ===== */
.page-loading,
.page-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
}

/* ===== 看板 Tab py-3=12px→22rpx, text-sm=14px→26rpx(视觉校准+2) ===== */
.board-tabs {
  display: flex;
  background: #ffffff;
  border-bottom: 2rpx solid #eeeeee;
  position: sticky;
  top: 0;
  z-index: 20;
}

.board-tab {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 26rpx;
  font-weight: 500;
  color: #8b8b8b;
  position: relative;
}

.board-tab--active {
  color: #0052d9;
  font-weight: 600;
}

/* w-24px→42rpx, h-3px→5rpx（H5 实际渲染偏细） */
.board-tab--active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 42rpx;
  height: 5rpx;
  background: linear-gradient(90deg, #0052d9, #5b9cf8);
  border-radius: 3rpx;
}

/* ===== 筛选区域 px-4=16px→28rpx, py-2=8px→14rpx ===== */
.filter-bar {
  background: #f3f3f3;
  padding: 14rpx 28rpx;
  position: sticky;
  top: 70rpx;
  z-index: 15;
  border-bottom: 2rpx solid #eeeeee;
  transition: transform 220ms ease, opacity 220ms ease;
}

.filter-bar--hidden {
  opacity: 0;
  transform: translateY(-110%);
  pointer-events: none;
}

/* p-1.5=6px→10rpx, gap-2=8px→14rpx, rounded-lg=8px→14rpx */
.filter-bar-inner {
  display: flex;
  align-items: center;
  gap: 14rpx;
  background: #ffffff;
  border-radius: 14rpx;
  padding: 10rpx;
  border: 2rpx solid #eeeeee;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
}

.filter-item {
  flex: 1;
  min-width: 0;
}

.filter-item--wide {
  flex: 1.8;
}

/* ===== 助教列表 p-4=16px→28rpx, space-y-3=12px→20rpx ===== */
.coach-list {
  padding: 24rpx 28rpx;
}

/* ===== 助教卡片 p-4=16px→28rpx, rounded-2xl=16px→28rpx ===== */
.coach-card {
  background: #ffffff;
  border-radius: 28rpx;
  padding: 30rpx 28rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.coach-card:active {
  opacity: 0.96;
  transform: scale(0.98);
}

/* gap-3=12px→20rpx（视觉校准紧凑） */
.card-row {
  display: flex;
  align-items: flex-start;
  gap: 20rpx;
}

/* ===== 头像 w-11 h-11=44px→78rpx, text-base=16px→28rpx ===== */
.card-avatar {
  width: 78rpx;
  height: 78rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 4rpx;
}

.avatar-text {
  color: #ffffff;
  font-size: 28rpx;
  font-weight: 600;
}

/* 头像渐变色（忠于 H5 原型 6 种） */
.avatar--blue { background: linear-gradient(135deg, #60a5fa, #6366f1); }
.avatar--green { background: linear-gradient(135deg, #4ade80, #10b981); }
.avatar--pink { background: linear-gradient(135deg, #f472b6, #f43f5e); }
.avatar--amber { background: linear-gradient(135deg, #fbbf24, #f97316); }
.avatar--purple { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.avatar--cyan { background: linear-gradient(135deg, #22d3ee, #14b8a6); }

/* ===== 信息区 ===== */
.card-info {
  flex: 1;
  min-width: 0;
}

/* gap-1.5=6px→10rpx */
.card-name-row {
  display: flex;
  align-items: center;
  gap: 8rpx;
  flex-wrap: nowrap;
}

/* text-base=16px→28rpx */
.card-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #242424;
  flex-shrink: 0;
}

/* ===== 等级标签 px-1.5=6px→10rpx, py-0.5=2px→4rpx, text-xs=12px→22rpx ===== */
.level-tag {
  padding: 4rpx 10rpx;
  font-size: 22rpx;
  border-radius: 6rpx;
  flex-shrink: 0;
  font-weight: 500;
}

.level--star {
  background: linear-gradient(to right, #fbbf24, #f97316);
  color: #ffffff;
}

.level--high {
  background: linear-gradient(to right, #a78bfa, #8b5cf6);
  color: #ffffff;
}

.level--mid {
  background: linear-gradient(to right, #60a5fa, #6366f1);
  color: #ffffff;
}

.level--low {
  background: linear-gradient(to right, #9ca3af, #6b7280);
  color: #ffffff;
}

/* ===== 技能标签 ===== */
.skill-tag {
  padding: 4rpx 10rpx;
  font-size: 22rpx;
  border-radius: 6rpx;
  flex-shrink: 0;
}

.skill--chinese { background: rgba(0, 82, 217, 0.1); color: #0052d9; }
.skill--snooker { background: rgba(0, 168, 112, 0.1); color: #00a870; }
.skill--mahjong { background: rgba(237, 123, 47, 0.1); color: #ed7b2f; }
.skill--karaoke { background: rgba(227, 77, 89, 0.1); color: #e34d59; }

/* ===== 卡片右侧指标（ml-auto 推到右边） ===== */
.card-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10rpx;
  flex-shrink: 0;
  white-space: nowrap;
}

/* text-xs=12px→22rpx — "定档"标签文字，普通粗细 */
.right-text {
  font-size: 22rpx;
  color: #8b8b8b;
  font-weight: 400;
}

/* text-sm=14px→24rpx — 数值加粗 */
.right-highlight {
  font-size: 24rpx;
  font-weight: 700;
  color: #0052d9;
}

/* "折前"更淡更细 */
.right-sub {
  font-size: 20rpx;
  color: #c5c5c5;
  font-weight: 400;
}

.right-sub-val {
  color: #8b8b8b;
  font-weight: 400;
}

/* 工资维度 */
.salary-tag {
  padding: 4rpx 10rpx;
  background: rgba(237, 123, 47, 0.1);
  color: #ed7b2f;
  font-size: 22rpx;
  border-radius: 6rpx;
}

/* text-lg=18px→32rpx — 储值维度缩小避免挤压客户列表 */
.salary-amount {
  font-size: 28rpx;
  font-weight: 700;
  color: #242424;
}

/* ===== 第二行 mt-1.5=6px→12rpx, text-xs=12px→22rpx ===== */
.card-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12rpx;
}

/* gap-2=8px→12rpx */
.customer-list {
  display: flex;
  align-items: center;
  gap: 12rpx;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.customer-item {
  font-size: 22rpx;
  color: #a6a6a6;
  white-space: nowrap;
}

.bottom-right {
  font-size: 22rpx;
  font-weight: 500;
  flex-shrink: 0;
}

.bottom-right--warning {
  color: #ed7b2f;
}

.bottom-right--success {
  color: #00a870;
}

.bottom-right-group {
  display: flex;
  align-items: center;
  gap: 10rpx;
  flex-shrink: 0;
}

.bottom-perf {
  font-size: 22rpx;
  color: #4b4b4b;
  font-weight: 600;
}

.bottom-perf-val {
  font-weight: 700;
  color: #4b4b4b;
}

.bottom-sub {
  font-size: 22rpx;
  color: #8b8b8b;
}

.bottom-sub-val {
  color: #8b8b8b;
}

.bottom-divider {
  font-size: 22rpx;
  color: #c5c5c5;
}

/* ===== 底部安全区（自定义导航栏高度 100rpx + safe-area） ===== */
.safe-bottom {
  height: 200rpx;
  padding-bottom: env(safe-area-inset-bottom);
}