/* ---------- 侧栏 ---------- */
.atlas-sidebar {
flex: 0 0 260px;
width: 260px;
min-width: 0;
/* flex 列而不是块：让底部的版权落款在菜单短时用 margin-top:auto 钉到底，
菜单长过一屏时自然排在滚动内容末尾。滚动仍在本容器上。 */
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
border-right: 1px solid var(--dxds-color-border-neutral-default-rest);
background-color: var(--dxds-color-surface-neutral-default-rest);
transition: flex-basis 160ms ease, width 160ms ease;
}
/* XAF 式落款：logo 在上、版权小字在下。半透明代替降色 token 统一压暗整块
（文字和 logo 一起），不画分界线——它要像水印一样安静。折叠时随 0 宽轨裁掉。 */
.atlas-sidebar-footer {
margin-top: auto;
margin-inline: 1rem;
margin-bottom: 1.5rem;
padding-top: 1rem;
font-size: 0.7rem;
line-height: 0.9rem;
opacity: .5;
/* 版权是多行模板（$brand/$version 替换后的文本），换行按原样展开。 */
white-space: pre-line;
}
.atlas-sidebar-footer-logo {
display: block;
height: 2rem;
width: auto;
margin-bottom: 0.4rem;
}
/* 亮/暗显隐就地声明，不依赖 02-shell 里给顶栏写的那两条——跨文件借规则，
对方一改类名或特异性这里就双图同显。(0,3,x) 稳压本组件的 display:block。 */
:root[data-theme="dark"] .atlas-sidebar-footer-logo.atlas-brand-logo--light {
display: none;
}
:root:not([data-theme="dark"]) .atlas-sidebar-footer-logo.atlas-brand-logo--dark {
display: none;
}
/* 折叠是完全隐藏而非仅图标：模块切换器已携带"我在哪"信号，0宽轨保持网格诚实。 */
.atlas-sidebar--collapsed {
flex-basis: 0;
width: 0;
border-right-width: 0;
}
.atlas-sidemenu {
padding: 0.5rem 0;
}
.atlas-navgroup + .atlas-navgroup {
margin-top: 0.15rem;
}
/* 两行的共享骨架：组标头和叶子在一个网格上排队。 */
.atlas-navgroup-header,
.atlas-navitem {
display: flex;
align-items: center;
gap: var(--atlas-nav-item-gap);
width: 100%;
padding: var(--atlas-nav-item-padding-y) var(--atlas-nav-item-padding-x);
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: start;
cursor: pointer;
}
.atlas-navgroup-header {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--dxds-color-content-neutral-subdued-rest);
}
.atlas-navgroup-header:hover,
.atlas-navitem:hover {
background-color: var(--dxds-color-surface-neutral-default-hovered);
}
.atlas-navgroup-header:focus-visible,
.atlas-navitem:focus-visible {
outline: 2px solid var(--dxds-color-border-primary-compound-rest);
outline-offset: -2px;
}
/* 将雪佛龙推至远边缘无论标签长度。 */
.atlas-navchevron {
margin-inline-start: auto;
}
.atlas-navlist {
margin: 0;
padding: 0;
list-style: none;
}
.atlas-navitem {
padding-inline-start: var(--atlas-nav-child-indent);
border-inline-start: 3px solid transparent;
}
.atlas-navitem--root {
padding-inline-start: var(--atlas-nav-item-padding-x);
}
/*
在你看的页上XAF风格领先重音。
填充由相对颜色从主表面token派生，不是原始取：原始--dxds-color-surface-primary-subdued-rest
在浅色模式的浅色侧栏上读太重。用token自己的色调强制亮度（L）保持色调品牌上
同时使其成为耳语而非块。L按主题 — 亮值也无法服务暗，其中0.961是几乎白 —
所以暗获其自己的覆盖下面。色度从token缩放所以色调追踪主题改变；仅级别在这里固定。
*/
.atlas-navitem--active {
border-inline-start-color: var(--dxds-color-border-primary-compound-rest);
background-color: oklch(from var(--dxds-color-surface-primary-subdued-rest) 0.961 calc(c * 0.100) h);
color: var(--dxds-color-content-primary-default-rest);
font-weight: 600;
}
/* 深色模式：相同色调的低亮度色调，所以活跃行从暗侧栏抬起而无亮模式值会给的近白眩光。 */
:root[data-theme="dark"] .atlas-navitem--active {
background-color: oklch(from var(--dxds-color-surface-primary-subdued-rest) 0.32 calc(c * 0.55) h);
}
.atlas-navtext {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---------- 标签工作区 ---------- */
/*
文档区是纯表面，与页面在其上使用的相同。
分离标签行、页面标头和网格的是边缘 — 标签行下规则和页面周围细线 — 不是填充改变。
这不是妥协：调色板是单一中立坡道、可用表面是其上相邻步骤、差异是你可以测量
而非看的。进一步向下坡道也无帮助，因为在浅样本中进一步的token是深一步的*在暗的
一个中是轻的，所以两个会在模式之间交换地点。
*/
.atlas-workspace {
--atlas-tabrow-height: 2.5rem;
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
min-height: 0;
background-color: var(--dxds-color-surface-neutral-default-rest);
/* 固定标签操作菜单的锚。 */
position: relative;
}
/*
页。无其自己的框：网格和树绘制其自己的标头规则和行线，周围的框是说相同事的第二边。
也是文件标头描述的高度链中间：一个有界flex列，所以无论它持有什么都可以
告诉填充和向内滚动 — 因此打开高级过滤器收缩网格而不是溢出页。
声明一次。此规则曾分散在文件不同部分的三个单独.atlas-view-body块中。
*/
.atlas-view-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
background-color: var(--dxds-color-surface-neutral-default-rest);
}
.atlas-view-header {
padding-inline: 0.25rem;
}
/*
标签行是shell中一个色调带：上面的应用栏和下面的页都是纯表面，所以灰色
是将标签标记为条而非更多页的原因。活跃标签再是纯表面，这连接它到其页面 —
浏览器标签阅读和色调在行上而非整个工作区上的原因。
*/
.atlas-tabstrip .dxbl-tabs-tablist {
background-color: var(--dxds-color-surface-neutral-subdued-rest);
border-block-end: 1px solid var(--dxds-color-border-neutral-default-rest);
/* 为右侧的 ⋮ 操作覆盖层预留空间：没有这段 padding，标签和右滚动按钮
都会滑到覆盖层下面。宽度 = 覆盖层 padding 0.25rem×2 + 按钮本体。 */
/*padding-inline-end: 2.5rem;*/
}
/*
仅工作区的OWN条获那个色调AND其下分隔符。在标签中呈现的视图可以携带其自己的标签
（FormLayout的标签组、详情页的标签），且那些在.dxbl-tabs-content *内部*呈现 —
所以上面的后裔规则会给它们着色且在它们下也绘制工作区的底部规则。任何嵌套
在标签内容中的标签条丢那个chrome：无色调、无分隔符、所以表单标签读作其自己的事。
更高特定性、所以赢；工作区条是内容的兄弟且从不匹配这个。
*/
.atlas-tabstrip .dxbl-tabs-content .dxbl-tabs-tablist {
background-color: transparent;
border-block-end: none;
/* 嵌套标签条没有 ⋮ 覆盖层，不需要预留。 */
padding-inline-end: 0;
}
/* ⋮ 覆盖坐在那相同的带上，所以它取相同的色调。 */
.atlas-tabbar-actions {
background-color: var(--dxds-color-surface-neutral-subdued-rest);
}
/* 操作菜单覆盖标签行的右边缘而非坐在flex流中，因为标签条拥有那行且无装饰槽。
项包装器上匹配的padding-inline-end保持标签不滚动在其下。 */
.atlas-tabbar-actions {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
height: var(--atlas-tabrow-height);
display: flex;
align-items: center;
padding-inline: 0.25rem;
background-color: var(--dxds-color-surface-neutral-subdued-rest);
border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
z-index: 2;
}/*
标签条是高度链中丢失的链接。
DxTabs作为块元素具有min-height: auto呈现，所以将其丢入工作区的flex列留下它
按其内容而非其给定的空间调大小：活跃页过长到窗口底部，带着网格的分页器，
无任何滚动因为无任何过度 — 框简单地变更高。其中的内容面板已有正确的flex；
它缺少的是缩小的许可。
这下面的一切 — .atlas-view、.atlas-grid、Grid本身 — 已为有界父写
一旦它有它就开始工作。
*/
.atlas-workspace > .atlas-tabstrip {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.atlas-tabstrip .dxbl-tabs-content-panel,
.atlas-tabstrip .dxbl-tabs-content {
min-height: 0;
}
/*
每标签包装器也必须被允许缩小。
DevExpress给它`flex: 1 0 100%` — 增长、不缩小、基础100% — 所以它按其内容
调大小且保持那里无论其周围面板变得多小。min-height: 0上面是必要和不充分：
将框固定打开的是flex-shrink、不自动最小值。
症状是无法滚动的页而非滚动得不好的。完全展开的权限树跑到1005px面板内的1261px
且无任何东西过度任何东西 — 框只是保持增长、所以没有滚动条曾被要求。
*/
.atlas-tabstrip .dxbl-tabs-content {
flex-shrink: 1;
}
/*
模板标签必须绘制其自己的chrome。
DevExpress标记携带TabTemplate的项具有.dxbl-tabs-tmpl且丢弃其自己的填充、
悬停和选择背景 — 模板假定拥有整个外观。供应模板而不接管那是什么保留
条作为未分离词的运行，每个标签的关闭按钮坐在比其自己的标题更接近下个标签的
图标。
填充和选择表面在这里恢复，在项上而非其内部的标头，所以命中区是标签而非仅其文本。
*/
.atlas-tabstrip .dxbl-tabs-item.dxbl-tabs-tmpl {
padding: 0.3rem 0.7rem;
border-block-end: 2px solid transparent;
cursor: pointer;
}
.atlas-tabstrip .dxbl-tabs-item.dxbl-tabs-tmpl:hover {
background-color: var(--dxds-color-surface-neutral-default-hovered);
}
/* Fluent用其下重音规则标记当前标签，不是抬起的卡。 */
.atlas-tabstrip .dxbl-tabs-item.dxbl-tabs-tmpl.dxbl-active {
border-block-end-color: var(--dxds-color-border-primary-compound-rest);
background-color: var(--dxds-color-surface-neutral-default-rest);
font-weight: 600;
}
/* 标签之间细线。在项的inline-start上所以第一个标签无且规则从不与活跃标签自己的
边缘翻倍。 */
.atlas-tabstrip .dxbl-tabs-item.dxbl-tabs-tmpl + .dxbl-tabs-item.dxbl-tabs-tmpl {
border-inline-start: 1px solid var(--dxds-color-border-neutral-subdued-rest);
}
.atlas-tab-header {
display: inline-flex;
align-items: center;
gap: var(--atlas-tab-header-gap);
min-width: 0;
}
.atlas-tab-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 14rem;
}
.atlas-tab-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
margin-left: 0.15rem;
border-radius: 50%;
/* 0.75，不是 0.55。精灵的 X 是细发线十字；将其变暗到足以读为辅助也会使其消失。下面的悬停表面是将其标记为控件的原因 — 不透明度只需将其软化即可。 */
opacity: 0.75;
cursor: pointer;
}
/*
sprite的X被绘制为填充路径关于20单位网格上一单位宽的一半，在标签大小处着陆
在大约一个物理像素且消失。在相同颜色中抚摸相同路径加厚字形而不需要sprite中
第二个更粗的图标 — 填充和抚摸是一个形状。
*/
.atlas-tab-close .atlas-icon {
stroke: currentColor;
stroke-width: 1.1;
stroke-linecap: round;
}
.atlas-tab-close:hover {
opacity: 1;
background-color: var(--dxds-color-surface-neutral-default-hovered);
}
/* 固定标记顶替关闭按钮的槽位：同一尺寸、同一悬停语汇，读作"这个位置的控件"，
只是含义从"关闭"换成了"解除固定"。 */
.atlas-tab-pin {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
margin-left: 0.15rem;
border-radius: 50%;
opacity: 0.75;
cursor: pointer;
}
.atlas-tab-pin:hover {
opacity: 1;
background-color: var(--dxds-color-surface-neutral-default-hovered);
}
/*
固定标签比带子更深一档：从带色自身派生而非取新 token，色调随主题走、
只固定级别 —— 与上面活跃菜单项的做法同一套。仅未激活时着色：活跃标签的
纯表面+重音线已经是更强的信号，再叠深色会把两种状态混在一起。
（图钉标记是主信号，这层色是扫视时的辅助。）
*/
.atlas-tabstrip .dxbl-tabs-item.dxbl-tabs-tmpl:not(.dxbl-active):has(.atlas-tab-header--pinned) {
background-color: oklch(from var(--dxds-color-surface-neutral-subdued-rest) calc(l - 0.03) c h);
}
/* 上下文菜单里的图钉。兼容精灵没有 pin，字形取自 DevExpress Fluent 单色精灵的
pin symbol —— 12-icon-classes.css 是从兼容精灵生成的，不往里手加别源的图标。
基础遮罩属性也要自带：那边的公共分组选择器只列生成的类。 */
/* 搜索图标：兼容精灵同样没有，字形取自 DX Fluent 精灵的 search symbol；
基础遮罩属性自带，理由同 atlas-ico-pin。 */
.atlas-ico-search {
display: inline-block;
width: 1.5em;
height: 1.5em;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.atlas-ico-pin {
display: inline-block;
width: 1.5em;
height: 1.5em;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}