/* BLACK X ERP — Dark Emerald Wave Shell
   Scope: topbar, sidebar and removal of pointer-reactive glass glow.
   The workspace, business forms, routes and backend contracts are unchanged. */

:root {
  --bx-shell-ink: var(--bx-green-950);
  --bx-shell-ink-soft: var(--bx-green-900);
  --bx-shell-forest: var(--bx-green-850);
  --bx-shell-emerald-deep: var(--bx-green-700);
  --bx-shell-emerald: var(--bx-green-600);
  --bx-shell-emerald-bright: var(--bx-green-600);
  --bx-shell-emerald-soft: var(--bx-green-700);
  --bx-shell-emerald-rgb: var(--bx-highlight-shell-rgb);
  --bx-shell-soft-rgb: var(--bx-highlight-rgb);
  --bx-shell-border: rgba(var(--bx-shell-emerald-rgb), .24);
  --bx-shell-border-soft: rgba(var(--bx-shell-emerald-rgb), .12);
  --bx-shell-highlight: rgba(var(--bx-shell-emerald-rgb), .16);
  --bx-shell-shadow: 0 24px 52px rgba(2, 10, 9, .42);
}

/* Remove the old cursor-following glow from every glass/card surface. */
[data-bx-glass]::before,
.card::before,
.blackx-card::before,
.blackx-panel::before,
.blackx-kpi-card::before,
.dashboard-card::before,
.report-card::before,
.module-card::before,
.erp-card::before,
.erp-panel::before,
.erp-module-card::before,
.projects-panel::before,
.auth-card::before,
.bx-card::before,
.bx-dashboard-panel::before,
.bx-report-panel::before,
.bx-record-card::before,
.blackx-dashboard-module-card::before,
.modal-content::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Shared shell geometry and dark-dominant material. */
.blackx-topbar,
.blackx-universal-sidebar {
  isolation: isolate;
  color: #f3fff9;
  border-color: var(--bx-shell-border-soft);
  box-shadow: var(--bx-shell-shadow), 0 0 0 1px rgba(var(--bx-shell-emerald-rgb), .07) inset;
}

.blackx-topbar {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 135%, rgba(23, 144, 95, .15) 0%, rgba(13, 96, 68, .08) 27%, transparent 56%),
    radial-gradient(ellipse at 86% -44%, rgba(23, 144, 95, .24) 0%, rgba(11, 48, 38, .14) 29%, transparent 58%),
    linear-gradient(108deg, #07100f 0%, #091413 24%, #0a211b 47%, #0d4a36 66%, #0b2f26 79%, #07110f 100%);
  background-size: 172% 175%, 165% 170%, 235% 100%;
  background-position: 0% 58%, 100% 42%, 0% 50%;
  border-bottom: 1px solid rgba(var(--bx-shell-emerald-rgb), .23);
  backdrop-filter: blur(22px) saturate(142%);
  -webkit-backdrop-filter: blur(22px) saturate(142%);
  animation: bx-shell-surface-horizontal 19s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  will-change: background-position;
}

.blackx-topbar::before {
  content: "";
  position: absolute;
  inset: -72% -32%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      112deg,
      transparent 20%,
      rgba(var(--bx-shell-emerald-rgb), .025) 35%,
      rgba(var(--bx-shell-emerald-rgb), .30) 47%,
      rgba(var(--bx-shell-soft-rgb), .17) 53%,
      rgba(var(--bx-shell-emerald-rgb), .075) 61%,
      transparent 76%
    );
  background-size: 245% 100%;
  filter: blur(18px);
  opacity: .78;
  transform: translate3d(-24%, 0, 0) rotate(-4deg) scale(1.08);
  animation: bx-shell-wave-horizontal 24s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  will-change: transform, background-position;
}

.blackx-topbar::after {
  inset-inline: 24px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--bx-shell-emerald-rgb), .30) 18%,
    rgba(var(--bx-shell-soft-rgb), .46) 50%,
    rgba(var(--bx-shell-emerald-rgb), .30) 82%,
    transparent
  );
  box-shadow: 0 0 10px rgba(var(--bx-shell-emerald-rgb), .18);
}

.blackx-topbar__inner {
  position: relative;
  z-index: 2;
}

.blackx-topbar.is-scrolled {
  box-shadow: 0 24px 52px rgba(2, 10, 9, .48), 0 0 0 1px rgba(var(--bx-shell-emerald-rgb), .11) inset;
}

.blackx-topbar__sidebar-controls,
.blackx-universal-sidebar__mark {
  border-color: rgba(var(--bx-shell-emerald-rgb), .18);
  background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(9, 16, 16, .24));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 12px 28px rgba(0, 0, 0, .20);
}

.blackx-topbar__mark,
.blackx-universal-sidebar__symbol {
  background: linear-gradient(145deg, #07100f, #0b211b);
  color: var(--bx-metal-200);
  border-color: rgba(var(--bx-shell-emerald-rgb), .42);
  box-shadow: 0 0 13px rgba(var(--bx-shell-emerald-rgb), .08), inset 0 1px 0 rgba(255, 255, 255, .045);
  text-shadow: 0 0 7px rgba(var(--bx-shell-emerald-rgb), .18);
}

.blackx-sidebar-control {
  --bx-button-bg: linear-gradient(145deg, rgba(255,255,255,.065), rgba(9,16,16,.20));
  --bx-button-color: #f3fff9;
  --bx-button-border: rgba(var(--bx-shell-emerald-rgb), .20);
}

.blackx-universal-sidebar {
  background:
    radial-gradient(ellipse at 132% -18%, rgba(23, 144, 95, .17) 0%, rgba(13, 96, 68, .10) 27%, transparent 56%),
    radial-gradient(ellipse at -52% 116%, rgba(23, 144, 95, .20) 0%, rgba(11, 48, 38, .13) 30%, transparent 60%),
    linear-gradient(154deg, #07100f 0%, #091513 26%, #0a211b 47%, #0d513a 65%, #0b3027 79%, #07110f 100%);
  background-size: 190% 175%, 180% 185%, 190% 220%;
  background-position: 100% 0%, 0% 100%, 50% 0%;
  animation: bx-shell-surface-sidebar 23s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  will-change: background-position;
}

.blackx-universal-sidebar::before {
  content: "";
  position: absolute;
  inset: -26% -74%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      151deg,
      transparent 21%,
      rgba(var(--bx-shell-emerald-rgb), .025) 35%,
      rgba(var(--bx-shell-emerald-rgb), .28) 47%,
      rgba(var(--bx-shell-soft-rgb), .15) 53%,
      rgba(var(--bx-shell-emerald-rgb), .065) 61%,
      transparent 75%
    );
  background-size: 180% 235%;
  filter: blur(21px);
  opacity: .80;
  transform: translate3d(0, -19%, 0) rotate(-8deg) scale(1.10);
  animation: bx-shell-wave-vertical 28s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  will-change: transform, background-position;
}

.blackx-universal-sidebar::after {
  background: rgba(var(--bx-shell-emerald-rgb), .70);
  box-shadow: 0 0 11px rgba(var(--bx-shell-emerald-rgb), .20), 0 0 24px rgba(var(--bx-shell-emerald-rgb), .08);
}

.blackx-universal-sidebar__ambient {
  z-index: 0;
  background:
    linear-gradient(118deg, rgba(255,255,255,.018), transparent 27%, transparent 69%, rgba(var(--bx-shell-emerald-rgb), .045)),
    radial-gradient(ellipse at 50% 52%, rgba(var(--bx-shell-emerald-rgb), .055), transparent 58%);
  background-size: 145% 145%;
  animation: bx-shell-ambient-drift 34s ease-in-out infinite alternate;
}

.blackx-universal-sidebar__brand,
.blackx-universal-sidebar__nav {
  position: relative;
  z-index: 2;
}

.blackx-universal-sidebar__brand {
  border-bottom-color: rgba(var(--bx-shell-emerald-rgb), .15);
}

.blackx-universal-sidebar__nav {
  scrollbar-color: rgba(var(--bx-shell-emerald-rgb), .35) rgba(255,255,255,.035);
}

.blackx-universal-sidebar__nav::-webkit-scrollbar-thumb {
  background: rgba(var(--bx-shell-emerald-rgb), .31);
}

.blackx-universal-sidebar__module {
  border-color: rgba(var(--bx-shell-emerald-rgb), .115);
  background: linear-gradient(145deg, rgba(255,255,255,.064), rgba(7,16,15,.24));
  box-shadow: 0 12px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter: blur(18px) saturate(142%);
  -webkit-backdrop-filter: blur(18px) saturate(142%);
}

/* Fixed, non-pointer-reactive highlight. */
.blackx-universal-sidebar__module::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 8%, rgba(var(--bx-shell-emerald-rgb), .08) 50%, transparent 92%);
  opacity: 0;
  transform: translateX(-12%);
  transition: opacity var(--bx-transition), transform var(--bx-transition);
}

.blackx-universal-sidebar__module:hover::before,
.blackx-universal-sidebar__module:focus-within::before,
.blackx-universal-sidebar__module[open]::before,
.blackx-universal-sidebar__module.is-open::before {
  opacity: .72;
  transform: translateX(0);
}

.blackx-universal-sidebar__module[open],
.blackx-universal-sidebar__module.is-open,
.blackx-universal-sidebar__module.is-active {
  border-color: rgba(var(--bx-shell-emerald-rgb), .32);
  background: linear-gradient(145deg, rgba(var(--bx-shell-emerald-rgb), .105), rgba(255,255,255,.052));
  box-shadow: 0 0 0 1px rgba(var(--bx-shell-emerald-rgb), .10), 0 0 24px rgba(var(--bx-shell-emerald-rgb), .11), 0 15px 30px rgba(0,0,0,.20);
}

.blackx-universal-sidebar__module > summary:hover,
.blackx-universal-sidebar__module > summary:focus-visible {
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 0 0 1px rgba(var(--bx-shell-emerald-rgb), .10);
}

.blackx-universal-sidebar__module-icon {
  background: rgba(7, 16, 15, .78);
  color: var(--bx-metal-200);
  border-color: rgba(var(--bx-shell-emerald-rgb), .28);
  text-shadow: 0 0 6px rgba(var(--bx-shell-emerald-rgb), .16);
}

.blackx-universal-sidebar__module-chevron {
  stroke: var(--bx-metal-300);
  filter: drop-shadow(0 0 4px rgba(var(--bx-shell-emerald-rgb), .15));
}

.blackx-universal-sidebar__page:hover,
.blackx-universal-sidebar__page:focus-visible {
  border-color: rgba(var(--bx-shell-emerald-rgb), .23);
  box-shadow: 0 0 16px rgba(var(--bx-shell-emerald-rgb), .085);
}

.blackx-universal-sidebar__page.is-active,
.blackx-universal-sidebar__page[aria-current="page"] {
  background: linear-gradient(145deg, rgba(var(--bx-shell-emerald-rgb), .145), rgba(255,255,255,.038));
  border-color: rgba(var(--bx-shell-emerald-rgb), .34);
  box-shadow: 0 0 12px rgba(var(--bx-shell-emerald-rgb), .07);
}

.blackx-universal-sidebar__page-indicator {
  background: rgba(var(--bx-shell-emerald-rgb), .60);
  box-shadow: 0 0 6px rgba(var(--bx-shell-emerald-rgb), .17);
}

.blackx-universal-sidebar__module-abbr {
  color: var(--bx-metal-200);
}

.blackx-sidebar-empty {
  border-color: rgba(var(--bx-shell-emerald-rgb), .20);
}

body.blackx-sidebar-collapsed .blackx-universal-sidebar__module > summary::after {
  background: #0a211b;
  border-color: rgba(var(--bx-shell-emerald-rgb), .22);
}

.blackx-sidebar-mobile-scrim {
  background: rgba(3, 10, 9, .72);
}


@keyframes bx-shell-surface-horizontal {
  0% {
    background-position: 0% 62%, 100% 34%, 0% 50%;
  }
  46% {
    background-position: 44% 44%, 58% 54%, 48% 50%;
  }
  100% {
    background-position: 100% 38%, 0% 66%, 100% 50%;
  }
}

@keyframes bx-shell-surface-sidebar {
  0% {
    background-position: 100% 0%, 0% 100%, 46% 0%;
  }
  52% {
    background-position: 54% 45%, 48% 56%, 54% 52%;
  }
  100% {
    background-position: 0% 100%, 100% 0%, 46% 100%;
  }
}

@keyframes bx-shell-wave-horizontal {
  0% {
    transform: translate3d(-29%, -1%, 0) rotate(-5deg) scale(1.08);
    background-position: 0% 50%;
  }
  48% {
    transform: translate3d(-2%, 2%, 0) rotate(-2deg) scale(1.12);
    background-position: 52% 50%;
  }
  100% {
    transform: translate3d(27%, -1%, 0) rotate(-6deg) scale(1.08);
    background-position: 100% 50%;
  }
}

@keyframes bx-shell-wave-vertical {
  0% {
    transform: translate3d(-2%, -24%, 0) rotate(-10deg) scale(1.10);
    background-position: 50% 0%;
  }
  50% {
    transform: translate3d(3%, -1%, 0) rotate(-6deg) scale(1.14);
    background-position: 50% 52%;
  }
  100% {
    transform: translate3d(-3%, 25%, 0) rotate(-11deg) scale(1.10);
    background-position: 50% 100%;
  }
}

@keyframes bx-shell-ambient-drift {
  0% { background-position: 0% 20%, 50% 44%; }
  100% { background-position: 100% 80%, 52% 58%; }
}

@media (prefers-reduced-motion: reduce) {
  .blackx-topbar,
  .blackx-universal-sidebar,
  .blackx-topbar::before,
  .blackx-universal-sidebar::before,
  .blackx-universal-sidebar__ambient {
    animation: none !important;
    will-change: auto;
  }

  .blackx-topbar::before {
    transform: translate3d(0, 0, 0) rotate(-4deg) scale(1.08);
    background-position: 52% 50%;
  }

  .blackx-universal-sidebar::before {
    transform: translate3d(0, 0, 0) rotate(-8deg) scale(1.10);
    background-position: 50% 50%;
  }
}

html.blackx-no-motion .blackx-topbar,
html.blackx-no-motion .blackx-universal-sidebar,
html.blackx-no-motion .blackx-topbar::before,
html.blackx-no-motion .blackx-universal-sidebar::before,
html.blackx-no-motion .blackx-universal-sidebar__ambient {
  animation: none !important;
  will-change: auto;
}

@media print {
  .blackx-topbar,
  .blackx-universal-sidebar,
  .blackx-topbar::before,
  .blackx-universal-sidebar::before,
  .blackx-universal-sidebar__ambient {
    animation: none !important;
  }
}