/** 绑定桌位 · 房间卡（设计稿：Occupied / Reserved / Empty / Locked） */
.pisell-res-room {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 10px;
  line-height: 1.3;
  user-select: none;
  touch-action: manipulation;
}

.pisell-res-room--occupied {
  background: #0f3d2e;
  color: rgba(255, 255, 255, 0.94);
  border: 1px solid #1b4332;
}

.pisell-res-room--occupied.pisell-res-room--top-warn {
  border-top: 3px solid #fa8c16;
}

.pisell-res-room--reserved {
  background: #ffffff;
  color: #262626;
  border: 1px solid #e8e8e8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pisell-res-room--empty {
  background: #f0f0f0;
  color: #8c8c8c;
  border: 1px solid #d9d9d9;
}

.pisell-res-room--locked {
  background: repeating-linear-gradient(-45deg,
  #e8e8e8,
  #e8e8e8 5px,
  #f5f5f5 5px,
  #f5f5f5 10px);
  border: 1px solid #bfbfbf;
  color: #595959;
}

.pisell-res-room-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px 4px;
  flex-shrink: 0;
}

.pisell-res-room-title-block {
  min-width: 0;
}

.pisell-res-room-title {
  font-weight: 700;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pisell-res-room-cap {
  font-size: 9px;
  opacity: 0.85;
  margin-top: 2px;
}

.pisell-res-room-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.4;
}

.pisell-res-room-badge--occupied {
  background: rgba(255, 255, 255, 0.18);
  color: #e6fffb;
}

.pisell-res-room-badge--reserved {
  background: #e6f4ff;
  color: #1677ff;
  border: 1px solid #91caff;
}

.pisell-res-room-badge--empty {
  background: #fafafa;
  color: #8c8c8c;
  border: 1px solid #d9d9d9;
}

.pisell-res-room-badge--locked {
  background: #f5f5f5;
  color: #737373;
  border: 1px solid #d4d4d4;
}

.pisell-res-room-body {
  padding: 0 8px 6px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

.pisell-res-room-body--light {
  color: #262626;
}

.pisell-res-room-guest {
  font-weight: 600;
  font-size: 11px;
}

.pisell-res-room-phone {
  font-size: 10px;
  opacity: 0.88;
}

.pisell-res-room-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.pisell-res-room-meta-ic {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  opacity: 0.92;
}

.pisell-res-room--reserved .pisell-res-room-meta-ic {
  color: #434343;
}

.pisell-res-room-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  padding: 2px 6px;
  width: fit-content;
}

.pisell-res-room-chip--delay {
  background: rgba(250, 219, 20, 0.25);
  color: #fadb14;
}

.pisell-res-room-chip--late {
  background: #fff2e8;
  color: #fa541c;
}

.pisell-res-room-chip--soon {
  background: #e6f4ff;
  color: #1677ff;
}

.pisell-res-room-price {
  font-size: 18px;
  font-weight: 700;
  color: #73d13d;
  margin-top: 2px;
}

.pisell-res-room-price--dark {
  color: #52c41a;
}

.pisell-res-room--reserved .pisell-res-room-price--dark {
  color: #389e0d;
}

.pisell-res-room-progress {
  height: 4px;
  margin: 0 8px 4px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 2px;
  overflow: hidden;
}

.pisell-res-room-progress > span {
  display: block;
  height: 100%;
  background: #95d5b2;
  border-radius: 2px;
}

.pisell-res-room-progress--warn > span {
  background: #fadb14;
}

.pisell-res-room-stamp {
  position: absolute;
  right: 8px;
  bottom: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px dashed currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  transform: rotate(-12deg);
  pointer-events: none;
}

.pisell-res-room-stamp--paid {
  color: #52c41a;
  border-color: #52c41a;
  background: rgba(82, 196, 26, 0.08);
}

/* 占用态深底：已付款印章用白色 */
.pisell-res-room--occupied .pisell-res-room-stamp--paid {
  color: #ffffff;
  border-color: #ffffff;
  background: transparent;
}

.pisell-res-room--reserved .pisell-res-room-stamp--paid {
  color: #389e0d;
  border-color: #389e0d;
}

.pisell-res-room-stamp--unpaid {
  color: #fa8c16;
  border-color: #fa8c16;
  background: rgba(250, 140, 22, 0.08);
}

.pisell-res-room-next {
  padding: 4px 8px;
  font-size: 9px;
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.pisell-res-room-next--light {
  background: #f6ffed;
  border-top-color: #b7eb8f;
  color: #237804;
}

.pisell-res-room-empty-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 11px;
  padding: 8px;
  text-align: center;
}

.pisell-res-room-locked-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  padding: 8px;
}

.pisell-res-room-locked-ic {
  width: 22px;
  height: 22px;
  opacity: 0.75;
}

.pisell-res-room-slots {
  list-style: none;
  margin: 0;
  padding: 2px 8px 6px;
}

.pisell-res-room-slots li {
  margin-bottom: 6px;
}

.pisell-res-room-slot-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
}

.pisell-res-room-slot-time {
  font-weight: 600;
  color: #1677ff;
}

.pisell-res-room-slot-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.pisell-res-room-slot-bar {
  height: 3px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}

.pisell-res-room-slot-bar > span {
  display: block;
  height: 100%;
  background: #95d5b2;
  border-radius: 2px;
}

.pisell-res-room-view-all {
  padding: 0 8px 6px;
  font-size: 10px;
  color: #1677ff;
  font-weight: 600;
}

/** 无绑定 / 无数据行占位 */
.pisell-reservation-card-placeholder {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
  font-size: 11px;
  line-height: 1.35;
  background: #fafafa;
  border-radius: 8px;
  border: 2px dashed #bfbfbf;
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

.pisell-reservation-card-placeholder--circle {
  border-radius: 50%;
  text-align: center;
  padding: 6px 8px;
}

.pisell-reservation-card-placeholder-title {
  font-weight: 600;
  color: #595959;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pisell-reservation-card-placeholder--circle .pisell-reservation-card-placeholder-title {
  white-space: normal;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pisell-reservation-card-placeholder-hint {
  margin-top: 4px;
  font-size: 10px;
  color: #8c8c8c;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.pisell-reservation-card-placeholder--circle .pisell-reservation-card-placeholder-hint {
  -webkit-line-clamp: 4;
  font-size: 9px;
}