* { margin: 0; padding: 0; box-sizing: border-box; }
html, body, #app { height: 100%; font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif; }

.login-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.login-card { width: 420px; padding: 40px; border-radius: 12px; }
.login-card h2 { text-align: center; margin-bottom: 30px; color: #303133; font-size: 24px; }
.login-card .el-button { width: 100%; }

.layout-container { height: 100vh; display: flex; flex-direction: column; }
.layout-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: #fff; border-bottom: 1px solid #e4e7ed;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05); height: 56px; flex-shrink: 0;
}
.layout-header .logo { font-size: 18px; font-weight: 600; color: #303133; }
.layout-header .header-right { display: flex; align-items: center; gap: 16px; }
.layout-body { display: flex; flex: 1; overflow: hidden; }
.layout-sidebar { width: 200px; background: #fff; border-right: 1px solid #e4e7ed; overflow-y: auto; flex-shrink: 0; }
.layout-main { flex: 1; padding: 20px; overflow-y: auto; background: #f5f7fa; }

.el-menu { border-right: none !important; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.page-header h3 { font-size: 18px; color: #303133; }

.search-bar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.search-bar .el-input { width: 200px; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { padding: 20px; border-radius: 8px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.stat-card .num { font-size: 28px; font-weight: 600; color: #409EFF; margin-top: 8px; }
.stat-card .label { font-size: 14px; color: #909399; }
.stat-card.green .num { color: #67c23a; }
.stat-card.orange .num { color: #e6a23c; }
.stat-card.red .num { color: #f56c6c; }
.stat-card.purple .num { color: #9b59b6; }
.batch-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: #ecf5ff; border-radius: 6px;
  margin-bottom: 12px; border: 1px solid #d9ecff;
}

.avatar-text {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: #409EFF; color: #fff; font-size: 14px; flex-shrink: 0;
}

.consumption-form { max-width: 600px; }
.consumption-form .el-form-item { margin-bottom: 18px; }

.tag-item { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 12px; }

/* Member detail page */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-bottom: 20px; }
.detail-item { background: #fff; padding: 12px 16px; border-radius: 6px; }
.detail-item .label { font-size: 12px; color: #909399; margin-bottom: 4px; }
.detail-item .value { font-size: 15px; color: #303133; font-weight: 500; }

@media (max-width: 768px) {
  .layout-sidebar { width: 160px; }
  .search-bar .el-input { width: 150px; }
}

/* ==================== 预约管理 - 周约课看板 ==================== */
.booking-nav {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  padding: 14px 20px; background: #fff; border-radius: 12px;
  border: 1px solid #e8ecf1; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.booking-nav .nav-btn { color: #606266; font-size: 15px; font-weight: 500; }
.booking-nav .nav-btn:hover { color: #409EFF; }
.booking-nav .week-title {
  font-size: 16px; font-weight: 600; color: #1a1a2e;
  min-width: 180px; text-align: center; letter-spacing: 0.5px;
}
.booking-nav .nav-divider {
  width: 1px; height: 22px; background: #e8ecf1; flex-shrink: 0;
}
.booking-nav .hint {
  margin-left: auto; font-size: 12px; color: #c0c4cc;
  display: flex; align-items: center; gap: 6px;
}

/* 约课看板容器 */
.booking-board {
  background: #fff; border-radius: 12px;
  border: 1px solid #e8ecf1; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
}

/* CSS Grid：时间列(80px) + 7天均分 */
.booking-grid {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
}

/* ===== 所有格子公用 ===== */
.booking-grid .cell {
  border-bottom: 1px solid #eef1f5;
  border-right: 1px solid #eef1f5;
}

/* ===== 表头格子 ===== */
.booking-grid .cell.header-cell {
  padding: 12px 4px; text-align: center;
  background: #f8f9fb; border-bottom: 2px solid #e8ecf1;
  font-size: 13px; border-right: 1px solid #e8ecf1;
}
.booking-grid .cell.header-cell:last-child { border-right: none; }
.booking-grid .cell.header-cell .day-name { font-weight: 500; color: #1a1a2e; }
.booking-grid .cell.header-cell .day-date { font-size: 11px; color: #909399; margin-top: 2px; }
.booking-grid .cell.header-cell.today { background: #eef3fc; }
.booking-grid .cell.header-cell.today .day-name { color: #409EFF; }
.booking-grid .cell.header-cell.weekend-day .day-name { color: #e6a23c; }

/* ===== 时间标签列 ===== */
.booking-grid .cell.time-cell {
  padding: 8px 4px; text-align: center; font-size: 11px; font-weight: 500;
  color: #606266; background: #f8f9fb;
  border-right: 1px solid #e8ecf1; display: flex;
  flex-direction: column; justify-content: center; line-height: 1.5;
}
.booking-grid .cell.time-cell .time-range { font-size: 11px; color: #606266; }

/* ===== 约课格子 ===== */
.booking-grid .cell.slot-cell {
  min-height: 72px; cursor: pointer; position: relative;
  transition: background 0.2s; padding: 0;
}
.booking-grid .cell.slot-cell:last-child { border-right: none; }

/* 空时段加号 */
.slot-empty-state {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 72px;
  color: #dcdfe6; font-size: 22px; font-weight: 300;
  opacity: 0; transition: all 0.2s; background: transparent;
}
.booking-grid .cell.slot-cell:hover .slot-empty-state {
  opacity: 1; background: #f5f8ff;
}
.booking-grid .cell.slot-cell:hover { background: #f5f8ff; }

/* ===== 已预约格子 - 整格变色 ===== */
.slot-booked {
  height: auto; min-height: 56px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 4px 8px; cursor: pointer;
  transition: all 0.2s; position: relative;
}
.slot-booked:hover { filter: brightness(0.94); }

/* 状态颜色 */
.slot-booked.booked { background: #e8f4fd; }
.slot-booked.booked .member-name { color: #1a5c8a; }
.slot-booked.booked .status-text { color: #5a9fd4; }

.slot-booked.checked_in { background: #e8f8e8; }
.slot-booked.checked_in .member-name { color: #2d6a2d; }
.slot-booked.checked_in .status-text { color: #67c23a; }

.slot-booked.completed { background: #f4f5f7; }
.slot-booked.completed .member-name { color: #606266; }

.slot-booked.cancelled { background: #fef0f0; }
.slot-booked.cancelled .member-name { color: #909399; text-decoration: line-through; }

.slot-booked .member-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; text-align: center; }
.slot-booked .member-phone { font-size: 11px; opacity: 0.6; margin-bottom: 2px; text-align: center; }
.slot-booked .meta-row { display: flex; align-items: center; gap: 4px; font-size: 11px; }
.slot-booked .meta-row .status-text { font-size: 11px; }
.slot-booked .meta-row .coach-tag {
  font-size: 10px; background: rgba(255,255,255,0.6); padding: 0 6px;
  border-radius: 3px; line-height: 18px;
}

/* slot-booked 内容区域可点击编辑 */
.slot-booked { cursor: default; position: relative; }
.slot-booked-inner { cursor: pointer; }

/* 操作按钮 - 始终可见在右上角 */
.slot-booked .hover-actions {
  position: absolute; top: 2px; right: 2px; gap: 2px;
  display: flex; flex-wrap: wrap; justify-content: flex-end;
}

/* 原生操作按钮样式 */
.act-btn {
  font-family: inherit; font-size: 10px; line-height: 1; height: 20px;
  padding: 0 6px; border-radius: 3px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; transition: all 0.15s;
  background: #fff; color: #606266; border-color: #dcdfe6;
}
.act-btn:hover { border-color: #409EFF; color: #409EFF; }
.act-success { color: #67c23a; border-color: #c2e7b0; background: #f0f9eb; }
.act-success:hover { background: #67c23a; color: #fff; border-color: #67c23a; }
.act-danger { color: #f56c6c; border-color: #fbc4c4; background: #fef0f0; }
.act-danger:hover { background: #f56c6c; color: #fff; border-color: #f56c6c; }
.act-primary { color: #409EFF; border-color: #b3d8ff; background: #ecf5ff; }
.act-primary:hover { background: #409EFF; color: #fff; border-color: #409EFF; }
.act-edit { color: #606266; border-color: #dcdfe6; background: #fff; }
.act-edit:hover { background: #409EFF; color: #fff; border-color: #409EFF; }

/* 今天列高亮 */
.booking-grid .cell.slot-cell.today-col { background: #fafcff; }
.booking-grid .cell.slot-cell.today-col:hover { background: #f0f5ff; }
.booking-grid .cell.slot-cell.today-col .slot-booked.booked { background: #dcecfb; }

/* 周末列 */
.booking-grid .cell.slot-cell.weekend-col { background: #fcfcfd; }
.booking-grid .cell.header-cell.weekend-day .day-name { color: #e6a23c; }

/* 最后一行无底部边框 */
.booking-grid .cell:nth-last-child(-n+8) { border-bottom: none; }

/* ==================== 公开课看板 ==================== */
.public-slot-cell { cursor: pointer; }
.public-slot-cell.full { cursor: not-allowed; opacity: 0.85; }

.public-member-list {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px;
}
.public-member-list .member-item { font-size: 13px; font-weight: 500; color: #303133; }

.capacity-badge {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 1px 8px; border-radius: 10px; margin-top: 4px;
}
.capacity-badge.available { background: #f0f9eb; color: #67c23a; }
.capacity-badge.full { background: #fef0f0; color: #f56c6c; }

/* 横向条形图 */
.bar-track { height: 24px; background: #f0f2f5; border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; transition: width 0.8s ease; min-width: 2px; }

/* ==================== 器材库存 ==================== */
.inventory-diff-pos { color: #67c23a; font-weight: 600; }
.inventory-diff-neg { color: #f56c6c; font-weight: 600; }
.inventory-diff-zero { color: #909399; }
.inventory-qty-warning { color: #e6a23c; font-weight: 600; }
.inventory-qty-normal { color: #303133; }
.inventory-qty-zero { color: #c0c4cc; }
.inventory-row-item { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.inventory-row-item .el-select { width: 200px; }
.inventory-row-item .el-input-number { width: 120px; }