/* ============================================================================
   App Shell Flex Layout (gated by body.app-shell-flex)
   ----------------------------------------------------------------------------
   Replaces the fixed-position chrome (sidebar, top navbar, page heading,
   footer) with a flex column inside a flex row. Only .app-content scrolls,
   not the body. Enabled by the UseFlexShell environment/config flag (managed
   via Pulumi per environment). For QA/dev, ?layout=flex / ?layout=fixed on any
   authenticated URL overrides it (persisted in the SkimmerFlexShell cookie;
   ?layout=auto clears the override and reverts to the env flag).
   ============================================================================ */

body.app-shell-flex {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

body.app-shell-flex #wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    overflow: hidden;
}

body.app-shell-flex .navbar-static-side {
    position: static;
    flex: 0 0 220px;
    width: auto;
    height: auto;
    margin-top: 0;
}

body.app-shell-flex .navbar-static-side .sidebar-collapse {
    height: 100%;
}

body.app-shell-flex.mini-navbar .navbar-static-side {
    flex-basis: 0;
    /* Default min-width: auto would keep the flex item at content size (~70px
       for the icons). Force it down to 0, then clip the icons that would
       otherwise spill into the page-wrapper. */
    min-width: 0;
    overflow: hidden;
}

body.app-shell-flex #page-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* The top navbar normally drops .navbar-fixed-top in the flex shell (see
   _TopNavbar.cshtml), so Bootstrap's position:fixed never applies. Keep the
   navbar as a non-shrinking flex child of #page-wrapper and restore the 60px
   height that .md-skin .navbar-fixed-top would have set. */
body.app-shell-flex .md-skin .navbar {
    flex: 0 0 auto;
    margin: 0;
    min-height: 60px;
    background-color: #4795EC !important;
    /* Positioned so the navbar's z-index (2031) applies again. In the flex shell
       the navbar is position:static, which nullifies z-index, so navbar dropdowns
       (company switcher, user menu) fell behind the calendar's sticky header
       (z-index 1000). AB#48711 */
    position: relative;
    z-index: 2031;
}

/* Defensive: if anything reaches the nav element with .navbar-fixed-top in flex
   shell (a partial that doesn't honor ViewBag.UseFlexShell, a cached page, etc.),
   neutralize Bootstrap's position:fixed + offsets so the navbar still flows in
   the column instead of overlaying content. */
body.app-shell-flex .navbar-fixed-top {
    position: static;
    top: auto;
    right: auto;
    left: auto;
}

body.app-shell-flex .navbar-static-side .nav-header {
    background-color: #4795EC !important;
}

body.app-shell-flex .navbar-static-side {
    border-right: 1px solid #53718d;
}

body.app-shell-flex .navbar-static-side .nav > li.active {
    border-left-color: #4795EC;
}

body.app-shell-flex .navbar-minimalize,
body.app-shell-flex .navbar-minimalize:hover,
body.app-shell-flex .navbar-minimalize:focus,
body.app-shell-flex .navbar-minimalize:active {
    background-color: #4795EC;
    border-color: #4795EC;
}


body.app-shell-flex .page-heading {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    z-index: 5;
    margin-left: 0;
    margin-right: 0;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #ffffff;
    box-shadow: 0 6px 24px 0 rgba(82, 63, 105, .08);
}

/* The placeholder reserved space for the old fixed-position page-heading.
   In-flow headings don't need it — drop this rule and the placeholder div
   in Areas/_Client/Views/Client/Index.cshtml together when the flex shell
   becomes the only layout. */
body.app-shell-flex .page-heading-placeholder {
    display: none;
}

/* In the fixed-page-heading layout, .page-heading-tabs was position:fixed
   and styled in feature SCSS files. In the flex shell it flows in-document
   inside .wrapper-content, so re-create the white bar and pull it up to sit
   flush under the heading by canceling .wrapper-content's 30px top padding. */
body.app-shell-flex .page-heading-tabs {
    background-color: #ffffff;
    box-shadow: 0 10px 12px 0 rgba(82, 63, 105, .08);
    height: 55px;
    padding: 0 20px;
    margin-top: -20px;
    display: flex;
    align-items: center;
}

/* Bootstrap 3 stacks col-md-* below 992px; .page-heading's hard 55px height
   clips the second row. Allow the heading to grow when its content wraps. */
body.app-shell-flex .page-heading {
    height: auto;
    min-height: 55px;
}

body.app-shell-flex .app-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}

/* Scoped: elsewhere a reserved gutter would narrow every page that never scrolls. */
body.app-shell-flex:has(#page-wrapper.content-foundations) .app-content {
    scrollbar-gutter: stable;
}

body.app-shell-flex .app-content-body {
    flex: 1 1 auto;
}

body.app-shell-flex .wrapper-content {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 0;
}

body.app-shell-flex .footer,
body.app-shell-flex .footer.fixed,
body.app-shell-flex .footer.fixed_full {
    position: static;
    flex: 0 0 auto;
    margin: 0;
}

@media print {
    body.app-shell-flex,
    body.app-shell-flex #wrapper,
    body.app-shell-flex #page-wrapper,
    body.app-shell-flex .app-content {
        display: block;
        height: auto;
        overflow: visible;
    }

    body.app-shell-flex .navbar-static-side,
    body.app-shell-flex .navbar-fixed-top {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Mobile inverts the desktop mini-navbar convention. On desktop the
       sidebar is full-width by default and mini-navbar collapses it. On
       mobile the sidebar is fully hidden by default and the hamburger
       (which toggles mini-navbar on body) expands it to icon-only width.
       The icons-only state is the most we ever show at this size because
       a 220px sidebar leaves no room for content. */
    body.app-shell-flex .navbar-static-side {
        flex-basis: 0;
        min-width: 0;
        overflow: hidden;
    }

    body.app-shell-flex.mini-navbar .navbar-static-side {
        flex-basis: 70px;
    }

    /* Hide nav labels at mobile so icons fit in 70px. Mirrors the legacy
       body.mini-navbar label-hiding rules but triggers from viewport size
       so it applies even when mini-navbar is OFF. */
    body.app-shell-flex .nav-label,
    body.app-shell-flex .profile-element,
    body.app-shell-flex .navbar-default .nav li a span {
        display: none;
    }

    body.app-shell-flex .logo-element {
        display: block;
    }

    body.app-shell-flex .nav-header {
        padding: 0;
    }

    /* Sub-menu popouts at mobile icon-width. Positioned with position:fixed
       (top/left set inline by skimmer-app.js) so they escape the slimScroll
       wrapper's overflow:hidden, which would otherwise clip them at the
       sidebar's right edge. JS adds .popout-open to the parent <li> to show. */
    body.app-shell-flex .nav-second-level {
        display: none;
        position: fixed;
        min-width: 160px;
        background: #2F4050;
        padding: 10px;
        font-size: 12px;
        z-index: 2002;
    }

    body.app-shell-flex .nav > li.popout-open > .nav-second-level {
        display: block !important;
    }

    /* Re-show labels inside the popout — the mobile label-hiding rule above
       would otherwise leave the sub-menu showing only bullets. */
    body.app-shell-flex .nav-second-level .nav-label,
    body.app-shell-flex .navbar-default .nav-second-level li a span {
        display: inline;
    }
}