/* ---------- CRUD 表单页面 ---------- */

/* 表单以标签打开，所以它们重用视图框并仅添加固定页脚：
   无论字段列表有多长，保存和取消必须保持可到达。 */
.atlas-form-body {
  max-width: 46rem;
  padding-block: 0.5rem;
}

.atlas-form-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--dxds-color-border-neutral-default-rest);
}

/* 与登录错误相同的填充处理：一个对比对正确，在两个色板中都存活。 */
.atlas-form-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 4px;
  /* -compound-on-surface- 在两种模式下都是 neutral-10，这是饱和填充需要的：
     调色板本身没有发布"危险上的内容"配对。不是 -inverted-，这是陷阱——
     那个随着模式翻转，在暗色样本中会变成深-红。(这是 content-neutral-static-rest
     直到 26.1 删除了该层；相同的值，两种模式。) */
  background-color: var(--dxds-color-surface-danger-default-rest);
  color: var(--dxds-color-content-neutral-compound-on-surface-rest);
  font-size: 0.875rem;
}

/* 一个字段行：标签在控件上方，控件拉伸到列宽，所以混合编辑器的表单仍然对齐。 */
.atlas-field-row {
  margin-bottom: var(--atlas-field-row-gap);
}

.atlas-field-row > label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--atlas-label-font-size);
  font-weight: 600;
}

.atlas-field-hint {
  margin-top: 0.25rem;
  font-size: var(--atlas-hint-font-size);
  color: var(--dxds-color-content-neutral-subdued-rest);
}

/* 两个字段在宽视口上并排，无空间时堆叠。 */
.atlas-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0 1rem;
}

/*
   角色表单内的权限树需要一个有界的可滚动框——树很高，页脚必须保持在视图中——
   但它也是表单上唯一值得滚动的东西，所以它采用视口给它的东西。四个级别深度
   （模块、组、页面、操作）意味着任何大小的角色都会超过固定高度，它上面的
   六个短字段不需要这个空间。

   仅声明一次。文件中曾有第二个 .atlas-permission-tree 设置不同的 max-height，
   所以应用的高度取决于源代码顺序而不是任何人决定的。
*/
.atlas-permission-tree {
  min-height: 28rem;
  max-height: min(70vh, 44rem);
  overflow: auto;
  padding: 0.5rem;
  border: 1px solid var(--dxds-color-border-neutral-default-rest);
  border-radius: 4px;
}


/* 表单权限树上方的展开/折叠对。 */
.atlas-treebar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* 任务编辑器：标签页携带自己的顶部内边距，所以字段清除标签栏。 */
.atlas-tab-form {
  padding-block: 0.75rem;
}

/* 分组编辑器内的副标题（如提交材料、众筹、领取条件）。 */
.atlas-form-heading {
  margin: 1rem 0 0.5rem;
  font-size: var(--atlas-label-font-size);
  font-weight: 600;
  color: var(--dxds-color-content-neutral-subdued-rest);
}

/* 奖励子编辑器——始终打开的输入的紧凑表格。如果列很宽就在其内部滚动，所以表单体永不获得滚动条。 */
.atlas-reward-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-x: auto;
}

.atlas-reward-table {
  width: 100%;
  border-collapse: collapse;
}

.atlas-reward-table th {
  text-align: left;
  padding: 0.25rem 0.5rem 0.25rem 0;
  font-size: var(--atlas-hint-font-size);
  font-weight: 600;
  color: var(--dxds-color-content-neutral-subdued-rest);
}

.atlas-reward-table td {
  padding: 0.25rem 0.5rem 0.25rem 0;
  vertical-align: top;
}

.atlas-reward-empty {
  padding: 0.75rem 0;
  color: var(--dxds-color-content-neutral-subdued-rest);
}

/* ---------- 基于卡片的复杂表单（XAF 风格：白色卡片、宽、标签化）---------- */

/* 选择加入宽体：复杂表单使用全宽，不是 46rem 阅读列。 */
.atlas-form-body--wide {
  max-width: none;
}

/* 分组表单一个部分的白色卡片。白色表面 + 边框，永不灰色填充（参见面板规则）。 */
.atlas-form-card {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem 1.25rem;
  border: 1px solid var(--dxds-color-border-neutral-default-rest);
  border-radius: 4px;
  background-color: var(--dxds-color-surface-neutral-default-rest);
}

/* 其主体是标签主机的卡片——标签带来自己的内边距。 */
.atlas-form-card--flush {
  padding: 0;
  overflow: hidden;
}

.atlas-form-card-title {
  margin: 0 0 0.85rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* 水平字段：标签在左边，控件填充其余。宽视口上每行两个字段对，无空间时一个。 */
.atlas-hform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: 0.65rem 2rem;
}

.atlas-hfield {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.atlas-hfield > label {
  flex: 0 0 7rem;
  font-size: var(--atlas-label-font-size);
  font-weight: 600;
}

/* 最大化控件宽度——无论什么编辑器位于标签旁边都会填充行。 */
.atlas-hfield > :not(label) {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/* 复选框不拉伸；它靠在其标签上。 */
.atlas-hfield--check > :not(label) {
  flex: 0 0 auto;
  width: auto;
}

/* 较高的控件（图像选择器的缩略图）在标签位于行顶部时读起来更好，而不是与它们垂直居中。 */
.atlas-hfield--top {
  align-items: flex-start;
}

/* 表单项内编辑器位置显示的只读值（如审计评论页面），大小调整为在编辑器基线上。 */
.atlas-readonly-value {
  display: inline-block;
  padding-block: 0.35rem;
  color: var(--dxds-color-content-neutral-default-rest);
  word-break: break-word;
}

/* 跨越整个卡片并堆叠的字段（标签上方）——用于备忘录、LangsEditor 和任何带有提示的东西。 */
.atlas-hfield--full {
  grid-column: 1 / -1;
  display: block;
}

.atlas-hfield--full > label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: var(--atlas-label-font-size);
  font-weight: 600;
}

.atlas-hfield--full > :not(label) {
  width: 100%;
}

/* KYC 审查：验证审查页面上显示的 ID/自拍图像。 */
.atlas-kyc-images {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.atlas-kyc-image {
  margin: 0;
  max-width: 16rem;
}

.atlas-kyc-image img {
  width: 100%;
  border: 1px solid var(--dxds-color-border-neutral-default-rest);
  border-radius: 4px;
}

.atlas-kyc-image figcaption {
  margin-top: 0.25rem;
  font-size: var(--atlas-hint-font-size);
  color: var(--dxds-color-content-neutral-subdued-rest);
  text-align: center;
}