/* pages/performance-records/performance-records.wxss */

page {
  background-color: #f3f3f3;
  line-height: 1.5;
}

view {
  line-height: inherit;
}

/* ============================================
 * 加载态 / 空态 / 错误态
 * ============================================ */

/* toast 风格加载（浮在页面中央，不全屏变白） */
.toast-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  pointer-events: none;
}

.toast-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  background: rgba(36, 36, 36, 0.75);
  border-radius: 24rpx;
  padding: 36rpx 48rpx;
  pointer-events: auto;
}

.toast-loading-text {
  font-size: 24rpx;
  color: #ffffff;
  line-height: 32rpx;
}

.page-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  gap: 24rpx;
}

.empty-text {
  font-size: 26rpx;
  color: #a6a6a6;
}

.page-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  gap: 24rpx;
}

.error-text {
  font-size: 28rpx;
  color: #a6a6a6;
}

.retry-btn {
  padding: 16rpx 48rpx;
  background: #0052d9;
  color: #ffffff;
  border-radius: 16rpx;
  font-size: 28rpx;
}

.retry-btn--hover {
  opacity: 0.7;
}

/* ============================================
 * Banner（复用助教详情）
 * ============================================ */
.banner-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 100%;
}

.banner-bg-img {
  position: absolute;
  top: -50rpx;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
}

.banner-overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36rpx 40rpx;
}

.coach-header {
  display: flex;
  align-items: center;
  gap: 32rpx;
}

.avatar-box {
  width: 98rpx;
  height: 98rpx;
  border-radius: 32rpx;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
}

.avatar-img {
  width: 100%;
  height: 100%;
}

.info-middle {
  flex: 1;
  min-width: 0;
}

.name-row {
  display: flex;
  align-items: center;
  gap: 14rpx;
  margin-bottom: 8rpx;
}

.coach-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #ffffff;
}

.skill-row {
  display: flex;
  align-items: center;
  gap: 14rpx;
}

.skill-tag {
  padding: 4rpx 16rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8rpx;
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.9);
}

/* 助教等级 tag — 遵循 VI 规范（§5 助教等级配色） */
.coach-level-tag {
  padding: 4rpx 16rpx;
  border-radius: 24rpx;
  font-size: 22rpx;
  font-weight: 500;
  flex-shrink: 0;
  line-height: 29rpx;
}

.coach-level-star   { color: #fbbf24; background: #fffef0; }
.coach-level-senior { color: #e91e63; background: #ffe6e8; }
.coach-level-middle { color: #ed7b2f; background: #fff3e6; }
.coach-level-junior { color: #0052d9; background: #ecf2fe; }

/* 球会名称 — 纯文字，无背景 */
.store-name-text {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.75);
  line-height: 29rpx;
}

/* ============================================
 * 月份切换
 * ============================================ */
.month-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48rpx;
  padding: 24rpx 32rpx;
  background: #ffffff;
  border-bottom: 2rpx solid #eeeeee;
}

.month-btn {
  padding: 12rpx;
  border-radius: 50%;
}

.month-btn-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.month-btn--hover {
  opacity: 0.6;
}

.month-label {
  font-size: 28rpx;
  font-weight: 600;
  color: #242424;
}

/* ============================================
 * 统计概览
 * ============================================ */
.stats-overview {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  background: #ffffff;
  border-bottom: 2rpx solid #eeeeee;
}

.stat-item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 20rpx;
  color: #a6a6a6;
  margin-bottom: 4rpx;
}

.stat-value {
  font-size: 36rpx;
  font-weight: 700;
  color: #242424;
  font-variant-numeric: tabular-nums;
}

.stat-primary {
  color: #0052d9;
}

.stat-success {
  color: #00a870;
}

.stat-sub-hint {
  font-size: 20rpx;
  color: #c5c5c5;
  margin-top: 2rpx;
  line-height: 26rpx;
}

.stat-hours-raw {
  font-size: 20rpx;
  color: #a6a6a6;
  margin-top: 2rpx;
  line-height: 26rpx;
}

.stat-hint {
  font-size: 20rpx;
  color: #ed7b2f;
  margin-top: 2rpx;
}

.stat-divider {
  width: 2rpx;
  height: 80rpx;
  background: #eeeeee;
  margin-top: 4rpx;
}

/* ============================================
 * 记录列表
 * ============================================ */
.records-container {
  padding: 24rpx;
  padding-bottom: 40rpx;
}

.records-card {
  background: #ffffff;
  border-radius: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.date-divider {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 20rpx 32rpx 8rpx;
}

.dd-date {
  font-size: 22rpx;
  color: #8b8b8b;
  font-weight: 500;
  white-space: nowrap;
  line-height: 29rpx;
}

.dd-line {
  flex: 1;
  height: 2rpx;
  background: #dcdcdc;
}

.dd-stats {
  font-size: 22rpx;
  color: #a6a6a6;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 29rpx;
}

.record-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 16rpx 32rpx;
}

.record-item--hover {
  background: #f7f7f7;
}

/* 头像 */
.record-avatar {
  width: 76rpx;
  height: 76rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 30rpx;
  font-weight: 500;
  flex-shrink: 0;
}

.avatar-from-blue   { background: linear-gradient(135deg, #60a5fa, #6366f1); }
.avatar-from-pink   { background: linear-gradient(135deg, #f472b6, #f43f5e); }
.avatar-from-teal   { background: linear-gradient(135deg, #2dd4bf, #10b981); }
.avatar-from-green  { background: linear-gradient(135deg, #4ade80, #14b8a6); }
.avatar-from-orange { background: linear-gradient(135deg, #fb923c, #f59e0b); }
.avatar-from-purple { background: linear-gradient(135deg, #c084fc, #8b5cf6); }
.avatar-from-violet { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.avatar-from-amber  { background: linear-gradient(135deg, #fbbf24, #eab308); }
.avatar-from-sky    { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.avatar-from-lime   { background: linear-gradient(135deg, #a3e635, #65a30d); }
.avatar-from-rose   { background: linear-gradient(135deg, #fb7185, #e11d48); }
.avatar-from-fuchsia{ background: linear-gradient(135deg, #e879f9, #a21caf); }
.avatar-from-slate  { background: linear-gradient(135deg, #94a3b8, #475569); }
.avatar-from-indigo { background: linear-gradient(135deg, #818cf8, #4338ca); }
.avatar-from-cyan   { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.avatar-from-yellow { background: linear-gradient(135deg, #facc15, #ca8a04); }

/* 内容区 */
.record-content {
  flex: 1;
  min-width: 0;
}

.record-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.record-name-time {
  display: flex;
  align-items: center;
  gap: 12rpx;
  min-width: 0;
}

.record-name {
  font-size: 26rpx;
  font-weight: 500;
  color: #242424;
  flex-shrink: 0;
  line-height: 36rpx;
}

.record-time {
  font-size: 22rpx;
  color: #a6a6a6;
  line-height: 29rpx;
}

.record-hours-wrap {
  display: flex;
  align-items: baseline;
  gap: 6rpx;
  flex-shrink: 0;
}

.record-hours {
  font-size: 26rpx;
  font-weight: 700;
  color: #059669;
  font-variant-numeric: tabular-nums;
  line-height: 36rpx;
}

.record-hours-deduct {
  font-size: 20rpx;
  color: #a6a6a6;
  line-height: 29rpx;
}

.record-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8rpx;
}

.record-tags {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.course-tag {
  padding: 2rpx 12rpx;
  border-radius: 8rpx;
  font-size: 22rpx;
  font-weight: 500;
  line-height: 29rpx;
}

.tag-basic {
  background: #ecfdf5;
  color: #15803d;
}

.tag-vip {
  background: #eff6ff;
  color: #1d4ed8;
}

.tag-tip {
  background: #fffbeb;
  color: #a16207;
}

.record-location {
  font-size: 22rpx;
  color: #8b8b8b;
  line-height: 29rpx;
}

.record-income {
  font-size: 22rpx;
  color: #c5c5c5;
  flex-shrink: 0;
  line-height: 29rpx;
}

.record-income-val {
  font-weight: 500;
  color: #5e5e5e;
}

/* 列表底部提示 */
.list-end-hint {
  text-align: center;
  padding: 24rpx 0 28rpx;
  font-size: 22rpx;
  color: #c5c5c5;
}
