/*!
 * Restore brand colour on the homepage module grid, AI search pill, and
 * desktop command-center decorations.
 *
 * The dark first-paint / navbar-ref pass flattened both to slate / white:
 *   - #us-trigger became a grey pill (background-image:none, slate-800)
 *   - image-backed module cards hid the per-module accent bar and forced
 *     white frost icons over a black Unsplash scrim
 *   - the waffle (#erpAppSwitcher) lost its tint
 *   - the top-left stat card and top-right growth graph were faded out
 *
 * This file loads last among stylesheets on erp_home.html so it wins those
 * !important locks without undoing the dark canvas (phones must not flash
 * white).
 */

:root {
  --erp-brand-ai-gradient: linear-gradient(
    120deg,
    #38bdf8 0%,
    #6366f1 40%,
    #f472b6 75%,
    #f59e0b 100%
  );
}

/* ── AI search pill ──────────────────────────────────────────────── */

html body.erp-body #util-bar #us-trigger,
html body.erp-body #util-bar .us-trigger,
html body.erp-body #util-bar .us-trigger.us-trigger--ai,
html body.erp-body #navbar #utilAiSearchSlot .us-trigger,
html body.erp-body #navbar #utilAiSearchSlot .us-trigger.us-trigger--ai {
  background:
    linear-gradient(#0b1224, #0f172a) padding-box,
    var(--erp-brand-ai-gradient) border-box !important;
  background-image:
    linear-gradient(#0b1224, #0f172a),
    var(--erp-brand-ai-gradient) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  border: 1.5px solid transparent !important;
  box-shadow:
    0 0 0 1px rgb(99 102 241 / 22%),
    0 0 18px rgb(56 189 248 / 32%) !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}

html body.erp-body #util-bar #us-trigger:hover,
html body.erp-body #util-bar .us-trigger:hover,
html body.erp-body #navbar #utilAiSearchSlot .us-trigger:hover {
  background:
    linear-gradient(#111b33, #16203f) padding-box,
    var(--erp-brand-ai-gradient) border-box !important;
  background-image:
    linear-gradient(#111b33, #16203f),
    var(--erp-brand-ai-gradient) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  border-color: transparent !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow:
    0 0 0 1px rgb(165 243 252 / 35%),
    0 0 26px rgb(56 189 248 / 48%) !important;
  transform: none !important;
}

html body.erp-body #util-bar .us-trigger > i,
html body.erp-body #util-bar .us-trigger .us-trigger-text {
  color: inherit !important;
}

html body.erp-body #util-bar .us-trigger > i.fa-wand-magic-sparkles,
html body.erp-body #util-bar .us-trigger.us-trigger--ai > i {
  background: var(--erp-brand-ai-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #38bdf8 !important;
}

html body.erp-body #util-bar .us-trigger .us-trigger-kbd,
html body.erp-body #util-bar .us-trigger kbd {
  border-color: rgb(99 102 241 / 45%) !important;
  background: rgb(99 102 241 / 18%) !important;
  color: #c4b5fd !important;
}

html body.erp-body #util-bar .us-trigger .us-trigger-ai-badge {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 0.15rem !important;
  padding: 0.08rem 0.38rem !important;
  border-radius: 999px !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #e0e7ff !important;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #f472b6 100%) !important;
  border: 0 !important;
}

html body.erp-body #navbar .nav-actions-group > .us-trigger,
html body.erp-body #navbar #navActionsGroup > .us-trigger {
  background:
    linear-gradient(#0b1224, #0f172a) padding-box,
    var(--erp-brand-ai-gradient) border-box !important;
  background-image:
    linear-gradient(#0b1224, #0f172a),
    var(--erp-brand-ai-gradient) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 0 14px rgb(56 189 248 / 28%) !important;
  color: #e2e8f0 !important;
}

/* ── Waffle / module selector ────────────────────────────────────── */

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 {
  background:
    linear-gradient(#0f172a, #0f172a) padding-box,
    var(--erp-brand-ai-gradient) border-box !important;
  border: 1.5px solid transparent !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 12px rgb(99 102 241 / 22%) !important;
}

html body.erp-body #navbar .erp-app-switcher:hover,
html body.erp-body #navbar #erpAppSwitcher:hover {
  background:
    linear-gradient(#16203f, #16203f) padding-box,
    var(--erp-brand-ai-gradient) border-box !important;
  color: #a5f3fc !important;
  border-color: transparent !important;
  box-shadow: 0 0 18px rgb(56 189 248 / 36%) !important;
}

/* ── Desktop hero: top-left stat card + top-right graph ─────────── */

html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-cc-scaling-curve,
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .erp-cc-scaling-curve,
html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-cc-corner-stat,
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .erp-cc-corner-stat {
  display: none !important;
}

/* ── Landing module grid: full-bleed per-module gradient ─────────── */

html body.erp-body #landing .unit-gateway-grid--image-cards .unit-card,
html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid--image-cards .unit-card,
#erpLandingCarousels .unit-card {
  background-color: #0b1224 !important;
  background-image: linear-gradient(
    155deg,
    var(--module-accent, #38bdf8) 0%,
    var(--module-accent-2, #6366f1) 46%,
    #0b1224 100%
  ) !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  border-color: rgb(var(--module-rgb, 99, 102, 241), 0.38) !important;
  box-shadow:
    0 16px 36px rgb(2 6 18 / 45%),
    inset 0 0 0 1px rgb(var(--module-rgb, 99, 102, 241), 0.16) !important;
}

html body.erp-body #landing .unit-gateway-grid--image-cards .unit-card::before,
html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid--image-cards .unit-card::before,
#erpLandingCarousels .unit-card::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background: radial-gradient(
    120% 80% at 12% 8%,
    rgb(255 255 255 / 0.2) 0%,
    rgb(255 255 255 / 0) 58%
  ) !important;
  animation: none !important;
}

html body.erp-body #landing .unit-gateway-grid--image-cards .unit-card::after,
html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid--image-cards .unit-card::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 5px !important;
  height: 100% !important;
  opacity: 1 !important;
  border-radius: inherit 0 0 inherit !important;
  background: linear-gradient(
    180deg,
    var(--module-accent, #38bdf8),
    var(--module-accent-2, #6366f1),
    var(--module-accent, #f472b6)
  ) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

html body.erp-body #landing .unit-gateway-grid--image-cards .unit-card:hover,
html body.erp-body #landing .unit-gateway-grid--image-cards .unit-card:focus-visible {
  border-color: rgb(var(--module-rgb, 56, 189, 248), 0.62) !important;
  box-shadow:
    0 22px 48px rgb(2 6 18 / 55%),
    0 0 28px rgb(var(--module-rgb, 99, 102, 241), 0.32) !important;
}

html body.erp-body #landing .unit-gateway-grid--image-cards .unit-card-body,
#erpLandingCarousels .unit-card-body {
  background: linear-gradient(
    to top,
    rgb(2, 6, 18, 0.36) 0%,
    rgb(2, 6, 18, 0.08) 55%,
    transparent 100%
  ) !important;
}

html body.erp-body #landing .unit-gateway-grid--image-cards .unit-icon-wrapper:not(.zuto-lockup-plate),
html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid--image-cards .unit-icon-wrapper:not(.zuto-lockup-plate),
#erpLandingCarousels .unit-icon-wrapper:not(.zuto-lockup-plate) {
  --icon-ink: var(--module-accent, var(--fcard-accent, #38bdf8));
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--icon-ink) 28%, #05070f),
    #05070f
  ) !important;
  border: 1px solid color-mix(in srgb, var(--icon-ink) 46%, transparent) !important;
  color: var(--icon-ink) !important;
  box-shadow: 0 10px 22px rgb(var(--module-rgb, 99, 102, 241), 0.38) !important;
  align-self: flex-start !important;
}

html body.erp-body #landing .unit-gateway-grid--image-cards .unit-card:hover .unit-icon-wrapper:not(.zuto-lockup-plate),
html body.erp-body #landing .unit-gateway-grid--image-cards .unit-card:focus-visible .unit-icon-wrapper:not(.zuto-lockup-plate) {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--module-accent-2, var(--icon-ink, #6366f1)) 36%, #05070f),
    #05070f
  ) !important;
  box-shadow: 0 12px 26px rgb(var(--module-rgb, 244, 114, 182), 0.42) !important;
  color: var(--icon-ink, var(--module-accent, #38bdf8)) !important;
}

html body.erp-body #landing .unit-gateway-grid--image-cards .unit-icon-wrapper:not(.zuto-lockup-plate) i,
#erpLandingCarousels .unit-icon-wrapper:not(.zuto-lockup-plate) i {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.erp-body #landing .unit-gateway-grid--image-cards .unit-badge,
html body.erp-body #landing .unit-gateway-grid--image-cards .unit-footer i {
  color: var(--module-accent, #7dd3fc) !important;
}

html body.erp-body #landing .unit-gateway-grid--image-cards .unit-footer {
  border-top-color: rgb(var(--module-rgb, 99, 102, 241), 0.28) !important;
}