/* 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");

/* W7_button — the template button standard. Same load chain: resolves to
   _content/wbi_core_layout/css/W7_button.css for every consumer. Must stay
   among the @imports, before any style rule. */
@import url("W7_button.css");

/* W7_badge — the count / notification pill (menu rows, top-bar icons, tabs).
   Same load chain; independent of every other sheet (own .w7bdg-* namespace and
   its own --w7bdg-* colour contract), so its position among the imports only
   matters if a consumer wants to override it afterwards. */
@import url("W7_badge.css");

/* W7 form controls — the WiSDoM 7 "Form Builder" input skin (.w7fc*): text,
   memo, integer/decimal spin, dropdown, date-time, time, checkbox, plus the
   W7_label heading and W7_hyperlink. Same load chain; reads the Template.css
   tokens only, so its position among the imports does not matter. */
@import url("W7_form_controls.css");

/* W7_html_editor — the rich-text (HTML) editor that replaces DxHtmlEditor
   (.w7he* frame / toolbar / document, .w7he-pop* menus portalled to <body>).
   Must stay AFTER W7_form_controls.css: it sits in the same .w7fc frame, reads
   its --w7fc-* variables and re-skins .w7fc__input inside its dialogs. */
@import url("W7_html_editor.css");

/* W7_popup — the template modal/dialog. Same load chain. */
@import url("W7_popup.css");

/* W7_modal — the WiSDoM 7 "Modal" skin for W7_modal. Same load chain. Must stay
   AFTER W7_button.css: its footer rules soften the button skin for that one
   surface and rely on being later in the cascade. */
@import url("W7_modal.css");

/* W7_toast — the template toast/notification stack. Same load chain. */
@import url("W7_toast.css");

/* W7_system_message — the system-wide announcement banner above the top bar
   (id="system-toast"). Same load chain. */
@import url("W7_system_message.css");

/* W7_test_badge — the test-environment indicator badge. Same load chain. */
@import url("W7_test_badge.css");

/* W7_session_timeout — the session-expiry warning popup body. Same load chain. */
@import url("W7_session_timeout.css");

/* W7_action_bar — the template action bar (toolbar + collapsible filter panel
   + generic list-filter pipeline). Same load chain. */
@import url("W7_action_bar.css");

/* W7_splitter — W7_layout's one/two-pane split: drag gutter + collapse
   chevrons (replaces the old DevExpress DxSplitter). Same load chain. */
@import url("W7_splitter.css");

/* W7_audit_button — the read-only audit viewer modal grid (.w7aud-*). Must
   stay AFTER W7_modal.css: the viewer renders inside the modal card. */
@import url("W7_audit_button.css");

/* W7_grid — the WiSDoM data grid (.w7grid__*, dc-grid port with declarative
   columns). Same load chain; reads the Template.css tokens. */
@import url("W7_grid.css");

/* W7_calendar — the WiSDoM 7 Calendar (.w7cal*): month + days time grid,
   drag-to-reschedule, event dialog. Same load chain; reads the Template.css
   tokens. Must stay AFTER W7_button.css: the calendar's dialogs compose
   W7_button and rely on its skin being earlier in the cascade. */
@import url("W7_calendar.css");

/* W7_file_manager — the WiSDoM 7 File Manager (.w7fm*): breadcrumb, folder and
   file cards, list view, filter-panel innards. Must stay AFTER W7_button.css
   AND W7_action_bar.css: the manager's toolbar renders inside W7_action_bar and
   composes W7_button, so both skins have to be earlier in the cascade. */
@import url("W7_file_manager.css");

:root {
    --body-pd-collapsed: 25px;
    --body-pd-expanded: 240px;
}

/* W7_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 W7_popup is
   usable. Loaded by every consumer via _content/wbi_core_layout/css/layout.css,
   so Designer and Admin share the rule. NOTE: the RCL itself no longer
   references DevExpress (W7_layout ships its own splitter) — these rules stay
   for the consumers' OWN DevExpress controls; do not remove them as dead. */
.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 <body> as
   <dxbl-popup-root>(static) > <dxbl-popup-cell>(absolute, z-index:0) > <dxbl-dropdown>,
   so it renders BEHIND the .w7pop-overlay / .w7mod-overlay (z-index 1055) and
   looks like the dropdown never opens. Lift the popup-cell above the overlay.
   Scoped with body:has(...) so it only applies while a W7_popup / W7_modal is
   open, and :has(.dxbl-dropdown) so DevExpress modal dialogs keep their normal
   stacking. */
body:has(.w7pop-overlay, .w7mod-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 W7_left_menu's
   ApplyMenuClasses on open). Works on consumers whose <body> 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 <html data-theme="dark"> from the top-bar appearance switch. */
html[data-theme="dark"] body#body-pd {
    background-color: var(--tpl-surface) !important;
}