/* 弹窗外壳：圆角与轻阴影（与 Pisell PC Modal 结构对齐） */
.pisell-res-booking-detail-modal-wrap {
  .pisell-lowcode-modal {
    width: min(560px, 95vw) !important;
    max-width: 95vw;
  }

  /**
   * 固定高度：不随内部 booking 数量变化而塌陷或撑高。
   * 用 flex column 把 header 撑住、body 填满剩余空间，再由 body 内部滚动。
   */
  .pisell-lowcode-modal-content {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12);
    height: 620px;
    max-height: calc(100vh - 16px);
    display: flex;
    flex-direction: column;
    background: #f4f5f7;
  }

  /**
   * 嵌套到 .pisell-pc-modal .pisell-lowcode-modal-content，与 PcModal 默认 header padding 同权并靠后覆盖。
   */
  &.pisell-pc-modal .pisell-lowcode-modal-content .pisell-lowcode-modal-header {
    flex: 0 0 auto;
    padding: 6px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin: 0;
    background: #fff;
  }

  &.pisell-pc-modal .pisell-lowcode-modal-content .pisell-lowcode-modal-title {
    width: 100%;
    padding-right: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(0, 0, 0, 0.88);
  }

  /**
   * Modal body 自身不再滚动（overflow:hidden），把滚动交给内部 `__bookings-list`，
   * 这样 Tab 栏可以固定在顶部，下方列表自由滚动。
   */
  .pisell-lowcode-modal-body {
    padding: 0 6px 0 !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #f4f5f7;
  }

  /* 压过 ReservationFloorRoomCard.less 里 .pisell-lowcode-modal-body .pisell-res-floor-room-card 的大 margin */

  .pisell-res-booking-detail-modal__room-card-slot .pisell-res-floor-room-card {
    margin: 0;

    .rc {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /**
   * `.pisell-res-floor-room-card` 平面图侧默认 `height:100% + display:flex + .rc{flex:1}`，
   * 这套规则要在「父容器有定高」的槽位里才合理。在弹窗里我们希望卡片按自身内容高度显示，
   * 否则会被 flex 布局拉成几百 px 的巨高块，把下方操作栏与商品挤出可视区。
   * 这里限定弹窗作用域，强制 slot/壳/.rc 走内容高度。
   */
  .pisell-res-booking-detail-modal__room-card-slot.pisell-res-floor-room-card {
    height: auto;
    min-height: 0;
    display: block;

    > .rc-shell,
    > .rc {
      flex: 0 0 auto;
      height: auto;
      min-height: 0;
    }
  }

}

.pisell-res-booking-detail-modal {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  padding-top: 6px;
  padding-bottom: 6px;

  &__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  &__header-action {
    /**
     * 用 padding 扩大可点击热区；负 margin 抵消位移，避免撑高 modal header。
     */
    padding: 4px 8px;
    margin: -4px -8px;
    min-height: 32px;
    border: none;
    background: transparent;
    color: rgba(0, 0, 0, 0.45);
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;

    &--left {
      justify-self: start;
      color: rgba(0, 0, 0, 0.45);
    }

    &--right {
      justify-self: end;
      color: var(--color-primary, var(--ant-color-primary, #5d3f9f));
    }
  }

  &__header-title {
    min-width: 0;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(0, 0, 0, 0.88);
  }

  /**
   * body 占满 modal 剩余高度；Tab 栏固定不滚动，列表区单独滚动。
   */
  &__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  &__tabs {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    padding: 6px 6px;
    border-radius: 11px;
    background: rgba(118, 118, 128, 0.12);
  }

  &__tab {
    min-width: 0;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(60, 60, 67, 0.72);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;

    &--active {
      background: #fff;
      color: rgba(0, 0, 0, 0.88);
      box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        0 0 0 0.5px rgba(0, 0, 0, 0.04);
    }
  }

  /** Tab 名后的 `(N)` 计数：次级字重 + 透明度，避免抢主名视觉 */
  &__tab-count {
    font-weight: 500;
    opacity: 0.7;
  }

  /**
   * 当前 Tab 下的 booking 单元列表：每个单元 = RoomCard + 操作栏。
   * 占满 body 剩余高度并独立滚动，使 Modal 自身保持固定高度，不会因为内容多少而塌陷或撑高。
   */
  &__bookings-list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px;
  }

  /** 当前 Tab 无预约时居中提示 */
  &__bookings-empty {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 24px 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.45);
    background: #fafafa;
    border-radius: 10px;
    border: 1px dashed rgba(0, 0, 0, 0.1);
  }

  /**
   * 单个 booking 单元：上方 RoomCard，中间操作格，下方该 booking 的商品列表。
   * 在 `__bookings-list` flex column 里强制不被压缩，保证操作栏与商品始终可见。
   * 外框略加强，强调「一整条预约」的边界感。
   */
  &__booking-card {
    flex: 0 0 auto;
    border: 2px solid rgba(15, 23, 42, 0.16);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
  }

  /**
   * 内嵌 RoomCard 与平面图共用 ReservationFloorRoomCard.less；其中 .rc / .rc:hover 带卡片阴影。
   * 弹窗内为静态展示，去掉默认阴影与 hover 加深（需与 .pisell-res-floor-room-card 同节点以提高优先级）。
   */

  &__room-card-slot {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    &.pisell-res-floor-room-card {
      .rc {
        box-shadow: none;
      }

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

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

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

  /* 4 列：首行四键为第一版「白底 + 边框 + 图标/文案色」；结账为主题色，其余三枚略更浅的底 */

  &__action-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    background: #fff;
    box-sizing: border-box;
  }

  /** 已完成预约：每行 3 个操作键（无开始/完成） */
  &__action-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  &__action-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 64px;
    padding: 8px 6px;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    color: rgba(0, 0, 0, 0.78);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06);
    transition: border-color 0.15s ease,
      box-shadow 0.15s ease,
      background 0.15s ease,
      transform 0.12s ease,
      color 0.15s ease;

    &:active {
      transform: scale(0.98);
      box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.06);
    }

    &:focus-visible {
      outline: 2px solid rgba(24, 144, 255, 0.45);
      outline-offset: 2px;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover:not(:active) {
        border-color: rgba(0, 0, 0, 0.16);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
      }
    }
  }

  /** 结账：主题色边框 + 图标/文案主题色（底略提亮以与旁三枚区分） */
  &__action-cell--tint-checkout {
    background: #fff;
    border-color: var(--color-primary, var(--ant-color-primary, #5d3f9f));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  &__action-cell--tint-checkout &__action-icon,
  &__action-cell--tint-checkout &__action-label {
    color: var(--color-primary, var(--ant-color-primary, #5d3f9f));
  }

  &__action-cell--tint-checkout:active {
    background: rgba(0, 0, 0, 0.02);
  }

  @media (hover: hover) and (pointer: fine) {
    &__action-cell--tint-checkout:hover:not(:active) {
      background: #fafafa;
      border-color: var(--color-primary, var(--ant-color-primary, #5d3f9f));
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    }
  }

  /** 编辑 / 换资源 / 开始|完成：比结账略「白」的浅底 + 细语义色边框与图标 */
  &__action-cell--tint-edit {
    background: #fcfcfc;
    border-color: rgba(59, 130, 246, 0.28);
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.06);
  }

  &__action-cell--tint-edit &__action-icon,
  &__action-cell--tint-edit &__action-label {
    color: #2563eb;
  }

  &__action-cell--tint-form {
    background: #fcfcfc;
    border-color: rgba(20, 184, 166, 0.32);
    box-shadow: 0 1px 2px rgba(20, 184, 166, 0.06);
  }

  &__action-cell--tint-form &__action-icon,
  &__action-cell--tint-form &__action-label {
    color: #0d9488;
  }

  &__action-cell--tint-start {
    background: #fcfcfc;
    border-color: rgba(16, 185, 129, 0.32);
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.06);
  }

  &__action-cell--tint-start &__action-icon,
  &__action-cell--tint-start &__action-label {
    color: #059669;
  }

  &__action-cell--tint-complete {
    background: #fcfcfc;
    border-color: rgba(34, 197, 94, 0.32);
    box-shadow: 0 1px 2px rgba(34, 197, 94, 0.06);
  }

  &__action-cell--tint-complete &__action-icon,
  &__action-cell--tint-complete &__action-label {
    color: #16a34a;
  }

  &__action-cell--tint-edit:active,
  &__action-cell--tint-form:active,
  &__action-cell--tint-start:active,
  &__action-cell--tint-complete:active {
    background: #f5f5f5;
  }

  @media (hover: hover) and (pointer: fine) {
    &__action-cell--tint-edit:hover:not(:active) {
      border-color: rgba(59, 130, 246, 0.45);
      background: #fafafa;
    }

    &__action-cell--tint-form:hover:not(:active) {
      border-color: rgba(20, 184, 166, 0.45);
      background: #fafafa;
    }

    &__action-cell--tint-start:hover:not(:active) {
      border-color: rgba(16, 185, 129, 0.45);
      background: #fafafa;
    }

    &__action-cell--tint-complete:hover:not(:active) {
      border-color: rgba(34, 197, 94, 0.45);
      background: #fafafa;
    }
  }

  &__action-icon {
    flex-shrink: 0;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.48);
    transition: color 0.15s ease;
  }

  &__action-cell:active &__action-icon {
    color: rgba(0, 0, 0, 0.52);
  }

  &__action-cell--tint-checkout:active &__action-icon,
  &__action-cell--tint-checkout:active &__action-label {
    color: var(--color-primary, var(--ant-color-primary, #5d3f9f));
  }

  &__action-cell--tint-edit:active &__action-icon,
  &__action-cell--tint-edit:active &__action-label {
    color: #1d4ed8;
  }

  &__action-cell--tint-form:active &__action-icon,
  &__action-cell--tint-form:active &__action-label {
    color: #0f766e;
  }

  &__action-cell--tint-start:active &__action-icon,
  &__action-cell--tint-start:active &__action-label {
    color: #047857;
  }

  &__action-cell--tint-complete:active &__action-icon,
  &__action-cell--tint-complete:active &__action-label {
    color: #15803d;
  }

  &__action-label {
    flex: 0 1 auto;
    max-width: 100%;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    color: rgba(0, 0, 0, 0.58);
    transition: color 0.15s ease;
  }

  /** 单条 booking 内的商品列表区，紧贴操作格下方。 */
  &__products-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  &__products-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  &__products-empty {
    padding: 10px;
    text-align: center;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    background: #fafafa;
    border-radius: 8px;
    border: 1px dashed rgba(0, 0, 0, 0.08);
  }

  &__product-card-slot {
    border-radius: 8px;
    overflow: hidden;

    .pisell-lowcode-product-card-wrap {
      margin-bottom: 0;
    }

    .pisell-lowcode-product-card .pisell-cardPro-content {
      padding: 6px 12px !important;
    }

    .pisell-lowcode-product-card-image::before {
      width: 4px;
    }

    .pisell-lowcode-product-title {
      font-size: 14px !important;
      line-height: 1.35 !important;
      font-weight: 600;
    }

    .pisell-lowcode-product-title-variant {
      font-size: 12px !important;
      line-height: 1.35 !important;
      margin-top: 1px !important;
    }

    .pisell-lowcode-packages-product-footer {
      font-size: 13px !important;
      line-height: 1.35 !important;
      margin-top: 2px !important;
    }

    .pisell-lowcode-packages-product-hide-divider-footer {
      margin-top: 4px !important;
    }
  }

  &__action-cell:active &__action-label {
    color: rgba(0, 0, 0, 0.68);
  }

  @media (hover: hover) and (pointer: fine) {
    &__action-cell:hover:not(:active) &__action-icon {
      color: rgba(0, 0, 0, 0.62);
    }

    &__action-cell:hover:not(:active) &__action-label {
      color: rgba(0, 0, 0, 0.78);
    }

    &__action-cell--tint-checkout:hover:not(:active) &__action-icon,
    &__action-cell--tint-checkout:hover:not(:active) &__action-label {
      color: var(--color-primary, var(--ant-color-primary, #5d3f9f));
    }

    &__action-cell--tint-edit:hover:not(:active) &__action-icon,
    &__action-cell--tint-edit:hover:not(:active) &__action-label {
      color: #1d4ed8;
    }

    &__action-cell--tint-form:hover:not(:active) &__action-icon,
    &__action-cell--tint-form:hover:not(:active) &__action-label {
      color: #0f766e;
    }

    &__action-cell--tint-start:hover:not(:active) &__action-icon,
    &__action-cell--tint-start:hover:not(:active) &__action-label {
      color: #047857;
    }

    &__action-cell--tint-complete:hover:not(:active) &__action-icon,
    &__action-cell--tint-complete:hover:not(:active) &__action-label {
      color: #15803d;
    }
  }

}