/*!
 * Landing chrome unmuddle — unique filename (nginx caches /css/ immutable).
 *
 * The 20260906unify sheet painted Login on the nav row by stretching
 * .util-bar-inner into a two-row grid and pulling it up with a negative
 * margin. When any later/earlier sheet won `display:flex` or dropped
 * `grid-row: 2`, Search Elinom became the first flex/grid item on the
 * nav row and covered the logo + Product/Solutions tabs.
 *
 * This sheet keeps the same chrome contract:
 *   - primary tabs + Login / avatar / bell / ENG on the 64px nav row
 *   - Search Elinom centred immediately under the nav (overlays hero)
 * but Search is position:absolute on the util row, never a flex item
 * that can land on the logo.
 */

@media (min-width: 901px) {
  html[data-active-module="landing"] {
    --erp-desktop-search-h: 3rem;
  }

  html[data-active-module="landing"] body.erp-body #navbar.navbar,
  html[data-active-module="landing"] body.erp-body #navbar.erp-shell-navbar,
  html[data-active-module="landing"] body.erp-body nav.navbar.erp-shell-navbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: var(--erp-nav-main-h, 4rem) !important;
    max-height: var(--erp-nav-main-h, 4rem) !important;
    overflow: visible !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar .container.nav-container,
  html[data-active-module="landing"] body.erp-body #navbar .nav-container {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar {
    order: 2 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--erp-desktop-search-h, 3rem) !important;
    min-height: var(--erp-desktop-search-h, 3rem) !important;
    max-height: var(--erp-desktop-search-h, 3rem) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 6 !important;
    background-color: var(--erp-nav-chrome-bg, #070d1a) !important;
    background-image: var(--erp-nav-chrome-surface) !important;
    background-size: var(--erp-nav-chrome-size) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar::before {
    content: none !important;
    display: none !important;
  }

  html[data-active-module="landing"] 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;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--erp-desktop-search-h, 3rem) !important;
    min-height: var(--erp-desktop-search-h, 3rem) !important;
    max-height: var(--erp-desktop-search-h, 3rem) !important;
    margin: 0 !important;
    padding: 0 1.15rem 0 0 !important;
    gap: 12px !important;
    pointer-events: none !important;
    background: transparent !important;
    overflow: visible !important;
    position: relative !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-bar-spacer,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-bar-inner > #navUserProfile {
    display: none !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar #utilAiSearchSlot,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-ai-search-slot {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: center !important;
    width: min(42rem, calc(100% - 4rem)) !important;
    min-width: 18rem !important;
    max-width: 42rem !important;
    height: 40px !important;
    flex: none !important;
    margin: 0 !important;
    pointer-events: auto !important;
    z-index: 2 !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar #us-trigger,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .us-trigger,
  html[data-active-module="landing"] body.erp-body #navbar #utilAiSearchSlot .us-trigger {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    pointer-events: auto !important;
  }

  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center {
    padding-top: calc(2.4rem + var(--erp-desktop-search-h, 3rem)) !important;
  }
}

@media (min-width: 1280px) {
  html[data-active-module="landing"] body.erp-body #navbar .container.nav-container,
  html[data-active-module="landing"] body.erp-body #navbar .nav-container {
    padding-right: 18.5rem !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-bar-inner > .nav-auth-buttons,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-bar-inner > #navUserChip,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-bar-inner > #navNotifWrap,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-bar-inner > .util-lang-wrap,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-bar-inner > #utilLangWrapper {
    position: relative !important;
    top: calc(-1 * var(--erp-nav-main-h, 4rem)) !important;
    transform: none !important;
    grid-row: auto !important;
    grid-column: auto !important;
    align-self: center !important;
    height: var(--erp-nav-main-h, 4rem) !important;
    min-height: var(--erp-nav-main-h, 4rem) !important;
    max-height: var(--erp-nav-main-h, 4rem) !important;
    margin: 0 !important;
    pointer-events: auto !important;
    z-index: 7 !important;
  }
}

/* Expanded modules rail must not crush the full-width navbar. */
@media (min-width: 901px) {
  html[data-active-module="landing"] body.erp-body #navbar,
  html.erp-shell-expanded[data-active-module="landing"] body.erp-body #navbar,
  html.erp-sidebar-visible[data-active-module="landing"] body.erp-body #navbar {
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }
}