/* ============================================================
   HeaderMenu.css
   Modern reskin for the OWL top navigation panel (Views/Shared/_LoginPartial.cshtml).
   Targets DevExpress Panel (.headerPane) + Menu (.dxm-*) classes.
   Linked in _Layout.cshtml, right after Site.css.

   Ported from C:/DEV/ECF/ECF/Content/HeaderMenu.css (2026-08), per explicit
   instruction: "look at the styling used in ECF's version and let's use it
   for OWL. Just the styling please." Styling only -- no changes were made to
   _LoginPartial.cshtml's Html.DevExpress().Menu() server-side item
   definitions, matching the same "minimize server-side changes" scope this
   menu was already restyled under earlier.

   Difference from ECF's source: the gold/text identity tokens below resolve
   to OWL's own --owl-accent/--owl-text/etc. tokens (Content/Site-OWLShared.css)
   via var(--owl-*, fallback) -- confirmed with Brian (AskUserQuestion,
   2026-08) over using ECF's literal #cfa92c gold verbatim. The fallback
   values equal Site-OWLShared.css's actual --owl-accent/--owl-text values,
   so this renders correctly whether or not a given page also links
   Site-OWLShared.css (deliberately NOT loaded site-wide -- see that file's
   own header comment -- so this menu CANNOT assume its tokens are present).
   Everything else (spacing, radius, shadow, neutral borders, transitions)
   is unchanged from ECF's file -- those aren't brand-identity colors.
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
    --hm-bg:           #ffffff;
    --hm-bg-2:         #ffffff;
    --hm-border:       rgba(0,0,0,0.08);
    --hm-gold:         var(--owl-accent, #2c6e9e);
    --hm-gold-dim:     var(--owl-accent-dim, rgba(44,110,158,0.12));
    /* 2026-08: --hm-gold-glow/--hm-hover-bg/--hm-active-bg were hardcoded to
       the OLD gold's literal RGB (184,121,30) and never referenced
       --owl-accent at all -- that is why the menu kept showing gold hues
       after Site-OWLShared.css's palette moved to blue. Switched to
       color-mix() against var(--owl-accent) so these always track the live
       accent token instead of needing manual RGB recalculation on every
       future palette swap. */
    --hm-gold-glow:    color-mix(in srgb, var(--owl-accent, #2c6e9e) 25%, transparent);
    --hm-text:         var(--owl-text, #202632);
    --hm-text-muted:   var(--owl-text-muted, #6b7280);
    --hm-text-cat:     var(--owl-accent, #2c6e9e);
    --hm-hover-bg:     color-mix(in srgb, var(--owl-accent, #2c6e9e) 8%, transparent);
    --hm-active-bg:    color-mix(in srgb, var(--owl-accent, #2c6e9e) 15%, transparent);
    --hm-shadow:       0 8px 24px rgba(0,0,0,0.12);
    --hm-radius:       6px;
    --hm-height:       48px;
    --hm-font:         'Segoe UI', system-ui, sans-serif;
    --hm-transition:   0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── PANEL SHELL ─────────────────────────────────────────────── */
.dxpnlControl_iOS1.headerPane,
.headerPane.panel,
.headerPane {
    background: var(--hm-bg) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    font-family: var(--hm-font) !important;
    overflow: visible !important;
}

/* ── EXPAND BAR -- hide entirely, it adds empty space above menu ─ */
.dxpnl-bar.headerPane,
.dxpnl-bar.bar,
.headerPane.bar,
#HeaderPane_EB {
    display: none !important;
}

/* Expand button */
.dxpnl-btn {
    display: none !important;
}

/* ── LOGIN CONTROL WRAPPER ───────────────────────────────────── */
.loginControl {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── MAIN MENU BAR ───────────────────────────────────────────── */
#HeaderMenu,
#HeaderMenuELSE,
.dxm-main.dxm-horizontal {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
}

/* The Lite skin's own menu wrapper (a direct child of .loginControl,
   distinct from #HeaderMenu/.dxm-main above) has an intrinsic
   shrink-to-content width that otherwise keeps the whole bar from spanning
   the window regardless of the width:100% rules above -- this is the actual
   missing piece, found in ECF's Content/Site.css (not its HeaderMenu.css,
   which is why porting only that file didn't carry it over). ECF's build
   renders this wrapper as .dxmLite_iOS1.dxm-ltr; confirmed via live DOM
   inspection (Claude_Browser, 2026-08) that OWL's build renders a different
   skin variant class here -- .dxmLite.dxm-ltr, no "_iOS1" -- so both forms
   are matched below rather than assuming either one. */
.loginControl > .dxmLite.dxm-ltr,
.loginControl > .dxmLite_iOS1.dxm-ltr {
    width: 100% !important;
}

/* Top-level item list -- stretch to fill full width */
#HeaderMenu > .dxm-main > ul.dx,
.dxm-main.dxm-horizontal > ul.dx {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
}

/* ── TOP-LEVEL ITEMS ─────────────────────────────────────────── */
.dxm-main.dxm-horizontal > ul.dx > li.dxm-item,
#HeaderMenu .dxm-main > ul > li.dxm-item {
    display: flex !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    position: relative !important;
}

/* ── SURGICAL FIXES BEGIN ─────────────────────────────────────────── */
.dxm-main.dxm-horizontal > ul.dx > li.dxm-item .dxm-contentText {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
}

.dxm-popup li.dxm-item > .dxm-content .dxm-contentText,
.dxm-popup li.dxm-item > a.dxm-content .dxm-contentText {
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
    text-align: left !important;
    justify-content: flex-start !important;
}
.dxm-popup li.dxm-item.dxm-subMenu > .dxm-content {
    justify-content: space-between !important;
}

.dxm-popup li.dxm-item.dxm-subMenu > .dxm-content::after {
    margin-left: auto !important;
    padding-left: 16px !important;
    flex-shrink: 0 !important;
}
/* 2026-08: dropped the "max-width: 320px !important" cap that was here
   (ported verbatim from ECF). setSubMenuWidth() (see _LoginPartial.cshtml)
   sets each dropdown's inline width to match its parent top-level item's
   actual rendered width. That works unnoticed in ECF because ECF has 6
   top-level items, so each is under 320px wide and the cap never engages.
   OWL has only 5 top-level items (Welcome / Main Menu / Investment /
   Reports / Log off), so each is ~341px wide (confirmed via live DOM,
   width:20% of a 1714px bar) -- wider than the cap, so it was clipping the
   JS-set width back down, which is why OWL's dropdowns were narrower than
   their parent item while ECF's were not. Removed rather than raised to a
   bigger fixed number, since the JS is already responsible for sizing
   these to match their parent -- a static cap just fights it. */
.dxm-popup li.dxm-item.dxm-subMenu > .dxm-content .dxm-popOut {
    display: none !important;
}
/* ── SURGICAL FIXES END  ─────────────────────────────────────────── */

.dxm-main.dxm-horizontal > ul.dx > li.dxm-item > .dxm-content,
.dxm-main.dxm-horizontal > ul.dx > li.dxm-item > a.dxm-content {
    display: flex !important;
    align-items: center !important;
    padding: 0 20px !important;
    min-height: var(--hm-height) !important;
    width: 100% !important;
    font-family: var(--hm-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    color: var(--hm-text) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background var(--hm-transition), color var(--hm-transition) !important;
    border-bottom: 2px solid transparent !important;
    box-sizing: border-box !important;
}

/* Hover state -- top level */
.dxm-main.dxm-horizontal > ul.dx > li.dxm-item:hover > .dxm-content,
.dxm-main.dxm-horizontal > ul.dx > li.dxm-item:hover > a.dxm-content,
.dxm-main.dxm-horizontal > ul.dx > li.dxm-item.dxm-hovered > .dxm-content,
.dxm-main.dxm-horizontal > ul.dx > li.dxm-item.dxm-hovered > a.dxm-content,
.dxm-main.dxm-horizontal > ul.dx > li.MenuGH2Hover > .dxm-content {
    background: var(--hm-hover-bg) !important;
    color: var(--hm-gold) !important;
    border-bottom-color: var(--hm-gold) !important;
}

/* ── SEPARATORS -- hide DevExpress default ones ─────────────── */
.dxm-main.dxm-horizontal > ul.dx > li.dxm-separator {
    width: 1px !important;
    padding: 0 !important;
    margin: 10px 0 !important;
    background: var(--hm-border) !important;
    align-self: stretch !important;
}

.dxm-main.dxm-horizontal > ul.dx > li.dxm-separator > b {
    display: none !important;
}

/* ── HAMBURGER ICON ITEM ─────────────────────────────────────── */
.dxm-main.dxm-horizontal > ul.dx > li.dxm-item:first-child .dxm-content {
    padding: 0 16px !important;
    background: transparent !important;
}

.dxm-main.dxm-horizontal > ul.dx > li.dxm-item:first-child .dxm-content img {
    filter: none !important;
    opacity: 0.8 !important;
    transition: opacity var(--hm-transition), filter var(--hm-transition) !important;
    margin: 0 !important;
    float: none !important;
    vertical-align: middle !important;
}

.dxm-main.dxm-horizontal > ul.dx > li.dxm-item:first-child:hover .dxm-content img {
    opacity: 1 !important;
    filter: brightness(0) saturate(100%) invert(72%) sepia(55%) saturate(600%) hue-rotate(5deg) !important;
}

/* ── CONTENT TEXT SPAN ───────────────────────────────────────── */
.dxm-contentText {
    font-family: var(--hm-font) !important;
    vertical-align: middle !important;
}

/* ── DROPDOWN POPUP PANELS ───────────────────────────────────── */
.dxm-popup {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    border-radius: var(--hm-radius) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06) !important;
    padding: 6px 0 !important;
    min-width: 220px !important;
    overflow: hidden !important;
}

/* Dropdown item list */
.dxm-popup > ul.dx {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── DROPDOWN ITEMS ──────────────────────────────────────────── */
.dxm-popup li.dxm-item {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dxm-popup li.dxm-item > .dxm-content,
.dxm-popup li.dxm-item > a.dxm-content {
    display: flex !important;
    align-items: center !important;
    padding: 9px 18px 9px 16px !important;
    font-family: var(--hm-font) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--hm-text) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    border-left: 2px solid transparent !important;
    transition: background var(--hm-transition),
                color var(--hm-transition),
                border-left-color var(--hm-transition) !important;
}

/* Dropdown hover */
.dxm-popup li.dxm-item:hover > .dxm-content,
.dxm-popup li.dxm-item:hover > a.dxm-content,
.dxm-popup li.dxm-item.dxm-hovered > .dxm-content,
.dxm-popup li.dxm-item.dxm-hovered > a.dxm-content {
    background: var(--hm-hover-bg) !important;
    color: var(--hm-gold) !important;
    border-left-color: var(--hm-gold) !important;
}

/* ── CATEGORY HEADERS (disabled items = section labels) ──────── */
.dxm-popup li.dxm-item.dxm-disabled > .dxm-content {
    padding: 12px 18px 5px 16px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--hm-text-cat) !important;
    border-left: none !important;
    cursor: default !important;
    pointer-events: none !important;
    background: transparent !important;
}

.dxm-popup li.dxm-item.dxm-disabled > .dxm-content .dxm-contentText {
    color: var(--hm-text-cat) !important;
}

/* Separator after category labels */
.dxm-popup li.dxm-item.dxm-disabled {
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    margin-bottom: 4px !important;
}

/* Sub-items indented under categories */
.dxm-popup li.dxm-item:not(.dxm-disabled) > .dxm-content .dxm-contentText,
.dxm-popup li.dxm-item:not(.dxm-disabled) > a.dxm-content .dxm-contentText {
    /* strip out the   indentation visual weight with proper padding instead */
    padding-left: 0 !important;
}

/* ── SPACING ITEMS ───────────────────────────────────────────── */
.dxm-popup li.dxm-spacing {
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: none !important; /* replaced by padding on items */
}

/* ── SUB-MENU ARROW ──────────────────────────────────────────── */
.dxm-popOut {
    margin-left: auto !important;
    padding-left: 12px !important;
    display: flex !important;
    align-items: center !important;
}

.dxm-popOut img,
.dxWeb_mVerticalPopOut_iOS1 {
    display: none !important; /* hide the DevExpress arrow image */
}

/* CSS arrow replacement */
.dxm-item.dxm-subMenu > .dxm-content::after {
    content: '›' !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    color: var(--hm-text-muted) !important;
    margin-left: auto !important;
    padding-left: 14px !important;
    transition: color var(--hm-transition) !important;
    line-height: 1 !important;
}

.dxm-item.dxm-subMenu:hover > .dxm-content::after,
.dxm-item.dxm-subMenu.dxm-hovered > .dxm-content::after {
    color: var(--hm-gold) !important;
}

/* ── SUB-MENU NESTED POPUPS ──────────────────────────────────── */
[id^="HeaderMenu_DXM"][id$="_"] .dxm-popup,
[id*="HeaderMenu_DXM"][id*="i"] .dxm-popup {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    border-radius: var(--hm-radius) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12) !important;
}

/* ── LOG OFF ITEM ─────────────────────────────────────────────
   2026-08: dropped the red hover-differentiation this had under ECF's
   original styling -- Brian: "I don't want the logoff to be a different
   hover color at least for OWL, at least now." No hover override here
   means Log off now falls through to the standard top-level hover rule
   above (background: var(--hm-hover-bg), color: var(--hm-gold)), same as
   every other menu item. Kept the smaller muted default text/size, which
   was not flagged as an issue. */
.dxm-main.dxm-horizontal > ul.dx > li.dxm-item:last-child > a.dxm-content {
    color: var(--hm-text-muted) !important;
    font-size: 12px !important;
}

/* ── CLEAR FIX ───────────────────────────────────────────────── */
b.dx-clear {
    display: none !important;
}

/* ── IMAGES IN MENU ──────────────────────────────────────────── */
#HeaderMenu .dxm-image,
#HeaderMenuELSE .dxm-image {
    float: none !important;
    margin-top: 0 !important;
    vertical-align: middle !important;
}

#HeaderMenu img,
#HeaderMenuELSE img {
    float: none !important;
    margin-top: 0 !important;
    vertical-align: middle !important;
}

/* ── RESPONSIVE -- narrow screens ───────────────────────────── */
@media (max-width: 500px) {
    .dxm-main.dxm-horizontal > ul.dx > li.dxm-item > .dxm-content,
    .dxm-main.dxm-horizontal > ul.dx > li.dxm-item > a.dxm-content {
        padding: 0 12px !important;
        font-size: 12px !important;
    }
}