/*
 * bt-page-common.css
 * ---------------------------------------------------------------------------
 * 业务页面公共样式，所有使用 bt-* 组件体系（树卡、工具栏、表格卡、状态卡、
 * 模态框、抽屉、表单等）的业务 HTML 页面都应引入此文件。
 *
 * 引入方式（在 <head> 中，bt-tokens.css 之后）：
 *   <link rel="stylesheet" href="../assets/styles/bt-tokens.css" />
 *   <link rel="stylesheet" href="../assets/styles/bt-page-common.css" />
 *
 * 设计令牌（CSS 变量）统一在 bt-tokens.css 中定义。
 * 页面特有样式仍保留在各页面 <style> 中，避免公共文件膨胀。
 * ---------------------------------------------------------------------------
 */

/* ===================== 盒模型重置 ===================== */

#bt-page-new-root,
#bt-page-new-root *,
#bt-page-new-root *::before,
#bt-page-new-root *::after,
#wf-page-root,
#wf-page-root *,
#wf-page-root *::before,
#wf-page-root *::after,
.bt-modal-shell,
.bt-modal-shell *,
.bt-modal-shell *::before,
.bt-modal-shell *::after,
.bt-add-node-popper,
.bt-add-node-popper *,
.bt-add-node-popper *::before,
.bt-add-node-popper *::after {
  box-sizing: border-box;
}

/* ===================== Vue 初始化隐藏 ===================== */

#bt-page-new-root[v-cloak],
#wf-page-root[v-cloak] {
  display: none;
}

/* ===================== 页面根布局 ===================== */

#bt-page-new-root,
#wf-page-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: var(--bt-space-5);
  color: hsl(var(--foreground));
  background: var(--bt-page-bg);
}

.bt-page-page {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--bt-page-bg);
}

.bt-page-main {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;

  /* !important: 覆盖 splitpanes 组件可能设置的 margin */
  margin: 0 !important;
  overflow: visible;
}

.bt-page-main__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 0;

  /* !important: 覆盖 fa-page-main 组件内部 padding */
  padding: 0 !important;
  overflow: visible;
  background: var(--bt-page-bg);
}

/* ===================== 左右分栏 ===================== */

.bt-main-split {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
}

.bt-main-split__tree-pane,
.bt-main-split__content-pane {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
}

.bt-main-split__content-pane {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}

.bt-main-split.default-theme.splitpanes .splitpanes__pane {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  min-height: 0;
  background: transparent;
}

.bt-main-split.default-theme.splitpanes > .splitpanes__pane.bt-main-split__tree-pane {
  background: hsl(var(--card));
}

.bt-main-split.default-theme.splitpanes .splitpanes__splitter {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.bt-main-split.default-theme.splitpanes--vertical > .splitpanes__splitter {
  width: 4px;
  margin-left: 0;
}

.bt-main-split.default-theme.splitpanes--vertical > .splitpanes__splitter::before,
.bt-main-split.default-theme.splitpanes--vertical > .splitpanes__splitter::after {
  width: 1px;
  height: 120px;
  background-color: hsl(var(--border));
}

.bt-main-split.default-theme.splitpanes--vertical > .splitpanes__splitter:hover::before,
.bt-main-split.default-theme.splitpanes--vertical > .splitpanes__splitter:hover::after {
  background-color: hsl(var(--primary) / 55%);
}

.bt-main-split.default-theme.splitpanes--horizontal > .splitpanes__splitter {
  height: 12px;
  margin-top: 0;
}

.bt-main-split.default-theme.splitpanes--horizontal > .splitpanes__splitter::before,
.bt-main-split.default-theme.splitpanes--horizontal > .splitpanes__splitter::after {
  width: 34px;
  height: 1px;
  background-color: hsl(var(--border));
}

.bt-main-split.default-theme.splitpanes--horizontal > .splitpanes__splitter:hover::before,
.bt-main-split.default-theme.splitpanes--horizontal > .splitpanes__splitter:hover::after {
  background-color: hsl(var(--primary) / 55%);
}

/* ===================== 卡片堆叠 ===================== */

.bt-card-stack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--bt-space-5);
  width: 100%;
  min-height: 0;
  overflow: visible;
}

/* ===================== 树卡片 ===================== */

.bt-tree-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.bt-tree-card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--bt-space-5);
  min-height: 0;
  padding: var(--bt-card-py) var(--bt-card-px);
  overflow: hidden;
}

.bt-tree-card__layout {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.bt-tree-card__section {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

.bt-tree-card__section--tree {
  flex: 1 1 auto;
}

.bt-tree-card__section-header {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.bt-tree-crud-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

/* ===================== 下推目标选择 ===================== */

.bt-push-target-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bt-push-target-list .el-radio-button {
  width: 100%;
}

.bt-push-target-list .el-radio-button__inner {
  width: 100%;
  color: hsl(var(--foreground)) !important;
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--bt-control-radius) !important;
  box-shadow: none !important;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.bt-push-target-list .el-radio-button__inner:hover {
  background: hsl(var(--primary) / 3%) !important;
  border-color: hsl(var(--primary) / 35%) !important;
}

.bt-push-target-list .el-radio-button.is-active .el-radio-button__inner,
.bt-push-target-list .el-radio-button__original-radio:checked + .el-radio-button__inner {
  font-weight: 500 !important;
  color: hsl(var(--primary)) !important;
  background: hsl(var(--primary) / 8%) !important;
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 1px hsl(var(--primary) / 20%) !important;
}

.bt-tree-card__section-title {
  min-width: 0;
  font-size: var(--bt-text-base);
  font-weight: var(--bt-weight-semibold);
  line-height: var(--bt-leading-snug);
  color: hsl(var(--foreground));
  letter-spacing: 0.01em;
}

/* ===================== 分类树 ===================== */

.bt-category-tree {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden auto;
  background: transparent;
}

.bt-category-tree .el-tree-node__content {
  min-height: 1.875rem;
  padding-right: 8px;
  margin-bottom: 2px;
  border-radius: var(--bt-control-radius);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.bt-category-tree .el-tree-node:focus > .el-tree-node__content,
.bt-category-tree .el-tree-node__content:hover {
  background: hsl(var(--accent));
}

/* 选中态高亮（默认启用，可通过 .bt-tree-highlight-hover 移除来关闭） */
.bt-category-tree .el-tree-node.is-current > .el-tree-node__content {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
}

.bt-category-tree > .el-tree-node.is-current > .el-tree-node__content {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
}

/* hover 高亮效果：选中节点 hover 时变为 primary 色（通过 highlightHover prop / bt-tree-highlight-hover class 控制） */
.bt-tree-highlight-hover .bt-category-tree .el-tree-node.is-current > .el-tree-node__content:hover,
.bt-tree-highlight-hover .bt-category-tree .el-tree-node.is-current:focus > .el-tree-node__content {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
}

.bt-category-tree .el-tree-node__expand-icon {
  display: none !important;
}

.bt-category-tree .el-tree-node__label {
  font-size: var(--bt-text-sm);
  line-height: var(--bt-leading-snug);
}

.tree-node-content {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.tree-node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin-left: 10px;
  font-size: var(--bt-text-base);
}

.tree-node-text {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-node-arrow-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--bt-pill-radius);
}

.bt-category-tree .el-tree-node.is-current .tree-node-arrow-button {
  color: hsl(var(--primary-foreground));
}

.tree-node-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.75rem;
  height: 0.75rem;
  font-size: 0.6875rem;
}

.tree-node-arrow-spacer {
  display: inline-block;
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
}

/* ===================== 面板卡片 ===================== */

.bt-panel-card__content {
  padding: var(--bt-card-py) var(--bt-card-px);
}

/* ===================== 关键字输入 ===================== */

.bt-keyword-input .el-input__wrapper {
  min-height: 2rem;
}

.bt-keyword-input .el-input__inner {
  line-height: var(--bt-leading-snug);
}

/* ===================== 工具栏 ===================== */

.bt-action-row,
.bt-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.bt-toolbar-card__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bt-toolbar-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, max-content);
  gap: 14px 20px;
  align-items: center;
}

.bt-toolbar-query {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: end;
}

/* ===================== 状态卡 ===================== */

.bt-status-card {
  width: 100%;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bt-status-card.is-active {
  position: relative;
  border-color: hsl(var(--primary));
  box-shadow: 0 8px 18px hsl(var(--foreground) / 7%);
  transform: translateY(-1px);
}

.bt-status-card__content {
  padding: var(--bt-card-py) var(--bt-dialog-card-px);
}

.bt-status-card__summary {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.bt-status-card__label {
  font-size: var(--bt-text-base);
  font-weight: var(--bt-weight-semibold);
  line-height: var(--bt-leading-normal);
}

.bt-status-card__value {
  font-size: var(--bt-text-2xl);
  font-weight: var(--bt-weight-bold);
  line-height: 1;
  color: hsl(var(--foreground));
}

.bt-status-card--total .bt-status-card__value {
  font-size: var(--bt-text-3xl);
}

/* ===================== 表格卡片 ===================== */

.bt-table-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  overflow: visible;
}

.bt-table-card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.bt-table-card__table-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow: auto hidden;
}

.bt-table-card__table-viewport {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto hidden;
}

.bt-table-card__footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-right: 0;
  background: hsl(var(--card));
  border-top: 1px solid hsl(var(--border));
}

.bt-table-card__summary {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  font-size: var(--bt-text-xs);
  color: hsl(var(--muted-foreground));
}

.bt-table-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  justify-content: flex-end;
}

.bt-table-total {
  font-weight: var(--bt-weight-semibold);
  color: hsl(var(--foreground));
}

/* ===================== 模态框/对话框 ===================== */

.bt-modal-shell.bt-form-dialog,
.bt-modal-shell.bt-detail-dialog {
  --bt-attachment-list-max-height: 252px;
}

/* fa-modal 全屏模式：fullscreen prop 已通过 Tailwind 类处理尺寸，此处仅补充背景色 */
.bt-modal-shell[style*="max-width: 100%"],
.bt-modal-shell[style*="max-width:100%"] {
  background: var(--bt-page-bg);
  border-radius: 0;
}

/* 选择弹框 */
.bt-modal-shell.bt-selection-dialog {
  width: min(1480px, calc(100vw - 64px));
  max-width: calc(100vw - 32px);
  height: min(820px, calc(100vh - 64px));
  max-height: calc(100vh - 32px);
  background: var(--bt-page-bg);
  border-radius: var(--bt-card-radius);
  box-shadow: 0 8px 18px hsl(var(--foreground) / 7%);
}

/* fa-modal 头部（通过 header-class="bt-modal-shell__header" 定位）
 * 完全自包含样式，不依赖 FaModal 的 Tailwind class */
.bt-modal-shell .bt-modal-shell__header {
  flex: 0 0 auto;
  padding: var(--bt-space-1) var(--bt-space-9);
  margin: 0;
  background: hsl(var(--card));
  border-bottom: 1px solid hsl(var(--border));
}

/* 全屏表单/明细弹框：覆盖为 grid 布局 + 320px 侧边栏 */
.bt-modal-shell.bt-form-dialog .bt-modal-shell__body,
.bt-modal-shell.bt-detail-dialog .bt-modal-shell__body {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

/* 所有弹框内容区：滚动容器 + 统一 padding */
.bt-modal-shell .bt-modal-shell__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: var(--bt-card-py) var(--bt-card-px);
  overflow: hidden auto;
  background: hsl(var(--card));
}

/* fa-modal 底部（通过 footer-class="bt-modal-shell__footer" 定位）
 * 完全自包含样式，不依赖 FaModal 的 Tailwind class */
.bt-modal-shell .bt-modal-shell__footer {
  flex: 0 0 auto;
  padding: var(--bt-space-1) var(--bt-space-9);
  background: hsl(var(--card));
  border-top: 1px solid hsl(var(--border));
}

.bt-modal-shell__title-wrap,
.bt-modal-shell__actions {
  min-width: 0;
}

.bt-modal-shell__title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--bt-text-xl);
  font-weight: var(--bt-weight-bold);
  line-height: 1.875rem;
  color: hsl(var(--foreground));
  white-space: nowrap;
}

.bt-form-dialog__status {
  flex: 0 0 auto;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 8%);
  border-color: hsl(var(--primary) / 28%);
}

.bt-form-footer {
  min-width: 0;
}

.bt-form-footer__meta {
  min-width: 0;
}

.bt-form-footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  max-width: 100%;
  margin-left: auto;
}

.bt-form-footer__cancel {
  min-width: var(--bt-btn-min-w);

  /* !important: 覆盖 Element Plus el-button 的默认背景色 */
  background: hsl(var(--card)) !important;
}

.bt-form-footer__submit {
  min-width: var(--bt-btn-min-w-md);

  /* !important: 覆盖 Element Plus el-button 的默认样式 */
  color: hsl(var(--primary)) !important;
  background: hsl(var(--primary) / 8%) !important;
  border-color: hsl(var(--primary) / 40%) !important;
}

.bt-form-footer__submit:hover,
.bt-form-footer__submit:focus-visible {
  /* !important: 覆盖 Element Plus el-button:hover 的默认样式 */
  color: hsl(var(--primary-foreground)) !important;
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
}

.bt-form-footer__save {
  min-width: var(--bt-btn-min-w-lg);
}

.bt-modal-shell__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;

  /* !important: 以下属性覆盖 Element Plus el-dialog__headerbtn 内联样式 */
  min-width: 2.125rem !important;
  height: 2.125rem;
  min-height: 2.125rem !important;
  padding: 0 !important;
  color: hsl(var(--muted-foreground)) !important;
  cursor: pointer;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--bt-pill-radius) !important;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.bt-modal-shell__close:hover {
  /* !important: 覆盖 Element Plus hover 状态 */
  color: hsl(var(--foreground)) !important;
  background: hsl(var(--secondary)) !important;
  border-color: hsl(var(--border)) !important;
}

.bt-selection-dialog__header {
  min-height: 3.625rem;
}

.bt-selection-filter-grid {
  gap: 16px 52px;
}

.bt-selection-filter-grid.fa-schema-form,
.bt-drawer-filter-grid.fa-schema-form {
  --el-form-item-margin-bottom: 0;
}

.bt-selection-filter-grid .el-col,
.bt-drawer-filter-grid .el-col,
.bt-selection-filter-grid .el-form-item__content,
.bt-drawer-filter-grid .el-form-item__content {
  min-width: 0;
}

.bt-selection-filter-grid .el-form-item,
.bt-drawer-filter-grid .el-form-item {
  margin-bottom: 0;
}

.bt-selection-filter-grid .el-form-item__label,
.bt-drawer-filter-grid .el-form-item__label {
  font-size: var(--bt-text-base);
  font-weight: var(--bt-weight-bold);
  line-height: var(--bt-leading-normal);
  color: hsl(var(--foreground));
}

.bt-selection-filter-grid :where(.el-input, .el-select, .el-input-number, .el-cascader),
.bt-drawer-filter-grid :where(.el-input, .el-select, .el-input-number, .el-cascader),
.bt-selection-filter-grid .el-date-editor,
.bt-selection-filter-grid .el-date-editor.el-input,
.bt-selection-filter-grid .el-date-editor.el-input__wrapper,
.bt-drawer-filter-grid .el-date-editor,
.bt-drawer-filter-grid .el-date-editor.el-input,
.bt-drawer-filter-grid .el-date-editor.el-input__wrapper {
  width: 100%;
  max-width: 100%;
}

.bt-selection-filter-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid hsl(var(--border));
}

.bt-selection-table-head {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}

.bt-selection-table-title {
  margin: 0;
  font-size: var(--bt-text-lg);
  font-weight: var(--bt-weight-bold);
  line-height: var(--bt-leading-relaxed);
  color: hsl(var(--foreground));
}

.bt-selection-table-count {
  margin-left: 6px;
  font-size: var(--bt-text-sm);
  font-weight: var(--bt-weight-medium);
  color: hsl(var(--muted-foreground));
}

.bt-selection-grid-frame {
  flex: 1 1 auto;
  min-height: 0;
}

.bt-selection-dialog__footer,
.bt-modal-spread-row.bt-selection-dialog__footer {
  justify-content: flex-end;
  width: 100%;
}

.bt-selection-dialog__footer-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-left: auto;
}

.bt-selection-action--primary {
  min-width: var(--bt-btn-min-w-sm);
}

/* ===================== 抽屉 ===================== */

.bt-drawer {
  /* !important: 覆盖 Element Plus el-drawer 的内联 width 样式 */
  width: min(860px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 24px) !important;
  color: hsl(var(--foreground));
  background: var(--bt-page-bg);
  border-left: 1px solid hsl(var(--border));
  box-shadow: 0 8px 18px hsl(var(--foreground) / 7%);
}

.bt-drawer--attachment {
  /* !important: 覆盖 Element Plus el-drawer 的内联 width 样式 */
  width: min(760px, calc(100vw - 32px)) !important;
  border-right: 1px solid hsl(var(--border));
  border-left: 0;
}

.bt-drawer > .relative {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 0 !important;
  color: hsl(var(--foreground));
  background: var(--bt-page-bg);
}

.bt-drawer__header {
  padding: 0 !important;
  margin: 0;
  background: hsl(var(--card));
  border-bottom: 1px solid hsl(var(--border));
}

.bt-drawer__header-row {
  min-height: 4rem;
  padding: 14px 24px;
}

.bt-drawer__shell {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--bt-space-9);
  min-height: 0;
  padding: var(--bt-space-9) var(--bt-space-11);
  background: var(--bt-page-bg);
}

.bt-drawer__shell--attachment {
  gap: 0;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 18px 22px;
}

.bt-drawer-filter-card__content {
  padding: var(--bt-dialog-card-py) var(--bt-dialog-card-px);
}

.bt-drawer-filter-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid hsl(var(--border));
}

.bt-drawer-section {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.bt-drawer-section--preview {
  flex: 1 1 auto;
}

.bt-drawer-section__title {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0;
  font-size: var(--bt-text-lg);
  font-weight: var(--bt-weight-bold);
  line-height: var(--bt-leading-relaxed);
  color: hsl(var(--foreground));
}

.bt-drawer-section__count {
  font-size: var(--bt-text-sm);
  font-weight: var(--bt-weight-medium);
  color: hsl(var(--muted-foreground));
}

.bt-drawer-grid-frame {
  min-height: 170px;
}

.bt-drawer-grid-frame--preview {
  flex: 1 1 auto;
  min-height: 240px;
}

.bt-drawer__footer {
  padding: 14px 28px !important;
  background: hsl(var(--card));
  border-top: 1px solid hsl(var(--border));
}

.bt-drawer__footer-row {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.bt-drawer__footer-hint {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  font-size: var(--bt-text-base);
  font-weight: var(--bt-weight-semibold);
  color: hsl(var(--muted-foreground));
}

.bt-drawer__hint-marker {
  width: 4px;
  height: 18px;
  background: hsl(var(--primary));
  border-radius: var(--bt-pill-radius);
}

.bt-drawer__footer-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

/* ===================== 附件预览 ===================== */

.bt-attachment-preview {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: auto;
}

.bt-attachment-preview__viewer {
  display: flex;
  width: min(100%, 794px);
  max-height: 100%;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--bt-surface-inner-radius);
  box-shadow: 0 8px 18px hsl(var(--foreground) / 7%);
}

.bt-attachment-preview__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===================== 表单 Shell ===================== */

.bt-form-shell {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-height: 0;
  overflow: visible;
  color: hsl(var(--foreground));
}

/* ---- 有明细表格时的紧凑布局：表单可收缩，明细完整可见 ---- */

/* 填满容器，由 flex 分配空间，不触发外层滚动 */
.bt-form-shell--compact {
  height: 100%;
  overflow: hidden;
}

/* 表单卡片：自然高度，不膨胀；空间不足时收缩并内部滚动 */
.bt-form-shell--compact .bt-form-card--form {
  flex: 0 1 auto;
  min-height: 120px;
  overflow: hidden;
}

.bt-form-shell--compact .bt-form-card--form .bt-form-card__content {
  height: 100%;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* 明细表格卡片：保持自然高度，不参与收缩 */
.bt-form-shell--compact .bt-form-card--detail {
  flex: 0 0 auto;
}

.bt-form-shell__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.bt-form-dialog .bt-form-shell__aside,
.bt-detail-dialog .bt-form-shell__aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  padding: 4px 0;
  overflow: hidden scroll;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.bt-form-dialog .bt-form-shell__aside > *,
.bt-detail-dialog .bt-form-shell__aside > * {
  flex: 0 0 auto;
}

.bt-form-dialog .bt-form-shell__main,
.bt-detail-dialog .bt-form-shell__main {
  min-height: 0;
  max-height: 100%;
  overflow-y: scroll;
}

.bt-detail-attachment-upload {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  min-height: 0;
}

.bt-detail-attachment-upload .fa-attachment-upload__list {
  flex: 0 1 auto;
  min-height: 0;
  max-height: var(--bt-attachment-list-max-height);
}

.bt-detail-attachment-upload .fa-attachment-upload__dropzone {
  flex: 0 0 auto;
}

/* ===================== 模态卡片 ===================== */

.bt-modal-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--bt-card-radius);
  box-shadow: 0 1px 3px 0 hsl(var(--foreground) / 8%), 0 1px 2px -1px hsl(var(--foreground) / 6%);
}

.bt-modal-card__content {
  padding: var(--bt-card-py) var(--bt-card-px);
}

.bt-modal-section-head {
  margin-bottom: 14px;
}

.bt-modal-section-title {
  margin: 0;
  font-size: var(--bt-text-md);
  font-weight: var(--bt-weight-bold);
  line-height: var(--bt-leading-relaxed);
  color: hsl(var(--foreground));
}

.bt-modal-section-title--accent {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.bt-modal-section-title--accent::before {
  width: 4px;
  height: 16px;
  content: "";
  background:
    linear-gradient(
      180deg,
      hsl(var(--primary)),
      hsl(var(--primary) / 72%)
    );
  border-radius: var(--bt-pill-radius);
}

.bt-modal-section-subtitle {
  margin: 0;
  font-size: var(--bt-text-xs);
  line-height: 1.125rem;
  color: hsl(var(--muted-foreground));
}

.bt-modal-scroll {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden auto;
}

.bt-modal-surface {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--bt-surface-radius);
}

.bt-modal-surface--clip {
  overflow: hidden;
}

.bt-modal-surface--soft {
  --bt-modal-surface-bg: hsl(var(--foreground) / 2%);
}

.bt-modal-surface--inset {
  box-shadow: inset 0 1px 0 hsl(var(--foreground) / 4%);
}

.bt-modal-surface--pill {
  --bt-modal-surface-radius: var(--bt-pill-radius);
}

.bt-modal-spread-row {
  display: flex;
  gap: var(--bt-modal-spread-gap, 12px);
  align-items: center;
  justify-content: space-between;
}

.bt-modal-spread-row--wrap {
  flex-wrap: wrap;
}

.bt-modal-spread-row--lg {
  --bt-modal-spread-gap: 18px;
}

.bt-modal-inline-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

/* ===================== 表单样式 ===================== */

.bt-form-side-card__title {
  margin-bottom: 14px;
}

.bt-form .el-form-item__label {
  padding-bottom: 6px;
  font-size: var(--bt-text-base);
  font-weight: var(--bt-weight-bold);
  line-height: var(--bt-leading-snug);
  color: hsl(var(--foreground));
}

.bt-form :where(.el-input, .el-select, .el-input-number, .el-cascader) {
  width: 100%;
  max-width: 100%;
  min-height: 2rem;
}

.bt-form .el-date-editor,
.bt-form .el-date-editor.el-input,
.bt-form .el-date-editor.el-input__wrapper {
  width: 100%;
  max-width: 100%;
}

.bt-form .el-form-item__content {
  min-width: 0;
}

.bt-form .el-col {
  min-width: 0;
}

.bt-form-detail-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

.bt-form-detail-toolbar__button {
  background: hsl(var(--card)) !important;
}

.bt-form-applicant {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
}

.bt-form-applicant__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  font-size: var(--bt-text-lg);
  font-weight: var(--bt-weight-bold);
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
  border-radius: 50%;
}

.bt-form-applicant__label {
  font-size: var(--bt-text-xs);
  line-height: 1.125rem;
  color: hsl(var(--muted-foreground));
}

.bt-form-applicant__name {
  margin-top: 2px;
  font-size: var(--bt-text-base);
  font-weight: var(--bt-weight-bold);
  line-height: var(--bt-leading-snug);
  color: hsl(var(--foreground));
}

.bt-form-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.bt-form-step {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: var(--bt-text-sm);
  font-weight: var(--bt-weight-semibold);
  line-height: var(--bt-leading-snug);
  color: hsl(var(--muted-foreground));
}

.bt-form-step__dot {
  width: 10px;
  height: 10px;
  background: hsl(var(--card));
  border: 2px solid hsl(var(--border));
  border-radius: var(--bt-pill-radius);
}

.bt-form-step.is-active {
  color: hsl(var(--foreground));
}

.bt-form-step.is-active .bt-form-step__dot {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.bt-form-side-card--amount {
  background:
    linear-gradient(
      135deg,
      hsl(var(--primary) / 96%),
      hsl(var(--primary) / 72%)
    );
}

.bt-form-side-card--amount .bt-form-side-card__title {
  color: hsl(var(--primary-foreground) / 72%);
}

.bt-form-amount {
  font-size: var(--bt-text-xl);
  font-weight: var(--bt-weight-extrabold);
  line-height: 2.375rem;
  color: hsl(var(--primary-foreground));
}

.bt-form-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bt-form-summary__row {
  padding: 10px 0;
  font-size: var(--bt-text-sm);
  line-height: var(--bt-leading-snug);
  color: hsl(var(--muted-foreground));
  border-bottom: 1px solid hsl(var(--border));
}

.bt-form-summary__row:last-child {
  border-bottom: 0;
}

.bt-form-summary__row strong {
  min-width: 0;
  max-width: 56%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--bt-text-sm);
  font-weight: var(--bt-weight-bold);
  color: hsl(var(--foreground));
  text-align: right;
  white-space: nowrap;
}

/* ===================== 全局表单 label 样式（限定模板作用域） ===================== */

#bt-page-new-root .el-form-item__label,
.bt-modal-shell .el-form-item__label,
.bt-drawer .el-form-item__label {
  font-size: var(--bt-text-base);
  font-weight: var(--bt-weight-bold);
  color: hsl(var(--foreground));
}

/* ===================== 从 newtest.html 提取的公共样式 ===================== */

/* ---- 指标/看板网格 ---- */

.bt-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.bt-metrics-grid__item,
.bt-status-grid__item {
  display: flex;
  min-width: 0;
}

.bt-metric-panel > :first-child {
  padding: 14px 16px 6px;
}

.bt-metric-panel > :last-child {
  gap: 4px;
  padding: 0 16px 14px;
}

.bt-status-grid__item .bt-status-card,
.bt-metrics-grid__item .bt-metric-panel {
  flex: 1 1 auto;
}

.bt-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.bt-status-card__summary--total {
  display: flex;
  flex-direction: column;
}

.bt-status-card--blue .bt-status-card__label {
  color: hsl(var(--primary));
}

.bt-status-card--green .bt-status-card__label {
  color: var(--el-color-success);
}

.bt-status-card--orange .bt-status-card__label {
  color: var(--el-color-warning);
}

.bt-status-card--red .bt-status-card__label {
  color: var(--el-color-danger);
}

.bt-status-card--gray .bt-status-card__label {
  color: hsl(var(--muted-foreground));
}

/* ===================== 状态卡 shimmer 流光动画 ===================== */

@property --bt-shimmer-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* hover 悬浮效果 */
.bt-status-card:hover {
  background:
    linear-gradient(
      135deg,
      hsl(var(--primary) / 6%),
      hsl(var(--primary) / 2%)
    );
  transform: translateY(-1px);
}

/* shimmer 流光边框（is-active 激活时显示） */
.bt-status-card.is-active::after {
  position: absolute;
  inset: -1px;
  padding: 2px;
  pointer-events: none;
  content: "";
  background:
    conic-gradient(
      from var(--bt-shimmer-angle, 0deg),
      transparent 0%,
      hsl(var(--primary)) 8%,
      transparent 16%
    );
  border-radius: inherit;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  mask-composite: exclude;
  animation: bt-shimmer-spin 3s linear infinite;
}

@keyframes bt-shimmer-spin {
  to {
    --bt-shimmer-angle: 360deg;
  }
}

/* tone 变体覆盖 */
.bt-status-card--orange.is-active {
  border-color: var(--el-color-warning);
}

.bt-status-card--orange.is-active::after {
  background:
    conic-gradient(
      from var(--bt-shimmer-angle, 0deg),
      transparent 0%,
      var(--el-color-warning) 8%,
      transparent 16%
    );
}

.bt-status-card--green.is-active {
  border-color: var(--el-color-success);
}

.bt-status-card--green.is-active::after {
  background:
    conic-gradient(
      from var(--bt-shimmer-angle, 0deg),
      transparent 0%,
      var(--el-color-success) 8%,
      transparent 16%
    );
}

.bt-status-card__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 8px;
}

.bt-status-detail {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  font-size: var(--bt-text-xs);
  line-height: 1.0625rem;
  color: hsl(var(--muted-foreground));
}

.bt-status-detail__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bt-status-detail__value {
  font-weight: var(--bt-weight-semibold);
  color: hsl(var(--foreground));
}

.bt-status-detail.is-badge .bt-status-detail__value {
  min-width: 22px;
  padding: 1px 6px;
  color: hsl(var(--primary));
  text-align: center;
  background: hsl(var(--primary) / 10%);
  border-radius: var(--bt-pill-radius);
}

/* ---- 工具栏按钮 ---- */

.bt-toolbar-card__query {
  min-width: 0;
}

.bt-toolbar-card__action {
  /* !important: 覆盖 Element Plus el-button 默认样式 */
  display: inline-flex !important;
  gap: 4px !important;
  align-items: center;
  justify-content: center;
  height: auto !important;
  min-height: auto !important;
  padding: 0 !important;
  font-size: var(--bt-text-sm);
  font-weight: var(--bt-weight-semibold);
  line-height: var(--bt-leading-snug);
  color: hsl(var(--foreground));
  white-space: nowrap;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.bt-toolbar-card__action:hover {
  color: hsl(var(--primary));
  background: transparent !important;
}

.bt-toolbar-card__icon {
  flex: 0 0 auto;
  margin-left: 0;
  font-size: var(--bt-text-sm);
}

/* ---- el-table 样式覆盖 ---- */

.bt-table {
  width: 100%;
  height: 100%;
}

.bt-table .el-table__header-wrapper th.el-table__cell {
  padding-top: 6px;
  padding-bottom: 6px;
  background: hsl(var(--foreground) / 4%);
}

.bt-table .el-table__cell {
  padding-top: 8px;
  padding-bottom: 8px;
  transition: background-color 0.2s ease;
}

.bt-table .el-table__body tr.el-table__row--striped > td.el-table__cell {
  background: hsl(var(--muted));
}

.bt-table .el-table__body tr.hover-row > td.el-table__cell,
.bt-table .el-table__body tr:hover > td.el-table__cell {
  background: hsl(var(--muted-foreground) / 20%);
}

.bt-table .el-table__body tr.el-table__row--striped.hover-row > td.el-table__cell,
.bt-table .el-table__body tr.el-table__row--striped:hover > td.el-table__cell {
  background: hsl(var(--primary) / 12%);
}

.bt-table .cell {
  line-height: var(--bt-leading-snug);
}

/* ---- 业务树 ---- */

.bt-tree-card__divider {
  flex: 0 0 auto;
  height: 1px;
  background: hsl(var(--border));
}

.bt-biz-strip__toggle {
  flex: 0 0 auto;
  height: auto !important;
  min-height: auto !important;
  padding: 0 4px !important;
  font-size: var(--bt-text-sm);
  font-weight: var(--bt-weight-medium);
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.bt-biz-strip__toggle:hover {
  color: hsl(var(--foreground));
  background: transparent !important;
}

.bt-biz-strip__toggle.is-active {
  color: hsl(var(--foreground));
}

.bt-biz-tree {
  flex: 0 0 auto;
  max-height: 160px;
  padding: 8px;
  overflow: hidden auto;
  background: hsl(var(--secondary) / 30%);
  border: 1px solid hsl(var(--border));
  border-radius: var(--bt-surface-inner-radius);
}

.bt-biz-tree .el-tree-node__content {
  min-height: 1.875rem;
  margin-bottom: 2px;
  border-radius: var(--bt-control-radius-sm);
}

.bt-biz-tree .el-tree-node__content:hover,
.bt-biz-tree .el-tree-node:focus > .el-tree-node__content {
  background: hsl(var(--accent));
}

.bt-biz-tree .el-tree-node__expand-icon {
  display: none !important;
}

.bt-biz-tree .el-tree-node__label {
  font-size: var(--bt-text-sm);
  font-weight: var(--bt-weight-medium);
  line-height: var(--bt-leading-snug);
  color: hsl(var(--foreground));
}

.bt-biz-tree .el-checkbox {
  align-items: center;
}

.bt-biz-tree__label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* ---- 选择弹框 ---- */

.bt-selection-shell {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  min-height: 0;
  padding: 20px 24px 0;
  overflow: auto;
  color: hsl(var(--foreground));
  background: var(--bt-page-bg);
}

/* ===================== 按钮变体 ===================== */

/* 主色增强按钮（带 action-shadow） */
.bt-btn-primary,
.bt-form-footer__save,
.bt-selection-action--primary,
.bt-detail-footer__save,
.bt-dialog-form__footer > div > button:last-child {
  color: hsl(var(--primary-foreground)) !important;
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 10px 22px hsl(var(--foreground) / 12%) !important;
}

.bt-btn-primary:hover,
.bt-btn-primary:focus-visible,
.bt-form-footer__save:hover,
.bt-form-footer__save:focus-visible,
.bt-selection-action--primary:hover,
.bt-selection-action--primary:focus-visible,
.bt-detail-footer__save:hover,
.bt-detail-footer__save:focus-visible,
.bt-dialog-form__footer > div > button:last-child:hover,
.bt-dialog-form__footer > div > button:last-child:focus-visible {
  color: hsl(var(--primary-foreground)) !important;
  background: hsl(var(--primary) / 90%) !important;
  border-color: hsl(var(--primary) / 90%) !important;
}

/* 次要/描边按钮（白底透明边框） */
.bt-btn-ghost,
.bt-detail-table-action--ghost,
.bt-detail-footer__cancel {
  background: hsl(var(--card)) !important;
}

/* 危险按钮（红色描边 + 浅红底） */
.bt-btn-danger,
.bt-detail-table-action--danger,
.bt-detail-footer__reverse-approve {
  color: hsl(var(--destructive)) !important;
  background: hsl(var(--destructive) / 6%) !important;
  border-color: hsl(var(--destructive) / 34%) !important;
}

.bt-btn-danger:hover,
.bt-btn-danger:focus-visible,
.bt-detail-table-action--danger:hover,
.bt-detail-table-action--danger:focus-visible,
.bt-detail-footer__reverse-approve:hover,
.bt-detail-footer__reverse-approve:focus-visible {
  color: hsl(var(--destructive-foreground)) !important;
  background: hsl(var(--destructive)) !important;
  border-color: hsl(var(--destructive)) !important;
}

/* 柔和主色按钮（浅蓝底 + 主色描边） */
.bt-btn-soft-primary,
.bt-detail-footer__submit-approval {
  color: hsl(var(--primary)) !important;
  background: hsl(var(--primary) / 8%) !important;
  border-color: hsl(var(--primary) / 40%) !important;
}

.bt-btn-soft-primary:hover,
.bt-btn-soft-primary:focus-visible,
.bt-detail-footer__submit-approval:hover,
.bt-detail-footer__submit-approval:focus-visible {
  color: hsl(var(--primary-foreground)) !important;
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
}

/* 按钮图标间距 */
.bt-btn-icon {
  margin-right: 6px;
  font-size: var(--bt-text-base);
}

/* Element Plus 按钮变量覆盖（popper 内） */
.bt-theme-popper .el-button--primary {
  --el-button-bg-color: hsl(var(--primary));
  --el-button-border-color: hsl(var(--primary));
  --el-button-text-color: hsl(var(--primary-foreground));
  --el-button-hover-bg-color: hsl(var(--primary) / 90%);
  --el-button-hover-border-color: hsl(var(--primary) / 90%);
  --el-button-active-bg-color: hsl(var(--primary) / 86%);
  --el-button-active-border-color: hsl(var(--primary) / 86%);
}

/* ===================== 表单侧栏 ===================== */

.bt-form-aside {
  display: flex;
  flex-direction: column;
  gap: var(--bt-space-5);
  min-height: 0;
  overflow-y: auto;
}

/* ===================== 工具栏查询区控件宽度 ===================== */

.bt-toolbar-query .el-date-editor,
.bt-toolbar-query .el-input,
.bt-toolbar-query .bt-keyword-input {
  width: 100%;
}

/* ===================== AG Grid 边框重置 ===================== */

/* 选择/明细/抽屉弹框内的 grid 去掉 ag-root-wrapper 默认边框 */

.bt-selection-grid .ag-root-wrapper,
.bt-selection-grid .ag-root-wrapper-body,
.bt-drawer-grid .ag-root-wrapper,
.bt-drawer-grid .ag-root-wrapper-body,
.bt-detail-table .ag-root-wrapper,
.bt-detail-table .ag-root-wrapper-body {
  border: 0;
}

/* ===================== 宽表单弹框 ===================== */

.bt-dialog-form--wide {
  width: 80% !important;
}

.bt-dialog-form--wide .el-col {
  display: flex;
}

.bt-dialog-form--wide .el-form-item {
  width: 100%;
  margin-bottom: 18px;
}

.bt-dialog-form--wide .el-form-item__label {
  font-size: var(--bt-text-base);
  line-height: 2rem;
}

.bt-dialog-form--wide .el-input,
.bt-dialog-form--wide .el-select,
.bt-dialog-form--wide .el-date-editor,
.bt-dialog-form--wide .el-input-number,
.bt-dialog-form--wide .el-cascader {
  width: 100%;
}

/* ===================== 明细描述列表 ===================== */

.bt-detail-descriptions :where(.el-descriptions__body) {
  background: hsl(var(--card));
}

.bt-detail-descriptions :where(.el-descriptions__table) {
  width: 100%;
}

.bt-detail-descriptions :where(.el-descriptions__content.el-descriptions__cell) {
  padding: 14px 16px;
  font-size: var(--bt-text-base);
  font-weight: var(--bt-weight-semibold);
  line-height: var(--bt-leading-normal);
  color: hsl(var(--foreground));
  background: hsl(var(--card));
}

/* ===================== 工作流页面公共样式 ===================== */

/* ---- 内容区容器 ---- */

.bt-content-inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 12px;
  overflow: hidden auto;
}

/* ---- 网格标签（状态标签） ---- */

.bt-grid-tag {
  display: inline-flex;
  align-items: center;
  height: 1.375rem;
  padding: 0 8px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 35%);
  border: 1px solid currentcolor;
  border-radius: var(--bt-control-radius-sm);
}

.bt-grid-tag--primary {
  color: var(--bt-status-primary-color, hsl(var(--primary)));
  background: var(--bt-status-primary-bg, hsl(var(--primary) / 8%));
}

.bt-grid-tag--success {
  color: var(--bt-status-success-color, var(--el-color-success));
  background: var(--bt-status-success-bg, var(--el-color-success-light-9));
}

.bt-grid-tag--warning {
  color: var(--bt-status-warning-color, var(--el-color-warning));
  background: var(--bt-status-warning-bg, var(--el-color-warning-light-9));
}

.bt-grid-tag--danger {
  color: var(--bt-status-danger-color, var(--el-color-danger));
  background: var(--bt-status-danger-bg, var(--el-color-danger-light-9));
}

.bt-grid-tag--info {
  color: var(--bt-status-info-color, var(--el-color-info));
  background: var(--bt-status-info-bg, var(--el-color-info-light-9));
}

.bt-grid-tag--running {
  color: var(--bt-status-running-color, hsl(var(--primary)));
  background: var(--bt-status-running-bg, hsl(var(--primary) / 8%));
}

.bt-grid-tag--completed {
  color: var(--bt-status-completed-color, var(--el-color-success));
  background: var(--bt-status-completed-bg, var(--el-color-success-light-9));
}

.bt-grid-tag--suspended {
  color: var(--bt-status-suspended-color, hsl(32deg 95% 44%));
  background: var(--bt-status-suspended-bg, hsl(32deg 95% 44% / 10%));
}

.bt-grid-tag--terminated {
  color: var(--bt-status-terminated-color, hsl(276deg 68% 52%));
  background: var(--bt-status-terminated-bg, hsl(276deg 68% 52% / 10%));
}

.bt-grid-tag--pending {
  color: var(--bt-status-pending-color, hsl(42deg 96% 42%));
  background: var(--bt-status-pending-bg, hsl(42deg 96% 42% / 12%));
}

.bt-grid-tag--claimed {
  color: var(--bt-status-claimed-color, hsl(var(--primary)));
  background: var(--bt-status-claimed-bg, hsl(var(--primary) / 8%));
}

.bt-grid-tag--overdue {
  color: var(--bt-status-overdue-color, hsl(12deg 86% 42%));
  background: var(--bt-status-overdue-bg, hsl(12deg 86% 42% / 12%));
}

.bt-grid-tag--waiting {
  color: var(--bt-status-waiting-color, var(--el-color-info));
  background: var(--bt-status-waiting-bg, var(--el-color-info-light-9));
}

/* ---- 网格行操作按钮 ---- */

.bt-grid-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
}

.bt-grid-action {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: hsl(var(--primary));
  cursor: pointer;
  background: transparent;
  border: 0;
}

.bt-grid-action:hover {
  color: hsl(var(--primary) / 82%);
}

.bt-grid-action--success {
  color: var(--el-color-success);
}

.bt-grid-action--warning {
  color: var(--el-color-warning);
}

.bt-grid-action--danger {
  color: var(--el-color-danger);
}

.bt-grid-action--info {
  color: var(--el-color-info);
}

/* ---- 空状态 ---- */

.bt-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: hsl(var(--muted-foreground));
}

.bt-empty-state__icon {
  margin-bottom: 12px;
  font-size: 3rem;
  opacity: 0.4;
}

.bt-empty-state__text {
  font-size: 0.875rem;
  line-height: 1.375rem;
}

/* ---- 运行时错误 ---- */

.bt-runtime-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 24px;
  background: var(--bt-page-bg);
}

.bt-runtime-error__card {
  width: min(560px, 100%);
  padding: 28px 32px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--bt-surface-radius);
  box-shadow: 0 1px 3px 0 hsl(var(--foreground) / 8%), 0 1px 2px -1px hsl(var(--foreground) / 6%);
}

.bt-runtime-error__title {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.75rem;
  color: hsl(var(--foreground));
}

.bt-runtime-error__desc {
  margin: 0;
  line-height: 1.8;
  color: hsl(var(--muted-foreground));
}

/* ---- 工作流状态卡变体（补充 bt-status-card） ---- */

.bt-status-card--running .bt-status-card__label {
  color: var(--bt-status-running, hsl(var(--primary)));
}

.bt-status-card--completed .bt-status-card__label {
  color: var(--bt-status-completed, var(--el-color-success));
}

.bt-status-card--warning .bt-status-card__label {
  color: var(--bt-status-warning, var(--el-color-warning));
}

.bt-status-card--danger .bt-status-card__label {
  color: var(--bt-status-danger, var(--el-color-danger));
}

.bt-status-card--muted .bt-status-card__label {
  color: var(--bt-status-muted, hsl(var(--muted-foreground)));
}

/* ---- 工作流搜索图标 ---- */

.bt-toolbar-search-icon {
  color: hsl(var(--muted-foreground));
}

.bt-toolbar-query .el-select .el-select__wrapper {
  min-height: 2rem;
}

/* ===================== 深色主题显式覆盖 ===================== */

/*
 * 以下规则为 .dark 模式下的显式覆盖。
 * 虽然 --bt-* 令牌理论上通过 HSL 变量自动适配，但部分场景
 * （Tailwind 语义类优先级、Element Plus 默认样式覆盖等）
 * 需要显式 .dark 规则确保正确渲染。
 */

/* ---- 表格卡片 footer：底部栏背景（已在下方分页器区域用 !important 加强） ---- */

/* ---- 状态卡片：标签与数值文字 ---- */
.dark .bt-status-card__label {
  color: hsl(var(--foreground));
}

.dark .bt-status-card__value {
  color: hsl(var(--foreground));
}

.dark .bt-status-detail__text {
  color: hsl(var(--muted-foreground));
}

.dark .bt-status-detail__value {
  color: hsl(var(--foreground));
}

.dark .bt-status-card--blue .bt-status-card__label {
  color: hsl(var(--primary));
}

.dark .bt-status-card--green .bt-status-card__label {
  color: var(--el-color-success);
}

.dark .bt-status-card--orange .bt-status-card__label {
  color: var(--el-color-warning);
}

.dark .bt-status-card--red .bt-status-card__label {
  color: var(--el-color-danger);
}

/* ---- 工具栏操作按钮 ---- */
.dark .bt-toolbar-card__action {
  color: hsl(var(--foreground)) !important;
}

.dark .bt-toolbar-card__action:hover {
  color: hsl(var(--primary)) !important;
}

/* ---- 筛选/查询按钮区域 ---- */
.dark .bt-toolbar-query .el-date-editor {
  --el-fill-color-blank: hsl(var(--card));
  --el-border-color: hsl(var(--border));
}

.dark .bt-toolbar-query .el-input__wrapper {
  background-color: hsl(var(--card));
  box-shadow: 0 0 0 1px hsl(var(--border)) inset;
}

.dark .bt-toolbar-query .el-range-input {
  color: hsl(var(--foreground));
}

.dark .bt-toolbar-query .el-range-separator {
  color: hsl(var(--muted-foreground));
}

/* ---- Element Plus 日期选择器弹出面板：深色适配 ---- */
/*
 * 日期面板通过 teleport 渲染到 body，不受 .bt-toolbar-query 作用域限制。
 * Element Plus 没有内置 .dark 主题变量覆盖，需要手动覆盖面板背景、
 * 选中日期、范围选择、today 标记等样式。
 */

/* 面板背景 + 边框 + CSS 变量重定义
 *
 * Element Plus 日期面板结构：
 *   .el-picker__popper.el-popper（teleport 到 body）
 *     └─ .el-picker-panel
 *         └─ .el-date-picker / .el-date-range-picker
 *               ↑ 这里重新定义了所有 --el-datepicker-* 变量
 *
 * CSS 自定义属性规则：子元素上显式声明的变量优先于从父元素继承的。
 * .el-date-range-picker { --el-datepicker-active-color: var(--el-color-primary) }
 * 会覆盖从 .el-picker-panel 继承的同名变量。
 *
 * 因此必须把变量重定义挂在实际声明的元素上（.el-date-picker / .el-date-range-picker），
 * 而非父级 .el-picker-panel。
 */

/* 外层 popper 容器 */
.dark .el-picker__popper.el-popper {
  background: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
  box-shadow: 0 4px 16px hsl(var(--foreground) / 15%) !important;
}

.dark .el-picker__popper.el-popper .el-popper__arrow::before {
  background: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
}

/* 面板外壳 */
.dark .el-picker-panel {
  background: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

.dark .el-picker-panel__footer {
  background: hsl(var(--card)) !important;
  border-top-color: hsl(var(--border)) !important;
}

/* 核心：在 .el-date-picker 和 .el-date-range-picker 上重定义 datepicker 变量
 * 这些元素自身声明了 --el-datepicker-* 变量，必须在此层级覆盖才能生效 */
.dark .el-date-picker,
.dark .el-date-range-picker {
  --el-bg-color-overlay: hsl(var(--card));
  --el-datepicker-inrange-bg-color: hsl(var(--primary) / 14%);
  --el-datepicker-inrange-hover-bg-color: hsl(var(--primary) / 22%);
  --el-datepicker-active-color: hsl(var(--primary));
  --el-datepicker-text-color: hsl(var(--foreground));
  --el-datepicker-off-text-color: hsl(var(--muted-foreground) / 45%);
  --el-datepicker-header-text-color: hsl(var(--foreground));
  --el-datepicker-icon-color: hsl(var(--muted-foreground));
  --el-datepicker-hover-text-color: hsl(var(--primary));
  --el-datepicker-border-color: hsl(var(--border));
  --el-datepicker-inner-border-color: hsl(var(--border) / 60%);
  --el-border-color-extra-light: hsl(var(--primary) / 14%);
  --el-text-color-regular: hsl(var(--foreground));
  --el-text-color-placeholder: hsl(var(--muted-foreground) / 50%);
  --el-text-color-primary: hsl(var(--foreground));
  --el-disabled-border-color: hsl(var(--border) / 50%);
  --el-fill-color-darker: hsl(var(--border));
}

/* 面板标题栏、左右箭头 */
.dark .el-date-picker__header,
.dark .el-date-range-picker__header {
  color: hsl(var(--foreground));
}

.dark .el-picker-panel__icon-btn {
  color: hsl(var(--muted-foreground)) !important;
}

.dark .el-picker-panel__icon-btn:hover {
  color: hsl(var(--foreground)) !important;
}

/* 星期标题行 */
.dark .el-date-table th {
  color: hsl(var(--muted-foreground)) !important;
  border-bottom-color: hsl(var(--border)) !important;
}

/* 普通日期单元格 */
.dark .el-date-table td .el-date-table-cell {
  color: hsl(var(--foreground));
}

.dark .el-date-table td .el-date-table-cell:hover .el-date-table-cell__text {
  background: hsl(var(--muted-foreground) / 15%);
}

/* 非当月日期 */
.dark .el-date-table td.next-month,
.dark .el-date-table td.prev-month {
  color: hsl(var(--muted-foreground) / 50%);
}

/* today 标记 */
.dark .el-date-table td.today .el-date-table-cell__text {
  color: hsl(var(--primary)) !important;
}

/* 选中日期 — 蓝底白字（primary 色） */
.dark .el-date-table td.current:not(.disabled) .el-date-table-cell__text,
.dark .el-month-table td.current:not(.disabled) .el-date-table-cell__text,
.dark .el-year-table td.current:not(.disabled) .el-date-table-cell__text {
  background-color: hsl(var(--primary)) !important;
  color: #fff !important;
}

/* 范围选择：起止日期 */
.dark .el-date-table td.start-date .el-date-table-cell,
.dark .el-date-table td.end-date .el-date-table-cell {
  color: #fff !important;
}

.dark .el-date-table td.start-date .el-date-table-cell__text,
.dark .el-date-table td.end-date .el-date-table-cell__text {
  background-color: hsl(var(--primary)) !important;
  color: #fff !important;
}

/* 范围选择：中间高亮区域 */
.dark .el-date-table td.in-range .el-date-table-cell,
.dark .el-month-table td.in-range .el-date-table-cell,
.dark .el-year-table td.in-range .el-date-table-cell {
  background-color: hsl(var(--primary) / 12%) !important;
}

.dark .el-date-table td.in-range .el-date-table-cell:hover,
.dark .el-month-table td.in-range .el-date-table-cell:hover {
  background-color: hsl(var(--primary) / 20%) !important;
}

/* 周模式下整行选中 */
.dark .el-date-table.is-week-mode .el-date-table__row.current .el-date-table-cell {
  background-color: hsl(var(--primary) / 12%) !important;
}

/* 面板底部按钮 */
.dark .el-picker-panel__btn {
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

.dark .el-picker-panel__shortcut {
  color: hsl(var(--muted-foreground)) !important;
}

.dark .el-picker-panel__shortcut:hover,
.dark .el-picker-panel__shortcut.active {
  color: hsl(var(--primary)) !important;
  background-color: hsl(var(--primary) / 10%) !important;
}

/* popper 箭头 */
.dark .el-popper.is-light {
  background: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
}

.dark .el-popper.is-light .el-popper__arrow::before {
  background: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
}

/* ---- 表格合计行 ---- */
.dark .bt-table-card__summary {
  color: hsl(var(--muted-foreground));
}

.dark .bt-table-total {
  color: hsl(var(--foreground));
}

/* ---- 分页器：覆盖 Tailwind bg-background/border-input 在 .dark 下的渲染 ---- */

/* footer 本身：强制深色背景与边框 */
.dark .bt-table-card__footer {
  background: hsl(var(--card)) !important;
  border-top-color: hsl(var(--border)) !important;
}

/* 分页器整体区域 */
.dark .bt-table-card__meta {
  color: hsl(var(--muted-foreground));
}

/* 分页器按钮（非激活态）：覆盖 Tailwind bg-background / border-input */
.dark .bt-table-card__meta nav button {
  color: hsl(var(--foreground)) !important;
  background-color: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
}

/* 分页器按钮 hover */
.dark .bt-table-card__meta nav button:hover {
  color: hsl(var(--primary)) !important;
  background-color: hsl(var(--accent)) !important;
  border-color: hsl(var(--border)) !important;
}

/* 当前激活页码按钮：覆盖 bg-primary */
.dark .bt-table-card__meta nav button.bg-primary,
.dark .bt-table-card__meta nav button[class*="bg-primary"] {
  color: hsl(var(--primary-foreground)) !important;
  background-color: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
}

/* 禁用态按钮 */
.dark .bt-table-card__meta nav button:disabled {
  color: hsl(var(--muted-foreground) / 50%) !important;
  background-color: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
}

/* 分页器前后省略号 / 文本 */
.dark .bt-table-card__meta .el-text,
.dark .bt-table-card__meta span,
.dark .bt-table-card__meta .el-pagination .el-pagination__total,
.dark .bt-table-card__meta .el-pagination .el-pagination__sizes .el-input__inner,
.dark .bt-table-card__meta .el-pagination .el-pagination__jump {
  color: hsl(var(--muted-foreground));
}

/* 分页器 sizes 下拉框深色适配 */
.dark .bt-table-card__meta .el-select .el-input__wrapper {
  background-color: hsl(var(--card));
  box-shadow: 0 0 0 1px hsl(var(--border)) inset;
}

/* 分页器 jumper 输入框深色适配 */
.dark .bt-table-card__meta .el-pagination__jump .el-input__wrapper {
  background-color: hsl(var(--card));
  box-shadow: 0 0 0 1px hsl(var(--border)) inset;
}

/* ---- AG Grid：深色主题适配 ---- */
/*
 * AG Grid 的 ag-theme-balham-dark 已自带正确的深色变量（--ag-background-color: #2d3436 等），
 * 不需要覆盖。需要覆盖的是 scoped CSS（.fa-ag-grid[data-v-28eb4253]）中
 * 使用 --bt-* 令牌的地方，这些令牌在 .dark 下可能解析不正确。
 *
 * scoped 属性选择器 [data-v-28eb4253] 的特异性高于普通类选择器，
 * 因此所有覆盖规则都加 !important。
 */

/* 表头：背景、文字颜色 */
.dark .fa-ag-grid[data-v-28eb4253] .ag-header {
  background: hsl(var(--card)) !important;
  border-bottom-color: hsl(var(--border) / 60%) !important;
}

.dark .fa-ag-grid[data-v-28eb4253] .ag-header-cell,
.dark .fa-ag-grid[data-v-28eb4253] .ag-header-cell-moving {
  background: hsl(var(--card)) !important;
  border-right-color: hsl(var(--border) / 40%) !important;
}

.dark .fa-ag-grid[data-v-28eb4253] .ag-header-cell-label {
  color: hsl(var(--muted-foreground)) !important;
}

.dark .fa-ag-grid[data-v-28eb4253] .ag-header-cell-text {
  color: hsl(var(--foreground)) !important;
}

/* 表格内容区：统一深色行背景
 *
 * vendor scoped CSS 在 .ag-cell 上直接设置了 background 属性：
 *   .ag-row-odd .ag-cell { background: var(--bt-grid-row-alt-bg) }
 *   .ag-row-even .ag-cell { background: hsl(var(--card)) }
 * 同时 .ag-row 有 background-color: var(--ag-data-background-color)，
 * 而 scoped CSS 把 --ag-background-color 映射到了 --bt-surface-bg。
 *
 * 策略：在 .dark 下同时覆盖 .ag-body 容器、.ag-row 行、.ag-cell 单元格的背景，
 * 使用 hsl(var(--card)) 直接引用 foundation 令牌，不经过 --bt-* 中间令牌。
 */

/* 1. 表格主体容器背景 */
.dark .fa-ag-grid[data-v-28eb4253] .ag-body,
.dark .fa-ag-grid[data-v-28eb4253] .ag-body-viewport,
.dark .fa-ag-grid[data-v-28eb4253] .ag-center-cols-container {
  background-color: hsl(var(--card)) !important;
}

/* 2. 行背景 + 文字颜色：覆盖 .ag-row 的 background-color 和 color（来自 AG Grid 核心） */
.dark .fa-ag-grid[data-v-28eb4253] .ag-row {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  border-bottom-color: hsl(var(--border) / 30%) !important;
}

/* 3. 奇数行用稍亮的 muted 色区分 */
.dark .fa-ag-grid[data-v-28eb4253] .ag-row-odd {
  background-color: hsl(var(--muted)) !important;
}

/* 4. 单元格背景透明，让行背景色透出来 */
.dark .fa-ag-grid[data-v-28eb4253] .ag-row-odd .ag-cell {
  background: transparent !important;
}
.dark .fa-ag-grid[data-v-28eb4253] .ag-row-even .ag-cell {
  background: transparent !important;
}

/* 5. 悬停行 — 用 foreground 低透明度产生明显的亮色反馈 */
.dark .fa-ag-grid[data-v-28eb4253] .ag-row-hover .ag-cell {
  background: hsl(var(--foreground) / 10%) !important;
  border-right-color: hsl(var(--border) / 50%) !important;
}

/* 6. 单元格文字颜色 + 边框 */
.dark .fa-ag-grid[data-v-28eb4253] .ag-cell {
  color: hsl(var(--foreground)) !important;
  border-right-color: hsl(var(--border) / 20%) !important;
}

/* 空状态 */
.dark .fa-ag-grid[data-v-28eb4253] .ag-overlay-no-rows-center {
  color: hsl(var(--muted-foreground));
}

/* AG Grid 内置滚动条深色适配 */
.dark .fa-ag-grid[data-v-28eb4253] .ag-body-vertical-scroll,
.dark .fa-ag-grid[data-v-28eb4253] .ag-body-horizontal-scroll {
  scrollbar-color: hsl(var(--muted-foreground) / 40%) transparent !important;
}

.dark .fa-ag-grid[data-v-28eb4253] .ag-body-vertical-scroll::-webkit-scrollbar,
.dark .fa-ag-grid[data-v-28eb4253] .ag-body-horizontal-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark .fa-ag-grid[data-v-28eb4253] .ag-body-vertical-scroll::-webkit-scrollbar-thumb,
.dark .fa-ag-grid[data-v-28eb4253] .ag-body-horizontal-scroll::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 35%);
  border-radius: 4px;
}

.dark .fa-ag-grid[data-v-28eb4253] .ag-body-vertical-scroll::-webkit-scrollbar-track,
.dark .fa-ag-grid[data-v-28eb4253] .ag-body-horizontal-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* AG Grid 行号列和选择列深色适配 */
.dark .fa-ag-grid[data-v-28eb4253] .ag-row-number-cell {
  color: hsl(var(--muted-foreground));
}

/* AG Grid 选中行 */
.dark .fa-ag-grid[data-v-28eb4253] .ag-row-selected .ag-cell {
  background: hsl(var(--primary) / 12%) !important;
}

/* AG Grid checkbox 在深色下的适配 */
.dark .fa-ag-grid[data-v-28eb4253] .ag-checkbox-input-wrapper {
  background-color: hsl(var(--card));
  border-color: hsl(var(--border));
}

/* ---- 也兼容无 scoped 属性的 fa-ag-grid（其他场景） ---- */
.dark .fa-ag-grid .ag-header {
  background: hsl(var(--card)) !important;
}

.dark .fa-ag-grid .ag-header-cell-label {
  color: hsl(var(--muted-foreground)) !important;
}

.dark .fa-ag-grid .ag-header-cell-text {
  color: hsl(var(--foreground)) !important;
}

.dark .fa-ag-grid .ag-row {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
}

.dark .fa-ag-grid .ag-row-odd {
  background-color: hsl(var(--muted)) !important;
}

.dark .fa-ag-grid .ag-row-odd .ag-cell,
.dark .fa-ag-grid .ag-row-even .ag-cell {
  background: transparent !important;
  color: hsl(var(--foreground)) !important;
}

.dark .fa-ag-grid .ag-overlay-no-rows-center {
  color: hsl(var(--muted-foreground));
}

/* ---- 模态框 / 抽屉：深色主题覆盖 ----
 *
 * 清除 --bt-* 颜色令牌层后，业务组件直接使用 hsl(var(--card)) 等基础变量，
 * 深色模式通过 foundation CSS 的 html.dark [data-theme=default] 自动生效。
 *
 * 此处仅保留因以下原因仍需手动覆盖的规则：
 *   1. Tailwind 工具类 — 消费层不经过 Tailwind JIT，.dark 下需手动解析
 *   2. Element Plus 组件 — EP 变量体系独立于 foundation，需显式覆盖
 *   3. 抽屉内部容器 — UMD 组件内的内联样式优先级问题
 */

/* 模态框 Tailwind 类覆盖 — 这些类来自 fa-modal 组件模板 */
.dark .bt-modal-shell.bg-background {
  background-color: hsl(var(--background)) !important;
}

.dark .bt-modal-shell .border,
.dark .bt-modal-shell.border {
  border-color: hsl(var(--border)) !important;
}

/* 抽屉内部容器 */
.dark .bt-drawer > .relative {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* 模态框/抽屉内的 Tailwind 按钮类 */
.dark .bt-modal-shell .bg-primary,
.dark .bt-drawer .bg-primary {
  background-color: hsl(var(--primary)) !important;
}

.dark .bt-modal-shell .text-primary-foreground,
.dark .bt-drawer .text-primary-foreground {
  color: hsl(var(--primary-foreground)) !important;
}

.dark .bt-modal-shell .border-input,
.dark .bt-drawer .border-input {
  border-color: hsl(var(--border)) !important;
}

.dark .bt-modal-shell .bg-accent,
.dark .bt-drawer .bg-accent {
  background-color: hsl(var(--accent)) !important;
}

.dark .bt-modal-shell .text-accent-foreground,
.dark .bt-drawer .text-accent-foreground {
  color: hsl(var(--accent-foreground)) !important;
}

.dark .bt-modal-shell .text-muted-foreground,
.dark .bt-drawer .text-muted-foreground {
  color: hsl(var(--muted-foreground)) !important;
}

/* 模态框/抽屉内的遮罩层 */
.dark .bt-modal-shell .bg-popover\/75,
.dark .bt-drawer .bg-popover\/75 {
  background-color: hsl(var(--card) / 75%) !important;
}

/* 模态框/抽屉内的 radio-button 组（Element Plus）
 * 通过重定义 EP 变量让所有状态自动适配，同时用 !important 兜底 */
.dark .bt-modal-shell .el-radio-group,
.dark .bt-drawer .el-radio-group {
  --el-fill-color-blank: hsl(var(--card));
  --el-text-color-regular: hsl(var(--foreground));
  --el-border-color: hsl(var(--border));
  --el-border-color-light: hsl(var(--border) / 60%);
  --el-color-primary: hsl(var(--primary));
  --el-color-white: #fff;
}

.dark .bt-modal-shell .el-radio-button__inner,
.dark .bt-drawer .el-radio-button__inner {
  background-color: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}

.dark .bt-modal-shell .el-radio-button__inner:hover,
.dark .bt-drawer .el-radio-button__inner:hover {
  color: hsl(var(--primary)) !important;
}

.dark .bt-modal-shell .el-radio-button__original-radio:checked + .el-radio-button__inner,
.dark .bt-drawer .el-radio-button__original-radio:checked + .el-radio-button__inner {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: #fff;
}

/* ---- 表单标签（Element Plus） ---- */
.dark #bt-page-new-root .el-form-item__label,
.dark .bt-modal-shell .el-form-item__label,
.dark .bt-drawer .el-form-item__label {
  color: hsl(var(--foreground));
}

/* ---- 卡片内部工具栏 grid 背景 ---- */
.dark .bt-toolbar-grid {
  background: transparent;
}
