/* Template design tokens (palette, DM Sans webfont, typography & shape). Must stay the first statement: CSS @import is only honoured before any style rule. Resolves to _content/wbi_core_layout/css/Template.css for every consumer that links this layout.css, so the tokens are available app-wide. */ @import url("Template.css"); /* W6_button — the template button standard. Same load chain: resolves to _content/wbi_core_layout/css/W6_button.css for every consumer. Must stay among the @imports, before any style rule. */ @import url("W6_button.css"); /* W6_popup — the template modal/dialog. Same load chain. */ @import url("W6_popup.css"); /* W6_toast — the template toast/notification stack. Same load chain. */ @import url("W6_toast.css"); /* W6_test_badge — the test-environment indicator badge. Same load chain. */ @import url("W6_test_badge.css"); /* W6_session_timeout — the session-expiry warning popup body. Same load chain. */ @import url("W6_session_timeout.css"); /* W6_action_bar — the template action bar (toolbar + collapsible filter panel + generic list-filter pipeline). Same load chain. */ @import url("W6_action_bar.css"); :root { --body-pd-collapsed: 25px; --body-pd-expanded: 240px; } /* W6_popup uses Bootstrap's .modal (z-index 1055) plus a backdrop at 1050. DevExpress dropdowns / popups render their floating containers with .dxbl-flyout (DxComboBox, DxDateEdit, DxDropDown, DxMenu, DxToolbar submenus, etc.) and .dxbl-popup (DxPopup itself). Without an override, the floats sit under the modal in the stacking order and appear hidden. Pin them above the modal so any combo box rendered inside a W6_popup is usable. Loaded by every consumer via _content/wbi_core_layout/css/layout.css, so Designer and Admin share the rule. */ .dxbl-flyout, .dxbl-popup { z-index: 1100 !important; } /* DevExpress.Blazor 25.2 editor dropdowns (DxComboBox etc.) do NOT use the classes above: the dropdown detaches to as (static) > (absolute, z-index:0) > , so it renders BEHIND the .w6pop-overlay (z-index 1055) and looks like the dropdown never opens. Lift the popup-cell above the overlay. Scoped with body:has(.w6pop-overlay) so it only applies while a W6_popup is open, and :has(.dxbl-dropdown) so DevExpress modal dialogs keep their normal stacking. */ body:has(.w6pop-overlay) .dxbl-popup-cell:has(.dxbl-dropdown, .dxbl-edit-dropdown) { z-index: 1100 !important; } body { padding-left: unset !important; padding-right: unset !important; } body#body-pd { margin-left: 0 !important; padding-left: var(--body-pd-collapsed) !important; padding-right: var(--body-pd-collapsed) !important; background-color: white !important; display: flex; flex-direction: column; overflow: hidden; } body#body-pd.body-pd { padding-left: var(--body-pd-expanded)!important; } /* Header push derives from body.body-pd — single source of truth. */ body#body-pd.body-pd .header, body#body-pd.body-pd #header { left: var(--body-pd-expanded); width: calc(100% - var(--body-pd-expanded)); } /* Fallback: header carries its own .body-pd class (set by W6_left_menu's ApplyMenuClasses on open). Works on consumers whose lacks id="body-pd". Uses padding-left to override header#header.header { padding: 0 1rem; }. */ #header.body-pd, .header.body-pd { padding-left: calc(var(--body-pd-expanded) + 9px) !important } .modal { z-index: 1050; } @media (max-width: 767px) { body#body-pd.body-pd { padding-left: var(--body-pd-collapsed) !important; } /* Mobile: drawer is overlay, header must not push. */ body#body-pd.body-pd .header, body#body-pd.body-pd #header, #header.body-pd, .header.body-pd { left: 0; width: 100%; padding-left: 1rem !important; } } /* Dark mode: flip the body shell background (overrides the hardcoded white). Toggled live via from the top-bar appearance switch. */ html[data-theme="dark"] body#body-pd { background-color: var(--tpl-surface) !important; }