/*!
 * Landing chrome — unique filename (nginx caches /css/ immutable).
 * Even out the right-side utility icons without changing nav order or colours.
 */

@media (min-width: 901px) {
  html body.erp-body #navbar #util-bar .util-bar-inner,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-bar-inner {
    align-items: center !important;
    gap: 0.45rem !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,
  html body.erp-body #navbar #util-bar .util-bar-inner > #utilAiSearchSlot,
  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,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-bar-inner > #utilAiSearchSlot {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 2.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }

  /* Search stays a wider pill at the shared 36px height. */
  html body.erp-body #navbar #util-bar #us-trigger,
  html body.erp-body #navbar #util-bar .us-trigger,
  html body.erp-body #navbar #utilAiSearchSlot .us-trigger,
  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 {
    height: 2.25rem !important;
    min-height: 2.25rem !important;
    max-height: 2.25rem !important;
    box-sizing: border-box !important;
  }

  html body.erp-body #navbar #util-bar #loginBtn,
  html body.erp-body #navbar #util-bar .nav-auth-buttons #loginBtn.util-btn,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #loginBtn,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .nav-auth-buttons #loginBtn.util-btn {
    width: 2.25rem !important;
    height: 2.25rem !important;
    min-width: 2.25rem !important;
    min-height: 2.25rem !important;
    max-width: 2.25rem !important;
    max-height: 2.25rem !important;
    flex: 0 0 2.25rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
  }

  html body.erp-body #navbar #util-bar #loginBtn::before,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #loginBtn::before {
    inset: 7px !important;
  }

  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 #loginBtn .fa-lock-open,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #loginBtn .erp-login-lock,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #loginBtn .fa-lock {
    font-size: 0.78rem !important;
  }

  html body.erp-body #navbar #util-bar #navUserChip,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #navUserChip {
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    max-width: 2.25rem !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
  }

  html body.erp-body #navbar #util-bar #navUserChip .nav-user-avatar,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #navUserChip .nav-user-avatar {
    width: 2.25rem !important;
    height: 2.25rem !important;
    min-width: 2.25rem !important;
    min-height: 2.25rem !important;
    border-radius: 50% !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  html body.erp-body #navbar #util-bar #navNotifBell,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #navNotifBell {
    width: 2.25rem !important;
    height: 2.25rem !important;
    min-width: 2.25rem !important;
    min-height: 2.25rem !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html body.erp-body #navbar #util-bar #navNotifBell i,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #navNotifBell i {
    font-size: 0.85rem !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
  }

  html body.erp-body #navbar #util-bar .util-lang-btn,
  html body.erp-body #navbar #util-bar .elinom-lang-btn,
  html body.erp-body #navbar #util-bar #currentLangDisplay,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-lang-btn,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .elinom-lang-btn,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #currentLangDisplay {
    height: 2.25rem !important;
    min-height: 2.25rem !important;
    max-height: 2.25rem !important;
    padding: 0 0.65rem !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    box-sizing: border-box !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
  }

  html body.erp-body #navbar #util-bar .util-lang-btn i,
  html body.erp-body #navbar #util-bar .elinom-lang-btn i,
  html body.erp-body #navbar #util-bar #currentLangDisplay i,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-lang-btn i,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .elinom-lang-btn i,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #currentLangDisplay i {
    font-size: 0.85rem !important;
    line-height: 1 !important;
  }

  html body.erp-body #navbar #util-bar #currentLangText,
  html body.erp-body #navbar #util-bar .elinom-lang-label,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #currentLangText,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .elinom-lang-label {
    font-size: 0.72rem !important;
    line-height: 1 !important;
  }
}

@media (max-width: 900px) {
  html body.erp-body #navbar #navMenu.mobile-open .mobile-util-action--icon,
  html body.erp-body #navbar #navMenu.mobile-open .mobile-util-lock {
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    height: 2.75rem !important;
    flex: 0 0 2.75rem !important;
    font-size: 0.9rem !important;
  }
}