/*!
 * Platform chrome — unique filename (nginx caches /css/ immutable).
 *
 * Utility icons were muddled because later sheets centred a 64px cluster
 * inside the 48px search row, Login stayed 48px while avatar/bell were
 * 36–40px, and the unmuddle/wordmark rules were landing-only. #capital
 * (and every other hash) therefore kept overlapping glyphs and a silver
 * "Elinom" wordmark.
 *
 * This sheet loads last and applies on every module:
 *   - Login / avatar / bell / globe are 40px circles with a 12px gap
 *   - they lift onto the 64px nav row from the search-row start (not flex-centred)
 *   - the header wordmark paints the full cyan → indigo → pink → amber brand
 */

:root {
  --erp-brand-wordmark: linear-gradient(
    90deg,
    #38bdf8 0%,
    #6366f1 22%,
    #f472b6 55%,
    #f59e0b 100%
  );
  --erp-brand-glyph: linear-gradient(
    135deg,
    #38bdf8,
    #6366f1,
    #f472b6,
    #f59e0b
  );
}

/* ── Header wordmark: full brand on every viewport and every hash ───── */
html body.erp-body #navbar a.logo.enhanced-logo .erp-logo-gradient-text,
html body.erp-body #navbar a.logo.enhanced-logo .lp-is-b8209fbb,
html body.erp-body #navbar a.logo.enhanced-logo .notranslate,
html body.erp-body #navbar .container.nav-container > a.logo.enhanced-logo .erp-logo-gradient-text,
html body.erp-body #navbar .container.nav-container > a.logo.enhanced-logo .notranslate,
html body.erp-body #navbar .enhanced-logo span,
html.erp-nav-drawer-open body.erp-body #navbar a.logo.enhanced-logo .erp-logo-gradient-text,
html.erp-nav-drawer-open body.erp-body #navbar a.logo.enhanced-logo .notranslate {
  background: var(--erp-brand-wordmark) !important;
  background-image: var(--erp-brand-wordmark) !important;
  background-size: 100% 100% !important;
  background-position: 0 50% !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: none !important;
  filter: none !important;
}

/* ── Shared 40px / 12px utility contract (desktop + tablet) ────────── */
@media (min-width: 901px) {
  html body.erp-body {
    --erp-util-size: 40px;
    --erp-util-gap: 12px;
    --erp-util-icon: 1rem;
  }

  html body.erp-body #navbar #util-bar .util-bar-inner {
    gap: var(--erp-util-gap) !important;
    align-items: center !important;
  }

  html body.erp-body #navbar #util-bar .util-bar-inner > .nav-auth-buttons,
  html body.erp-body #navbar #util-bar .util-bar-inner > #navUserChip,
  html body.erp-body #navbar #util-bar .util-bar-inner > #navNotifWrap,
  html body.erp-body #navbar #util-bar .util-bar-inner > .util-lang-wrap,
  html body.erp-body #navbar #util-bar .util-bar-inner > #utilLangWrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body.erp-body #navbar #util-bar .nav-auth-buttons #loginBtn.util-btn,
  html body.erp-body #navbar #util-bar #loginBtn,
  html body.erp-body #navbar #util-bar #loginBtn.erp-login-orb,
  html body.erp-body #navbar #util-bar #navUserChip .nav-user-avatar,
  html body.erp-body #navbar #util-bar #navNotifBell,
  html body.erp-body #navbar #util-bar .elinom-lang-btn .fa-globe,
  html body.erp-body #navbar #util-bar .util-lang-btn .fa-globe,
  html body.erp-body #navbar #util-bar #currentLangDisplay .fa-globe {
    width: var(--erp-util-size) !important;
    height: var(--erp-util-size) !important;
    min-width: var(--erp-util-size) !important;
    min-height: var(--erp-util-size) !important;
    max-width: var(--erp-util-size) !important;
    max-height: var(--erp-util-size) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 var(--erp-util-size) !important;
    position: relative !important;
    transform: none !important;
  }

  html body.erp-body #navbar #util-bar #loginBtn.erp-login-orb::before,
  html body.erp-body #navbar #util-bar #loginBtn::before {
    inset: 9px !important;
  }

  html body.erp-body #navbar #util-bar #navUserChip {
    width: var(--erp-util-size) !important;
    min-width: var(--erp-util-size) !important;
    max-width: var(--erp-util-size) !important;
  }

  html body.erp-body #navbar #util-bar #navUserChip.is-authed {
    width: var(--erp-util-size) !important;
    min-width: var(--erp-util-size) !important;
    max-width: var(--erp-util-size) !important;
    justify-content: center !important;
  }

  html body.erp-body #navbar #util-bar #navUserChip.is-authed #navUserMenuBtn {
    width: auto !important;
    min-width: 0 !important;
    max-width: 14rem !important;
    height: var(--erp-util-size) !important;
    min-height: var(--erp-util-size) !important;
    max-height: var(--erp-util-size) !important;
    padding: 0 0.7rem 0 0.2rem !important;
    border-radius: 999px !important;
    flex: 0 1 auto !important;
    gap: 0.4rem !important;
    justify-content: flex-start !important;
  }

  html body.erp-body #navbar #util-bar #navUserChip.is-authed .nav-user-name,
  html body.erp-body #navbar #util-bar .nav-user-name {
    display: none !important;
  }

  html body.erp-body #navbar #util-bar .elinom-lang-btn,
  html body.erp-body #navbar #util-bar .util-lang-btn,
  html body.erp-body #navbar #util-bar #currentLangDisplay {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: var(--erp-util-size) !important;
    min-height: var(--erp-util-size) !important;
    max-height: var(--erp-util-size) !important;
    padding: 0 !important;
    gap: var(--erp-util-gap) !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 0.78rem !important;
  }

  html body.erp-body #navbar #util-bar .elinom-lang-btn .fa-chevron-down,
  html body.erp-body #navbar #util-bar .util-lang-btn .fa-chevron-down,
  html body.erp-body #navbar #util-bar #currentLangDisplay .fa-chevron-down {
    display: none !important;
  }

  html body.erp-body #navbar #util-bar .elinom-lang-btn .fa-globe,
  html body.erp-body #navbar #util-bar .util-lang-btn .fa-globe,
  html body.erp-body #navbar #util-bar #currentLangDisplay .fa-globe {
    font-size: var(--erp-util-icon) !important;
    line-height: 1 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 0 0 2px rgb(255 255 255 / 20%) !important;
    color: #38bdf8 !important;
  }

  html body.erp-body #navbar #util-bar .elinom-lang-btn .fa-globe::before,
  html body.erp-body #navbar #util-bar .util-lang-btn .fa-globe::before,
  html body.erp-body #navbar #util-bar #currentLangDisplay .fa-globe::before {
    background-image: var(--erp-brand-glyph) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }

  html body.erp-body #navbar #util-bar #navNotifBell {
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 0 0 2px rgb(255 255 255 / 20%) !important;
  }

  html body.erp-body #navbar #util-bar #navNotifBell i,
  html body.erp-body #navbar #util-bar #loginBtn .erp-login-lock,
  html body.erp-body #navbar #util-bar #loginBtn .fa-lock,
  html body.erp-body #navbar #util-bar #navUserChip .nav-user-avatar {
    font-size: var(--erp-util-icon) !important;
    line-height: 1 !important;
  }
}

/* Keep utility icons on the search row. Lifting them onto the product
   nav row stacked the globe, bell, avatar, and language sign on top of
   each other and the Elinom wordmark. */
@media (min-width: 1280px) {
  html body.erp-body #navbar #util-bar .util-bar-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--erp-util-gap, 12px) !important;
  }

  html body.erp-body #navbar #util-bar .util-bar-inner > .nav-auth-buttons,
  html body.erp-body #navbar #util-bar .util-bar-inner > #navUserChip,
  html body.erp-body #navbar #util-bar .util-bar-inner > #navNotifWrap,
  html body.erp-body #navbar #util-bar .util-bar-inner > .util-lang-wrap,
  html body.erp-body #navbar #util-bar .util-bar-inner > #utilLangWrapper {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    pointer-events: auto !important;
    z-index: 1 !important;
  }
}

/* After ElinomLanguageSelector upgrades .util-lang-wrap, hide the legacy
   ENG trigger so ROM/ENG cannot paint on top of each other. */
html body.erp-body .util-lang-wrap.elinom-lang > #currentLangDisplay,
html body.erp-body .util-lang-wrap.elinom-lang > .util-lang-btn,
html body.erp-body .util-lang-wrap.elinom-lang > .dropdown-menu,
html body.erp-body .util-lang-wrap.elinom-lang #currentLangText {
  display: none !important;
}

html body.erp-body .util-lang-wrap.elinom-lang {
  position: relative !important;
}

html body.erp-body .util-lang-wrap.elinom-lang .elinom-lang-label {
  position: relative !important;
  z-index: 1 !important;
}

/* Signed-in account chip stays in the utility row. Absolute placement
   painted the avatar on top of Logout / language / notifications. */
@media (min-width: 901px) {
  html body.erp-body #navbar #util-bar,
  html body.erp-body #navbar #util-bar .util-bar-inner {
    overflow: visible !important;
  }

  html body.erp-body #navbar #util-bar .util-bar-inner > #navUserChip.is-authed {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    width: var(--erp-util-size, 40px) !important;
    min-width: var(--erp-util-size, 40px) !important;
    max-width: var(--erp-util-size, 40px) !important;
    margin: 0 !important;
    align-self: center !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    order: 20 !important;
  }

  html body.erp-body #navbar #util-bar #navUserChip.is-authed #navUserMenuBtn {
    pointer-events: auto !important;
    cursor: pointer !important;
    width: var(--erp-util-size, 40px) !important;
    min-width: var(--erp-util-size, 40px) !important;
    padding: 0 !important;
  }

  html body.erp-body #navbar:has(#navUserChip.is-authed) #util-bar #utilAiSearchSlot,
  html body.erp-body #navbar:has(#navUserChip.is-authed) #util-bar .util-ai-search-slot {
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}