/**
 * 平面图 RoomCard 根容器基础样式：CSS 变量 / 设计令牌、根 flex 盒、
 * `__viewport-compensate` 裁切策略、reserved halo 光晕、单条占用环形 /
 * 矩形外缘边框进度（disc-edge / rect-edge），以及内层 `.rc` 经典卡片外壳。
 * 形状 / 状态 / 内容相关样式见同目录其它分片。
 */

/** 未付款强调色：金额（.rc-highlight--unpaid）与顶栏铺底等同源，改此处即可全局对齐 */
--rc-pay-unpaid: #ff8a75;
--rc-pay-paid: #16a34a;
--rc-reserved-halo-border: rgba(23, 80, 58, 0.68);
--rc-reserved-halo-glow: rgba(23, 80, 58, 0.34);
--rc-reserved-halo-glow-soft: rgba(23, 80, 58, 0.2);
--rc-reserved-halo-glow-size: 4px;
--rc-reserved-halo-glow-soft-size: 6px;
--rc-reserved-halo-hover-glow-size: 4px;
--rc-reserved-halo-hover-glow-soft-size: 6px;

/** 设计令牌：表面 / 文字 / 圆角 / 阴影；与 `.rc` 内层共用 */
--c-surface: #ffffff;
--c-surface-muted: #fafafa;
--c-border: #e8eaed;
--c-text-1: #1d2129;
--c-text-2: #4e5969;
--c-text-3: #86909c;
--c-text-4: #c9cdd4;
--radius-m: 10px;
--radius-s: 6px;
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
--shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08);

width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
min-height: 0;
/** 内层 __viewport-compensate 绝对定位参照；放大排版区可能超出槽位，需在壳上裁切 */
position: relative;
overflow: hidden;
/** 图元高度较小时，子级 .rc-body / .rc-multi-list 内可纵向滑动 */
touch-action: manipulation;

/** 方桌小尺寸外绕边框进度：允许边框层溢出根壳 */
&[data-rect-edge-progress='on'] {
  overflow: visible;
}

&[data-reserved-halo='on'] {
  overflow: visible;

  > .pisell-res-floor-room-card__viewport-compensate > .rc-shell {
    transition: box-shadow 0.2s ease;
  }
}

&[data-reserved-halo='on']:not([data-shape='circle'])
  > .pisell-res-floor-room-card__viewport-compensate
  > .rc-shell {
  border-radius: var(--radius-m);
  box-shadow:
    0 0 0 2px var(--rc-reserved-halo-border),
    0 0 var(--rc-reserved-halo-glow-size) var(--rc-reserved-halo-glow),
    0 0 var(--rc-reserved-halo-glow-soft-size) var(--rc-reserved-halo-glow-soft);
}

&[data-reserved-halo='on'][data-shape='circle']
  > .pisell-res-floor-room-card__viewport-compensate
  > .rc-shell {
  box-shadow:
    0 0 0 2px var(--rc-reserved-halo-border),
    0 0 var(--rc-reserved-halo-glow-size) var(--rc-reserved-halo-glow),
    0 0 var(--rc-reserved-halo-glow-soft-size) var(--rc-reserved-halo-glow-soft),
    var(--shadow-card);
}

&[data-reserved-halo='on'][data-shape='circle']:hover
  > .pisell-res-floor-room-card__viewport-compensate
  > .rc-shell {
  box-shadow:
    0 0 0 2px var(--rc-reserved-halo-border),
    0 0 var(--rc-reserved-halo-hover-glow-size) rgba(102, 187, 151, 0.32),
    0 0 var(--rc-reserved-halo-hover-glow-soft-size) rgba(102, 187, 151, 0.18),
    var(--shadow-card-hover);
}

/** 单条占用环形进度：叠在圆盘边缘，不拦截指针（画布拖拽仍可用） */
&__disc-edge-progress {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 50%;

  svg {
    display: block;
    width: 100%;
    height: 100%;
  }
}

/** 方桌单条占用：外缘矩形边框进度 */
&__rect-edge-progress {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: var(--radius-m);
  overflow: visible;

  svg {
    display: block;
    width: 100%;
    height: 100%;
  }
}

/** 小尺寸（非 comfortable）：内缩避免描边在外沿被裁切导致圆角不一致 */
&[data-density='compact'] &__rect-edge-progress,
&[data-density='mini'] &__rect-edge-progress,
&[data-density='micro'] &__rect-edge-progress {
  /** 外绕一圈：不压进原卡片内容区 */
  inset: -2px;
  border-radius: calc(var(--radius-m) + 2px);
}

/* ============================================================
   RoomCard — 经典卡片内壳（Theme: 默认主题）
   ============================================================ */

.rc {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--c-surface);
  border: none;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

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

/** 多预约「查看全部」弹层打开时：桌位选中高亮（内描边，避免被图元首层 overflow 裁掉） */

.rc.rc--floor-detail-open {
  z-index: 2;
  box-shadow: inset 0 0 0 2px rgba(24, 144, 255, 0.92),
  var(--shadow-card);
}

.rc.rc--floor-detail-open:hover {
  box-shadow: inset 0 0 0 2px rgba(24, 144, 255, 0.92),
  var(--shadow-card-hover);
}