/* ════════════════════════════════════════════════════════════════════
 * Welalgo Design System v2 — "WOW pass"
 * /assets/welalgo-ds-v2.css
 *
 * Goal: bring the landing page's visual language (deep black + aurora
 * green, animated, generous spacing, beautiful gauges & pills) into
 * every internal panel — without rewriting existing layouts.
 *
 * Strategy: opt-in classes prefixed with .ds-* and data-ds-* attributes.
 * Existing styles stay untouched; the new behaviour activates wherever
 * you add a new class name.
 *
 * Components in this file
 * ───────────────────────
 *  .ds-slide / .ds-slide-opt       sliding segment control (the headline wow)
 *  .ds-nav-slider                  glowing aurora bar that slides between
 *                                  active sidebar items
 *  .ds-live                        the LIVE pill with pulsing dot
 *  .ds-lift                        card hover lift + green underglow
 *  .ds-page-fresh                  page entrance animation (slide-from-right)
 *  .ds-stagger                     children appear in a 50ms stagger
 *  .ds-counter (auto)              numbers count up smoothly
 *  .ds-ripple / .ds-ripple-fx      click ripple effect on buttons
 *  .ds-shimmer                     loading skeleton placeholder
 *  .ds-input-glow                  beautiful focus state for inputs
 *  .ds-gauge                       SVG circular gauge (matches landing)
 *  .ds-tp-row, .ds-tp-dot          trade-plan rows with coloured bullets
 *  .ds-pill-r                      +1.0R / -1R style coloured pill
 * ════════════════════════════════════════════════════════════════════ */

:root {
  /* Aurora palette — exact match to the landing page hero card */
  --ds-aurora:        #00E58C;
  --ds-aurora-soft:   #3EE69E;
  --ds-aurora-deep:   #00B36E;
  --ds-aurora-glow:   rgba(0, 229, 140, 0.28);
  --ds-aurora-faint:  rgba(0, 229, 140, 0.10);
  --ds-aurora-line:   rgba(0, 229, 140, 0.18);
  --ds-aurora-line-2: rgba(0, 229, 140, 0.32);

  /* Accent colours seen on the landing card */
  --ds-cyan:    #3DC5F5;   /* ENTRY blue */
  --ds-magenta: #FF4D88;   /* SL pink */
  --ds-gold:    #FFB347;   /* warnings, promo, lower confidence */

  /* Surfaces */
  --ds-text:      #EAFFF2;
  --ds-text-mute: #7E9C8F;
  --ds-text-dim:  #4F6961;
  --ds-bg-card:   rgba(8, 22, 18, 0.70);
  --ds-border:    rgba(0, 229, 140, 0.18);

  /* Motion */
  --ds-ease-out:  cubic-bezier(0.20, 0.80, 0.20, 1);
  --ds-ease-soft: cubic-bezier(0.40, 0.00, 0.20, 1);
}

/* Honour reduced-motion users — disable all our animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * 1 · SLIDING SEGMENT CONTROL
 *
 * Replaces "row of pill buttons where one is selected" patterns.
 * Wrap the buttons in .ds-slide; tag each with .ds-slide-opt and
 * the active one with .active. JS adds a .ds-slide-bg layer that
 * smoothly translates between options on click.
 *
 * Markup:
 *   <div class="ds-slide" role="tablist">
 *     <button class="ds-slide-opt active">All</button>
 *     <button class="ds-slide-opt">Paid</button>
 *     <button class="ds-slide-opt">Trial</button>
 *   </div>
 * ════════════════════════════════════════════════════════════════════ */

.ds-slide {
  position: relative;
  display: inline-flex;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--ds-border);
  border-radius: 99px;
  padding: 4px;
  gap: 0;
  vertical-align: middle;
  /* Allow horizontal scroll on tiny viewports without breaking the slider math */
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scrollbar-width: none;
}
.ds-slide::-webkit-scrollbar { display: none; }
/* Wrapping variant — for cases where overflow scroll isn't desirable.
   The slider is hidden when wrapping (multi-row position math is unreliable);
   active state falls back to a solid background. */
.ds-slide.wrap {
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
  border-radius: 18px;
}
.ds-slide.wrap .ds-slide-bg { display: none; }
.ds-slide.wrap .ds-slide-opt { border-radius: 99px; transition: background 0.20s, color 0.20s; }
.ds-slide.wrap .ds-slide-opt.active {
  background: linear-gradient(135deg, var(--ds-aurora), var(--ds-aurora-soft));
  box-shadow: 0 4px 14px -4px var(--ds-aurora-glow);
}

.ds-slide-bg {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--ds-aurora) 0%, var(--ds-aurora-soft) 100%);
  box-shadow:
    0 6px 18px -4px var(--ds-aurora-glow),
    0 0 0 1px rgba(0, 229, 140, 0.10) inset;
  transition:
    left 0.34s var(--ds-ease-out),
    width 0.34s var(--ds-ease-out),
    opacity 0.20s ease;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}

.ds-slide-bg.ds-ready { opacity: 1; }

.ds-slide-opt {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  padding: 9px 22px;
  cursor: pointer;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--ds-text-mute);
  transition: color 0.25s var(--ds-ease-out);
  white-space: nowrap;
  outline: none;
}
.ds-slide-opt:hover { color: var(--ds-text); }
.ds-slide-opt:focus-visible {
  box-shadow: 0 0 0 2px rgba(0, 229, 140, 0.5);
  border-radius: 99px;
}
.ds-slide-opt.active {
  color: #021A0E;
  font-weight: 700;
}

/* Compact + dense variants */
.ds-slide.compact .ds-slide-opt { padding: 7px 16px; font-size: 11px; }
.ds-slide.dense   .ds-slide-opt { padding: 6px 12px; font-size: 10.5px; letter-spacing: 0.6px; }

/* ════════════════════════════════════════════════════════════════════
 * 2 · SIDEBAR ACTIVE INDICATOR
 *
 * A glowing aurora bar that slides smoothly between active nav items.
 * Sidebar must have: data-ds-sidebar (and contain .nav-item.active).
 * The JS auto-injects the .ds-nav-slider element.
 * ════════════════════════════════════════════════════════════════════ */

.ds-nav-slider {
  position: absolute;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--ds-aurora) 0%, var(--ds-aurora-soft) 100%);
  border-radius: 0 3px 3px 0;
  box-shadow:
    0 0 14px 1px var(--ds-aurora-glow),
    0 0 0 1px rgba(0, 229, 140, 0.10);
  transition:
    top 0.34s var(--ds-ease-out),
    height 0.30s var(--ds-ease-out),
    opacity 0.20s ease;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  top: 0;
  height: 0;
}
.ds-nav-slider.ds-ready { opacity: 1; }

/* ════════════════════════════════════════════════════════════════════
 * 3 · "LIVE" PULSE PILL
 *
 * Exact copy of the landing page LIVE indicator. Use it to label any
 * real-time feed (signals, audit log, broadcast count, etc.).
 *
 *   <span class="ds-live">LIVE · 08:48:46</span>
 * ════════════════════════════════════════════════════════════════════ */

.ds-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 13px;
  background: rgba(0, 229, 140, 0.08);
  border: 1px solid var(--ds-aurora-line-2);
  border-radius: 99px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--ds-aurora);
  text-transform: uppercase;
  vertical-align: middle;
  user-select: none;
}
.ds-live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ds-aurora);
  box-shadow: 0 0 0 0 var(--ds-aurora);
  animation: ds-live-pulse 1.6s infinite;
  flex-shrink: 0;
}
@keyframes ds-live-pulse {
  0%   { box-shadow: 0 0 0 0 var(--ds-aurora-glow); }
  60%  { box-shadow: 0 0 0 8px rgba(0, 229, 140, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 229, 140, 0); }
}

/* Cyan and magenta variants for "ENTRY" / "SL" badges */
.ds-live.cyan    { color: var(--ds-cyan);    border-color: rgba(61, 197, 245, 0.32); background: rgba(61, 197, 245, 0.08); }
.ds-live.cyan::before    { background: var(--ds-cyan); animation: none; }
.ds-live.magenta { color: var(--ds-magenta); border-color: rgba(255, 77, 136, 0.32);  background: rgba(255, 77, 136, 0.08);  }
.ds-live.magenta::before { background: var(--ds-magenta); animation: none; }

/* ════════════════════════════════════════════════════════════════════
 * 4 · CARD LIFT + UNDERGLOW
 *
 * Add .ds-lift to any card. On hover it lifts 3px and a green
 * underglow grows. Use sparingly — only on actually-clickable cards.
 * ════════════════════════════════════════════════════════════════════ */

.ds-lift {
  transition:
    transform 0.24s var(--ds-ease-out),
    box-shadow 0.24s var(--ds-ease-out),
    border-color 0.20s ease;
  cursor: pointer;
  will-change: transform;
}
.ds-lift:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 44px -14px var(--ds-aurora-glow),
    0 4px 12px -4px rgba(0, 0, 0, 0.45);
  border-color: var(--ds-aurora-line-2) !important;
}
.ds-lift:active { transform: translateY(-1px); transition-duration: 0.10s; }

/* ════════════════════════════════════════════════════════════════════
 * 5 · PAGE TRANSITION + STAGGERED ENTRANCE
 *
 * .ds-page-fresh — applied automatically by JS when a .page-section
 * gets .active class. Slides in from +20px right with a fade.
 *
 * .ds-stagger — children appear with a 50ms cascade.
 * ════════════════════════════════════════════════════════════════════ */

@keyframes ds-page-in {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ds-page-fresh {
  animation: ds-page-in 0.40s var(--ds-ease-out) both;
}

@keyframes ds-stagger-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ds-stagger > * {
  animation: ds-stagger-in 0.36s var(--ds-ease-out) both;
}
.ds-stagger > *:nth-child(1)  { animation-delay: 0.04s; }
.ds-stagger > *:nth-child(2)  { animation-delay: 0.09s; }
.ds-stagger > *:nth-child(3)  { animation-delay: 0.14s; }
.ds-stagger > *:nth-child(4)  { animation-delay: 0.19s; }
.ds-stagger > *:nth-child(5)  { animation-delay: 0.24s; }
.ds-stagger > *:nth-child(6)  { animation-delay: 0.29s; }
.ds-stagger > *:nth-child(7)  { animation-delay: 0.34s; }
.ds-stagger > *:nth-child(8)  { animation-delay: 0.39s; }
.ds-stagger > *:nth-child(n+9){ animation-delay: 0.44s; }

/* ════════════════════════════════════════════════════════════════════
 * 6 · ANIMATED COUNTER
 *
 * Add data-ds-count="123" (target value) to any element that should
 * count up from 0. Optional: data-ds-prefix="$", data-ds-suffix="%",
 * data-ds-decimals="2", data-ds-duration="900".
 *
 * The JS auto-detects on insertion and animates once, when the element
 * first becomes visible.
 * ════════════════════════════════════════════════════════════════════ */

.ds-counter, [data-ds-count] {
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════
 * 7 · BUTTON RIPPLE
 *
 * Add .ds-ripple to any button. On click, JS spawns a circular wave
 * that radiates from the click point. Subtle, classy, recognisable.
 * ════════════════════════════════════════════════════════════════════ */

.ds-ripple {
  position: relative;
  overflow: hidden;
}
.ds-ripple-fx {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.32);
  transform: scale(0);
  animation: ds-ripple 0.55s ease-out forwards;
}
@keyframes ds-ripple {
  to { transform: scale(2.5); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════
 * 8 · SHIMMER LOADING SKELETON
 *
 * <div class="ds-shimmer" style="height:14px;width:60%"></div>
 * ════════════════════════════════════════════════════════════════════ */

.ds-shimmer {
  background:
    linear-gradient(
      90deg,
      rgba(0, 229, 140, 0.04) 0%,
      rgba(0, 229, 140, 0.14) 50%,
      rgba(0, 229, 140, 0.04) 100%
    );
  background-size: 200% 100%;
  animation: ds-shimmer 1.4s infinite linear;
  border-radius: 8px;
  display: block;
}
@keyframes ds-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════════════════════════════════
 * 9 · INPUT FOCUS GLOW
 *
 * Aurora ring on focused inputs/selects/textareas.
 * ════════════════════════════════════════════════════════════════════ */

.ds-input-glow {
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
.ds-input-glow:focus,
.ds-input-glow:focus-within {
  border-color: var(--ds-aurora) !important;
  box-shadow:
    0 0 0 4px var(--ds-aurora-faint),
    0 0 22px -8px var(--ds-aurora-glow);
  outline: none;
}

/* ════════════════════════════════════════════════════════════════════
 * 10 · CIRCULAR GAUGE  (matches the landing page's Signal Power)
 *
 *   <div class="ds-gauge" data-ds-value="80" data-ds-label="STRONG"
 *        data-ds-cap="%"></div>
 *
 * The JS draws an SVG, animates the stroke from 0 to value, and sets
 * the centre label.
 * ════════════════════════════════════════════════════════════════════ */

.ds-gauge {
  position: relative;
  width: 140px;
  height: 140px;
  display: inline-block;
}
.ds-gauge svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  display: block;
}
.ds-gauge .ds-gauge-track {
  fill: none;
  stroke: rgba(0, 229, 140, 0.12);
  stroke-width: 6;
}
.ds-gauge .ds-gauge-fill {
  fill: none;
  stroke: url(#ds-gauge-grad);
  stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(0, 229, 140, 0.45));
  transition: stroke-dashoffset 1.0s var(--ds-ease-out);
}
.ds-gauge .ds-gauge-centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
.ds-gauge .ds-gauge-val {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 30px;
  font-weight: 700;
  color: var(--ds-aurora);
  line-height: 1;
  letter-spacing: -0.5px;
}
.ds-gauge .ds-gauge-cap {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-aurora);
  opacity: 0.65;
  margin-top: 2px;
}
.ds-gauge .ds-gauge-lbl {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--ds-text-mute);
  margin-top: 6px;
}

/* Variants */
.ds-gauge.gold .ds-gauge-fill { stroke: url(#ds-gauge-grad-gold); filter: drop-shadow(0 0 6px rgba(255, 179, 71, 0.45)); }
.ds-gauge.gold .ds-gauge-val,
.ds-gauge.gold .ds-gauge-cap  { color: var(--ds-gold); }
.ds-gauge.cyan .ds-gauge-fill { stroke: url(#ds-gauge-grad-cyan); filter: drop-shadow(0 0 6px rgba(61, 197, 245, 0.45)); }
.ds-gauge.cyan .ds-gauge-val,
.ds-gauge.cyan .ds-gauge-cap  { color: var(--ds-cyan); }

/* ════════════════════════════════════════════════════════════════════
 * 11 · TRADE-PLAN ROWS  (the landing's TP/Entry/SL list)
 *
 *   <div class="ds-tp-row">
 *     <span class="ds-tp-dot"></span>
 *     <div class="ds-tp-label">TP1</div>
 *     <div class="ds-tp-sub">+0.05% from entry</div>
 *     <div class="ds-tp-val">84,459.49</div>
 *     <span class="ds-pill-r">+1.0R</span>
 *   </div>
 * ════════════════════════════════════════════════════════════════════ */

.ds-tp-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--ds-border);
}
.ds-tp-row:last-child { border-bottom: none; }
.ds-tp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ds-aurora);
  box-shadow: 0 0 0 4px var(--ds-aurora-faint);
}
.ds-tp-row.entry .ds-tp-dot { background: var(--ds-cyan);    box-shadow: 0 0 0 4px rgba(61, 197, 245, 0.18); }
.ds-tp-row.sl    .ds-tp-dot { background: var(--ds-magenta); box-shadow: 0 0 0 4px rgba(255, 77, 136, 0.18); }
.ds-tp-label {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--ds-text);
}
.ds-tp-row.entry .ds-tp-label { color: var(--ds-cyan); }
.ds-tp-row.sl    .ds-tp-label { color: var(--ds-magenta); }
.ds-tp-sub {
  font-size: 11px;
  color: var(--ds-text-mute);
  margin-top: 2px;
  line-height: 1.35;
}
.ds-tp-val {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 4px;
}

.ds-pill-r {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--ds-aurora-faint);
  color: var(--ds-aurora);
  border: 1px solid var(--ds-aurora-line);
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.ds-pill-r.cyan    { background: rgba(61, 197, 245, 0.10); color: var(--ds-cyan);    border-color: rgba(61, 197, 245, 0.25); }
.ds-pill-r.magenta { background: rgba(255, 77, 136, 0.10); color: var(--ds-magenta); border-color: rgba(255, 77, 136, 0.25); }
.ds-pill-r.gold    { background: rgba(255, 179, 71, 0.10); color: var(--ds-gold);    border-color: rgba(255, 179, 71, 0.25); }
.ds-pill-r.muted   { background: rgba(255, 255, 255, 0.04); color: var(--ds-text-mute); border-color: rgba(255, 255, 255, 0.10); }

/* ════════════════════════════════════════════════════════════════════
 * 12 · MISC HELPERS
 * ════════════════════════════════════════════════════════════════════ */

/* Subtle aurora text accent — for emphasis words inside paragraphs */
.ds-accent { color: var(--ds-aurora); font-weight: 600; }

/* Section label — small caps with letter spacing, like the landing's "SIGNAL POWER" */
.ds-section-label {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: var(--ds-aurora);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ds-section-label::before {
  content: '◢';
  font-size: 9px;
  opacity: 0.7;
}

/* Smooth scrollbar (thin, aurora) — applies anywhere it's reachable */
.ds-scroll::-webkit-scrollbar          { width: 6px; height: 6px; }
.ds-scroll::-webkit-scrollbar-track    { background: rgba(0, 0, 0, 0.20); }
.ds-scroll::-webkit-scrollbar-thumb    {
  background: linear-gradient(180deg, var(--ds-aurora-line-2), var(--ds-aurora-line));
  border-radius: 99px;
}
.ds-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--ds-aurora), var(--ds-aurora-soft));
}