/**
 * 平面视图：工具栏常仅一行（ScheduleBand），去掉 GridPro 默认底内边距。
 * 不用仅依赖 #body：Story/本地预览可能没有 id=body，低代码若再包一层 #body 会导致双前缀失效。
 * !important：确保晚于 @pisellGridPro/ToolBar 中单类 .pisell-grid-pro-toolbar 的 padding-bottom。
 */
.pisell-grid-pro-toolbar.pisell-record-board-toolbar--floor-map {
  padding-bottom: 0 !important;
}

#body .pisell-grid-pro-toolbar.pisell-record-board-toolbar--floor-map {
  padding-bottom: 0 !important;
}

/** 日历视图：首行多为 Segmented，与 floor-map 一致去掉 GridPro 默认底内边距 */
.pisell-grid-pro-toolbar.pisell-record-board-toolbar--calendar {
  padding-bottom: 0 !important;
}

#body .pisell-grid-pro-toolbar.pisell-record-board-toolbar--calendar {
  padding-bottom: 0 !important;
}

/* 表格 / 资源墙：与主内容区左右对齐 16px；平面图、日历不加（日程带全宽） */
.pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid,
.pisell-grid-pro-toolbar.pisell-record-board-toolbar--resource-wall {
  padding-left: 16px;
  padding-right: 16px;
}

#body .pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid,
#body .pisell-grid-pro-toolbar.pisell-record-board-toolbar--resource-wall {
  padding-left: 16px;
  padding-right: 16px;
}

/**
 * 窄屏 / narrow-stack：顶栏仍为单行——左侧快筛与右侧操作同一行；
 * 快筛区内按钮组仍可换行（Space wrap / BucketButtonGroup）。
 * 用于 ≤768px 视口；或工具栏带 `.pisell-record-board-toolbar--narrow-stack`（如预约 HUD）。
 */
.record-board-toolbar-grid-narrow-one-row() {
  > .toolbar-row {
    flex-direction: row;
    flex-wrap: nowrap;
    /** 左侧快筛多行时，右侧 search / 齿轮与顶缘对齐，不随整坨内容垂直居中 */
    align-items: flex-start;
    row-gap: 8px;
    column-gap: 8px;
    min-width: 0;
  }

  > .toolbar-row > .toolbar-row-left,
  > .toolbar-row > .toolbar-row-right {
    display: contents;
  }

  .record-board-toolbar-top-left {
    display: contents;
  }

  .record-board-toolbar-quick-filter-slot {
    order: 0;
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
    min-width: 0;
  }

  /**
   * 快筛区在 narrow-stack 模式下允许内部按钮自动换行（HUD 抽屉等窄容器场景）：
   * - `flex-wrap: wrap` 让多组桶在空间不够时挤到下一行；
   * - `display: flex; width: 100%` 让 form 撑满 quick-filter-slot，从而触发 wrap 阈值；
   * - 这样右侧 search / 齿轮所在 row 永远是第一行最右，不会因桶过多被顶到下一行。
   */
  .record-board-toolbar-quick-filter-slot .record-board-toolbar-quick-filter-form {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .record-board-toolbar-quick-filter-slot .pisell-lowcode-form,
  .record-board-toolbar-quick-filter-slot .ant-form {
    width: auto;
    max-width: 100%;
    min-width: 0;
  }

  .record-board-toolbar-body-view-segmented {
    order: 1;
    flex: 0 0 auto;
  }

  .record-board-toolbar-find-wrap {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
  }

  .record-board-toolbar-extra-top-left {
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
  }

  .record-board-toolbar-right-actions {
    order: 1;
    flex: 0 0 auto;
    margin-inline-start: auto;
  }
}

@media (max-width: 768px) {
  .pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid {
    .record-board-toolbar-grid-narrow-one-row();
  }
}

.pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid.pisell-record-board-toolbar--narrow-stack {
  .record-board-toolbar-grid-narrow-one-row();
}

/**
 * 紧凑工具栏：与 antd size=small 配套，收紧留白，避免仍像默认大号行高。
 */
.pisell-grid-pro-toolbar.pisell-record-board-toolbar--compact {
  // padding-bottom: 8px !important;
  gap: 6px !important;

  > .pisell-grid-pro-toolbar-row.toolbar-row,
  > .toolbar-row {
    gap: 6px !important;
    align-items: center;
  }

  .toolbar-row-left {
    align-items: center !important;
    gap: 6px !important;
  }

  .toolbar-row-right {
    gap: 6px !important;
  }

  .record-board-toolbar-right-actions.ant-space {
    gap: 6px !important;
  }

  .record-board-toolbar-top-left {
    gap: 6px;
  }

  .pisell-lookup-input-suffix {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
  }
}

/**
 * `record-board-toolbar-grid-narrow-one-row` 对顶栏行使用 `align-items: flex-start`，
 * 但上一段 `--compact` 对同一行写了 `align-items: center !important`，会压过 mixin，
 * 导致 HUD（compact-narrow + narrow-stack）里左侧快筛换行时右侧搜索/齿轮仍整列垂直居中。
 * 在「grid + narrow-stack + compact」组合下把行对齐改回顶缘。
 */
.pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid.pisell-record-board-toolbar--narrow-stack.pisell-record-board-toolbar--compact {
  > .pisell-grid-pro-toolbar-row.toolbar-row,
  > .toolbar-row {
    align-items: flex-start !important;
  }
}

/**
 * 预约 / Sales 手机 Table：`buildReservationMobileTableToolbarConfig`、
 * `PisellSalesGrid`（`.pisell-sales-grid-mobile-toolbar`）会打上专用类；顶栏为单行 32px 级控件时，
 * 行对齐须为 center，否则上一段 `flex-start` 会让右侧搜索/齿轮贴在行盒顶缘，相对左侧日期条视觉上偏上。
 * HUD 内嵌表（`.pisell-reservation-hud-table-toolbar`）仍走顶对齐 + merge 行内 `align-self`，故排除。
 */
.pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid.pisell-record-board-toolbar--narrow-stack.pisell-record-board-toolbar--compact.pisell-reservation-mobile-table-toolbar:not(
    .pisell-reservation-hud-table-toolbar
  ),
.pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid.pisell-record-board-toolbar--narrow-stack.pisell-record-board-toolbar--compact.pisell-sales-grid-mobile-toolbar {
  > .pisell-grid-pro-toolbar-row.toolbar-row,
  > .toolbar-row {
    align-items: center !important;
    min-height: 32px;
  }

  .record-board-toolbar-quick-filter-slot {
    display: flex;
    align-items: center;
    min-height: 32px;
  }

  .record-board-toolbar-quick-filter-slot .record-board-toolbar-quick-filter-form,
  .record-board-toolbar-quick-filter-slot .pisell-lowcode-form,
  .record-board-toolbar-quick-filter-slot .ant-form {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap !important;
  }

  .record-board-toolbar-find-wrap,
  .record-board-toolbar-right-actions {
    align-self: center;
    display: inline-flex;
    align-items: center;
  }
}

/**
 * 极窄模式：HUD 抽屉这类宽度有限的内嵌表。
 *  - search 为纯图标触发器，与右侧齿轮并排
 *  - 列显示 / 排序 / 筛选 / 重置 合并到齿轮 Popover 内
 */
.pisell-grid-pro-toolbar.pisell-record-board-toolbar--compact-narrow {
  padding-bottom: 6px !important;
  gap: 4px !important;

  > .pisell-grid-pro-toolbar-row.toolbar-row,
  > .toolbar-row {
    gap: 4px !important;
  }

  /** 顶栏右侧 search-icon 与齿轮之间的间距 */
  .record-board-toolbar-right-actions.ant-space {
    gap: 10px !important;
    /** Space 默认 align=center，但子项若为 block/基线参与行盒时仍会上下错位；显式 flex 化整列 */
    display: inline-flex !important;
    align-items: center;
    flex-wrap: nowrap;
  }

  .record-board-toolbar-right-actions.ant-space .ant-space-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /**
   * icon 模式默认走 modal：去掉根节点行高带来的额外行盒高度，便于与齿轮 32px 对齐。
   */
  .record-board-toolbar-right-actions .pisell-lookup.record-board-toolbar-find-icon {
    line-height: 0;
  }

  /**
   * Find icon 触发器（PisellFind triggerType="icon"）：与右侧齿轮统一为 32×32，icon 18px。
   * `className` 由 PisellFind/PisellLookup 挂在最外层 `.pisell-lookup`，不会透到内部 trigger，
   * 所以选择器写成「外层 className → 内层 .pisell-lookup-trigger-icon」。
   */
  .pisell-lookup.record-board-toolbar-find-icon .pisell-lookup-trigger-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: rgba(0, 0, 0, 0.65);
    transition: background 0.15s, color 0.15s;

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

    .anticon {
      font-size: 18px;
      line-height: 1;
    }

    .anticon svg {
      width: 18px;
      height: 18px;
    }
  }

  /**
   * 齿轮按钮：与 find-icon 对齐到 32×32，icon 18px。
   * 同时命中 antd 原生 `.ant-btn` 与低代码包裹的 `.pisell-lowcode-btn`，并兼容 `-sm` 尺寸变体；
   * 用 !important 压过全局基线 28×28 与 antd small button 自带的 24px 高度。
   */
  .record-board-toolbar-settings-gear-btn,
  .record-board-toolbar-settings-gear-btn.ant-btn,
  .record-board-toolbar-settings-gear-btn.pisell-lowcode-btn,
  .record-board-toolbar-settings-gear-btn.pisell-lowcode-btn.pisell-lowcode-btn-sm,
  .record-board-toolbar-settings-gear-btn.pisell-lowcode-btn-icon-only {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    line-height: 0 !important;
    border-radius: 6px;

    .anticon {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
      font-size: 18px !important;
      line-height: 0 !important;
    }

    .anticon svg {
      display: block;
      width: 18px !important;
      height: 18px !important;
    }
  }

  /**
   * 自定义 `trigger` 进入 PisellLookup 时会被包裹在 `pisell-lookup-trigger-custom`
   */
  .record-board-toolbar-right-actions .pisell-lookup-trigger-custom {
    display: inline-flex;
    align-items: center;
  }
}

/**
 * compact-narrow + merge：快筛与搜索/齿轮同一 flex-wrap 行，尾部 `margin-inline-start: auto`
 * 与最后一行快筛同排靠右；子树 `display: contents` 将 Form/Space 展开为与桶按钮同级 flex 项。
 */
.record-board-toolbar-hud-unified-quick-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 8px;
  row-gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;

  .record-board-toolbar-quick-filter-slot {
    display: contents;
  }

  .record-board-toolbar-quick-filter-form {
    display: contents;
  }

  .record-board-toolbar-quick-filter-form .ant-form-item,
  .record-board-toolbar-quick-filter-form .pisell-lowcode-form-item {
    display: contents;
  }

  .record-board-toolbar-quick-filter-form .ant-form-item-row,
  .record-board-toolbar-quick-filter-form .pisell-lowcode-form-item-row {
    display: contents;
  }

  .record-board-toolbar-quick-filter-form .ant-col,
  .record-board-toolbar-quick-filter-form .pisell-lowcode-col {
    display: contents;
  }

  .record-board-toolbar-quick-filter-form .ant-form-item-control,
  .record-board-toolbar-quick-filter-form .pisell-lowcode-form-item-control {
    display: contents;
  }

  .record-board-toolbar-quick-filter-form .ant-form-item-control-input,
  .record-board-toolbar-quick-filter-form .pisell-lowcode-form-item-control-input {
    display: contents;
  }

  .record-board-toolbar-quick-filter-form .ant-form-item-control-input-content,
  .record-board-toolbar-quick-filter-form .pisell-lowcode-form-item-control-input-content {
    display: contents;
  }

  .record-board-toolbar-quick-filter-form .ant-space,
  .record-board-toolbar-quick-filter-form .pisell-lowcode-space {
    display: contents;
    gap: 0 !important;
  }

  .record-board-toolbar-quick-filter-form .ant-space-item,
  .record-board-toolbar-quick-filter-form .pisell-lowcode-space-item {
    display: contents;
  }
}

.record-board-toolbar-hud-trailing-cluster {
  flex: 0 0 auto;
  margin-inline-start: auto;
  align-self: center;
}

/** 齿轮按钮：低视觉权重，hover 浅色背景；激活态由 antd Popover 自带 */
.record-board-toolbar-settings-gear-btn.ant-btn,
.record-board-toolbar-settings-gear-btn.pisell-lowcode-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.65);

  .anticon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }

  &:hover,
  &:focus {
    background: rgba(22, 119, 255, 0.08);
    color: rgba(0, 0, 0, 0.88);
  }
}

/**
 * 齿轮 popover 内容：竖排三组（列显示 / 排序 / 筛选），每组保留各自原本的
 * 按钮 + 子 popover 触发逻辑，外层只承担「分组承载 + 标签提示」。
 * 子 popover 仍按各组件 placement 弹，会浮在齿轮 popover 之上。
 */
.record-board-toolbar-settings-gear-overlay .ant-popover-inner-content,
.record-board-toolbar-settings-gear-overlay .pisell-lowcode-popover-inner-content {
  padding: 8px;
  min-width: 180px;
}

.record-board-toolbar-settings-gear-overlay .pisell-lowcode-popover-inner,
.record-board-toolbar-settings-gear-overlay .ant-popover-inner {
  padding: 0;
}

/**
 * compact-narrow（手机 Table 顶栏）：齿轮内 Sort / Filter / Reset 收紧 padding，降低 Popover 总高度。
 * overlay 挂到 body，须用 overlay 修饰 class（不能依赖 toolbar 祖先选择器）。
 */
.record-board-toolbar-settings-gear-overlay--compact-narrow {
  .ant-popover-inner-content,
  .pisell-lowcode-popover-inner-content {
    box-sizing: border-box;
    width: 88px !important;
    min-width: 88px !important;
    padding: 6px !important;
  }

  .record-board-toolbar-settings-gear-popover {
    gap: 8px;
    width: 100%;
    align-items: stretch;
  }

  .record-board-toolbar-settings-gear-row {
    gap: 6px;
  }

  /** Sort / Filter / Reset：三按钮等宽铺满 Popover */
  .record-board-toolbar-settings-gear-row:has(.record-board-toolbar-filter-btn),
  .record-board-toolbar-settings-gear-row:has(.record-board-toolbar-reset) {
    width: 100%;
    justify-content: stretch;

    > * {
      display: block;
      width: 100%;
      min-width: 0;
    }
  }

  .record-board-toolbar-filter-btn,
  .record-board-toolbar-filter-btn.ant-btn,
  .record-board-toolbar-filter-btn.pisell-lowcode-btn,
  .record-board-toolbar-reset,
  .record-board-toolbar-reset.ant-btn,
  .record-board-toolbar-reset.pisell-lowcode-btn {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: auto !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    line-height: 20px !important;
    justify-content: center;

    &.pisell-lowcode-btn-lg,
    &.ant-btn-lg {
      min-height: 36px !important;
      padding: 6px 10px !important;
      font-size: 13px !important;
    }

    .anticon {
      font-size: 14px !important;
    }
  }

  .record-board-toolbar-column-setting-btn {
    width: 28px !important;
    height: 28px !important;
  }
}

.record-board-toolbar-settings-gear-popover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/**
 * 行容器只承担「分组与上下间距」，不再做包裹 hover 反馈：
 * 每一项内部的按钮（Eye / Sort / Filter）已自带各自的 hover/active 反馈，
 * 外层再加 hover 会出现「按钮反馈 + 行底色」双层叠加，视觉很乱。
 *
 * justify-content: center 让每行内的按钮在 popover 内横向居中——三组操作宽度
 * 不一致（眼睛 ≪ Sort ≪ Filter），整列居中比左对齐视觉更稳，避免「梯形」错位。
 */
.record-board-toolbar-settings-gear-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  cursor: default;
}