/* ---------- 网格 ---------- */

/*
   flex链的最后两个链接文件标题描述，它们丢失了：.atlas-grid和其中的DxGrid没有任何规则，
   所以网格按其行来调大小。一页五十则跑过窗口底部，带着分页器，无任何滚动 — 行不过度任何东西，
   它们使其容器更高。

   给定明确高度网格自己做其余的：标头粘贴、行在其和分页器之间滚动、分页器保持屏幕上。

   两者上min-height: 0，出于常见原因 — flex项默认为min-height: auto且拒绝缩小至低于
   其内容，这会撤销此边界存在的意图。
*/
.atlas-grid {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.atlas-grid-inner {
  flex: 1 1 auto;
  min-height: 0;
}

/*
   TreeList，同样的交易。它直接坐在.atlas-view-body中没有列表页使用的.atlas-grid包装器，
   没有其自己的规则它按行调大小："全部展开"将框扩大至窗口底部以下且无任何滚动，
   因为无任何东西过度任何东西。
*/
.atlas-treelist {
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- grid toolbar ---------- */

/*
   每个网格上方一个flex行，由按钮而非DxToolbar构建。

   工具栏项作为CSS类取其图标且此应用的图标在内联sprite中是<symbol>，
   所以工具栏通过atlas-ico-*掩码绘制它们 — 这起作用，但项出现更平和更拥挤
   比shell使用的按钮。按钮作为子元素取图标并匹配应用栏和标签条，这是页面
   实际意图看起来的样子。

   对任何想将此类放回DxToolbar的人的注意：别。组件测量其自身宽度决定什么配合，
   具有覆盖的布局它测量无，断定无配合，将每个命令折叠到溢出菜单 — 保留一个
   带单个"⋯"的栏。

   命令坐在开始处其旁边是它们作用的搜索，视图控制 — 刷新、导出、列选择器 —
   被推至由间隔符远端，所以两个组从不与按钮显示和消失的签入用户权限交换地点。
*/
.atlas-gridbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.375rem 0.5rem;
  flex-wrap: wrap;
}

/*
   栏中除了间隔符外无任何东西增长。没有这个一个视图下拉的编辑器 — 用户列表上的角色过滤器 —
   取空闲空间，间隔符后的控制被推到其自己的线上。
*/
.atlas-gridbar > * {
  flex: 0 0 auto;
}

.atlas-gridbar-spacer {
  flex: 1 1 auto;
}

.atlas-gridbar-search {
  width: 240px;
}

/* 任何视图下拉到栏中的编辑器。这个和搜索框都需要明确宽度：DevExpress编辑器是
   块元素且在flex行中全宽布局，这将间隔符后的一切推到其自己的线上。 */
.atlas-gridbar-filter {
  width: 180px;
}

/* 时间戳列的过滤菜单（AppTimeRangeFilter）：下拉大小到其内容，所以日期范围
   表单命名其自己的宽度和呼吸空间。 */
.app-time-filter {
  width: 260px;
  padding: 8px 12px;
}

/* 图标和其标签是一个对象，所以它们获一个间隔且从不彼此分开包装。 */
.atlas-gridbar-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

/*
   右端的视图控制 — 刷新、导出、列选择器 — 作为工具栏组：图标在标签上、
   文本风格、紧凑。按钮携带无填充，所以它活动的DxButton是Link；子内容
   只需垂直堆叠且停止标签包装。
*/
.atlas-gridbar-vbtn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 3rem;
  padding: 0.15rem 0.4rem;
  line-height: 1.1;
  white-space: nowrap;
}

/* 标签保持安静且中立；颜色是图标的工作。 */
.atlas-gridbar-vbtn > span {
  font-size: 0.75rem;
  color: var(--dxds-color-content-neutral-subdued-rest);
}

/* 身份列的单元格，呈现为链接风格DxButton到编辑表单代替尾随操作列。
   按钮基元带其自己的填充和工具栏大小的min-height；去掉这里所以文本
   坐在与其他单元格内联且继承行的字体。颜色留给DxButton链接风格 —
   主题自己的链接重音 — 而不是手工设置。 */
.atlas-grid-link.dxbl-btn {
  padding: 0;
  border: 0;
  min-height: 0;
  font: inherit;
  vertical-align: baseline;
  cursor: pointer;

}

.atlas-grid-link.dxbl-btn:hover,
.atlas-grid-link.dxbl-btn:focus-visible {
  text-decoration: underline;
}

/* 组合框打开的弹出。DevExpress作为类而非参数取高度，所以过去是`Height="240px"`的
   上限活在这里。 */
.atlas-combo-popup {
  max-height: 280px;
}

/* 一个DxDropDownBox主体主持树选择器（上级节点字段）：上限且如组合弹出滚动，
   为树的缩进留出空间。 */
.atlas-tree-popup {
  min-width: 320px;
  max-height: 340px;
  overflow-y: auto;
}

/* ---------- Blazor的内置错误栏 ---------- */

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0.6rem 1.25rem;
  background: var(--dxds-color-surface-warning-subdued-rest);
  color: var(--dxds-color-content-warning-default-rest);
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}


/* 下拉项的图标和标签作为一个对象 — AtlasIcon svg是内联内容，所以没有这个
   字形坐在文本基线上。 */
.atlas-dropitem {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* DropDownButton无选择模型，所以是当前选择的项标记自己：权重加尾随检查，
   Fluent菜单说"this one"的方式。标记在标签上，不在项 — 弹出自己的背景
   属于悬停和焦点。 */
.atlas-dropitem--current {
  font-weight: 600;
}

.atlas-dropitem-check {
  margin-inline-start: 0.25rem;
}

/* 导出下拉的面坐在两个轮廓DxButtons之间；包装的按钮DropDownButton呈现
   错过它们的悬停表面，所以它在这里获相同的。 */
.atlas-gridbar .dxbl-btn-dropdown > .dxbl-btn:hover {
  background-color: var(--dxds-color-surface-neutral-default-hovered);
}