/* ---------- 视图脚手架 ---------- */

/* 每个视图都是固定头部加占用其余部分的正文。需要滚动的视图选择加入 --scroll；
   数据视图将滚动留给网格。 */
.atlas-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 1rem 1.25rem;
  gap: 0.75rem;
}

.atlas-view-header {
  flex: 0 0 auto;
}

.atlas-view-header h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.atlas-view-subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.875rem;
  color: var(--dxds-color-content-neutral-subdued-rest);
}

/* 仅垂直滚动。overflow-x 显式设置：仅使用 overflow-y:auto 的 x 轴也会计算为 auto，
   DevExpress FormLayout 的负边距网格行（略宽于容器）会引起杂散水平滚动条。 */
.atlas-view-body--scroll {
  overflow-y: auto;
  overflow-x: hidden;
}

.atlas-muted {
  color: var(--dxds-color-content-neutral-subdued-rest);
}

.atlas-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--dxds-color-content-neutral-subdued-rest);
}

/* ---------- 仪表板瓷砖 ---------- */

.atlas-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}.atlas-tile-value {
   font-size: 2rem;
   font-weight: 600;
   line-height: 1.2;
 }

.atlas-tile-caption {
  color: var(--dxds-color-content-neutral-subdued-rest);
  font-size: 0.85rem;
}

.atlas-next-steps ul {
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.9;
}

/* ---------- 无 chrome 页面（错误、未找到）---------- */

.atlas-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
}

/*
   这些页面所在的表面。它曾经来自套件的卡片；没有 DevExpress 等价物，
   所以三个空白页面在此描述一次，而不是每个都手动滚动面板。
*/
.atlas-blank-card {
  max-width: 32rem;
  padding: 1.5rem;
  border: 1px solid var(--dxds-color-border-neutral-default-rest);
  border-radius: var(--dxds-border-radius-40, 4px);
  background-color: var(--dxds-color-surface-neutral-default-rest);
}

/* 在视图内，不是在其自己的画布上居中——占位符页面。 */
.atlas-blank-card--wide {
  max-width: none;
}

.atlas-blank-card-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.atlas-blank-card-header {
  margin-bottom: 0.75rem;
}

.atlas-blank-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}


/* 行操作作为一个对象（作业和会话页面）。 */
.atlas-job-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* 嵌入式同源页面（Scalar API 参考）填充标签。 */
.atlas-embed-frame {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  border: 0;
  border-radius: 4px;
}

/* ---------- 仪表板图表 ---------- */

/* 十二列，所以面板可以采用 8/4 和 6/6 分割；窄窗口上所有内容堆叠。
   KPI 瓷砖重用 .atlas-tile 并在此声称其范围。 */
.atlas-dash {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.atlas-dash > * {
  grid-column: span 12;
  min-width: 0;
}

@media (min-width: 900px) {
  .atlas-dash-kpi { grid-column: span 3; }
  .atlas-dash-span8 { grid-column: span 8; }
  .atlas-dash-span6 { grid-column: span 6; }
  .atlas-dash-span4 { grid-column: span 4; }
}

/* 图表卡片穿着与 KPI 瓷砖相同的外壳：白色、有边框、安静。 */
.atlas-dash-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--dxds-color-border-neutral-default-rest);
  border-radius: 6px;
  background-color: var(--dxds-color-surface-neutral-default-rest);
}

.atlas-dash-card-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 600;
}

.atlas-dash-card-sub {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--dxds-color-content-neutral-subdued-rest);
}

.atlas-chart {
  width: 100%;
  height: 280px;
}

.atlas-chart-tip {
  padding: 0.4rem 0.6rem;
  font-size: 0.8125rem;
}

/* KPI 趋势芯片：语义状态颜色携带方向，仅文本所以瓷砖保持安静。推到行的末尾。 */
.atlas-delta {
  margin-inline-start: auto;
  font-size: 0.75rem;
  font-weight: 600;
}

.atlas-delta--up { color: #15803d; }
.atlas-delta--down { color: #b91c1c; }

/* 承载完整网格的标签窗格（翻译字典）：填充标签主体并给内容一点呼吸空间。 */
.atlas-fill-tabs {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.atlas-tabpane {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  flex: 1 1 auto;
  padding-top: 0.75rem;
}

/* DxTabs 承载全高网格：标签包装器及其内容面板必须向下传递高度，
   或者网格没有有界框而页面滚动而不是网格。 */
.atlas-fill-tabs.dxbl-tabs,
.atlas-fill-tabs .dxbl-tabs-content,
.atlas-fill-tabs .dxbl-tabs-content-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.atlas-i18n-dirty {
  align-self: center;
  font-size: 0.8125rem;
  color: var(--dxds-color-content-warning-default-rest);
}

.atlas-i18n-dirty--hidden {
  visibility: hidden;
}

.atlas-i18n-edit-form {
  max-width: 72rem;
  padding-block: 0.5rem;
}

.atlas-i18n-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0 1rem;
}

.atlas-i18n-edit-form .dxbl-text-edit,
.atlas-i18n-edit-form .dxbl-spin-edit,
.atlas-i18n-edit-form .dxbl-memo {
  width: 100%;
}

/* 只读详情（账户详情）：每个标签承载一个小网格，有一点顶部空间。 */
.atlas-detail-tabpane {
  padding-top: 0.75rem;
}

/* ---------- 系统监控 / Redis 监控 ---------- */

/* 跨度类沿用上方 .atlas-dash 的既有集合：span6 在媒体查询里，整行是默认（span 12），
   监控页不需要新的跨度规则。 */

/* 磁盘使用率：细槽 + 主色填充条，数字叠在旁边——不引第三方进度条。 */
.atlas-monitor-usage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 8rem;
  height: 0.9rem;
}

.atlas-monitor-usage-bar {
  height: 6px;
  flex: none;
  max-width: calc(100% - 3.5rem);
  border-radius: 999px;
  background-color: var(--dxds-color-border-primary-compound-rest);
}

.atlas-monitor-usage span {
  font-size: 0.75rem;
  color: var(--dxds-color-content-neutral-subdued-rest);
  font-variant-numeric: tabular-nums;
}

.atlas-monitor-searchrow {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.atlas-monitor-searchrow .dxbl-text-edit {
  flex: 1 1 auto;
}

/* Monaco 只读预览：固定高度，编辑器自身滚动；边框与网格同语汇。 */
.atlas-code-editor {
  height: 320px;
  border: 1px solid var(--dxds-color-border-neutral-subdued-rest);
  border-radius: 4px;
  overflow: hidden;
}

/* 库选择器：定宽，不与模式输入框抢伸缩。 */
.atlas-monitor-db {
  flex: 0 0 10rem;
}