/* Side-panel menu (optional, per person): a module opens beside the sidebar instead of below it; the
   organization and menu search stay in place at the top and the person's name and the time at the bottom.
   Only active on desktop when <html data-menu-style="flyout">. */
.sidebar-user{display:none}
@media (min-width:961px){
    html[data-menu-style="flyout"] .sidebar-scroll{overflow:hidden}
    html[data-menu-style="flyout"] .sidebar-scroll>.nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;direction:ltr;margin-inline:-6px;padding-inline:6px;scrollbar-width:thin;scrollbar-color:#476183 transparent}
    html[data-menu-style="flyout"] .sidebar-scroll>.nav>*{direction:rtl}
    html[data-menu-style="flyout"] .sidebar-scroll>.nav::-webkit-scrollbar{width:6px}
    html[data-menu-style="flyout"] .sidebar-scroll>.nav::-webkit-scrollbar-thumb{background:#476183;border-radius:8px}
    html[data-menu-style="flyout"] .sidebar-foot{display:none}
    /* While the menu search has text, matches show in place as before. */
    html[data-menu-style="flyout"] .sidebar:not(:has([data-sidebar-search]:not(:placeholder-shown))) .nav-sub{display:none!important}
    html[data-menu-style="flyout"] .nav-module-toggle .nav-caret{transform:rotate(90deg)}
    html[data-menu-style="flyout"] .nav-module.is-flyout>.nav-module-toggle{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset -3px 0 0 #3b82f6}
    html[data-menu-style="flyout"] .nav-module[data-nav-current]>.nav-module-toggle{color:#fff}

    html[data-menu-style="flyout"] .sidebar-user{display:flex;align-items:center;gap:10px;margin-top:10px;padding:12px 6px 2px;border-top:1px solid #263e5e;color:#e5edfb;flex-shrink:0;text-decoration:none}
    html[data-menu-style="flyout"] .sidebar-user .avatar{width:38px;height:38px;flex:none}
    html[data-menu-style="flyout"] .sidebar-user-text{display:grid;min-width:0;line-height:1.5}
    html[data-menu-style="flyout"] .sidebar-user-text strong{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    html[data-menu-style="flyout"] .sidebar-user-role{font-size:.75rem;color:#9fb0cc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    html[data-menu-style="flyout"] .sidebar-user-text time{font-size:.74rem;color:var(--sidebar-muted);white-space:nowrap}
    html[data-menu-style="flyout"] .sidebar-compact .sidebar-user{justify-content:center;padding-inline:0}
    html[data-menu-style="flyout"] .sidebar-compact .sidebar-user-text{display:none}

    /* The panel is joined to the sidebar: one card, split by the sidebar's own border line, and the page moves aside for it. */
    .nav-flyout{position:fixed;width:272px;z-index:40;display:flex;flex-direction:column;padding:16px 10px 14px;
        background:var(--sidebar-bg);color:var(--sidebar-text);border:1px solid #263e5e;border-right:0;border-radius:18px 0 0 18px;
        animation:nav-flyout-in .16s ease-out}
    .nav-flyout.is-instant{animation:none}
    html[data-menu-style="flyout"] .shell.has-flyout .sidebar{border-top-left-radius:0;border-bottom-left-radius:0}
    html[data-menu-style="flyout"] .shell>.main{transition:padding-inline-start .16s ease}
    html[data-menu-style="flyout"] .shell.has-flyout>.main{padding-inline-start:272px}
    .nav-flyout[hidden]{display:none}
    .nav-flyout-head{display:flex;align-items:center;gap:10px;padding:2px 6px 12px;margin-bottom:8px;border-bottom:1px solid #263e5e;color:#fff;font-weight:700;font-size:.95rem}
    .nav-flyout-head>.icon{width:20px;height:20px;flex:none}
    .nav-flyout-head>span{flex:1;min-width:0}
    .nav-flyout-close{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--sidebar-muted);cursor:pointer;font-size:1rem}
    .nav-flyout-close:hover{background:rgba(255,255,255,.08);color:#fff}
    .nav-flyout-body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#476183 transparent}
    .nav-flyout-body a{display:flex;align-items:center;gap:10px;padding:9px 10px;margin-bottom:2px;border-radius:10px;color:var(--sidebar-text);font-size:.9rem;text-decoration:none}
    .nav-flyout-body a:hover{background:rgba(255,255,255,.07);color:#fff}
    .nav-flyout-body a[aria-current="page"]{background:linear-gradient(135deg,#2563eb,#2889ff);color:#fff}
    .nav-flyout-body a .icon{width:18px;height:18px;flex:none}
    .nav-flyout-body .nav-sub-title{font-size:.72rem;color:var(--sidebar-muted);padding:10px 10px 4px}
    .nav-flyout-body .nav-badge{margin-inline-start:auto}
    @keyframes nav-flyout-in{from{opacity:0}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){.nav-flyout{animation:none}html[data-menu-style="flyout"] .shell>.main{transition:none}}