/* ============================================================
   HeaderMenu.css
   Modern reskin for BreezeWay Logic top navigation panel.
   Targets DevExpress Panel (.headerPane) + Menu (.dxm-*) classes.
   Reference in _Layout.cshtml after the DevExpress theme CSS.
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
    --hm-bg:           #ffffff;
    --hm-bg-2:         #ffffff;
    --hm-border:       rgba(0,0,0,0.08);
    --hm-gold:         #cfa92c;
    --hm-gold-dim:     rgba(207,169,44,0.12);
    --hm-gold-glow:    rgba(207,169,44,0.25);
    --hm-text:         #2d2d2d;
    --hm-text-muted:   #909090;
    --hm-text-cat:     #cfa92c;
    --hm-hover-bg:     rgba(207,169,44,0.08);
    --hm-active-bg:    rgba(207,169,44,0.15);
    --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,
.dxm-main.dxm-horizontal {
    background: transparent !important;
    border: none !important;
    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;
}
.dxm-popup {
    max-width: 320px !important;
}
    .dxm-popup li.dxm-item.dxm-subMenu > .dxm-content .dxm-popOut {
        display: none !important;
    }
/* ── SURGICAL FIXES END  ─────────────────────────────────────────── */
.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;
}

.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 -- accent it ───────────────────────────────── */
.dxm-main.dxm-horizontal > ul.dx > li.dxm-item:last-child > a.dxm-content {
    color: var(--hm-text-muted) !important;
    font-size: 12px !important;
}

.dxm-main.dxm-horizontal > ul.dx > li.dxm-item:last-child:hover > a.dxm-content {
    color: #e57373 !important;
    border-bottom-color: #e57373 !important;
    background: rgba(229,115,115,0.06) !important;
}

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

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

#HeaderMenu 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;
    }
}