/**
 * 平面视图：工具栏常仅一行（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;
  }
}

/**
 * 极窄模式：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;
  }

  /**
   * 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 {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 6px;

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

    .anticon svg {
      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;
  }
}

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

  &: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 {
  padding: 8px;
  min-width: 180px;
}

.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;
}
