.pisell-reservation-floor-map-hud {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
  font-size: 13px;
  line-height: 1.35;
  color: #101828;

  /** 场控：标题 + 内联统计 + 展开/收起 */
  &--interactive-title-bar {
    padding: 8px 10px;
    min-width: 0;
  }

  /**
   * 必须写成双类，否则单类 `.pisell-reservation-floor-map-hud--embedded`
   * 无法压过本块基类的 border，抽屉标题栏会仍带卡片描边。
   */
  &.pisell-reservation-floor-map-hud--embedded {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    outline: none;
    border-radius: 0;
  }

  /** 手机：画布左上统计改横向内联，过长时换行；与视口 overlay 0,0 对齐无外边距 */
  &--phone-inline {
    max-width: 100%;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 1.35;
    /** 左上角贴齐视口，仅左上保持直角 */
    border-radius: 0 10px 10px 10px;

    .pisell-reservation-floor-map-hud-inline-stats {
      flex: 1 1 auto;
    }
  }
}

.pisell-reservation-floor-map-hud-title-bar-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pisell-reservation-floor-map-hud-heading {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 13px;
  color: #101828;
  line-height: 1.35;
}

.pisell-reservation-floor-map-hud-title-bar-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 2px;
  min-width: 0;
  flex: 1;
  font-size: 12px;
  line-height: 1.35;
}

.pisell-reservation-floor-map-hud-title-bar--minimal
  .pisell-reservation-floor-map-hud-title-bar-stats {
  min-height: 0;
}

/** 横向统计 + 右侧 slot（底栏与 Sheet 顶栏共用） */
.pisell-reservation-floor-map-hud-stats-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  flex: 1;
  width: 100%;
}

.pisell-reservation-floor-map-hud-stats-bar--in-overlay {
  flex: 1;
  min-width: 0;
}

.pisell-reservation-floor-map-hud-stats-bar-spacer {
  flex: 1;
  min-width: 0;
}

.pisell-reservation-floor-map-hud-inline-stats {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 2px;
  min-width: 0;
  flex: 1;
}

.pisell-reservation-floor-map-hud-inline-item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.pisell-reservation-floor-map-hud-sep {
  color: #98a2b3;
  user-select: none;
  padding: 0 2px;
}

.pisell-reservation-floor-map-hud-chevron-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #1677ff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;

  &:hover {
    background: rgba(22, 119, 255, 0.08);
  }

  &:focus-visible {
    outline: 2px solid #1677ff;
    outline-offset: 2px;
  }
}

.pisell-reservation-floor-map-hud-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pisell-reservation-floor-map-hud-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;

  & + & {
    margin-top: 6px;
  }
}

.pisell-reservation-floor-map-hud-label {
  color: #475467;
  flex: 1;
  min-width: 0;
}

.pisell-reservation-floor-map-hud-inline-stats .pisell-reservation-floor-map-hud-label {
  flex: none;
}

.pisell-reservation-floor-map-hud-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #101828;
}