/**
 * 圆桌（`[data-shape='circle']`）形状专属：整圆即卡片，弧边内缩、Header
 * 网格、`.rc-unified` 合并区圆形裁剪、tooltip-time 极简卡圆桌覆盖、印章 /
 * 进度条 / compact / multi-list 在圆内的居中布局，以及 theme=compact/wide
 * 圆桌微调。
 */

/**
 * 圆桌：整圆即卡片（状态色铺满圆盘），不再「外圆内方」。
 * 文案/图标沿圆心切主轴居中；弧边留白用 cqw/cqh；长内容在 body / multi-list 内滚动。
 */

&[data-shape='circle'] {
  container-type: size;
  container-name: pisell-floor-room-card-circle;
  --rc-disc-pad: clamp(7px, 6.5cqmin, 18px);

  border-radius: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* 由 .rc 铺色，避免出现白圈+内嵌方卡 */
  background: transparent;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease, transform 0.2s ease;

  &:hover {
    box-shadow: var(--shadow-card-hover);
  }

  .rc {
    flex: 1;
    width: 100%;
    min-height: 0;
    border-radius: 50%;
    box-shadow: none;
    padding: var(--rc-disc-pad);
    gap: clamp(5px, 1.8cqmin, 10px);
    transition: none;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /** 单条大卡（comfortable）：内容整体居中；multi 与 tooltip-time 另有规则覆盖 */
    justify-content: center;
    align-items: center;
    text-align: center;
    -webkit-overflow-scrolling: touch;
  }

  /** 小卡（tooltip-time）：维持自身的居中/悬浮布局，不随圆桌大卡的主轴居中策略变化 */
  .rc.rc--tooltip-time {
    justify-content: flex-start;
  }

  .rc:hover {
    box-shadow: none;
    transform: none;
  }

  /* 中间主列：限制最大宽弦长，避免文字顶到左右弧边（合并块见下方 .rc-unified） */

  .rc-header,
  .rc-body,
  .rc-multi-list,
  .rc.rc--tooltip-time .rc-tooltip-time-main {
    width: 100%;
    min-height: 0;
  }

  /**
   * 圆桌顶栏+正文合并容器：`data-disc-layout=unified` 时整圆裁剪；
   * `legacy` 时恢复与 header/body 同弦宽，避免强依赖合并样式。
   */
  &:not([data-disc-layout='legacy']) {
    .rc-unified {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      gap: 0;
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
      width: 100%;
      max-width: 100%;
      border-radius: 50%;
      overflow: hidden;
    }

    /** tooltip 极简卡：独立合并容器，允许气泡溢出圆盘裁剪 */
    .rc.rc--tooltip-time .rc-tooltip-time-main {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      max-width: 100%;
      border-radius: 50%;
      overflow: visible;
    }
  }

  &[data-disc-layout='legacy'] {
    .rc-unified {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      gap: 0;
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
      width: 100%;
      border-radius: 0;
      overflow: visible;
    }

    .rc.rc--tooltip-time .rc-tooltip-time-main {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      border-radius: 0;
      overflow: visible;
    }

  }

  /* 单条占用右下角印章，底部留白避免与印章叠压 */

  .rc.rc--occupied {
    border-radius: 50%;
  }

  .rc-header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
  }

  .rc-header__left {
    flex: none;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  /**
   * 预订 / 占用：标题一行；Cap 与状态标签（已预订、使用中等）同一行居中
   */
  .rc.rc--occupied .rc-header,
  .rc.rc--reserved .rc-header {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 6px;
    row-gap: 6px;
  }

  .rc.rc--occupied .rc-header .rc-header__left,
  .rc.rc--reserved .rc-header .rc-header__left {
    display: contents;
  }

  /**
   * 占用 / 预约大卡：把整个 `rc-room-name-line` 放进 row 1（与原先针对
   * `rc-room-name` 的全行布局等价），由 line 内部 flex 排「桌名 + 计数」。
   */
  .rc.rc--occupied .rc-header .rc-room-name-line,
  .rc.rc--reserved .rc-header .rc-room-name-line {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    max-width: 100%;
  }

  .rc.rc--occupied .rc-header .rc-capacity,
  .rc.rc--reserved .rc-header .rc-capacity {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  .rc.rc--occupied .rc-header .rc-tag,
  .rc.rc--reserved .rc-header .rc-tag {
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
  }

  .rc.rc--occupied .rc-header:not(:has(.rc-capacity)) .rc-tag,
  .rc.rc--reserved .rc-header:not(:has(.rc-capacity)) .rc-tag {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }

  .rc.rc--occupied .rc-header:not(:has(.rc-tag)) .rc-capacity,
  .rc.rc--reserved .rc-header:not(:has(.rc-tag)) .rc-capacity {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }

  .rc-room-name,
  .rc-room-name-count {
    font-size: clamp(12px, 4cqmin, 16px);
    font-weight: 700;
    text-align: center;
  }

  /**
   * 圆卡：把 `.rc-room-name-line` 自身做成 2 行 clamp 的 webkit-box，
   * 子节点退回 `inline`——桌名与 `(N/M)` 作为同一段 inline 文本流连续排版：
   * - 短桌名：`小包 01 (1/3)` 一行内居中显示；
   * - 长桌名：桌名 wrap 到第二行后 `(1/3)` 紧跟在最后字符之后，不再单独成行；
   * - 超长：整段被 2 行 clamp 截断（带尾省略号），与原圆卡 2 行限制行为一致。
   */
  .rc-room-name-line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    white-space: normal;
    word-break: break-word;
  }

  .rc-room-name {
    /** 取消基础规则的 webkit-box / line-clamp，让桌名作为 inline 文本节点参与
        父级 line-clamp 流式排版，否则 `(N/M)` 仍会被挤到第三行 */
    display: inline;
    -webkit-line-clamp: none;
    -webkit-box-orient: initial;
    overflow: visible;
    width: auto;
    white-space: normal;
  }

  .rc-room-name-count {
    display: inline;
    /** 与桌名同字号 + inline；前置一个不间断空格保证 `小包 01\u00A0(1/3)` 不会
        在 「桌名」与「(」之间换行，让 `(N/M)` 至少与桌名末段同行 */
    margin-left: 0;
    white-space: normal;

    &::before {
      content: '\00a0';
    }
  }

  .rc-capacity,
  .rc-tag {
    border-radius: 999px;
    font-size: 10px;
    padding: 3px 10px;
    flex-shrink: 0;
  }

  /**
   * 正文区占满顶栏以下剩余高度（与全局 `.rc-body { flex: 1 }` 一致）；
   * 勿再写 flex-grow:0，否则会覆盖基础样式，导致 unified 内大块留白。
   * 过长时仍在正文内滚动。
   */
  .rc-body {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    min-height: 0;
    align-items: center;
    gap: clamp(4px, 1.2cqmin, 8px);
    overflow-x: hidden;
    overflow-y: auto;
  }

  /** compact 档正文为 `.rc-compact`，须在 merged 列内同样吃满剩余高度 */
  .rc-unified > .rc-compact {
    flex: 1 1 auto;
    min-height: 0;
  }

  /**
   * 圆桌大卡（非 Tooltip 极简）：合并区已在 .rc-unified 上 justify-content:center + height:100%。
   * 收紧正文 flex-grow，避免单条时整块顶在上半圆。
   */
  &:not([data-tooltip-time='on']) {
    .rc:not(.rc--multi) .rc-unified > .rc-body,
    .rc:not(.rc--multi) .rc-unified > .rc-compact {
      flex-grow: 0;
      flex-shrink: 1;
      min-height: 0;
    }
  }

  .rc-body--center {
    min-height: auto;
    flex: 1 1 auto;
    justify-content: center;
  }

  .rc-contact {
    font-size: clamp(11px, 3.2cqmin, 13px);
    justify-content: center;
    flex-wrap: wrap;
  }

  .rc-time-row {
    font-size: clamp(10px, 3.1cqmin, 12px);
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .rc-amount {
    font-size: clamp(15px, 4.5cqmin, 20px);
    justify-content: center;
  }

  .rc-amount--with-badge {
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  /**
   * 圆桌单条占用 + 已付：金额主行白字（与方桌占用一致），行内「付款」角标与方桌 .rc-stamp--paid 同色绿环。
   */
  .rc.rc--occupied:not(.rc--multi) .rc-amount.rc-highlight--paid,
  .rc.rc--occupied:not(.rc--multi) .rc-amount.rc-highlight--paid .rc-amount__main {
    color: #ffffff;
  }

  .rc-items-count {
    text-align: center;
    font-size: clamp(9px, 2.7cqmin, 11px);
    font-weight: 500;
  }

  .rc-next {
    padding-top: 6px;
    margin-top: 4px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: clamp(10px, 2.9cqmin, 12px);
    max-width: 100%;
  }

  .rc-progress {
    width: 100%;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  @supports (width: 1cqw) {
    .rc-progress {
      max-width: min(90%, 80cqw);
    }
  }

  /* 印章：与方桌默认尺寸一致（52px / 11px），仅位置按弧边内收 */

  .rc-stamp {
    width: 60px;
    height: 60px;
    left: auto;
    right: clamp(46px, 12.5cqmin, 66px);
    bottom: clamp(48px, 13cqmin, 68px);
    transform: rotate(-18deg);
  }

  .rc-stamp span {
    font-size: clamp(11px, 3.2cqmin, 12px);
    line-height: 1.2;
    padding: 0 2px;
    text-align: center;
  }

  /**
   * 多预约：整块（顶栏 + 列表 / micro 摘要）在圆内垂直居中，避免贴顶/贴底被弧边裁切。
   * 合并区限制在圆内可用高度内；过长时由 .rc-multi-list（或合并区）内部滚动，底栏仍可滚到。
   */

  .rc.rc--multi {
    justify-content: center;
  }

  /** 多条：合并壳与大卡一致占满可用高并主轴居中；过长由列表滚动 */
  .rc.rc--multi > .rc-unified {
    height: 100%;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
  }

  /** micro 多条摘要：不再 flex 撑满空白，文案与「查看全部」作为一组垂直居中 */
  .rc.rc--multi > .rc-unified > .rc-multi-micro-summary {
    flex: 0 1 auto;
    min-height: 0;
    justify-content: center;
  }

  /** unified 内预览列表：不 flex 生长，避免把顶栏与列表块拉开；过长自行滚动 */
  .rc.rc--multi > .rc-unified .rc-multi-list {
    flex: 0 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    gap: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    align-items: stretch;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
  }

  /**
   * legacy：顶栏与列表同为 .rc 直接子节点；列表勿 flex 撑满整圆，
   * 否则与 justify-content:center 冲突且底栏贴弧边。
   */
  &[data-disc-layout='legacy'] .rc.rc--multi > .rc-multi-list {
    flex: 0 1 auto;
    max-height: min(62cqh, 78%);
    min-height: 0;
    margin: 0;
    padding: 0;
    gap: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    align-items: stretch;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
  }

  /* 圆内 compact 仅用于多预约：横向信息流 + 细分割，避免多块圆角矩形垒叠 */

  .rc-compact {
    width: 100%;
    max-width: 100%;
    padding: clamp(5px, 1.6cqmin, 8px) clamp(4px, 1.4cqmin, 10px);
    border-radius: 6px;
    gap: 4px;
  }

  .rc-compact__row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 5px 8px;
    min-height: auto;
  }

  /* 中间区不再 flex:1 拉满宽，左中右缩成一块整体居中，换行后仍朝圆心对齐 */

  .rc-compact__left {
    flex: 0 1 auto;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .rc-compact__middle {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .rc-compact__scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    flex-wrap: wrap;
    text-align: center;
    font-size: clamp(9px, 2.8cqmin, 11px);
  }

  .rc-compact__right {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
  }

  .rc-compact__right-stack {
    align-items: center;
  }

  .rc-compact__pay-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .rc-compact__items-count {
    font-size: clamp(9px, 2.7cqmin, 11px);
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
  }

  .rc-compact__name {
    font-size: clamp(11px, 3.2cqmin, 13px);
    text-align: center;
  }

  .rc-compact__amount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: clamp(12px, 3.5cqmin, 14px);
  }

  .rc-compact__amount .rc-icon {
    margin-right: 0;
  }

  .rc-compact__badge {
    font-size: clamp(9px, 2.6cqmin, 11px);
    padding: 2px 6px;
  }

  @supports (width: 1cqw) {
    .rc-compact {
      max-width: min(98%, 90cqw);
    }
  }

  .rc--reserved.rc--multi .rc-multi-list > .rc-compact:first-child,
  .rc--occupied.rc--multi .rc-multi-list > .rc-compact:first-child {
    border-top: none;
  }

  /* CardBody compact：row 与 ProgressBar 之间的 flex:1 占位，在条带布局下会徒增高 */

  .rc.rc--multi .rc-compact > div:nth-child(2) {
    display: none;
  }

  .rc.rc--multi .rc-compact .rc-progress {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  @supports (width: 1cqw) {
    .rc.rc--multi .rc-compact .rc-progress {
      max-width: min(100%, 88cqw);
    }
  }

  .rc-empty-text {
    font-size: clamp(11px, 3.2cqmin, 14px);
    text-align: center;
  }

  .rc-lock-icon svg {
    width: clamp(22px, 7cqmin, 28px);
    height: clamp(22px, 7cqmin, 28px);
  }

  .rc-locked-text {
    font-size: clamp(10px, 3cqmin, 12px);
    text-align: center;
  }

  &[data-theme='compact'] {
    --rc-disc-pad: clamp(5px, 5.5cqmin, 14px);
  }

  &[data-theme='compact'] .rc {
    gap: 4px;
  }

  /* compact：印章略放大，便于「需要付款」等长文案 */

  &[data-theme='compact'] .rc-stamp {
    width: 48px;
    height: 48px;
    right: clamp(34px, 9.5cqmin, 44px);
    bottom: clamp(34px, 9.8cqmin, 44px);
    transform: rotate(-18deg);
  }

  &[data-theme='compact'] .rc-stamp span {
    font-size: 10px;
    line-height: 1.15;
    padding: 0 2px;
  }

  &[data-theme='wide'] {
    --rc-disc-pad: clamp(9px, 7.5cqmin, 20px);
  }

  &[data-theme='wide'] .rc {
    gap: clamp(7px, 2.2cqmin, 12px);
  }

  &[data-theme='wide'] .rc-room-name,
  &[data-theme='wide'] .rc-room-name-count {
    font-size: clamp(13px, 4.3cqmin, 17px);
  }

  &[data-theme='wide'] .rc-tag {
    font-size: 11px;
    padding: 3px 12px;
  }

  /** 圆桌多条预留：与白底圆盘一致 */
  .rc.rc--reserved.rc--multi {
    background: var(--c-surface);
  }

  .rc--reserved.rc--multi .rc-multi-list > .rc-compact {
    background: transparent;
  }
}