/*!
 * Platform Search Elinom bar — unique filename (nginx caches /css/ immutable).
 *
 * Restores the original dark pill with a cyan → indigo → pink → amber
 * gradient used as the border (padding-box / border-box), not a filled
 * cyan/blue wash. Later sheets (navbar-ref slate, 20260911sg fill,
 * 20260914 glass, 20260915 fill) flattened or flooded the bar; this
 * file loads last.
 */

:root {
  --erp-search-ring: linear-gradient(
    120deg,
    #38bdf8 0%,
    #6366f1 32%,
    #f472b6 66%,
    #f59e0b 100%
  );
  --erp-search-face: linear-gradient(#0b1224, #121a36);
  --erp-search-face-hover: linear-gradient(#111b33, #16203f);
}

@keyframes erp-search-ring-shine {
  0% {
    background-position: 0% 50%, 0% 50%;
  }
  100% {
    background-position: 0% 50%, 100% 50%;
  }
}

/* ── Trigger pill: dark face, brand gradient border ─────────────────── */

html body.erp-body #us-trigger:not(.us-trigger-fixed),
html body.erp-body .us-trigger:not(.us-trigger-fixed),
html body.erp-body .us-trigger.us-trigger--ai:not(.us-trigger-fixed),
html body.erp-body #navbar #util-bar #us-trigger,
html body.erp-body #navbar #util-bar .us-trigger,
html body.erp-body #navbar #util-bar .us-trigger.us-trigger--ai,
html body.erp-body #navbar #utilAiSearchSlot .us-trigger,
html body.erp-body #navbar .nav-actions-group .us-trigger,
html body.erp-body #navbar .nav-actions-group .us-trigger.erp-ai-trigger,
html body.erp-body #navbar #navActionsGroup .us-trigger {
  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.7rem !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 1.15rem !important;
  overflow: visible !important;
  border: 1.6px solid transparent !important;
  border-radius: 999px !important;
  color: #eef0ff !important;
  -webkit-text-fill-color: #eef0ff !important;
  background:
    var(--erp-search-face) padding-box,
    var(--erp-search-ring) border-box !important;
  background-image:
    var(--erp-search-face),
    var(--erp-search-ring) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  background-size: 100% 100%, 180% 100% !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  animation: erp-search-ring-shine 7s linear infinite alternate !important;
  box-shadow:
    0 0 0 1px rgb(192 193 255 / 14%) inset,
    0 8px 26px rgb(99 102 241 / 32%),
    0 0 18px rgb(56 189 248 / 22%) !important;
}

html body.erp-body #us-trigger:not(.us-trigger-fixed)::before,
html body.erp-body .us-trigger:not(.us-trigger-fixed)::before,
html body.erp-body #navbar #util-bar #us-trigger::before,
html body.erp-body #navbar #util-bar .us-trigger::before,
html body.erp-body #navbar .nav-actions-group .us-trigger::before {
  content: none !important;
  display: none !important;
  animation: none !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

html body.erp-body #us-trigger:not(.us-trigger-fixed)::after,
html body.erp-body .us-trigger:not(.us-trigger-fixed)::after,
html body.erp-body #navbar .nav-actions-group .us-trigger::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

html body.erp-body #us-trigger:not(.us-trigger-fixed) > *,
html body.erp-body .us-trigger:not(.us-trigger-fixed) > *,
html body.erp-body #navbar #util-bar #us-trigger > *,
html body.erp-body #navbar #util-bar .us-trigger > *,
html body.erp-body #navbar .nav-actions-group .us-trigger > * {
  position: relative !important;
  z-index: 1 !important;
}

html body.erp-body #us-trigger:not(.us-trigger-fixed):hover,
html body.erp-body .us-trigger:not(.us-trigger-fixed):hover,
html body.erp-body .us-trigger.us-trigger--ai:not(.us-trigger-fixed):hover,
html body.erp-body #navbar #util-bar #us-trigger:hover,
html body.erp-body #navbar #util-bar .us-trigger:hover,
html body.erp-body #navbar #util-bar .us-trigger.us-trigger--ai:hover,
html body.erp-body #navbar .nav-actions-group .us-trigger:hover,
html body.erp-body #navbar .nav-actions-group .us-trigger:focus-visible {
  filter: brightness(1.08) !important;
  transform: none !important;
  border-color: transparent !important;
  background:
    var(--erp-search-face-hover) padding-box,
    var(--erp-search-ring) border-box !important;
  background-image:
    var(--erp-search-face-hover),
    var(--erp-search-ring) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  background-size: 100% 100%, 180% 100% !important;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 18%) inset,
    0 10px 32px rgb(99 102 241 / 42%),
    0 0 24px rgb(244 114 182 / 28%) !important;
}

html body.erp-body #us-trigger:not(.us-trigger-fixed) > i,
html body.erp-body .us-trigger:not(.us-trigger-fixed) > i,
html body.erp-body #navbar #util-bar #us-trigger > i,
html body.erp-body #navbar #util-bar .us-trigger > i,
html body.erp-body #navbar .nav-actions-group .us-trigger > i,
html body.erp-body #navbar .nav-actions-group .us-trigger > svg {
  background: linear-gradient(
    120deg,
    #38bdf8 0%,
    #818cf8 40%,
    #f472b6 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  fill: #818cf8 !important;
  filter: none !important;
  animation: none !important;
  font-size: 0.95rem !important;
}

html body.erp-body .us-trigger-text,
html body.erp-body #us-trigger .us-trigger-text,
html body.erp-body #navbar #util-bar .us-trigger-text,
html body.erp-body #navbar .nav-actions-group .us-trigger .us-trigger-text {
  flex: 1 1 auto !important;
  text-align: center !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  opacity: 1 !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #e0f2fe !important;
  color: #e0f2fe !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

html body.erp-body .us-trigger-kbd,
html body.erp-body #us-trigger .us-trigger-kbd,
html body.erp-body #navbar #util-bar .us-trigger-kbd,
html body.erp-body #navbar .nav-actions-group .us-trigger .us-trigger-kbd {
  background: rgb(15 23 42 / 55%) !important;
  border: 1px solid rgb(192 193 255 / 28%) !important;
  color: #c0c1ff !important;
  -webkit-text-fill-color: #c0c1ff !important;
  border-radius: 6px !important;
  padding: 1px 7px !important;
  font-weight: 700 !important;
}

/* ── Compact FAB / security-bar icon — same ring, keep size ─────────── */

html body.erp-body .us-trigger-fixed,
html body.erp-body .security-bar .us-trigger {
  background:
    var(--erp-search-face) padding-box,
    var(--erp-search-ring) border-box !important;
  background-image:
    var(--erp-search-face),
    var(--erp-search-ring) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  border: 1.6px solid transparent !important;
  color: #eef0ff !important;
  box-shadow:
    0 0 0 1px rgb(192 193 255 / 14%) inset,
    0 8px 22px rgb(99 102 241 / 40%) !important;
  animation: none !important;
}

html body.erp-body .us-trigger-fixed > i,
html body.erp-body .security-bar .us-trigger > i {
  background: linear-gradient(120deg, #38bdf8, #818cf8, #f472b6) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

html body.erp-body .security-bar .us-trigger {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  min-width: 40px !important;
  width: 40px !important;
  max-width: 40px !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 8px !important;
}

/* ── Overlay search field — matching dark face + gradient ring ──────── */

html body.erp-body #us-palette .us-input-row,
html body.erp-body .us-palette .us-input-row {
  border: 1.6px solid transparent !important;
  border-radius: 999px !important;
  padding: 0.4rem 0.95rem !important;
  background:
    var(--erp-search-face) padding-box,
    var(--erp-search-ring) border-box !important;
  background-image:
    var(--erp-search-face),
    var(--erp-search-ring) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  background-size: 100% 100%, 180% 100% !important;
  animation: erp-search-ring-shine 7s linear infinite alternate !important;
  box-shadow:
    0 0 0 1px rgb(192 193 255 / 14%) inset,
    0 8px 28px rgb(99 102 241 / 28%) !important;
}

html body.erp-body #us-palette .us-input-icon,
html body.erp-body .us-palette .us-input-icon {
  background: linear-gradient(120deg, #38bdf8, #818cf8, #f472b6) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

html body.erp-body #us-palette .us-input,
html body.erp-body .us-palette .us-input {
  color: #eef0ff !important;
  caret-color: #f472b6 !important;
  outline: none !important;
  box-shadow: none !important;
}

html body.erp-body #us-palette .us-input-row:focus-within,
html body.erp-body .us-palette .us-input-row:focus-within {
  border-color: transparent !important;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 16%) inset,
    0 0 0 3px rgb(99 102 241 / 28%),
    0 8px 28px rgb(99 102 241 / 28%) !important;
}

/* ── Phone drawer search action ─────────────────────────────────────── */

html body.erp-body #navbar #navMenu .mobile-util-action--search {
  border: 1.6px solid transparent !important;
  border-radius: 999px !important;
  color: #eef0ff !important;
  -webkit-text-fill-color: #eef0ff !important;
  background:
    var(--erp-search-face) padding-box,
    var(--erp-search-ring) border-box !important;
  background-image:
    var(--erp-search-face),
    var(--erp-search-ring) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
}

@media (max-width: 900px) {
  html body.erp-body #us-trigger:not(.us-trigger-fixed),
  html body.erp-body .us-trigger:not(.us-trigger-fixed),
  html body.erp-body #navbar #util-bar #us-trigger,
  html body.erp-body #navbar #util-bar .us-trigger {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 0.85rem !important;
  }
}