:root { scrollbar-gutter: stable; }
body.navigation-open { overflow: hidden; }
/* A solid overlay avoids filtering every pixel of a potentially large order table. */
body header .navigation-backdrop { position: fixed; inset: 0; z-index: 1000; background: #0f172a66; }
body header .navigation-backdrop[hidden] { display: none; }
body header .program-tabs:not([hidden]) {
  position: fixed; inset: 0 auto 0 0; z-index: 1001;
  width: min(360px,calc(100vw - 24px)); height: 100dvh; max-height: none;
  padding: 0; gap: 0; border: 0; border-right: 1px solid #e3e8f0;
  border-radius: 0 20px 20px 0; background: #fff; overflow: hidden;
  box-shadow: 8px 0 24px #0f172a26; contain: layout paint;
}
.drawer-heading { display: flex; align-items: center; gap: 11px; padding: 24px 18px; border-bottom: 1px solid #edf0f5; flex-shrink: 0; }
.drawer-brand-mark { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: #eef2ff; color: #4f46e5; font-size: 15px; font-weight: 800; }
.drawer-heading strong { display: block; color: #172033; font-size: 15px; letter-spacing: -.02em; }
.drawer-heading small { display: block; color: #8490a2; font-size: 11px; margin-top: 5px; }
.drawer-heading [data-close-navigation] { margin-left: auto; flex-shrink: 0; padding: 0; width: 30px; height: 30px; background: #f4f6fa; color: #64748b; font-size: 24px; font-weight: 400; }
.drawer-links { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px 20px; }
.drawer-section-title { color: #8a95a6; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin: 20px 12px 8px; }
body header .program-tab { display: flex; align-items: center; gap: 12px; position: relative; min-height: 44px; margin: 3px 0; padding: 11px 12px; border-radius: 9px; color: #475569 !important; font-size: 13px; font-weight: 500; line-height: 1.4; transition: background 120ms,color 120ms; }
body header .program-tab[hidden] { display: none; }
body header .program-tab:hover { background: #f5f7fb !important; color: #172033 !important; }
body header .program-tab.active { background: #edf2ff !important; color: #3158cc !important; font-weight: 700; }
body header .program-tab.active::after { content: ''; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: #5277e7; flex-shrink: 0; }
.drawer-nav-icon { width: 19px; height: 19px; flex-shrink: 0; opacity: .8; }
body header .program-menu-session { flex-shrink: 0; margin: 0; padding: 17px 22px; background: #fafbfd; border-top: 1px solid #e8edf4; }
body header .program-menu-user { font-size: 12px; color: #475569; }
body header .program-menu-session #logoutButton { border: 1px solid #e1e7ef; background: #fff; color: #64748b; border-radius: 8px; }
body header .program-tab:focus-visible,body header [data-close-navigation]:focus-visible { outline: 2px solid #7794ef; outline-offset: 2px; }