/* Shared platform chrome: equal cards, coloured Zuto nav icons,
   red Login sign-in arrow, compact 3-letter language code, marketing
   util-bar, and one footer quick-row. */

#loginBtn,
#loginBtn.util-btn,
#loginBtn.erp-login-cta,
#loginBtn.login-btn,
a#loginBtn,
a#loginBtn.util-btn,
a#loginBtn.login-btn,
.erp-login-cta#loginBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  background: linear-gradient(120deg, #38bdf8 0%, #6366f1 34%, #f472b6 67%, #f59e0b 100%) !important;
  background-size: 220% 220% !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgb(99, 102, 241, 0.33), 0 3px 12px rgb(245, 158, 11, 0.28) !important;
}

#loginBtn:hover,
#loginBtn.util-btn:hover,
#loginBtn.erp-login-cta:hover,
#loginBtn.login-btn:hover,
a#loginBtn:hover {
  background: linear-gradient(120deg, #22d3ee 0%, #4f46e5 34%, #ec4899 67%, #fb923c 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 14px 30px rgb(99, 102, 241, 0.42), 0 6px 16px rgb(245, 158, 11, 0.35) !important;
}

#loginBtn .fa-right-to-bracket,
#loginBtn .erp-login-lock,
#loginBtn i.fa-right-to-bracket,
a#loginBtn .fa-right-to-bracket,
button#loginBtn .fa-right-to-bracket,
.util-btn#loginBtn .fa-right-to-bracket,
.erp-login-cta .fa-right-to-bracket,
.erp-login-cta .erp-login-lock,
#loginBtn:hover .fa-right-to-bracket,
#loginBtn:hover .erp-login-lock {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
}

/* Marketing / about / help-centre utility cluster hugs the right edge. */
body:not(.erp-body) #util-bar,
html:not([data-active-module]) #util-bar {
  width: 100%;
}

body:not(.erp-body) #util-bar .util-bar-inner,
html:not([data-active-module]) #util-bar .util-bar-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  margin-left: auto !important;
  gap: 12px !important;
}

body:not(.erp-body) #util-bar .nav-auth-buttons,
body:not(.erp-body) #util-bar .util-lang-wrap,
html:not([data-active-module]) #util-bar .nav-auth-buttons,
html:not([data-active-module]) #util-bar .util-lang-wrap {
  margin-left: 0 !important;
}

/* Language trigger: 3-letter code, smaller than nav links, same on phone + desktop.
   After i18n mounts, the live control is .elinom-lang-btn / .elinom-lang-label. */
html body.erp-body #util-bar .util-lang-btn,
html body.erp-body #navbar #util-bar .util-lang-btn,
html body.erp-body #navbar #util-bar #currentLangDisplay,
html body.erp-body #navbar.erp-shell-navbar .util-lang-btn,
html body.erp-body #util-bar .elinom-lang-btn,
html body.erp-body #navbar #util-bar .elinom-lang-btn,
html body.erp-body #navbar.erp-shell-navbar .elinom-lang-btn,
body:not(.erp-body) #util-bar .util-lang-btn,
body:not(.erp-body) #util-bar .elinom-lang-btn {
  font-size: 9px !important;
  font-weight: 600 !important;
  gap: 0.28rem !important;
  padding: 0.18rem 0.32rem !important;
  min-height: 0 !important;
}

html body.erp-body #util-bar #currentLangText,
html body.erp-body #navbar #util-bar #currentLangText,
html body.erp-body #navbar.erp-shell-navbar #currentLangText,
html body.erp-body #util-bar .util-lang-btn span,
html body.erp-body #util-bar .elinom-lang-label,
html body.erp-body #navbar #util-bar .elinom-lang-label,
html body.erp-body #navbar.erp-shell-navbar .elinom-lang-label,
body:not(.erp-body) #util-bar #currentLangText,
body:not(.erp-body) #util-bar .elinom-lang-label {
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
}

html body.erp-body #util-bar .util-lang-btn .fa-globe,
html body.erp-body #navbar #util-bar .util-lang-btn .fa-globe,
html body.erp-body #util-bar .elinom-lang-btn .fa-globe,
html body.erp-body #navbar #util-bar .elinom-lang-btn .fa-globe,
body:not(.erp-body) #util-bar .util-lang-btn .fa-globe,
body:not(.erp-body) #util-bar .elinom-lang-btn .fa-globe {
  font-size: 10px !important;
}

html body.erp-body #navbar #navMenu.mobile-open .mobile-lang-current,
#navMenu .mobile-util-block .mobile-lang-current {
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

/* Coloured Zuto Marketplace dropdown icons (desktop + drawer). */
html body.erp-body #navbar .zuto-li .zuto-dropdown-menu a.submenu-link > i:first-child,
html body.erp-body #navbar #navMenu .zuto-li .dropdown-menu a.submenu-link > i:first-child {
  flex: 0 0 16px !important;
  width: 16px !important;
  text-align: center !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.erp-body #navbar .zuto-ico-auto,
html body.erp-body #navbar i.zuto-ico-auto { color: #10b981 !important; }
html body.erp-body #navbar .zuto-ico-property,
html body.erp-body #navbar i.zuto-ico-property { color: #38bdf8 !important; }
html body.erp-body #navbar .zuto-ico-jobs,
html body.erp-body #navbar i.zuto-ico-jobs { color: #a78bfa !important; }
html body.erp-body #navbar .zuto-ico-market,
html body.erp-body #navbar i.zuto-ico-market { color: #f97316 !important; }
html body.erp-body #navbar .zuto-ico-biz,
html body.erp-body #navbar i.zuto-ico-biz { color: #f59e0b !important; }
html body.erp-body #navbar .zuto-ico-classified,
html body.erp-body #navbar i.zuto-ico-classified { color: #fb7185 !important; }
html body.erp-body #navbar .zuto-ico-holidays,
html body.erp-body #navbar i.zuto-ico-holidays { color: #22d3ee !important; }
html body.erp-body #navbar .zuto-ico-mobility,
html body.erp-body #navbar i.zuto-ico-mobility { color: #c084fc !important; }

/* Shared footer quick-row — same on landing, marketing, and module pages. */
footer.elinom-footer .footer-quick-row,
footer.footer .footer-quick-row,
footer.cx-footer-support .footer-quick-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.85rem 1.25rem !important;
  width: 100% !important;
  margin: 0 0 1.25rem !important;
}

footer.elinom-footer .footer-quick-row .footer-brand-actions.erp-actions-band,
footer.footer .footer-quick-row .footer-brand-actions.erp-actions-band {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  gap: 0.65rem !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

footer.elinom-footer .footer-quick-row .erp-actions-band-item,
footer.footer .footer-quick-row .erp-actions-band-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  padding: 0.5rem 0.95rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  background: rgba(15, 23, 42, 0.55) !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  text-decoration: none !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

footer.elinom-footer .footer-quick-row .erp-actions-band-item i,
footer.footer .footer-quick-row .erp-actions-band-item i {
  color: #38bdf8 !important;
}

footer.elinom-footer .footer-quick-row .footer-quick-tagline,
footer.footer .footer-quick-row .footer-quick-tagline {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  position: static !important;
  margin: 0 !important;
  color: #94a3b8 !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

@media (max-width: 1100px) {
  footer.elinom-footer .footer-quick-row,
  footer.footer .footer-quick-row,
  footer.cx-footer-support .footer-quick-row {
    flex-wrap: wrap !important;
  }

  footer.elinom-footer .footer-quick-row .footer-quick-tagline,
  footer.footer .footer-quick-row .footer-quick-tagline {
    flex-basis: 100% !important;
    text-align: center !important;
  }

  footer.elinom-footer .footer-quick-row .footer-brand-actions.erp-actions-band,
  footer.footer .footer-quick-row .footer-brand-actions.erp-actions-band {
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
  }
}

/* ── Module grid (waffle) — brand colours on every viewport ────────
   navbar-ref flattens this to slate; phone v14 paints it white. Both
   lose to these selectors so desktop matches the colourful phone grid. */
html body.erp-body #navbar .container.nav-container > a.logo.enhanced-logo + #erpAppSwitcher,
html body.erp-body #navbar .container.nav-container > a.logo.enhanced-logo + .erp-app-switcher,
html body.erp-body #navbar .container.nav-container > #erpAppSwitcher,
html body.erp-body #navbar .container.nav-container > .erp-app-switcher,
html body.erp-body #navbar #erpAppSwitcher,
html.erp-nav-drawer-open body.erp-body #navbar #erpAppSwitcher {
  background:
    linear-gradient(#0f172a, #0f172a) padding-box,
    linear-gradient(120deg, #38bdf8 0%, #6366f1 40%, #f472b6 75%, #f59e0b 100%) border-box !important;
  border: 1.5px solid transparent !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 14px rgb(99 102 241 / 28%) !important;
}

html body.erp-body #navbar .container.nav-container > #erpAppSwitcher svg,
html body.erp-body #navbar #erpAppSwitcher svg,
html.erp-nav-drawer-open body.erp-body #navbar #erpAppSwitcher svg {
  fill: none !important;
  color: transparent !important;
}

html body.erp-body #navbar #erpAppSwitcher svg rect:nth-child(1),
html body.erp-body #navbar .container.nav-container > #erpAppSwitcher svg rect:nth-child(1) {
  fill: #38bdf8 !important;
}
html body.erp-body #navbar #erpAppSwitcher svg rect:nth-child(2),
html body.erp-body #navbar .container.nav-container > #erpAppSwitcher svg rect:nth-child(2) {
  fill: #6366f1 !important;
}
html body.erp-body #navbar #erpAppSwitcher svg rect:nth-child(3),
html body.erp-body #navbar .container.nav-container > #erpAppSwitcher svg rect:nth-child(3) {
  fill: #818cf8 !important;
}
html body.erp-body #navbar #erpAppSwitcher svg rect:nth-child(4),
html body.erp-body #navbar .container.nav-container > #erpAppSwitcher svg rect:nth-child(4) {
  fill: #f472b6 !important;
}
html body.erp-body #navbar #erpAppSwitcher svg rect:nth-child(5),
html body.erp-body #navbar .container.nav-container > #erpAppSwitcher svg rect:nth-child(5) {
  fill: #a78bfa !important;
}
html body.erp-body #navbar #erpAppSwitcher svg rect:nth-child(6),
html body.erp-body #navbar .container.nav-container > #erpAppSwitcher svg rect:nth-child(6) {
  fill: #fb7185 !important;
}
html body.erp-body #navbar #erpAppSwitcher svg rect:nth-child(7),
html body.erp-body #navbar .container.nav-container > #erpAppSwitcher svg rect:nth-child(7) {
  fill: #f59e0b !important;
}
html body.erp-body #navbar #erpAppSwitcher svg rect:nth-child(8),
html body.erp-body #navbar .container.nav-container > #erpAppSwitcher svg rect:nth-child(8) {
  fill: #22d3ee !important;
}
html body.erp-body #navbar #erpAppSwitcher svg rect:nth-child(9),
html body.erp-body #navbar .container.nav-container > #erpAppSwitcher svg rect:nth-child(9) {
  fill: #34d399 !important;
}

/* Hero KPI mosaic — same per-tile gradients on phone and desktop. */
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--revenue,
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--revenue {
  background:
    linear-gradient(155deg, rgb(99 102 241 / 0.42) 0%, rgb(139 92 246 / 0.16) 46%, rgb(15 23 42 / 0.72) 100%) !important;
}
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--workforce,
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--workforce {
  background:
    linear-gradient(155deg, rgb(5 150 105 / 0.4) 0%, rgb(52 211 153 / 0.14) 46%, rgb(15 23 42 / 0.72) 100%) !important;
}
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--outstanding,
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--outstanding {
  background:
    linear-gradient(155deg, rgb(217 119 6 / 0.4) 0%, rgb(251 191 36 / 0.14) 46%, rgb(15 23 42 / 0.72) 100%) !important;
}
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance,
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance {
  background:
    linear-gradient(155deg, rgb(37 99 235 / 0.4) 0%, rgb(56 189 248 / 0.16) 46%, rgb(15 23 42 / 0.72) 100%) !important;
}

html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--revenue .kpi-card__icon,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--workforce .kpi-card__icon,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--outstanding .kpi-card__icon,
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__icon {
  width: 1.85rem !important;
  height: 1.85rem !important;
  border-radius: 0.55rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
}
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--revenue .kpi-card__icon {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
}
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--workforce .kpi-card__icon {
  background: linear-gradient(135deg, #059669, #34d399) !important;
}
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--outstanding .kpi-card__icon {
  background: linear-gradient(135deg, #d97706, #fbbf24) !important;
}
html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__icon {
  background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
}