/**
 * Card Header（顶栏）：左侧桌名 + 容量、右侧状态 Tag。包含 `.rc-header`、
 * `.rc-room-name-line / __name / __name-count`、`.rc-capacity` 及全部 `.rc-tag--*`
 * 状态色（empty / reserved / occupied / locked / appointment-*）。
 */

/* ==================== Header ==================== */

.rc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
}

.rc-header__left {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

/**
 * 桌名 + 订单数同行容器：name 可被压缩 + ellipsis，count 永不压缩。
 * `min-width: 0` 必须，否则父级 flex 会拒绝压缩内部 ellipsis 项。
 */
.rc-room-name-line {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/** 桌名与计数：完全同字号 / 字重 / 色，count 永不压缩 */
.rc-room-name,
.rc-room-name-count {
  font-size: 18px;
  font-weight: 600;
  color: var(--c-text-1);
  white-space: nowrap;
}

.rc-room-name {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.rc-room-name-count {
  flex: 0 0 auto;
}

.rc-capacity {
  font-size: 12px;
  color: var(--c-text-3);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ==================== Status Tag ==================== */

.rc-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.rc-tag--empty {
  background: #f2f3f5;
  color: #8c8c8c;
}

.rc-tag--reserved {
  background: #e8f4fd;
  color: #1677b6;
}

.rc-tag--occupied {
  background: #e6f7ed;
  color: #13864e;
}

.rc-tag--locked {
  background: #f2f3f5;
  color: #b0b0b0;
}

.rc-tag--appointment-new {
  background: #91caff;
  color: #101828;
}

.rc-tag--appointment-confirmed {
  background: #b7eb8f;
  color: #101828;
}

.rc-tag--appointment-arrived {
  background: #d3adf7;
  color: #101828;
}

.rc-tag--appointment-started {
  background: #fffb8f;
  color: #101828;
}

.rc-tag--appointment-cancelled {
  background: #bfbfbf;
  color: #d92d20;
}

.rc-tag--appointment-no-show {
  background: #ffa39e;
  color: #d92d20;
}

.rc-tag--appointment-completed {
  background: #ffd591;
  color: #101828;
}