/* ==========================================================================
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: 64px;
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);
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;
}
/* Pointer joining the tooltip to its icon. A rounded square rotated 45deg, not a
border triangle, so it inherits the tooltip's own background in both themes —
the same construction Connect uses (compass-react tooltip.tsx TooltipPrimitive.Arrow:
size-2.5 rotate-45 rounded-[2px]). Centred on the tooltip's left edge, so the inner
half is painted over by ::after (same z-index, and ::after paints later) and only the
outer half shows. */
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__item > .q88-sidebar__link::before {
content: '';
position: absolute;
left: calc(var(--sidebar-width-collapsed) - 1px);
top: 50%;
width: 10px;
height: 10px;
transform: translateY(-50%) rotate(45deg);
border-radius: 2px;
background-color: var(--sidebar-tooltip);
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::before {
opacity: 1;
}
/* Both the nav's overflow:hidden and the content's overflow-y:auto clip the tooltip,
which is why it never appeared at all. Open the clip only while a link is hovered —
same :has() escape the account-menu flyout uses further down — so the collapsed rail
keeps its scrolling at rest. */
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar:has(.q88-sidebar__link:hover) {
overflow: visible;
/* The sidebar is a stacking context (fixed + z-index), so no z-index on the tooltip
itself can lift it above the z-900 header — the context has to win. Without this the
topmost item's tooltip renders behind the header, which only bites in embed mode:
standalone's brand card pushes the first item clear of the header's 48px band, and
dropping that card moves Overview into it. The rail is 48px wide and the header is
inset by exactly that, so raising it covers no header content. */
z-index: calc(var(--raw-z-header) + 1);
}
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar:has(.q88-sidebar__link:hover) .q88-sidebar__content {
overflow: visible;
}
/* --------------------------------------------------------------------------
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.
margin: 24px 48px is the platform-wide card gutter (DESIGN.md §6.1,
matches .q88-card / body.page-grid .modV2) — a low-specificity DEFAULT so
any .modV2 page gets the standard gutter without its own CSS file. Loads
before every page-specific stylesheet (Default.Master.cs), so pages that
already declare their own .modV2 margin (grid.css, certificates.css,
inspection-container.css, etc.) simply override it as before — this only
fills the gap for pages that never got one. width:auto (not 100%) so the
margin can actually carve out the gutter instead of overflowing it. */
.sidebar-nav .modV2 {
min-width: 0;
width: auto;
display: block;
margin: 24px 48px;
}
/* --------------------------------------------------------------------------
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;
}
/* The header search owns its own row metrics (14px / 6px 8px / 1px ring),
which differ from the global combobox row canon in ComboBox.css (13px /
6px 12px / borderless). ComboBox.css declares that canon with `!important`
at (0,2,1), so re-assert ours at (0,3,1) + `!important` — and, critically,
on the resting AND the highlighted class TOGETHER. Listing only one of them
here is the §9.6.2 class-swap trap: ACT replaces `_listItem` with
`_HighlightedItem` on mouseover, so a one-sided override makes the row
change size under the cursor and snap back when the pointer moves on.
Metrics shared; only border-COLOUR differs per state (rule below). */
body.sidebar-nav [id$="aceSidebarSearch_completionListElem"] .AutoCompleteExtender_listItem,
body.sidebar-nav [id$="aceSidebarSearch_completionListElem"] .AutoCompleteExtender_HighlightedItem {
box-sizing: border-box !important;
width: auto !important;
padding: 6px 8px !important;
border-width: 1px !important;
border-style: solid !important;
border-color: transparent !important;
border-radius: 6px !important;
font-size: var(--font-size-sm, 14px) !important;
line-height: 20px !important;
}
/* Highlighted row — slate ring around the slate fill. Colour only; every size
property is shared with the resting state above. Per-side longhands with a
hex literal: a `border-color: var(--token) !important` longhand loses the
rule-vs-rule cascade against ComboBox.css's `border: 0 !important` shorthand
(shorthand + var() + !important trap). #e2e8f0 IS --border. */
body.sidebar-nav [id$="aceSidebarSearch_completionListElem"] .AutoCompleteExtender_HighlightedItem {
border-top-color: #e2e8f0 !important;
border-right-color: #e2e8f0 !important;
border-bottom-color: #e2e8f0 !important;
border-left-color: #e2e8f0 !important;
}
/* --------------------------------------------------------------------------
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;
}
}