/** 手机 Table：单元格允许多行堆叠，由子元素各自单行省略 */
.pisell-sales-grid-mobile-table-stack-cell() {
  white-space: normal !important;
  overflow: visible !important;

  .pisell-lowcode-table-cell-content {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    min-width: 0;
    max-width: 100%;
  }
}

.pisell-sales-grid-mobile-table-row-ellipsis() {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/** 手机 Table：列内单行允许折行（如 Customer 邮箱），避免 nowrap 溢出到邻列 */
.pisell-sales-grid-mobile-table-row-wrap() {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pisell-sales-grid-mobile-table-tag-ellipsis() {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

/**
 * PisellSalesGrid 样式
 * 作用域限定在 .pisell-sales-grid 内，避免污染全局
 */
.pisell-sales-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;

  /**
   * 桌面端快筛日期区略加宽；窄屏由 JS 打上 `pisell-sales-grid--phone` 并改用 compact-narrow 顶栏，
   * 此处避免 240px min-width 顶破一行（与 PisellReservation 手机顶栏策略对齐）。
   */
  @media (min-width: 769px) {
    .record-board-toolbar-quick-filter-form .pisell-date-range-picker {
      min-width: 240px !important;
    }
  }

  &.pisell-sales-grid--phone {
    .record-board-toolbar-quick-filter-form .pisell-date-range-picker {
      min-width: 0 !important;
      max-width: 100%;
    }

    /**
     * 手机顶栏：日期条与搜索/齿轮同一行垂直居中（与预约 mobile-table-toolbar 一致）。
     * 行级 `align-items: center` 见 recordBoardToolbar.less 中 `.pisell-sales-grid-mobile-toolbar`。
     */
    .pisell-sales-grid-mobile-toolbar {
      .record-board-toolbar-quick-filter-slot .ant-space,
      .record-board-toolbar-quick-filter-slot .pisell-lowcode-space {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 100%;
        min-width: 0;

        > .ant-space-item,
        > .pisell-lowcode-space-item {
          display: flex;
          align-items: center;
          flex: 1 1 auto;
          min-width: 0;
          max-width: 100%;
        }
      }

      .filter-dropdown-form-item--phone {
        width: 100%;
        margin-bottom: 0 !important;

        &.ant-form-item,
        &.pisell-lowcode-form-item {
          margin-bottom: 0 !important;
        }

        .ant-form-item-row,
        .pisell-lowcode-form-item-row {
          align-items: center;
        }

        .ant-form-item-control-input-content,
        .pisell-lowcode-form-item-control-input-content {
          display: flex;
          align-items: center;
        }

        .pisell-mobile-date-range-picker {
          display: flex;
          align-items: center;
          min-height: 32px;
          width: 100%;
        }

        .pisell-mobile-date-range-picker__trigger {
          height: 32px !important;
          min-height: 32px !important;
        }
      }
    }

    /**
     * 手机 Table：列宽由 applySalesPhoneGridColumns 收窄；
     * 单元格 padding 在本 grid 内统一收紧（与 Sale Brief 第一数据列一致，覆盖默认 8×16）。
     */
    .pisell-record-board-scroll-body {
      overscroll-behavior-x: contain;
    }

    .pisell-sales-grid-mobile-table-grid {
      .pisell-lowcode-table table {
        table-layout: fixed;
      }

      .pisell-lowcode-table-thead .pisell-lowcode-table-cell,
      .pisell-lowcode-table-tbody .pisell-lowcode-table-cell,
      .ant-table-thead .ant-table-cell,
      .ant-table-tbody .ant-table-cell,
      td[class*='pisell-sales-grid-mobile-table-col--'],
      th[class*='pisell-sales-grid-mobile-table-col--'] {
        padding: 4px 4px !important;
      }

      .pisell-lowcode-table-selection-column,
      .ant-table-selection-column {
        padding: 4px 2px !important;
      }

      .pisell-record-board-infinite-scroll-summary-row > .pisell-lowcode-table-cell,
      .pisell-record-board-infinite-scroll-summary-row > .ant-table-cell {
        padding: 4px 6px !important;
      }

      /** 手机表体基础字号略小于桌面，强调行（订单号/客户名）单独控制 */
      .pisell-lowcode-table-tbody {
        font-size: 11px;
        line-height: 1.35;
      }

      .pisell-client-name {
        font-size: 12px !important;
        line-height: 16px !important;
        font-weight: 600 !important;
      }

      [class*='pisell-sales-grid-mobile-table-col--'] {
        .pisell-lowcode-table-cell-content {
          min-width: 0;
          max-width: 100%;
        }
      }

      .pisell-sales-grid-mobile-table-col--stack:not(
          .pisell-sales-grid-mobile-table-col--customer
        ):not(.pisell-sales-grid-mobile-table-col--contact):not(
          .pisell-sales-grid-mobile-table-col--contacts-info
        ) {
        .pisell-sales-grid-mobile-table-stack-cell();

        .pisell-lowcode-table-cell-content > div {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 3px;
          min-width: 0;
          width: 100%;
          max-width: 100%;
          font-size: 11px;
          line-height: 1.35;
          color: #475467;

          > div {
            .pisell-sales-grid-mobile-table-row-ellipsis();
          }

          > div:has(.pisell-lowcode-tag),
          > div:has(.ant-tag) {
            display: block;
          }

          .pisell-lowcode-tag,
          .ant-tag {
            .pisell-sales-grid-mobile-table-tag-ellipsis();
            font-size: 11px;
            line-height: 16px;
            padding: 0 6px;
            margin: 0;
          }

          .pisell-datetime-display,
          .pisell-datetime-display-inline,
          .pisell-time-range-display {
            max-width: 100%;
            min-width: 0;
          }

          /** BookingNotesPreview 等嵌套备注行 */
          > div:not(:has(.ant-tag)):not(:has(.pisell-lowcode-tag)) {
            > div > div {
              .pisell-sales-grid-mobile-table-row-ellipsis();
              font-size: 11px !important;
              line-height: 1.35 !important;
            }
          }
        }
      }

      .pisell-sales-grid-mobile-table-col--sale-brief {
        .pisell-sales-grid-sale-brief {
          align-items: flex-start;
          font-size: 11px;
          line-height: 1.35;

          /** 订单号：略强调但仍小于桌面粗体默认 */
          > div:first-child {
            font-size: 12px;
            font-weight: 600;
            line-height: 1.3;
          }
        }
      }

      .pisell-sales-grid-mobile-table-col--booking-brief {
        .pisell-sales-grid-booking-brief {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 3px;
          min-width: 0;
          width: 100%;
          max-width: 100%;

          > .pisell-client-name,
          > .pisell-datetime-display,
          > .pisell-datetime-display-inline,
          > div {
            .pisell-sales-grid-mobile-table-row-ellipsis();
          }

          > div:has(.pisell-lowcode-tag),
          > div:has(.ant-tag) {
            display: block;
          }

          .pisell-lowcode-tag,
          .ant-tag {
            .pisell-sales-grid-mobile-table-tag-ellipsis();
          }

          > div:not(:has(.ant-tag)):not(:has(.pisell-lowcode-tag)) {
            > div > div {
              .pisell-sales-grid-mobile-table-row-ellipsis();
              font-size: 11px !important;
              line-height: 1.35 !important;
            }
          }
        }
      }

      /**
       * Customer / Contact：flex 子项须 stretch 才能受列宽约束；邮箱等在列内换行（勿用 center 按内容撑宽）。
       */
      .pisell-sales-grid-mobile-table-col--customer,
      .pisell-sales-grid-mobile-table-col--contact,
      .pisell-sales-grid-mobile-table-col--contacts-info {
        overflow: hidden;

        .pisell-lowcode-table-cell-content {
          overflow: hidden;
          max-width: 100%;
        }

        .pisell-lowcode-table-cell-content > div {
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          align-items: stretch !important;
          width: 100%;
          max-width: 100%;
          min-width: 0;
          text-align: center;

          > div,
          .pisell-client-name {
            .pisell-sales-grid-mobile-table-row-wrap();
            white-space: normal !important;
            overflow-wrap: anywhere !important;
            word-break: break-word !important;
          }
        }
      }

      .pisell-sales-grid-person-cell {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        text-align: center;
        font-size: 11px;
        line-height: 1.35;
        color: #475467;

        > div:not(.pisell-client-name) {
          font-size: 11px;
        }

        > div,
        .pisell-client-name {
          box-sizing: border-box;
          width: 100%;
          max-width: 100%;
          min-width: 0;
          white-space: normal !important;
          overflow-wrap: anywhere !important;
          word-break: break-word !important;
        }
      }

      .pisell-sales-grid-mobile-table-col--tag {
        .pisell-lowcode-table-cell-content {
          text-align: center;
        }

        .pisell-lowcode-tag,
        .ant-tag,
        .pisell-tags,
        .pisell-lowcode-tags {
          .pisell-sales-grid-mobile-table-tag-ellipsis();
          box-sizing: border-box;
          padding: 1px 8px !important;
          font-size: 11px !important;
          line-height: 16px !important;
          border-radius: 10px !important;
          margin-inline: auto;
        }
      }
    }
  }

  /** Booking Brief 列：略小于默认表格字重，与 ClientName 16px 默认区分 */
  .pisell-sales-grid-booking-brief {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    line-height: 1.35;
    color: #475467;

    .pisell-client-name {
      font-size: 13px;
      font-weight: 600;
      line-height: 18px;
    }

    .pisell-lowcode-tag,
    .ant-tag {
      font-size: 11px;
      line-height: 16px;
      padding: 0 6px;
      margin: 0;
    }
  }
}