/*
Application shell.
Everything is expressed through the theme's design tokens (--dxds-color-*), which the
active Fluent swatch redefines — that is why there are no light/dark branches:
swapping the stylesheet re-colours this file for free.
The layout is one unbroken flex chain from down to the Grid. Every link in
that chain needs `min-height: 0`, otherwise a flex item defaults to
min-height:auto, refuses to shrink below its content, and the Grid ends up in a
cramped box with the page scrolling instead.
*/
/*
border-box everywhere. This is load-bearing, not hygiene: the layout below
pairs `height: 100%` with padding, and under the CSS default (content-box)
that resolves to 100% PLUS the padding. The overflow pushed the Grid's pager
off the bottom of the screen. Removing Bootstrap took the old reset with it.
*/
*,
*::before,
*::after {
box-sizing: border-box;
}/*
Script-focus targets. Routes.razor uses , which
moves focus to the page heading; the heading only carries tabindex="-1" so it
can receive it. Such elements are never keyboard-navigable, so a ring on them
is pure noise — this is the standard reset for the pattern.
*/
[tabindex="-1"]:focus {
outline: none !important;
box-shadow: none !important;
}
html, body {
height: 100%;
margin: 0;
font-family: var(--dxds-font-family-sans-serif, 'Segoe UI', system-ui, sans-serif);
background-color: var(--dxds-color-surface-neutral-default-rest);
color: var(--dxds-color-content-neutral-default-rest);
}
/*
The body is the top of the height chain, not the shell.
Without a licence key DevExpress prepends a 34px banner to the body,
in normal flow. A shell measured as 100vh then starts 34px down and is a full
viewport tall, so the page overflows by exactly the banner and the grid's pager
sits below the fold. Letting the shell take the space that is left instead of
assuming it owns the whole viewport is correct either way — with the banner and,
once a key is installed, without it.
*/
body {
display: flex;
flex-direction: column;
}
/*
App-level density tokens.
DevExpress scales a component by giving every metric a -s / -m / -l variant and
letting its .dxbl-sm class remap the base variable to the -s one; there is no
single global scale to borrow, so this is the same idea at the app's own scope.
Comfortable is the medium baseline here; the compact block swaps the values, and
the chrome the suite does not own — sidebar, tab header, form text — reads these
tokens instead of hard-coding a size. theme.js sets the root's data-density
before first paint (see applyDensity), so a compact reload never flashes wide.
DevExpress components keep taking SizeMode separately; this only reaches app.css.
*/
:root {
--atlas-nav-item-padding-y: 0.5rem;
--atlas-nav-item-padding-x: 0.85rem;
--atlas-nav-item-gap: 0.55rem;
--atlas-nav-child-indent: 1.9rem;
--atlas-tab-header-gap: 0.4rem;
--atlas-field-row-gap: 1rem;
--atlas-label-font-size: 0.875rem;
--atlas-hint-font-size: 0.8125rem;
}
:root[data-density="compact"] {
--atlas-nav-item-padding-y: 0.3rem;
--atlas-nav-item-padding-x: 0.7rem;
--atlas-nav-item-gap: 0.45rem;
--atlas-nav-child-indent: 1.6rem;
--atlas-tab-header-gap: 0.3rem;
--atlas-field-row-gap: 0.6rem;
--atlas-label-font-size: 0.8125rem;
--atlas-hint-font-size: 0.75rem;
}
/*
Swapping the Bootstrap theme bundle for the composable form (core + mode +
accent) also dropped Bootstrap reboot, and with it the hand cursor on buttons —
the DevExpress theme itself never sets one on a plain .dxbl-btn (its 38 cursor
rules are all scoped: menu items, calendars, pagers). Same story as the
box-sizing reset above: restore the convention the app was designed under.
*/
button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
[role="button"]:not([aria-disabled="true"]) {
cursor: pointer;
}
/* 亮/暗主题二选一的元素（品牌 Logo 等两张都渲染、按主题显隐）。data-theme 由
theme.js 写在 上；预渲染时属性尚未写入，:not() 写法让 light-only
先出场，不闪图。!important：盖过元素自身的 display 声明。 */
[data-theme="dark"] .atlas-theme-light-only {
display: none !important;
}
html:not([data-theme="dark"]) .atlas-theme-dark-only {
display: none !important;
}