/* ---------- 外壳 ---------- */

.atlas-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Chrome，不是品牌：中性表面，下面有一条细线。无阴影——Fluent 为瞬态表面（弹出框、对话框）
   保留高度，不是永久结构。

   栏的高度来自其内部的控件，不是其自己的内边距，所以内边距近乎为零，
   行被锁定为紧凑的 44px。 */
.atlas-appbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  z-index: 3;
  height: 3rem;
  padding-inline: 0.375rem;
  /* -default-，不是 -subdued-：subdued 边框 token 解析为表面颜色本身，
     这是你看不到的细线。 */
  border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
  background-color: var(--dxds-color-surface-neutral-default-rest);
}

/* 汉堡包是应该读起来比栏更大的控件：字形增长而按钮自己的内边距缩小，
   所以更大的图标不会增加额外的栏高度。 */
.atlas-menubutton {
}.atlas-brand {
   font-size: 1.05rem;
   font-weight: 600;
   letter-spacing: 0.02em;
  font-style: normal;
 }

/* 品牌标志与文字标记同排。高度锁在字号附近而不设宽度——方形或横版 logo 都
   按比例收进 44px 的栏里，不许它撑高。 */
.atlas-brand-logo {
  display: block;
  height: 1.375rem;
  width: auto;
  margin-right: 0.5rem;
}

.atlas-brand-sub {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  color: var(--dxds-color-content-neutral-subdued-rest);
  font-style: normal;

}

/* 模块名称是栏的主要功能，所以它得到次要操作没有的权重。 */
.atlas-modulebutton-label {
  font-weight: 600;
}

/* 在切换器弹出框内的相同处理：你所在的模块按栏命名的方式命名，
   所以按钮和列表一目了然。

   不是主要 token。那些被调整为坐在应用表面上，其下的项目被着色——
   在暗黑模式中两个蓝色足够接近以至于标签停止可读。content-neutral 是
   调色板对"表面上的文本"的答案，所以它在两种模式下保持对比度并让权重单独
   传达意义。 */
.atlas-module-option--current {
  font-weight: 600;
  color: var(--dxds-color-content-neutral-default-rest);
}

/* ---------- 品牌/模块切换器 ---------- */

/* 栏的标题，所以它得到栏自己的文本颜色而不是按钮的，
   并且只有足够的内边距来防止悬停表面紧贴字形。 */
.atlas-brandbutton {
  padding-inline: 0.5rem;
  color: inherit;
  border-radius: var(--dxds-border-radius-40, 4px);
}

/* None/Link 呈现样式按设计是平面的，所以主题不绘制任何悬停表面；
   栏自己的下拉菜单提供与导航项相同的安静悬停。 */
.atlas-brandbutton:hover,
.atlas-barbutton:hover {
  background-color: var(--dxds-color-surface-neutral-default-hovered);
}

/* 弹出框是三个目的地的列表，不是命令菜单，所以它有呼吸空间。
   旧实现在组件上设置它为 MinWidth；DevExpress 改为在下拉菜单上作为类获取它。 */
.atlas-modulepopup {
  min-width: 200px;
}

.atlas-modulepopup .dxbl-menu-item-content,
.atlas-modulepopup .dxbl-drop-down-button-item {
  padding-block: 0.4rem;
}

/* 图标和标签是每个选项内的一个对象。 */
.atlas-modulepopup .atlas-module-option--current,
.atlas-modulepopup span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}/* ---------- 用户菜单 ---------- */

.atlas-usermenu {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.atlas-usermenu form {
  margin: 0;
}

/* 必须看起来像栏其他平面按钮的提交按钮——它不能是，因为登出必须作为表单发送。 */
.atlas-logout {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  border: 0;
  border-radius: var(--dxds-border-radius-40, 4px);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.atlas-logout:hover {
  background-color: var(--dxds-color-surface-neutral-default-hovered);
}

.atlas-logout:focus-visible {
  /* -compound-，不是 -default-：默认主边框是浅色调，针对浅色表面消失；
     -compound- 是饱和重音。直到 26.1 重命名层后是 -additional-——值未更改，
     浅色样本中的 primary-90 和深色中的 primary-70。 */
  outline: 2px solid var(--dxds-color-border-primary-compound-rest);
  outline-offset: -2px;
}

/* ---------- 手工构建的筛选列表（状态列）---------- */


.atlas-filter-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 0.25rem;
  /* 有界，或有三十个不同日期的列构建一个比窗口更高的弹出框——
     套件然后向上翻转它并降落到屏幕外。 */
  max-height: 16rem;
  overflow-y: auto;
}

.atlas-filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem;
  border-radius: var(--dxds-border-radius-40, 4px);
  cursor: pointer;
}

.atlas-filter-option:hover {
  background-color: var(--dxds-color-surface-neutral-default-hovered);
}

/* 编辑器下的逐字段验证消息。其自己的元素而不是直接样式化 ValidationMessage 的 <div>，
   所以间距在字段有效时存活 Blazor 不呈现任何内容。 */
/* 提交按钮，在请求进行中时，其旁边的指示器。按钮保持其完整宽度；微调器铺在其尾端
   而不是推动它，所以状态改变时没有任何东西移动。 */
.atlas-login-submit-row {
  position: relative;
  display: flex;
  align-items: center;
}

.atlas-login-submit-row .atlas-login-submit {
  flex: 1 1 auto;
}

.atlas-login-submit-row > *:not(.atlas-login-submit) {
  position: absolute;
  inset-inline-end: 0.75rem;
}

.atlas-field-error {
  margin-top: 0.2rem;
  color: var(--dxds-color-content-danger-default-rest);
  font-size: 0.8125rem;
}


/* ── 启动遮罩（#atlas-splash，标记在 App.razor）─────────────────────────
   随静态预渲染首绘出现，盖住电路建立前的半成品页面；首次交互渲染后由
   atlasSplash.hide() 加 --hide 淡出并移除。配色不用 --dxds-* 令牌：mode
   样式表由 theme.js 异步注入，令牌未就绪时回退值会造成暗主题下的白闪——
   这里直接按 html[data-theme] 取纯值（theme.js 在首绘前写好该属性）。 */
#atlas-splash {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background-color: #f3f4f6;
  color: #1f2937;
  transition: opacity 0.3s ease;
}

:root[data-theme="dark"] #atlas-splash {
  background-color: #1b1b1b;
  color: #e8e8e8;
}

#atlas-splash.atlas-splash--hide {
  opacity: 0;
  pointer-events: none;
}

.atlas-splash-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.atlas-splash-brand img {
  max-height: 3.5rem;
  max-width: 12.5rem;
}

.atlas-splash-name {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* XAF 式的不定进度条：细轨道 + 来回滑动的高亮段。 */
.atlas-splash-bar {
  width: 9.25rem;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background-color: rgba(127, 127, 127, 0.25);
}

.atlas-splash-bar span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 2px;
  background-color: #0f6cbd;
  animation: atlas-splash-slide 1.1s ease-in-out infinite;
}

:root[data-theme="dark"] .atlas-splash-bar span {
  background-color: #4f9eea;
}

@keyframes atlas-splash-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-splash-bar span {
    animation: none;
  }
}