/* ==========================================================================
   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 <body class="sidebar-nav"> 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.268 21a2 2 0 0 0 3.464 0'/><path d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/></svg>") no-repeat center / 16px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.268 21a2 2 0 0 0 3.464 0'/><path d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/></svg>") 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);
}

/* QEN-9107 — selected gets its OWN token, one step darker than the hover fill,
   so the current page reads as distinct from a merely hovered one. This rule
   follows :hover in source order at equal specificity (3 classes each), so
   hovering the selected item keeps the selected colour rather than lightening
   back to the hover colour.
   Weight deliberately left at the original medium: the platform signals the
   current page with colour alone and keeps every nav label at one weight, so
   pushing this to semibold is what made the Q88 sidebar read heavier than the
   platform's side by side. */
.sidebar-nav .q88-sidebar__item--active > .q88-sidebar__link {
    background-color: var(--sidebar-selected);
    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);
}

/* QEN-9107 — an expandable parent holding the current page carries
   --active-within (WhiteoutSidebar.ascx.cs), which is deliberately NOT styled
   while the sidebar is expanded: the open submenu already shows where you are,
   and highlighting both tiers was the double-highlight in the ticket.
   Collapsed is the exception — `.q88-sidebar__submenu` is display:none in the
   `.q88-sidebar-collapsed` block below, so the leaf carrying --active is
   off-screen and the parent is the only row left to mark. Without this the
   collapsed sidebar has no current-page indicator at all. */
.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__item--active-within > .q88-sidebar__link {
    background-color: var(--sidebar-selected);
    color: var(--sidebar-accent-foreground);
}

.sidebar-nav.q88-sidebar-collapsed .q88-sidebar__item--active-within > .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);
}

/* QEN-9107 — the two submenu rules above are 3 classes each: the SAME specificity
   as `.sidebar-nav .q88-sidebar__item--active > .q88-sidebar__link`, but later in
   source order, so they win. That was invisible while every colour involved was
   dark-on-light, but it means the selected leaf would keep
   --sidebar-submenu-foreground instead of the brand indigo, and hovering it would
   swap to --sidebar-foreground. Restate the indigo at submenu depth so it wins.
   Every selected leaf lives in a submenu, so this — not the generic selected-item
   rule — is what actually colours the selected label in practice; that one only
   ever reaches a top-level leaf (Home, or a flattened single-child item). */
.sidebar-nav .q88-sidebar__submenu .q88-sidebar__item--active > .q88-sidebar__link,
.sidebar-nav .q88-sidebar__submenu .q88-sidebar__item--active > .q88-sidebar__link:hover {
    color: var(--sidebar-accent-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 8b: Embed mode — host-owned collapse + resizable width (QEN-8988)
   Inside the Connect frame the host's top rail renders the collapse control and
   collapse hides the entire panel — no icon rail, no tooltips, no flyouts.
   Zeroing the collapsed-width token slides the panel shut with the same 0.2s
   the standalone rail uses, and collapses the header/content margins that read
   the same token. visibility (delayed until the slide ends) takes the clipped
   links out of the tab order, which width:0 alone would not.
   -------------------------------------------------------------------------- */
.sidebar-nav.embed-mode.q88-sidebar-collapsed {
    --sidebar-width-collapsed: 0px;
}

.sidebar-nav.embed-mode.q88-sidebar-collapsed .q88-sidebar {
    border-right: none;
    visibility: hidden;
    transition: width 0.2s ease, visibility 0s linear 0.2s;
}

/* While the panel slides shut, Section 8's tooltip rules already match
   (q88-sidebar-collapsed lands on <body> at the start of the slide), so a
   pointer over a link mid-slide would flash a tooltip and lift the rail's
   clipping over the content area. Embed collapse means no tooltips at all —
   the whole panel hides — so suppress them and keep the clip for the
   animation's duration. */
.sidebar-nav.embed-mode.q88-sidebar-collapsed .q88-sidebar__item > .q88-sidebar__link::after,
.sidebar-nav.embed-mode.q88-sidebar-collapsed .q88-sidebar__item > .q88-sidebar__link::before {
    content: none;
}

.sidebar-nav.embed-mode.q88-sidebar-collapsed .q88-sidebar:has(.q88-sidebar__link:hover) {
    overflow: hidden;
    z-index: var(--raw-z-sidebar);
}

.sidebar-nav.embed-mode.q88-sidebar-collapsed .q88-sidebar:has(.q88-sidebar__link:hover) .q88-sidebar__content {
    overflow: hidden;
}

/* Drag handle on the sidebar's right edge, injected by Sidebar.js in embed mode
   only (width is host-pattern-flexible there: 179-399px). display:none rather
   than absent-in-standalone so the rule, like the rest of this section, is
   inert wherever embed-mode is off. */
.sidebar-nav .q88-sidebar__resize-handle {
    display: none;
}

.sidebar-nav.embed-mode .q88-sidebar__resize-handle {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    touch-action: none;
}

.sidebar-nav.embed-mode .q88-sidebar__resize-handle:hover,
.sidebar-nav.embed-mode .q88-sidebar__resize-handle:active {
    background-color: var(--sidebar-border);
}

/* --------------------------------------------------------------------------
   Section 8c: Embed mode — header-bar tools relocated into the sidebar
   The 48px header bar is dropped in embed (Default.Master.cs): quick search
   moves to the panel top and notifications become a Manage row. All rules
   below are scoped to markup that only renders in embed, or to .embed-mode,
   so they are inert standalone.
   -------------------------------------------------------------------------- */

/* Without the header bar the layout owns the full viewport height. */
.sidebar-nav.embed-mode .q88-layout {
    min-height: 100vh;
}

/* Search block pinned above the scrollable menu area. The inner
   .q88-header__search is width-fixed for the header bar; here it follows
   the resizable panel instead. Padding is deliberately wider than the menu
   sections' space-4: the design mock floats the box clear of the panel
   corner rather than aligning it with the rows. */
.sidebar-nav .q88-sidebar__search {
    flex-shrink: 0;
    padding: var(--raw-space-8) var(--raw-space-6) 0;
}

.sidebar-nav .q88-sidebar__search .q88-header__search {
    width: 100%;
}

/* Notification row badge — unread count pill on the right edge of the row
   (the header bell's .notification-number is a bare dot; the row shows the
   number, per design). */
.sidebar-nav .q88-sidebar__item--notification .q88-sidebar__badge {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: var(--raw-radius-full);
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-size: 11px;
    line-height: 18px;
    font-weight: var(--font-weight-medium);
    text-align: center;
}

/* Dropdown reuse: Notification.css styles it under .header__notification,
   which here is a plain wrapper inside the row (injected by
   NotificationListDropdown.BindSidebarItem) — neutralize the header-context
   float/positioning and let JS place the flyout with fixed coordinates,
   since the sidebar's overflow:hidden clips absolute descendants. */
.sidebar-nav .q88-sidebar__item--notification .header__notification {
    float: none;
    position: static;
}

.sidebar-nav .q88-sidebar__item--notification .notification-dropdown {
    position: fixed;
    top: auto;
    transform: none;
    z-index: var(--raw-z-header);
}

.sidebar-nav .q88-sidebar__item--notification .notification-dropdown__arrow {
    display: none;
}

/* --------------------------------------------------------------------------
   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 <ul> with default
   bullets. ACT appends that <ul> directly to <body> (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;
    }
}