/* ==========================================================================
Q88Web Navigation — Phase 3
All selectors scoped under .sidebar-nav (body class).
When class is absent, this entire file has zero effect.
Loaded conditionally via Config.EnableRefreshedFrontend.
Rollback: remove or set EnableRefreshedFrontend=false.
Sections:
1. Header Bar
2. Layout Wrapper
3. Sidebar Base
4. Sidebar Header (brand card)
5. Sidebar Content (scrollable)
6. Sidebar Menu Items
7. Collapsed State
8. Collapsed Tooltips
9. Sidebar Footer (app switcher + profile)
10. Theme Toggle
11. Content Area Adjustments
12. Search Autocomplete
13. Reduced Motion
14. Print Styles
========================================================================== */
/* --------------------------------------------------------------------------
Section 0: Transition suppression for initial page load
-------------------------------------------------------------------------- */
.q88-no-transition,
.q88-no-transition * {
transition: none !important;
}
/* --------------------------------------------------------------------------
Section 1: Header Bar
-------------------------------------------------------------------------- */
.sidebar-nav .q88-header {
position: sticky;
top: 0;
z-index: var(--raw-z-header);
display: flex;
align-items: center;
justify-content: space-between;
height: 48px;
padding: 0 var(--raw-space-8);
background-color: var(--sidebar);
border-bottom: 1px solid var(--border-subtle);
margin-left: var(--sidebar-width-expanded);
transition: margin-left 0.2s ease;
font-family: var(--raw-font-family-modern);
}
.sidebar-nav .q88-header__actions {
display: flex;
align-items: center;
gap: var(--raw-space-8);
margin-left: auto;
}
.sidebar-nav .q88-header__toggle {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: none;
border: none;
cursor: pointer;
color: var(--foreground);
border-radius: var(--raw-radius-md);
transition: background-color 0.15s ease;
flex-shrink: 0;
}
.sidebar-nav .q88-header__toggle:hover {
background-color: var(--muted);
}
.sidebar-nav .q88-header__toggle svg {
width: 16px;
height: 16px;
display: block;
}
.sidebar-nav .q88-header__search {
position: relative;
width: 224px;
flex-shrink: 0;
}
.sidebar-nav .q88-header__search-input {
box-sizing: border-box;
width: 100%;
height: 32px;
padding: 0 12px 0 36px;
border: 1px solid var(--border-subtle);
border-radius: var(--raw-radius-md);
background-color: var(--background);
font-size: var(--font-size-sm);
color: var(--foreground);
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sidebar-nav .q88-header__search-input:focus {
outline: none;
border-color: var(--primary);
background-color: var(--background);
}
.sidebar-nav .q88-header__search-input::placeholder {
color: var(--muted-foreground);
opacity: 1;
}
.sidebar-nav .q88-header__search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--muted-foreground);
pointer-events: none;
}
.sidebar-nav.q88-sidebar-collapsed .q88-header {
margin-left: var(--sidebar-width-collapsed);
}
.sidebar-nav #sidebarNotification__container {
position: relative;
flex-shrink: 0;
}
.sidebar-nav #sidebarNotification__container .header__notification {
position: relative;
}
.sidebar-nav #sidebarNotification__container .bell-icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--raw-radius-md);
cursor: pointer;
color: var(--foreground);
transition: background-color 0.15s ease;
}
.sidebar-nav #sidebarNotification__container .bell-icon:hover {
background-color: var(--muted);
}
/* Swap legacy blue bell PNG for a Lucide Bell painted via mask (refresh header
only — scoped to #sidebarNotification__container; legacy nav keeps the PNG). */
.sidebar-nav #sidebarNotification__container .bell-icon img {
display: none;
}
.sidebar-nav #sidebarNotification__container .bell-icon::before {
content: "";
width: 16px;
height: 16px;
flex-shrink: 0;
background-color: var(--foreground);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / 16px;
mask: url("data:image/svg+xml;utf8,") no-repeat center / 16px;
}
.sidebar-nav #sidebarNotification__container .notification-number {
position: absolute;
top: 2px;
right: 6px;
box-sizing: border-box;
width: 8px;
height: 8px;
background-color: var(--red-600);
border: 1px solid var(--background);
border-radius: var(--raw-radius-full);
font-size: 0;
padding: 0;
min-width: 0;
}
/* --------------------------------------------------------------------------
Section 2: Layout Wrapper
-------------------------------------------------------------------------- */
.sidebar-nav .q88-layout {
display: flex;
min-height: calc(100vh - 48px);
}
/* --------------------------------------------------------------------------
Section 3: Sidebar Base
-------------------------------------------------------------------------- */
.sidebar-nav .q88-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var(--sidebar-width-expanded);
background-color: var(--sidebar);
color: var(--sidebar-foreground);
overflow: hidden;
z-index: var(--raw-z-sidebar);
transition: width 0.2s ease;
display: flex;
flex-direction: column;
border-right: 1px solid var(--sidebar-border);
font-family: var(--raw-font-family-modern);
}
/* --------------------------------------------------------------------------
Section 4: Sidebar Header — brand card
Figma: SidebarHeader > SidebarMenuButton (bordered card)
-------------------------------------------------------------------------- */
.sidebar-nav .q88-sidebar__header {
flex-shrink: 0;
padding: var(--raw-space-4);
}
.sidebar-nav .q88-sidebar__brand-card {
display: flex;
align-items: center;
gap: var(--raw-space-4);
text-decoration: none;
color: var(--sidebar-foreground);
padding: var(--raw-space-4);
height: 48px;
border: 1px solid var(--sidebar-border);
border-radius: var(--raw-radius-md);
transition: background-color 0.15s ease;
}
.sidebar-nav .q88-sidebar__brand-card:hover {
background-color: var(--sidebar-accent);
}
/* Avatar/Product — 32x32 primary-color rounded square with white logo */
.sidebar-nav .q88-sidebar__avatar--brand {
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: var(--raw-radius-lg);
background-color: var(--sidebar-brand);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: #ffffff;
}
.sidebar-nav .q88-sidebar__avatar-img {
width: 14px;
height: 16px;
display: block;
}
/* Milbros brand mark is near-square — render at 18x18 inside the 32px badge
(matches the source logo's inner glyph proportions). */
.sidebar-nav .q88-sidebar__avatar-img--milbros {
width: 18px;
height: 18px;
}
/* Brand text — flex column, gap 4px (Figma spacing/1) */
.sidebar-nav .q88-sidebar__brand-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.sidebar-nav .q88-sidebar__brand-title {
font-size: 14px;
font-weight: var(--font-weight-semibold);
line-height: 1;
color: var(--sidebar-foreground);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-nav .q88-sidebar__brand-subtitle {
font-size: 12px;
font-weight: var(--font-weight-normal);
line-height: 1;
color: var(--sidebar-muted-foreground);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-nav .q88-sidebar__brand-chevron {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--sidebar-icon);
}
/* --------------------------------------------------------------------------
Section 5: Sidebar Content — scrollable menu area
-------------------------------------------------------------------------- */
.sidebar-nav .q88-sidebar__content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: var(--raw-space-12);
}
.sidebar-nav .q88-sidebar__section {
padding: var(--raw-space-4);
}
.sidebar-nav .q88-sidebar__section-label {
display: flex;
align-items: center;
padding: 0 var(--raw-space-4);
height: 32px;
font-size: 12px;
line-height: 16px;
font-weight: var(--font-weight-medium);
color: var(--sidebar-foreground);
opacity: 0.7;
}
.sidebar-nav .q88-sidebar__menu {
list-style: none;
margin: 0;
padding: 0;
}
/* --------------------------------------------------------------------------
Section 6: Sidebar Menu Items
-------------------------------------------------------------------------- */
.sidebar-nav .q88-sidebar__item {
position: relative;
}
.sidebar-nav .q88-sidebar__link {
display: flex;
align-items: center;
gap: var(--raw-space-4);
box-sizing: border-box;
padding: var(--raw-space-4);
color: var(--sidebar-foreground);
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
transition: background-color 0.15s ease;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
height: 32px;
border-radius: var(--raw-radius-md);
}
.sidebar-nav .q88-sidebar__link:hover {
background-color: var(--sidebar-accent);
}
.sidebar-nav .q88-sidebar__link:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px rgba(163, 163, 163, 0.5);
border-radius: var(--raw-radius-md);
}
.sidebar-nav .q88-sidebar__item--active > .q88-sidebar__link {
background-color: var(--sidebar-accent);
color: var(--sidebar-accent-foreground);
font-weight: var(--font-weight-medium);
}
.sidebar-nav .q88-sidebar__item--active > .q88-sidebar__link .q88-sidebar__icon {
color: var(--sidebar-accent-foreground);
}
.sidebar-nav .q88-sidebar__icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--sidebar-foreground);
}
.sidebar-nav .q88-sidebar__label {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* `line-height: normal` sizes the label box tight to the cap height, so
descenders on letters like "g" in "Vetting" get clipped by the
overflow:hidden we need for ellipsis. 1.4 gives the descent room to
breathe while keeping ellipsis behaviour for long labels. */
line-height: 1.4;
}
.sidebar-nav .q88-sidebar__chevron {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--sidebar-icon);
transition: transform 0.2s ease;
}
.sidebar-nav .q88-sidebar__item--open > .q88-sidebar__link .q88-sidebar__chevron {
transform: rotate(90deg);
}
.sidebar-nav .q88-sidebar__submenu {
list-style: none;
margin: 0;
padding: 2px 0;
gap: 4px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
position: relative;
}
.sidebar-nav .q88-sidebar__item--open > .q88-sidebar__submenu {
max-height: 2000px;
overflow-y: hidden;
}
.sidebar-nav .q88-sidebar__submenu .q88-sidebar__link {
padding: 8px 8px 8px 32px;
font-size: var(--font-size-sm);
color: var(--sidebar-submenu-foreground);
height: 32px;
}
.sidebar-nav .q88-sidebar__submenu .q88-sidebar__link:hover {
color: var(--sidebar-foreground);
}
.sidebar-nav .q88-sidebar__item--open > .q88-sidebar__submenu::before {
content: '';
position: absolute;
left: 16px;
top: 2px;
bottom: 2px;
width: 1px;
background-color: var(--sidebar-border);
}
/* --------------------------------------------------------------------------
Section 7: Collapsed State
-------------------------------------------------------------------------- */
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar {
width: var(--sidebar-width-collapsed);
}
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__section-label,
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__label,
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__chevron,
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__submenu,
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__user-info,
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__user-name,
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__user-company,
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__brand-text,
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__brand-chevron {
display: none;
}
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__header {
padding: var(--raw-space-4);
}
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__brand-card {
justify-content: center;
padding: var(--raw-space-4);
border: none;
}
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__link {
justify-content: center;
padding: var(--raw-space-4);
}
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__menu {
display: flex;
flex-direction: column;
gap: var(--raw-space-2);
}
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__profile {
justify-content: center;
padding: var(--raw-space-4);
border: none;
}
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__profile-chevron {
display: none;
}
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__footer {
padding: var(--raw-space-2);
}
/* --------------------------------------------------------------------------
Section 8: Collapsed Tooltips
-------------------------------------------------------------------------- */
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__item > .q88-sidebar__link {
position: relative;
}
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__item > .q88-sidebar__link::after {
content: attr(data-label);
position: absolute;
left: calc(var(--sidebar-width-collapsed) + 4px);
top: 50%;
transform: translateY(-50%);
padding: var(--raw-space-2) var(--raw-space-4);
background-color: var(--sidebar-tooltip);
color: var(--sidebar-tooltip-foreground);
font-size: var(--font-size-xs);
white-space: nowrap;
border-radius: var(--raw-radius-sm);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
z-index: calc(var(--raw-z-sidebar) + 1);
}
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__item > .q88-sidebar__link:hover::after {
opacity: 1;
}
/* --------------------------------------------------------------------------
Section 9: Sidebar Footer — app switcher + user profile
Figma: SidebarFooter pinned to bottom
-------------------------------------------------------------------------- */
.sidebar-nav .q88-sidebar__footer {
flex-shrink: 0;
margin-top: auto;
padding: var(--raw-space-4);
display: flex;
flex-direction: column;
gap: var(--raw-space-4);
}
/* User profile card — bordered (Figma node 25681:13743) */
.sidebar-nav .q88-sidebar__profile {
display: flex;
align-items: center;
gap: var(--raw-space-4);
padding: var(--raw-space-4);
border: 1px solid var(--sidebar-border);
border-radius: var(--raw-radius-md);
flex-shrink: 0;
cursor: pointer;
transition: background-color 0.15s ease;
}
.sidebar-nav .q88-sidebar__profile:hover {
background-color: var(--sidebar-accent);
}
/* User avatar — 32x32 rounded full, muted bg, initials */
.sidebar-nav .q88-sidebar__avatar--user {
width: 32px;
height: 32px;
border-radius: var(--raw-radius-full);
background-color: var(--sidebar-accent);
color: var(--sidebar-foreground);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
flex-shrink: 0;
}
.sidebar-nav .q88-sidebar__user-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.sidebar-nav .q88-sidebar__user-name {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--sidebar-foreground);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-nav .q88-sidebar__user-company {
display: block;
font-size: var(--font-size-xs);
color: var(--sidebar-foreground);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-nav .q88-sidebar__profile-chevron {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--sidebar-icon);
}
/* --------------------------------------------------------------------------
Section 10: Theme Toggle
-------------------------------------------------------------------------- */
.sidebar-nav .q88-sidebar__theme-toggle-container {
padding: 0;
border-top: 1px solid var(--sidebar-border);
padding-top: var(--raw-space-4);
}
.sidebar-nav .q88-sidebar__theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 8px;
border: 1px solid var(--sidebar-border);
border-radius: var(--raw-radius-md);
background: transparent;
color: var(--sidebar-icon);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-nav .q88-sidebar__theme-toggle:hover {
background-color: var(--sidebar-accent);
color: var(--sidebar-foreground);
}
.sidebar-nav .q88-sidebar__theme-toggle svg {
width: 18px;
height: 18px;
}
/* Collapsed: center icon */
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__theme-toggle-container {
padding: 0;
padding-top: var(--raw-space-2);
}
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__theme-toggle {
padding: 6px;
}
/* --------------------------------------------------------------------------
Section 11: Content Area Adjustments
-------------------------------------------------------------------------- */
.sidebar-nav .q88-content {
flex: 1;
margin-left: var(--sidebar-width-expanded);
transition: margin-left 0.2s ease;
min-width: 0;
}
.sidebar-nav.q88-sidebar-collapsed .q88-content {
margin-left: var(--sidebar-width-collapsed);
}
/* Position List iframe embed (context=pos, wired in Default.Master.cs) — the
q88Header/sidebarWO controls are Visible=false so no sidebar/header markup
renders, but `sidebar-nav` stays for its other content-area rules. Zero the
margin/min-height that assume a fixed sidebar + sticky header are present,
otherwise the content is left with a blank gutter/gap where they used to be. */
.sidebar-nav.pos-embed .q88-content {
margin-left: 0;
}
.sidebar-nav.pos-embed .q88-layout {
min-height: 0;
}
/* Hide old horizontal nav when sidebar is active */
.sidebar-nav #navWO {
display: none;
}
/* Hide header notification container in old nav (use sidebar header one) */
.sidebar-nav #notification__container {
display: none;
}
/* Reduce min-width spacer when sidebar takes up space */
.sidebar-nav .ContentPane img[width="1000"] {
width: 900px;
}
.sidebar-nav.q88-sidebar-collapsed .q88-content .ContentPane img[width="1000"] {
width: 940px;
}
/* ModuleTemplate V2 uses min-width: 975px + display:table which overflows
when the sidebar takes space. Override to fit available width. */
.sidebar-nav .modV2 {
min-width: 0;
width: 100%;
display: block;
}
/* --------------------------------------------------------------------------
Section 12: Search Autocomplete — header bar context
-------------------------------------------------------------------------- */
/* MainWhiteout.css / Q88Whiteout.css paint a bare navy-era completion list, and
AjaxControlToolkit's AutoCompleteExtender renders the list with default
bullets. ACT appends that directly to (NOT inside .q88-header) and
sets its geometry inline (position / width / left / top / z-index / visibility),
so the refresh skin must be scoped to body.sidebar-nav and paint chrome only —
never geometry. This is the §9.6.6 canon applied to every AutoCompleteExtender
suggestion list: the header sidebar search (aceSidebarSearch), the legacy
navtop quick search (autoCompleteVesselSearch) and ComboBox.ascx popovers.
Item class differs by extender: bare extenders use ACT's default `_listItem`,
while ComboBox.ascx / navtop set `_CompletionListItem` — cover both. On hover
ACT *swaps* the item class for `_HighlightedItem` (class-swap trap, §9.6.2),
so the highlight rule mirrors every size-affecting property. */
body.sidebar-nav .AutoCompleteExtender_CompletionList {
position: absolute;
box-sizing: border-box;
margin: 0;
padding: 4px;
list-style: none;
background-color: var(--background, #ffffff);
border: 1px solid var(--border, #e2e8f0);
border-radius: var(--raw-radius-md, 8px);
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
max-height: 320px;
overflow-y: auto;
font-family: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
font-size: var(--font-size-sm, 14px);
color: var(--foreground, #0f172a);
}
body.sidebar-nav .AutoCompleteExtender_CompletionList .AutoCompleteExtender_listItem,
body.sidebar-nav .AutoCompleteExtender_CompletionList .AutoCompleteExtender_CompletionListItem {
display: block;
box-sizing: border-box;
margin: 0;
padding: 6px 32px 6px 8px;
list-style: none;
border: 1px solid transparent;
border-radius: 6px;
line-height: 20px;
color: var(--foreground, #0f172a);
text-align: left;
cursor: pointer;
}
body.sidebar-nav .AutoCompleteExtender_CompletionList .AutoCompleteExtender_HighlightedItem {
display: block;
box-sizing: border-box;
margin: 0;
padding: 6px 32px 6px 8px;
list-style: none;
border: 1px solid var(--border, #e2e8f0);
border-radius: 6px;
line-height: 20px;
color: var(--foreground, #0f172a);
text-align: left;
cursor: pointer;
background-color: var(--surface-muted, #f1f5f9);
}
body.sidebar-nav .AutoCompleteExtender_CompletionList .AutoCompleteExtender_CompletionListItemSelected,
body.sidebar-nav .AutoCompleteExtender_CompletionList .AutoCompleteExtender_selectedListItem {
background-color: var(--border, #e2e8f0);
border-color: var(--border, #e2e8f0);
}
/* The header quick-search lists are only as wide as their input (≈ 222px); the
§9.6.6 32px right-pad affordance reserve isn't used here and forces long
vessel names to wrap early. Tighten the right padding for just the two header
extenders (scoped by their completion-list id) so names get the full row
width; ComboBox popovers elsewhere keep the canon padding. */
body.sidebar-nav [id$="aceSidebarSearch_completionListElem"] .AutoCompleteExtender_listItem,
body.sidebar-nav [id$="aceSidebarSearch_completionListElem"] .AutoCompleteExtender_HighlightedItem,
body.sidebar-nav [id$="autoCompleteVesselSearch_completionListElem"] .AutoCompleteExtender_CompletionListItem,
body.sidebar-nav [id$="autoCompleteVesselSearch_completionListElem"] .AutoCompleteExtender_HighlightedItem {
padding-right: 8px;
word-break: break-word;
}
/* --------------------------------------------------------------------------
Section 13: Reduced Motion
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.sidebar-nav .q88-header,
.sidebar-nav .q88-sidebar,
.sidebar-nav .q88-sidebar__link,
.sidebar-nav .q88-sidebar__chevron,
.sidebar-nav .q88-sidebar__submenu,
.sidebar-nav .q88-sidebar__theme-toggle,
.sidebar-nav .q88-sidebar__brand-card,
.sidebar-nav .q88-sidebar__profile,
.sidebar-nav .q88-content {
transition: none !important;
}
}
/* --------------------------------------------------------------------------
Section 14: Dark Mode Overrides
-------------------------------------------------------------------------- */
body[data-theme="dark"] #sidebarNotification__container .notification-number {
border-color: var(--sidebar);
}
/* --------------------------------------------------------------------------
Section 15: Footer Cleanup
-------------------------------------------------------------------------- */
/* Hide debug trace row (ASP.NET mangles id to ctl00_trDebug) */
.sidebar-nav tr[id$="trDebug"] {
display: none !important;
}
/* Footer: keep copyright only — hide links, social icons, mobile return link */
.sidebar-nav footer table tr td:not(:first-child) {
display: none !important;
}
/* Copyright = a single centered line on the page background: Inter, regular, 12px.
Drops the legacy #4F72A4 blue bar + white text (both set in WhiteoutNavBottom.ascx).
Scoped to .sidebar-nav (not .q88-refresh) to match the cleanup above so every
sidebar-shell page gets it. With the other cells hidden, the copyright cell spans
the full width, so text-align:center puts it in the middle of the page. */
.sidebar-nav footer {
background-color: transparent;
}
.sidebar-nav footer table td {
font-family: var(--font-family);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-normal);
text-align: center;
}
/* .whiteText carries `color: var(--text-on-brand) !important` (MainWhiteout.css) for
the blue-bar era; override with !important now that the bar is gone. */
.sidebar-nav footer .whiteText {
color: var(--muted-foreground) !important;
}
/* --------------------------------------------------------------------------
Section 16: Print Styles
-------------------------------------------------------------------------- */
@media print {
.sidebar-nav .q88-header,
.sidebar-nav .q88-sidebar {
display: none;
}
.sidebar-nav .q88-content {
margin-left: 0;
}
.sidebar-nav #navWO {
display: none;
}
}
/* ===== Account Menu (QEN-8290) ===== */
/* Escape the nav's overflow:hidden clip so the flyout can render past the
sidebar's right edge. Scoped via :has() to only loosen when menu is open. */
.sidebar-nav .q88-sidebar:has(.q88-account-menu.is-open) {
overflow: visible;
}
/* Footer must be position:relative so the menu can anchor above the trigger */
.sidebar-nav .q88-sidebar__footer {
position: relative;
}
/* Profile trigger: reset button styles, keep existing card appearance */
.sidebar-nav .q88-sidebar__profile.q88-account-menu__trigger {
width: 100%;
background: transparent;
border: 1px solid var(--sidebar-border);
text-align: left;
font: inherit;
color: inherit;
}
/* Dropdown panel */
.sidebar-nav .q88-account-menu {
position: absolute;
left: 8px;
right: 8px;
bottom: calc(100% + 8px);
max-width: calc(100% - 16px);
background: var(--q88-bg-surface, #ffffff);
border: 1px solid var(--q88-border-subtle, #E5E7EB);
border-radius: 8px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
padding: 4px 0;
z-index: 850;
/* Hidden by default via [hidden] attribute; .is-open reveals */
opacity: 0;
transform: translateY(4px);
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.sidebar-nav .q88-account-menu.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Collapsed sidebar: keep dropdown at expanded-state width by anchoring to the
left edge and overflowing past the narrow sidebar (parent uses :has() to
allow overflow when open — see rule above). */
.sidebar-nav.q88-sidebar-collapsed .q88-account-menu {
left: 8px;
right: auto;
width: calc(var(--sidebar-width-expanded) - 16px);
max-width: none;
}
/* Menu header — avatar + name block */
.sidebar-nav .q88-account-menu__header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 12px 8px;
}
/* Collapsed sidebar hides .q88-sidebar__user-* via Section 7. Re-enable them
inside the account dropdown header so name/company are visible regardless
of sidebar collapse state. */
.sidebar-nav.q88-sidebar-collapsed .q88-account-menu__header .q88-sidebar__user-info {
display: flex;
}
.sidebar-nav.q88-sidebar-collapsed .q88-account-menu__header .q88-sidebar__user-name,
.sidebar-nav.q88-sidebar-collapsed .q88-account-menu__header .q88-sidebar__user-company {
display: block;
}
/* Separator */
.sidebar-nav .q88-account-menu__separator {
border: none;
border-top: 1px solid var(--q88-border-subtle, #E5E7EB);
margin: 4px 0;
}
/* Menu list: no bullet, no padding */
.sidebar-nav .q88-account-menu__list {
list-style: none;
margin: 0;
padding: 0;
}
/* Menu link / button shared appearance.
font-weight:400 overrides legacy MainWhiteout.css `a:link { font-weight:bold }`. */
.sidebar-nav .q88-account-menu__link,
.sidebar-nav a.q88-account-menu__link:link,
.sidebar-nav a.q88-account-menu__link:visited,
.sidebar-nav a.q88-account-menu__link:active {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 12px;
margin: 0 4px;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: var(--q88-text-primary, var(--foreground));
text-decoration: none;
border-radius: 4px;
background: transparent;
border: none;
box-sizing: border-box;
width: calc(100% - 8px);
text-align: left;
font-family: inherit;
cursor: pointer;
transition: background-color 0.12s ease;
}
.sidebar-nav .q88-account-menu__link:hover,
.sidebar-nav .q88-account-menu__link:focus-visible {
background: var(--q88-bg-subtle, rgba(0, 0, 0, 0.04));
outline: none;
}
/* Log-off item: icon + label side by side */
.sidebar-nav .q88-account-menu__item--logoff .q88-account-menu__link {
justify-content: flex-start;
}
.sidebar-nav .q88-account-menu__icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Sub-trigger chevron */
.sidebar-nav .q88-account-menu__chevron {
width: 14px;
height: 14px;
flex-shrink: 0;
transition: transform 0.15s ease;
}
.sidebar-nav .q88-account-menu__sub-trigger[aria-expanded="true"] .q88-account-menu__chevron {
transform: rotate(90deg);
}
/* Flyout panel — anchored to bottom of sub-trigger so it grows upward,
keeping it within the viewport when the dropdown is near the screen bottom. */
.sidebar-nav .q88-account-menu__flyout {
position: absolute;
left: 100%;
bottom: 0;
min-width: 224px;
max-width: 320px;
max-height: calc(100vh - 32px);
overflow-x: hidden;
overflow-y: auto;
list-style: none;
margin: 0;
padding: 4px 0;
background: var(--q88-bg-surface, #ffffff);
border: 1px solid var(--q88-border-subtle, #E5E7EB);
border-radius: 8px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
z-index: 851;
opacity: 0;
pointer-events: none;
transform: translateX(4px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.sidebar-nav .q88-account-menu__flyout.is-open {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
/* Sub-item must be position:relative to anchor flyout */
.sidebar-nav .q88-account-menu__item--sub {
position: relative;
}
/* Dark mode: tokens handle bg/border automatically.
Explicit shadow tweak for dark surfaces. */
body[data-theme="dark"] .sidebar-nav .q88-account-menu,
body[data-theme="dark"] .sidebar-nav .q88-account-menu__flyout {
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.sidebar-nav .q88-account-menu,
.sidebar-nav .q88-account-menu__flyout {
transition: none;
}
}