/* Global styles for the ModuleSidebar workspace shell (Common/Components/Menu/ModuleSidebar.razor).

   These are intentionally NOT component-scoped: Blazor CSS isolation can't reach the MainLayout
   <main>/<article> ancestors (needed for the edge-to-edge reset) nor DevExpress' internally
   rendered drawer/menu DOM (needed for the mini-mode text fade and active-item highlight). */

/* Let the drawer fill the MainLayout article area edge-to-edge instead of inheriting its padding.
   MainLayout sets article horizontal padding with !important, so we must override with it too. */
/* Keyed on the workspace (not the sidebar) so it applies whether the page is shown with a sidebar
   (module layouts) or standalone (MainLayout renders PageWorkspace directly). The workspace owns
   its own padding (.module-workspace-body) and fills the area edge-to-edge. */
main:has(.page-workspace) {
    padding: 0 !important;
}

article.content:has(.page-workspace) {
    padding: 0 !important;
    height: 100%;
}

/* Workspace content area inside the drawer's target content: page bar on top, scrollable body. */
.module-workspace {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.module-workspace-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.5rem 1.5rem 1.25rem;
}

/* The title is a DxToolbar (so its caption tracks the theme's toolbar-title typography), but in the
   sidebar we don't want the toolbar's chrome — strip its border, background, and shadow. */
.module-sidebar-title.dxbl-toolbar,
.module-sidebar-title .dxbl-toolbar {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    /* Inside the drawer's flex column the toolbar otherwise grows and pushes the menu to the bottom. */
    flex: 0 0 auto;
    margin-bottom: 0.5rem;
}

/* Hide the title and menu item captions when the drawer is minimized
   (idiom from DevExpress' DxDrawer mini demo). */
.module-sidebar-mini .module-sidebar-title,
.module-sidebar-mini .module-sidebar-menu .dxbl-menu-item-text {
    visibility: hidden;
    transition: visibility linear var(--dxbl-drawer-animation-duration);
}

/* Active-route highlight on a vertical menu item. */
.module-sidebar-menu .module-sidebar-menu-active {
    background-color: var(--dxbl-menu-item-hover-bg-color, rgba(13, 110, 253, 0.1));
    color: var(--dxbl-accent-color);
    font-weight: 600;
}