/* /Components/App.razor.rz.scp.css */
/* Ensure the app always fills the viewport regardless of inner content height.
   Make the body a column flex container so a main/content element can grow to fill
   the available vertical space when needed (flex: 1). */
html[b-6zj88tevxf], body[b-6zj88tevxf], #app[b-6zj88tevxf] {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body[b-6zj88tevxf] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100%;
    overflow-y: auto !important;
}

/* Common selectors for the main content area used in layouts.
   If your layout uses a different wrapper (for example .main, #main or .content)
   this rule will apply; adjust selector as needed. */
main[b-6zj88tevxf], .main[b-6zj88tevxf], .content[b-6zj88tevxf], #main[b-6zj88tevxf] {
    flex: 1 0 auto;
    min-height: 0; /* allows children to scroll when overflowing */
}

/* Offset the main application content so it doesn't go under the fixed sidebar.
   Uses the --app-sidebar-width defined in navmenu.css. If that file isn't loaded
   before this, you can duplicate the variable here or ensure load order. */
#kt_app_main[b-6zj88tevxf], .app-main[b-6zj88tevxf] {
    margin-left: var(--app-sidebar-width, 260px);
}

/* On smaller screens the sidebar becomes collapsible; remove the left margin so
   the content uses the full width. Adjust breakpoint to match your layout. */
@media (max-width: 991.98px) {
    #kt_app_main[b-6zj88tevxf], .app-main[b-6zj88tevxf] {
        margin-left: 0 !important;
    }
    /* Ensure body layout still behaves correctly on small screens */
    body[b-6zj88tevxf] {
        overflow-x: hidden;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */