/* M41: shared workspace, enabled in every application environment.
   M40 styles and markup remain the fallback outside .m41-layout. */
.m41-layout.dashboard-page {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.m41-layout > .dashboard-header { flex: 0 0 auto; position: relative; z-index: 30; }
.m41-layout > .app-layout { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.m41-layout .navigation-drawer {
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    z-index: 20;
    /* Width animation would relayout every table column on every frame. */
    transition: none;
}
.m41-layout .app-layout__content {
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    /* Establish the containing block for existing fixed drawers/backdrops.
       Layout containment avoids promoting the whole work area to a GPU layer.
       Original positioning, nested layers and focus management remain. */
    contain: layout;
    transition: none;
    isolation: isolate;
}
.m41-layout .app-layout__viewport {
    height: 100%;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}
.m41-layout .admin-page {
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.m41-layout .admin-page__header { flex: 0 0 auto; }
.m41-layout .admin-page__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}
.m41-layout [data-m41-flow] {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0;
}
.m41-layout [data-m41-flow] > :not([data-m41-flow]):not([data-m41-scrollport]) { flex-shrink: 0; }
.m41-layout [data-m41-scrollport] {
    flex: 1 1 auto !important;
    min-height: 8rem !important;
    min-width: 0;
    max-height: none !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    align-content: start;
}
.m41-layout [data-m41-scrollport] thead,
.m41-layout [data-m41-scrollport] > [role="row"]:has([role="columnheader"]) {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #edf2f6;
}
.m41-layout [data-m41-scrollport]:focus-visible { outline: 2px solid #526b80; outline-offset: -2px; }
.m41-layout .h2-pagination { flex: 0 0 auto; }
.m41-layout [data-m41-scrollport] > .h2-pagination {
    position: sticky;
    left: 0;
    bottom: 0;
    z-index: 6;
    background: #f8fafb;
}
.m41-layout .app-layout__content [aria-modal="true"] { max-width: 100%; max-height: 100%; }
.m41-layout .image-lightbox-backdrop {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}
.m41-layout .image-lightbox-dialog { min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; }
.m41-layout .h2-back-to-top { bottom: var(--m41-back-top-bottom, 1.25rem); right: 2rem; }
.m41-layout:has(.app-layout__content [aria-modal="true"]) .h2-back-to-top { visibility: hidden; }

@media (max-width: 760px) {
    /* Expanded navigation overlays the work area; it never squeezes a form
       down to the few pixels left beside a 240px menu. */
    .m41-layout > .app-layout { padding-left: 72px; }
    .m41-layout .navigation-drawer { position: absolute; inset: 0 auto 0 0; }
    .m41-layout .h2-pagination { padding-bottom: .7rem; }
}
@media print {
    .m41-layout.dashboard-page,
    .m41-layout .app-layout,
    .m41-layout .app-layout__content,
    .m41-layout .app-layout__viewport,
    .m41-layout .admin-page,
    .m41-layout .admin-page__body,
    .m41-layout [data-m41-flow],
    .m41-layout [data-m41-scrollport] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
        transform: none;
        contain: none;
    }
    .m41-layout > .dashboard-header,
    .m41-layout .navigation-drawer { display: none; }
    .m41-layout > .app-layout { padding-left: 0; }
}