/**
 * 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;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

/**
 * 桌名 + 订单数同行容器：优先完整展示 `桌名 (N/M)`。
 * 空间不足时 count 会换到被 max-height 裁掉的第二行，桌名独占一行后 ellipsis。
 * `min-width: 0` 必须，否则父级 flex 会拒绝压缩内部 ellipsis 项。
 */
.rc-room-name-line {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 4px;
  row-gap: 0;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  /**
   * 字号须与子节点（.rc-room-name / -count，18px）一致：`max-height: 1.25em`
   * 以本元素 font-size 为基准，若沿用更小的继承字号会算出 < 一行实际行盒
   * （18 × 1.25 = 22.5px），叠加 overflow:hidden 会把标题底部（括号 / descender）裁掉。
   */
  font-size: 18px;
  line-height: 1.25;
  max-height: 1.25em;
  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 {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.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;
}