/* Shared customer navigation.  Loaded after page styles so every desktop
   customer page has the same spacing, hierarchy and interaction affordances.
   Colors intentionally use the page's existing theme variables. */
/* Reserve the final header geometry before deferred JavaScript replaces each
   legacy header.  This prevents a visible legacy-nav frame and layout jump.
   The selectors are intentionally limited to the one top-level header shape
   used by customer pages; C2C's secondary .nav is a div and is unaffected. */
body > nav.nav:not(.ecx-shared-nav),
body > nav.navbar:not(.ecx-shared-nav),
body > .app > nav.nav:not(.ecx-shared-nav),
body > .app > nav.navbar:not(.ecx-shared-nav) {
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
  display: block !important;
  width: 100% !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 !important;
  background: #0f1422 !important;
  border-bottom: 1px solid #26334f !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.18) !important;
  overflow: hidden !important;
}
body > nav.nav:not(.ecx-shared-nav) > *,
body > nav.navbar:not(.ecx-shared-nav) > *,
body > .app > nav.nav:not(.ecx-shared-nav) > *,
body > .app > nav.navbar:not(.ecx-shared-nav) > * {
  visibility: hidden !important;
}
body > .app:has(> nav.nav:not(.ecx-shared-nav)),
body > .app:has(> nav.navbar:not(.ecx-shared-nav)) {
  padding-top: 0 !important;
}
.ecx-shared-nav,
.ecx-shared-nav * { box-sizing: border-box; }
.ecx-shared-nav {
  /* Keep the customer navigation visually stable across legacy pages.  Those
     pages use several incompatible variable names (and some define a light
     theme), so the navigation owns its dark palette instead of inheriting a
     page's fallbacks. */
  --bg1: #0f1422;
  --bg2: #131a2c;
  --bg3: #1a2340;
  --t1: #e8ecf1;
  --t2: #9aa6bb;
  --t3: #69758c;
  --brd: #26334f;
  --bl: #4b8dff;
  --rd: #f84960;
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
  height: 64px !important;
  min-height: 64px !important;
  width: 100% !important;
  padding: 0 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  background: var(--bg1, #fff) !important;
  color: var(--t1, #111a2c) !important;
  border-bottom: 1px solid var(--brd, #dce4f0) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(18px);
  font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
}
.ecx-shared-nav .ecx-nav-l { display:flex !important; align-items:center !important; gap:28px !important; min-width:0; }
.ecx-shared-nav .ecx-logo { display:flex !important; align-items:center !important; gap:9px !important; color:var(--t1,#111a2c) !important; font-size:19px !important; font-weight:800 !important; letter-spacing:-.5px; cursor:pointer; white-space:nowrap; text-decoration:none; }
.ecx-shared-nav .ecx-logo-icon { width:36px !important; height:36px !important; border-radius:11px !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#fff !important; font-size:16px !important; font-weight:800 !important; background:linear-gradient(135deg,#3a7cff,#6958ee) !important; box-shadow:0 8px 20px rgba(40,104,232,.22); }
.ecx-shared-nav .ecx-nav-menu { display:flex !important; align-items:center !important; gap:2px !important; min-width:0; }
.ecx-shared-nav .ecx-nav-item { position:relative !important; display:flex !important; align-items:center !important; gap:4px !important; padding:8px 13px !important; border:0 !important; border-radius:7px !important; color:var(--t2,#5f6d83) !important; background:transparent !important; font-size:14px !important; font-weight:600 !important; line-height:1.4 !important; white-space:nowrap !important; text-decoration:none !important; cursor:pointer !important; transition:all .15s ease; }
.ecx-shared-nav .ecx-nav-item:hover,
.ecx-shared-nav .ecx-nav-item.ecx-active { color:var(--t1,#111a2c) !important; background:var(--bg3,#eef3fb) !important; }
.ecx-shared-nav .ecx-nav-item.ecx-has-menu::after { content:'⌄'; margin-left:2px; font-size:12px; line-height:1; color:var(--t3,#8b97aa); transform:translateY(-1px); }
.ecx-shared-nav .ecx-nav-menu-box { position:relative; }
.ecx-shared-nav .ecx-menu-panel { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); min-width:176px; padding:6px 0; display:none; background:var(--bg2,var(--bg1,#fff)); border:1px solid var(--brd,#dce4f0); border-radius:10px; box-shadow:0 16px 48px rgba(0,0,0,.18); }
.ecx-shared-nav .ecx-nav-menu-box.ecx-open > .ecx-menu-panel { display:block; }
.ecx-shared-nav .ecx-menu-panel a { display:block; padding:9px 15px; color:var(--t2,#5f6d83); font-size:13px; line-height:1.4; white-space:nowrap; text-decoration:none; cursor:pointer; }
.ecx-shared-nav .ecx-menu-panel a:hover { color:var(--t1,#111a2c); background:var(--bg3,#eef3fb); }
.ecx-shared-nav .ecx-nav-r { display:flex !important; align-items:center !important; gap:8px !important; flex-shrink:0; }
.ecx-shared-nav .ecx-asset-wrap,
.ecx-shared-nav .ecx-user-wrap,
.ecx-shared-nav .ecx-lang-wrap,
.ecx-shared-nav .ecx-notif-wrap { position:relative; display:flex; align-items:center; }
.ecx-shared-nav .ecx-asset-trigger,
.ecx-shared-nav .ecx-icon-trigger { display:flex; align-items:center; gap:5px; min-height:34px; padding:7px 11px; color:var(--t1,#111a2c); background:transparent; border:1px solid var(--brd,#dce4f0); border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; }
.ecx-shared-nav .ecx-asset-trigger:hover,
.ecx-shared-nav .ecx-icon-trigger:hover { border-color:var(--t3,#8b97aa); background:var(--bg3,#eef3fb); }
.ecx-shared-nav .ecx-icon-trigger { min-width:34px; justify-content:center; border-color:transparent; font-size:18px; padding:4px 7px; }
.ecx-shared-nav .ecx-badge { position:absolute; top:-2px; right:-3px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; display:none; align-items:center; justify-content:center; color:#fff; background:var(--rd,#e5485d); font-size:10px; font-weight:700; }
.ecx-shared-nav .ecx-panel { position:absolute; top:calc(100% + 8px); right:0; width:280px; max-height:360px; overflow:auto; padding:6px 0; display:none; background:var(--bg2,var(--bg1,#fff)); border:1px solid var(--brd,#dce4f0); border-radius:10px; box-shadow:0 16px 48px rgba(0,0,0,.2); }
.ecx-shared-nav .ecx-asset-wrap.ecx-open > .ecx-panel,
.ecx-shared-nav .ecx-user-wrap.ecx-open > .ecx-panel,
.ecx-shared-nav .ecx-lang-wrap.ecx-open > .ecx-panel,
.ecx-shared-nav .ecx-notif-wrap.ecx-open > .ecx-panel { display:block; }
.ecx-shared-nav .ecx-panel a,
.ecx-shared-nav .ecx-panel button { width:100%; display:flex; align-items:center; gap:8px; padding:10px 14px; border:0; color:var(--t2,#5f6d83); background:transparent; font:inherit; font-size:13px; text-align:left; white-space:nowrap; text-decoration:none; cursor:pointer; }
.ecx-shared-nav .ecx-panel a:hover,
.ecx-shared-nav .ecx-panel button:hover { color:var(--t1,#111a2c); background:var(--bg3,#eef3fb); }
.ecx-shared-nav .ecx-user-panel { width:260px; }
.ecx-shared-nav .ecx-user-head { display:flex; align-items:center; gap:10px; padding:14px; border-bottom:1px solid var(--brd,#dce4f0); }
.ecx-shared-nav .ecx-user-head i { color:var(--bl,#2868e8); font-size:30px; }
.ecx-shared-nav .ecx-user-name { color:var(--t1,#111a2c); font-size:14px; font-weight:700; }
.ecx-shared-nav .ecx-user-meta { margin-top:2px; color:var(--t3,#8b97aa); font-size:11px; }
.ecx-shared-nav .ecx-panel-foot { margin-top:4px; border-top:1px solid var(--brd,#dce4f0); }
.ecx-shared-nav .ecx-panel-foot button { color:var(--rd,#e5485d); justify-content:center; font-weight:600; }
.ecx-shared-nav .ecx-hamburger { display:none; border:1px solid var(--brd,#dce4f0); border-radius:7px; padding:7px 10px; color:var(--t1,#111a2c); background:transparent; cursor:pointer; }
.ecx-mobile-drawer { display:none; }

/* C2C keeps its task-specific links as a secondary navigation row below the
   global customer header. The repeated legacy logo is removed because the
   primary header already owns product identity and account controls. */
.ecx-shared-nav + .nav {
  top:64px !important;
  z-index:9999 !important;
  height:52px !important;
  min-height:52px !important;
  padding:0 max(20px,calc((100vw - 1200px)/2)) !important;
  background:#0c111e !important;
  border-bottom:1px solid #202b43 !important;
  box-shadow:0 8px 20px rgba(0,0,0,.12) !important;
}
.ecx-shared-nav + .nav .logo { display:none !important; }
.ecx-shared-nav + .nav .nav-l { gap:4px !important; }
.ecx-shared-nav + .nav .nav-item { padding:8px 14px !important; }
.ecx-shared-nav + .nav .nav-r { display:none !important; }
@media (max-width: 1100px) {
  .ecx-shared-nav { padding:0 18px !important; }
  .ecx-shared-nav .ecx-nav-l { gap:16px !important; }
  .ecx-shared-nav .ecx-nav-item { padding-left:9px !important; padding-right:9px !important; }
}
@media (max-width: 820px) {
  body > nav.nav:not(.ecx-shared-nav),
  body > nav.navbar:not(.ecx-shared-nav),
  body > .app > nav.nav:not(.ecx-shared-nav),
  body > .app > nav.navbar:not(.ecx-shared-nav) {
    height:56px !important;
    min-height:56px !important;
  }
  .ecx-shared-nav { height:56px !important; min-height:56px !important; padding:0 12px !important; }
  .ecx-shared-nav .ecx-nav-menu { display:none !important; }
  .ecx-shared-nav .ecx-hamburger { display:inline-flex !important; align-items:center; justify-content:center; }
  .ecx-shared-nav .ecx-logo { font-size:17px !important; }
  .ecx-shared-nav .ecx-logo-icon { width:32px !important; height:32px !important; border-radius:9px !important; }
  .ecx-shared-nav .ecx-asset-trigger { padding:6px 8px; font-size:12px; }
  .ecx-shared-nav .ecx-asset-trigger > span { display:none; }
  .ecx-shared-nav .ecx-nav-r { gap:3px !important; }
  .ecx-mobile-drawer { --bg1:#0f1422; --bg2:#131a2c; --bg3:#1a2340; --t1:#e8ecf1; --t2:#9aa6bb; --t3:#69758c; --brd:#26334f; position:fixed; inset:56px auto 0 0; z-index:10001; width:min(300px,84vw); display:block; padding:12px; overflow:auto; transform:translateX(-105%); transition:transform .2s ease; background:var(--bg1,#0f1422); border-right:1px solid var(--brd,#26334f); box-shadow:12px 0 32px rgba(0,0,0,.32); }
  .ecx-mobile-drawer.ecx-open { transform:translateX(0); }
  .ecx-mobile-drawer a { display:block; padding:12px 14px; border-radius:8px; color:var(--t2,#5f6d83); font-size:14px; font-weight:600; text-decoration:none; }
  .ecx-mobile-drawer a:hover,.ecx-mobile-drawer a.ecx-active { color:var(--t1,#111a2c); background:var(--bg3,#eef3fb); }
  .ecx-mobile-drawer .ecx-drawer-group { margin:12px 0 4px; padding:8px 14px 4px; color:var(--t3,#8b97aa); font-size:11px; border-top:1px solid var(--brd,#dce4f0); }
  .ecx-nav-scrim { position:fixed; inset:56px 0 0; z-index:10000; display:none; background:rgba(0,0,0,.35); }
  .ecx-nav-scrim.ecx-open { display:block; }
  .ecx-shared-nav + .nav { top:56px !important; padding:0 12px !important; overflow-x:auto; }
}