/* Keep one viewport scroller without clipping page content or portaled popups. */
html, body {
    height: 100% !important;
    min-height: 0 !important;
    position: static !important;
    overflow: auto !important;
    width: auto !important;
}

.app-shell.mud-layout {
    --shell-toolbar-height: 60px;
    --shell-header-height: calc(var(--shell-toolbar-height) + env(safe-area-inset-top, 0px));
    --mud-appbar-height: var(--shell-header-height);
    height: var(--app-height, 100vh) !important;
    min-height: 0 !important;
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
}

@supports (height: 100dvh) {
    .app-shell.mud-layout { height: var(--app-height, 100dvh) !important; }
}

.app-shell > .mud-main-content {
    box-sizing: border-box;
    height: 100% !important;
    min-height: 0 !important;
    min-width: 0;
    overflow: auto !important;
    padding-block: calc(var(--shell-header-height) + 1rem) calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    padding-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px));
    scroll-padding-block: 1rem;
}

.app-shell .main-content-wrapper {
    min-width: 0;
    min-height: 0;
    padding: 0 !important;
    margin: 0 !important;
}

.app-shell .main-content-wrapper > * { min-width: 0; max-width: 100%; }
.app-shell .main-content-wrapper > *:last-child { margin-bottom: 0; }
.app-shell .main-header.mud-appbar {
    height: var(--shell-header-height) !important;
    padding-block: env(safe-area-inset-top, 0px) 0 !important;
    padding-inline: max(.5rem, env(safe-area-inset-left, 0px)) max(.5rem, env(safe-area-inset-right, 0px)) !important;
}
.app-shell .main-header .mud-toolbar { height: var(--shell-toolbar-height); min-height: 0; }
.app-shell .header-brand { min-width: 0; color: inherit; text-decoration: none; }
.app-shell .header-brand-text { min-width: 0; overflow-wrap: anywhere; }
.app-shell button.header-user { border: 0; font: inherit; color: inherit; cursor: pointer; }
.app-shell button.ud-item { border: 0; background: transparent; width: 100%; text-align: start; font: inherit; }
.app-shell button.ud-item:hover { background: #f2f2f2; }
.app-shell .header-brand-icon, .app-shell .header-action, .app-shell .user-menu-wrapper { flex-shrink: 0; }
.app-shell .app-navigation.mud-drawer {
    top: var(--shell-header-height) !important;
    height: calc(var(--app-height, 100vh) - var(--shell-header-height)) !important;
    max-width: calc(100vw - 48px);
}
.app-shell .app-navigation .mud-drawer-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}
.app-shell .app-navigation .nav-menu-wrapper { height: 100%; min-height: 0; flex: 1; }
.app-shell .app-navigation .nav-menu-container { padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)); }
.app-drawer-toolbar { display: none; }
.app-shell :is(.header-menu-btn, .app-drawer-toolbar button, .header-user) { min-width: 44px !important; min-height: 44px !important; }
.app-shell :is(button, a):focus-visible { outline: 3px solid #818cf8; outline-offset: 2px; }

@media (max-width: 959.98px) {
    .app-shell.mud-layout { --shell-toolbar-height: 56px; }
    .app-shell .app-drawer-toolbar { display: flex; justify-content: space-between; align-items: center; padding-inline: .75rem; flex-shrink: 0; }
    .app-shell .main-header .mud-toolbar-content { gap: .25rem; padding-inline: 0; }
    .app-shell .header-brand { padding: .25rem; }
    .app-shell .header-brand-text, .app-shell .header-status-label { display: none; }
    .app-shell .header-action { margin-inline: 0; }
    .app-shell .main-header :is(.mud-icon-button, .current-lang-btn) { min-width: 44px !important; min-height: 44px !important; }
    .app-shell .main-header .header-status { min-width: 44px; min-height: 44px; padding: 6px; margin: 0; }
    .mud-dialog:not(.mud-dialog-fullscreen):not(.invoice-workspace-dialog):not(:has(.invoice-workspace)) {
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(var(--app-height, 100vh) - 24px) !important;
        margin: 12px !important;
    }
    .mud-dialog .mud-dialog-actions { flex-wrap: wrap; }
    .e-dialog:not(.e-filter-popup):not(.e-excelfilter) { max-width: calc(100vw - 16px) !important; }
}

@media (max-width: 599.98px) {
    .app-shell > .mud-main-content { padding-inline: max(.5rem, env(safe-area-inset-left, 0px)) max(.5rem, env(safe-area-inset-right, 0px)); }
    .app-shell .header-brand { display: none; }
    .app-shell .main-header .header-user { padding: 4px; }
    .app-shell .header-user > .mud-icon-root { display: none; }
    .app-shell .main-header .current-lang-btn { padding-inline: .5rem; gap: .25rem; }
    .app-shell .user-dropdown { max-width: calc(100vw - 16px) !important; min-width: min(220px, calc(100vw - 16px)) !important; }
    .app-shell .ud-info { min-width: 0; overflow-wrap: anywhere; }
    .app-shell :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell, .app-shell .fade-in, .app-shell .page-transition-enter, .app-shell .mud-drawer { animation: none !important; scroll-behavior: auto !important; }
}