/* Force a strong 3D depth feel on every card on the dashboard — overrides earlier subtle styles */

/* === MAIN DASHBOARD CARDS — much more dramatic === */
.dash-stats > .stat-card {
  background:
    linear-gradient(165deg,
      rgba(32,26,54,0.95) 0%,
      rgba(18,16,34,0.96) 35%,
      rgba(10,10,22,0.98) 70%,
      rgba(6,6,14,1) 100%
    ) !important;

  /* Multi-layer depth shadow + colored accent halo */
  box-shadow:
    /* Inner top highlight (light from above) */
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 2px 0 rgba(255,255,255,0.04) inset,
    /* Inner bottom darkness (shadow gradient) */
    0 -1px 0 rgba(0,0,0,0.7) inset,
    0 -8px 16px -8px rgba(0,0,0,0.6) inset,
    /* Outer floating shadow stack */
    0 1px 0 rgba(255,255,255,0.02),
    0 4px 8px -2px rgba(0,0,0,0.5),
    0 12px 24px -6px rgba(0,0,0,0.6),
    0 24px 48px -12px rgba(0,0,0,0.7),
    /* Accent-colored ambient glow at bottom */
    0 18px 40px -16px var(--accent, #7C5CFC) !important;

  border: 1px solid rgba(124,92,252,0.18) !important;
  border-top-color: rgba(255,255,255,0.10) !important;
  border-bottom-color: rgba(0,0,0,0.5) !important;
  border-radius: 18px !important;

  /* Stronger floating amplitude — visibly moves */
  animation: card3dFloatStrong 6s ease-in-out infinite !important;
}

@keyframes card3dFloatStrong {
  0%, 100% {
    transform: perspective(1000px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(0) translateZ(0);
  }
  50% {
    transform: perspective(1000px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(-8px) translateZ(4px);
  }
}

/* Top highlight strip — clearly visible reflective edge */
.dash-stats > .stat-card > .edge-top-3d {
  top: 0 !important;
  left: 8% !important;
  right: 8% !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.35) 30%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.35) 70%,
    transparent
  ) !important;
  opacity: 1 !important;
  filter: blur(0.4px);
  z-index: 5 !important;
}

/* Left bevel — bright vertical edge */
.dash-stats > .stat-card > .edge-left-3d {
  top: 4% !important;
  bottom: 4% !important;
  left: 0 !important;
  width: 1px !important;
  background: linear-gradient(180deg,
    transparent,
    rgba(255,255,255,0.12) 30%,
    rgba(255,255,255,0.20) 50%,
    rgba(255,255,255,0.12) 70%,
    transparent
  ) !important;
  opacity: 1 !important;
}
/* Right bevel — dark shadow edge */
.dash-stats > .stat-card > .edge-right-3d {
  top: 4% !important;
  bottom: 4% !important;
  right: 0 !important;
  width: 1px !important;
  background: linear-gradient(180deg,
    transparent,
    rgba(0,0,0,0.7) 50%,
    transparent
  ) !important;
  opacity: 1 !important;
}

/* Coloured halo at top — bigger, brighter, more visible */
.dash-stats > .stat-card > .glow-3d {
  position: absolute !important;
  top: -40% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90% !important;
  height: 80% !important;
  background: radial-gradient(
    ellipse at center,
    var(--accent, #7C5CFC) 0%,
    transparent 55%
  ) !important;
  opacity: 0.35 !important;
  filter: blur(28px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  animation: glow3dBreatheStrong 5s ease-in-out infinite !important;
}
@keyframes glow3dBreatheStrong {
  0%, 100% { opacity: 0.30; transform: translateX(-50%) scale(0.95); }
  50%      { opacity: 0.55; transform: translateX(-50%) scale(1.15); }
}

/* Accent bar at top — bright glowing strip, always visible */
.dash-stats > .stat-card::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 12% !important;
  right: 12% !important;
  height: 2.5px !important;
  background: linear-gradient(90deg,
    transparent,
    var(--accent, #7C5CFC) 25%,
    var(--accent, #7C5CFC) 75%,
    transparent
  ) !important;
  opacity: 0.85 !important;
  box-shadow:
    0 0 12px var(--accent, #7C5CFC),
    0 0 24px var(--accent, #7C5CFC),
    0 0 40px var(--accent, #7C5CFC) !important;
  filter: saturate(1.4) !important;
  z-index: 4 !important;
  animation: accentPulse3d 3.5s ease-in-out infinite !important;
}
@keyframes accentPulse3d {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* Stat value glow — colored text shadow always visible */
.dash-stats > .stat-card > .stat-val {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.8),
    0 2px 8px rgba(0,0,0,0.6),
    0 0 18px var(--accent, rgba(124,92,252,0.4)),
    0 0 32px var(--accent, rgba(124,92,252,0.2)) !important;
  position: relative;
  z-index: 3;
}

/* Hover state — deeper lift, brighter everything */
.dash-stats > .stat-card:hover,
.dash-stats > .stat-card.tilting {
  border-color: rgba(124,92,252,0.5) !important;
  border-top-color: rgba(255,255,255,0.15) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 2px 0 rgba(255,255,255,0.06) inset,
    0 -1px 0 rgba(0,0,0,0.7) inset,
    0 -10px 20px -8px rgba(0,0,0,0.65) inset,
    0 6px 12px -2px rgba(0,0,0,0.6),
    0 18px 32px -6px rgba(0,0,0,0.7),
    0 36px 60px -12px rgba(0,0,0,0.8),
    0 0 0 1px var(--accent, rgba(124,92,252,0.5)) inset,
    0 0 50px -10px var(--accent, #7C5CFC),
    0 32px 70px -18px var(--accent, rgba(124,92,252,0.7)) !important;
}
.dash-stats > .stat-card:hover > .glow-3d,
.dash-stats > .stat-card.tilting > .glow-3d {
  opacity: 0.7 !important;
  filter: blur(20px) !important;
}
.dash-stats > .stat-card:hover::after,
.dash-stats > .stat-card.tilting::after {
  opacity: 1 !important;
  animation: none !important;
  height: 3px !important;
  filter: saturate(1.6) brightness(1.2) !important;
}

/* === BROKERAGE STRIP — make each cell its own 3D card === */
.brokerage-strip {
  background: linear-gradient(180deg, #131322 0%, #0a0a16 100%) !important;
  padding: 18px 14px !important;
  border-radius: 18px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -1px 0 rgba(0,0,0,0.6) inset,
    0 12px 30px -8px rgba(0,0,0,0.6) !important;
}
.brokerage-strip > .brk-item {
  background:
    linear-gradient(165deg,
      rgba(28,22,46,0.7) 0%,
      rgba(14,12,28,0.6) 100%
    ) !important;
  border: 1px solid rgba(124,92,252,0.15) !important;
  border-top-color: rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  padding: 14px 12px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -1px 0 rgba(0,0,0,0.5) inset,
    0 4px 10px -2px rgba(0,0,0,0.4),
    0 8px 20px -6px rgba(0,0,0,0.5) !important;
  position: relative !important;
  overflow: hidden !important;
}
.brokerage-strip > .brk-item::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 15% !important;
  right: 15% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent) !important;
  pointer-events: none !important;
}
.brokerage-strip > .brk-item .brk-val {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.7),
    0 0 14px currentColor !important;
}
.brokerage-strip > .brk-item:hover {
  border-color: rgba(124,92,252,0.4) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 -1px 0 rgba(0,0,0,0.5) inset,
    0 8px 20px -4px rgba(0,0,0,0.5),
    0 16px 36px -8px rgba(0,0,0,0.6),
    0 0 30px -8px rgba(124,92,252,0.4) !important;
}

/* Make Withdrawal item visually special — it's the "money out" piece */
.brokerage-strip > .brk-item:has(.brk-lbl:not(:empty)) .brk-val.brk-green {
  text-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 0 18px rgba(34,197,94,0.6) !important;
}

/* === Brokerage strip dividers — make them subtle vertical glows === */
.brokerage-strip .brk-divider {
  background: linear-gradient(180deg,
    transparent,
    rgba(124,92,252,0.25) 50%,
    transparent
  ) !important;
  width: 1px !important;
  box-shadow: 0 0 8px rgba(124,92,252,0.15) !important;
}

/* === Mobile: keep it simple === */
@media (hover: none), (max-width: 760px) {
  .dash-stats > .stat-card {
    animation: none !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.06) inset,
      0 6px 16px -4px rgba(0,0,0,0.5) !important;
  }
  .dash-stats > .stat-card > .glow-3d {
    opacity: 0.2 !important;
    animation: none !important;
  }
  .dash-stats > .stat-card::after {
    animation: none !important;
    opacity: 0.6 !important;
  }
}


/* ============================================================
   ALWAYS-ON 3D LOOK — visible without any hover/mouse interaction
   ============================================================ */

/* Deeper, layered base shadows so cards LOOK like they float above the page */
.dash-stats > .stat-card {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,          /* top edge highlight (light source) */
    0 -1px 0 rgba(0,0,0,0.6) inset,                /* bottom edge dark (shadow) */
    0 2px 0 rgba(255,255,255,0.03) inset,          /* secondary highlight */
    0 18px 32px -10px rgba(0,0,0,0.7),             /* main floating shadow */
    0 6px 16px -4px rgba(0,0,0,0.5),               /* ambient shadow */
    0 0 0 1px rgba(40,30,70,0.5) inset !important; /* subtle inner frame */

  /* Curved-surface gradient so card looks like it has volume */
  background:
    linear-gradient(180deg,
      rgba(22,18,38,0.95) 0%,
      rgba(14,12,26,0.92) 50%,
      rgba(8,8,16,0.90) 100%
    ) !important;

  /* Baseline subtle 3D tilt even at rest — gives isometric depth */
  position: relative;
  overflow: hidden;
}

/* Top edge highlight strip — simulates light hitting the top */
.dash-stats > .stat-card > .edge-top-3d {
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.18) 30%,
    rgba(255,255,255,0.25) 50%,
    rgba(255,255,255,0.18) 70%,
    transparent
  );
  pointer-events: none;
  z-index: 4;
  opacity: 0.9;
}

/* Side beveled-edge highlights */
.dash-stats > .stat-card > .edge-left-3d,
.dash-stats > .stat-card > .edge-right-3d {
  position: absolute;
  top: 8%; bottom: 8%;
  width: 1px;
  pointer-events: none;
  z-index: 4;
}
.dash-stats > .stat-card > .edge-left-3d {
  left: 0;
  background: linear-gradient(180deg,
    transparent,
    rgba(255,255,255,0.05) 50%,
    transparent
  );
}
.dash-stats > .stat-card > .edge-right-3d {
  right: 0;
  background: linear-gradient(180deg,
    transparent,
    rgba(0,0,0,0.4) 50%,
    transparent
  );
}

/* Always-on accent glow — colored halo at top of card, no hover needed */
.dash-stats > .stat-card > .glow-3d {
  position: absolute;
  top: -30%; left: 50%;
  transform: translateX(-50%);
  width: 70%; height: 60%;
  background: radial-gradient(
    ellipse at center,
    var(--accent, #7C5CFC) 0%,
    transparent 60%
  );
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
  animation: glow3dBreathe 4.5s ease-in-out infinite;
}
@keyframes glow3dBreathe {
  0%, 100% { opacity: 0.18; transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.32; transform: translateX(-50%) scale(1.1); }
}

/* Auto-shimmer that sweeps across every card every ~6s (not just on hover) */
.dash-stats > .stat-card > .auto-shimmer-3d {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 1;
}
.dash-stats > .stat-card > .auto-shimmer-3d::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 42%,
    rgba(255,255,255,0.04) 48%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 52%,
    transparent 58%,
    transparent 100%
  );
  transform: translateX(0) skewX(-12deg);
  animation: autoShimmer3d 7s ease-in-out infinite;
}
/* Stagger shimmer across cards so they don't all sweep at once */
.dash-stats > .stat-card:nth-child(1) > .auto-shimmer-3d::before  { animation-delay: 0s; }
.dash-stats > .stat-card:nth-child(2) > .auto-shimmer-3d::before  { animation-delay: 0.7s; }
.dash-stats > .stat-card:nth-child(3) > .auto-shimmer-3d::before  { animation-delay: 1.4s; }
.dash-stats > .stat-card:nth-child(4) > .auto-shimmer-3d::before  { animation-delay: 2.1s; }
.dash-stats > .stat-card:nth-child(5) > .auto-shimmer-3d::before  { animation-delay: 2.8s; }
.dash-stats > .stat-card:nth-child(6) > .auto-shimmer-3d::before  { animation-delay: 3.5s; }
.dash-stats > .stat-card:nth-child(7) > .auto-shimmer-3d::before  { animation-delay: 4.2s; }
.dash-stats > .stat-card:nth-child(8) > .auto-shimmer-3d::before  { animation-delay: 4.9s; }
.dash-stats > .stat-card:nth-child(9) > .auto-shimmer-3d::before  { animation-delay: 0.3s; }
.dash-stats > .stat-card:nth-child(10) > .auto-shimmer-3d::before { animation-delay: 1.1s; }
.dash-stats > .stat-card:nth-child(11) > .auto-shimmer-3d::before { animation-delay: 1.9s; }

@keyframes autoShimmer3d {
  0%   { transform: translateX(0) skewX(-12deg); }
  60%  { transform: translateX(420%) skewX(-12deg); }
  100% { transform: translateX(420%) skewX(-12deg); }
}

/* Strengthen the floating animation amplitude so it's visible at rest */
@keyframes card3dFloat {
  0%, 100% { transform: perspective(1000px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0) translateY(0); }
  50%      { transform: perspective(1000px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0) translateY(-6px); }
}

/* Animated traveling border highlight — a tiny dot of light moves around the card */
.dash-stats > .stat-card > .border-light-3d {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(90deg, var(--accent, #7C5CFC), transparent) top left / 50% 1px no-repeat,
    linear-gradient(180deg, transparent, var(--accent, #7C5CFC)) top right / 1px 50% no-repeat,
    linear-gradient(90deg, transparent, var(--accent, #7C5CFC)) bottom right / 50% 1px no-repeat,
    linear-gradient(180deg, var(--accent, #7C5CFC), transparent) bottom left / 1px 50% no-repeat;
  opacity: 0.0;
  animation: borderLight3d 8s ease-in-out infinite;
}
@keyframes borderLight3d {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.35; }
}

/* Stronger accent bar at top — always glowing, not just on hover */
.dash-stats > .stat-card::after {
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent,
    var(--accent, #7C5CFC) 20%,
    var(--accent, #7C5CFC) 80%,
    transparent
  ) !important;
  opacity: 0.7 !important;
  box-shadow: 0 0 12px var(--accent, #7C5CFC), 0 0 24px var(--accent, #7C5CFC) !important;
  filter: saturate(1.2);
}

/* Value text always has a subtle glow matching accent */
.dash-stats > .stat-card > .stat-val {
  text-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 16px var(--accent, rgba(124,92,252,0.25));
}

/* Brokerage strip — stronger 3D base */
.brokerage-strip > .brk-item {
  background: linear-gradient(180deg,
    rgba(22,18,38,0.6) 0%,
    rgba(14,12,26,0.4) 100%
  ) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 -1px 0 rgba(0,0,0,0.4) inset,
    0 6px 14px -4px rgba(0,0,0,0.5) !important;
  padding: 14px 16px !important;
}
.brokerage-strip > .brk-item .brk-val {
  text-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 0 12px currentColor;
}

/* Disable always-on stuff on mobile/reduced-motion too */
@media (hover: none), (prefers-reduced-motion: reduce), (max-width: 760px) {
  .dash-stats > .stat-card > .edge-top-3d,
  .dash-stats > .stat-card > .edge-left-3d,
  .dash-stats > .stat-card > .edge-right-3d,
  .dash-stats > .stat-card > .glow-3d,
  .dash-stats > .stat-card > .auto-shimmer-3d,
  .dash-stats > .stat-card > .border-light-3d {
    display: none;
  }
  .dash-stats > .stat-card {
    box-shadow:
      0 4px 12px rgba(0,0,0,0.5),
      0 0 0 1px rgba(40,30,70,0.5) inset !important;
  }
}