:root { --sidebar-collapsed-width: 76px; --sidebar-rail-control-size: 32px; --sidebar-rail-item-size: 46px; --sidebar-rail-flyout-width: 286px; } .sidebar, .app-shell, body.authenticated-layout .app-shell { transition: width .22s cubic-bezier(.2, .8, .2, 1), padding .22s cubic-bezier(.2, .8, .2, 1), padding-inline-start .22s cubic-bezier(.2, .8, .2, 1), grid-template-columns .22s cubic-bezier(.2, .8, .2, 1); } .sidebar nav > a, .sidebar nav .report-nav-toggle, .sidebar-control-button { transition: width .18s ease, min-height .18s ease, padding .18s ease, background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; } .sidebar nav > a[data-sidebar-module-toggle="true"] { cursor: pointer; } .sidebar nav > a[data-sidebar-module-toggle="true"][aria-expanded="true"] { color: var(--primary); background: var(--sidebar-active); } .sidebar nav > a[data-sidebar-module-toggle="true"]::after { content: ""; width: 7px; height: 7px; margin-inline-start: auto; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .16s ease; } .sidebar nav > a[data-sidebar-module-toggle="true"][aria-expanded="true"]::after { transform: rotate(225deg); } /* Keep inactive module children available to the collapsed rail flyout only. */ .sidebar nav > .nav-submenu.sidebar-rail-only { display: none !important; } .sidebar-rail-tooltip, .sidebar-rail-flyout { position: fixed; z-index: 1200; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 16px 42px rgba(15, 45, 82, .2); } html[data-theme="dark"] .sidebar-rail-tooltip, html[data-theme="dark"] .sidebar-rail-flyout { background: var(--dark-bg-elevated, #16243a); border-color: var(--dark-border-strong, #3d5571); box-shadow: 0 18px 48px rgba(0, 0, 0, .46); } .sidebar-rail-tooltip { max-width: min(260px, calc(100vw - 24px)); padding: 7px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; line-height: 1.35; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity .12s ease, transform .12s ease; } .sidebar-rail-tooltip.is-visible { opacity: 1; transform: translateY(0); } .sidebar-rail-flyout { width: min(var(--sidebar-rail-flyout-width), calc(100vw - 96px)); max-height: calc(100dvh - 16px); padding: 8px; border-radius: 12px; overflow: auto; overscroll-behavior: contain; } .sidebar-rail-flyout[hidden], .sidebar-rail-tooltip[hidden], .sidebar-mobile-backdrop[hidden] { display: none !important; } .sidebar-rail-flyout-title { display: flex; align-items: center; min-height: 34px; margin: -2px -2px 6px; padding: 7px 9px; color: var(--text); background: var(--surface-soft); border-radius: 9px; font-size: 12px; font-weight: 800; } /* The legacy collapsed rule hides every .nav-submenu in the document. The flyout is mounted under , so give its cloned submenu a more specific visible rule instead of letting the rail's source-menu rule hide it. */ html.sidebar-collapsed .sidebar-rail-flyout .nav-submenu, .sidebar-rail-flyout .nav-submenu, .sidebar-rail-flyout .report-nav-panel, .sidebar-rail-flyout .report-nav-subpanel { display: grid !important; gap: 3px; margin: 0; padding: 0; border: 0; } .sidebar-rail-flyout a, .sidebar-rail-flyout .report-nav-subtoggle { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 9px; color: var(--text-soft); background: transparent; border: 0; border-radius: 8px; font-family: var(--app-font-family); font-size: 12px; font-weight: 700; line-height: 1.35; text-align: start; } .sidebar-rail-flyout a:hover, .sidebar-rail-flyout a:focus-visible, .sidebar-rail-flyout .report-nav-subtoggle:hover { color: var(--primary); background: var(--primary-soft); } .sidebar-rail-flyout a.active { color: var(--primary); background: var(--sidebar-active); } .sidebar-rail-flyout .nav-icon { width: 20px; flex: 0 0 20px; font-size: 16px !important; } .sidebar-rail-flyout .report-nav-subgroup { display: grid; } .sidebar-rail-flyout .report-nav-subgroup:not([open]) > .report-nav-subpanel { display: none !important; } .sidebar-mobile-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(4, 16, 38, .44); border: 0; padding: 0; opacity: 0; pointer-events: none; transition: opacity .2s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .sidebar-mobile-backdrop.is-visible { opacity: 1; pointer-events: auto; } @media screen and (min-width: 721px) { html.sidebar-collapsed { --sidebar-width: var(--sidebar-collapsed-width); } html.sidebar-collapsed body.authenticated-layout .app-shell { padding-inline-start: var(--sidebar-collapsed-width); } html.sidebar-collapsed body.authenticated-layout .sidebar, html.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); padding: 7px 5px 9px; align-items: stretch; overflow: visible; } html.sidebar-collapsed .sidebar .brand, html.sidebar-collapsed .sidebar .sidebar-footer { display: none !important; } html.sidebar-collapsed .sidebar-control-group { position: static; display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 100%; margin: 0 0 9px; } html.sidebar-collapsed .sidebar-control-button { width: var(--sidebar-rail-control-size); height: var(--sidebar-rail-control-size); flex: 0 0 var(--sidebar-rail-control-size); } html.sidebar-collapsed .sidebar nav { display: grid !important; align-content: start; gap: 3px; width: 100%; min-height: 0; margin: 0; padding: 2px 4px 8px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; } html.sidebar-collapsed .sidebar nav::-webkit-scrollbar { width: 0; height: 0; } html.sidebar-collapsed .sidebar nav > a, html.sidebar-collapsed .sidebar nav .report-nav-toggle { position: relative; width: var(--sidebar-rail-item-size); min-width: var(--sidebar-rail-item-size); min-height: var(--sidebar-rail-item-size); height: var(--sidebar-rail-item-size); margin-inline: auto; padding: 0 !important; justify-content: center; gap: 0; border-radius: 11px; font-size: 0 !important; line-height: 1; } html.sidebar-collapsed .sidebar nav > a > .sidebar-rail-label, html.sidebar-collapsed .sidebar nav > a > .badge, html.sidebar-collapsed .sidebar .report-nav-toggle > span:not(.nav-icon) { display: none !important; } html.sidebar-collapsed .sidebar nav > a::before, html.sidebar-collapsed .sidebar nav .report-nav-toggle::before { content: ""; position: absolute; inset-block: 9px; inset-inline-start: -4px; width: 3px; border-radius: 999px; background: transparent; } html.sidebar-collapsed .sidebar nav > a[aria-haspopup="menu"]::after, html.sidebar-collapsed .sidebar nav .report-nav-toggle[aria-haspopup="menu"]::after { content: ""; position: absolute; inset-block-start: 7px; inset-inline-end: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--surface); } html.sidebar-collapsed .sidebar nav > a.active::before, html.sidebar-collapsed .sidebar nav .report-nav-toggle[aria-expanded="true"]::before { background: var(--primary); } html.sidebar-collapsed .sidebar nav > a .nav-icon, html.sidebar-collapsed .sidebar nav .report-nav-toggle .nav-icon { width: 24px; flex: 0 0 24px; padding: 0; color: var(--primary-icon); background: transparent; font-size: 20px !important; line-height: 1; text-align: center; } html.sidebar-collapsed .sidebar nav > a.active .nav-icon, html.sidebar-collapsed .sidebar nav .report-nav-toggle[aria-expanded="true"] .nav-icon { color: var(--primary); background: transparent; } html.sidebar-collapsed .sidebar nav > .nav-submenu, html.sidebar-collapsed .sidebar nav .report-nav-panel { display: none !important; } html.sidebar-collapsed .sidebar .report-navigation { display: grid !important; gap: 3px; margin: 0; } html.sidebar-collapsed .sidebar .report-nav-section { display: grid; justify-items: center; } } @media screen and (max-width: 720px) { body.authenticated-layout .app-shell, html.sidebar-collapsed body.authenticated-layout .app-shell { display: block; padding-inline-start: 0; } body.authenticated-layout .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60; display: flex; flex-direction: column; align-items: stretch; width: min(86vw, 320px); height: 100dvh; padding: 10px; overflow: hidden; border-inline-end: 1px solid var(--border); border-bottom: 0; box-shadow: 0 18px 50px rgba(4, 16, 38, .3); transform: translateX(0); transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease; } html[dir="rtl"] body.authenticated-layout .sidebar { transform: translateX(0); } body.authenticated-layout .sidebar-control-group, html.sidebar-collapsed body.authenticated-layout .sidebar-control-group { position: static; order: -1; display: flex; flex-direction: row; align-self: flex-start; gap: 6px; margin: 0 0 8px; } body.authenticated-layout .sidebar .brand { display: flex !important; margin: 0; padding: 2px 4px 7px; } body.authenticated-layout .sidebar .brand img { width: 138px; max-height: 86px; } body.authenticated-layout .sidebar nav { display: grid !important; align-content: start; width: 100%; min-height: 0; margin: 0; padding: 0 2px 12px; overflow-y: auto; overflow-x: hidden; } body.authenticated-layout .sidebar nav > a, body.authenticated-layout .sidebar nav .report-nav-toggle { width: 100%; justify-content: flex-start; } html[dir="rtl"] body.authenticated-layout .sidebar nav > a, html[dir="rtl"] body.authenticated-layout .sidebar nav .report-nav-toggle { justify-content: flex-start; } html.sidebar-collapsed body.authenticated-layout .sidebar { width: min(86vw, 320px); transform: translateX(calc(-100% - 18px)); box-shadow: none; } html[dir="rtl"].sidebar-collapsed body.authenticated-layout .sidebar { transform: translateX(calc(100% + 18px)); } html.sidebar-collapsed body.authenticated-layout .sidebar .brand, html.sidebar-collapsed body.authenticated-layout .sidebar nav, html.sidebar-collapsed body.authenticated-layout .sidebar .nav-submenu, html.sidebar-collapsed body.authenticated-layout .sidebar .sidebar-footer { display: flex !important; } html.sidebar-collapsed body.authenticated-layout .sidebar nav, html.sidebar-collapsed body.authenticated-layout .sidebar .nav-submenu { display: grid !important; } html.sidebar-mobile-open, html.sidebar-mobile-open body { overflow: hidden !important; } .sidebar-rail-tooltip, .sidebar-rail-flyout { display: none !important; } .sidebar-mobile-launcher { position: fixed; inset-block-start: 10px; inset-inline-start: 10px; z-index: 54; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: var(--primary); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 45, 82, .18); cursor: pointer; } html.sidebar-mobile-open .sidebar-mobile-launcher { opacity: 0; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { .sidebar, .app-shell, body.authenticated-layout .app-shell, .sidebar-mobile-backdrop, .sidebar-rail-tooltip { transition-duration: .01ms !important; } } @media print { .sidebar-rail-tooltip, .sidebar-rail-flyout, .sidebar-mobile-backdrop, .sidebar-mobile-launcher { display: none !important; } }