/* ============================================================
   WPV FINANCE TOKENS — Global Financial Design Utility Layer
   Import after theme.css on all pages that show financial data
   ============================================================ */

/* ──────────────────────────────────────────────
   FONT — Plus Jakarta Sans augmenting Inter
   ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ──────────────────────────────────────────────
   FINANCE TOKEN EXTENSIONS
   Augments / overrides theme.css variables.
   All colours follow the rule:
     emerald  → Buy, positive performance
     gold     → Invest, premium CTAs
     danger   → Loss, alerts
     neutral  → everything else
   ────────────────────────────────────────────── */
:root {
  --fin-page-bg:        #F5F6F8;
  --fin-surface:        #FFFFFF;
  --fin-surface-soft:   #ECEEF2;
  --fin-surface-raised: #FFFFFF;
  --fin-text-primary:   #0F1923;
  --fin-text-secondary: #6B7585;
  --fin-text-muted:     #9AA3B0;
  --fin-border:         #E1E5EB;
  --fin-border-strong:  #C8CDD6;

  /* Emerald — Buy / positive performance only */
  --fin-buy:         #10B981;
  --fin-buy-hover:   #059669;
  --fin-buy-subtle:  rgba(16, 185, 129, 0.10);
  --fin-buy-glow:    0 4px 18px rgba(16, 185, 129, 0.22);

  /* Muted Gold — Invest / premium CTA only */
  --fin-gold:        #B8922A;
  --fin-gold-hover:  #9A7820;
  --fin-gold-subtle: rgba(184, 146, 42, 0.10);
  --fin-gold-glow:   0 4px 18px rgba(184, 146, 42, 0.22);

  /* Danger — loss / negative / alerts */
  --fin-danger:        #DC2626;
  --fin-danger-hover:  #B91C1C;
  --fin-danger-subtle: rgba(220, 38, 38, 0.08);

  /* Brand coral — kept for backward compat */
  --fin-coral: #E05A5C;

  /* Radius */
  --fin-radius-card: 16px;
  --fin-radius-sm:   10px;
  --fin-radius-btn:  10px;
  --fin-radius-pill: 999px;

  /* Shadow */
  --fin-shadow-card:  0 1px 4px rgba(15, 25, 35, 0.06), 0 4px 16px rgba(15, 25, 35, 0.04);
  --fin-shadow-hover: 0 8px 32px rgba(15, 25, 35, 0.12);
  --fin-shadow-deep:  0 20px 60px rgba(15, 25, 35, 0.16);
}

html[data-theme="dark"] {
  --fin-page-bg:        #0B1117;
  --fin-surface:        #111C26;
  --fin-surface-soft:   #192435;
  --fin-surface-raised: #1A2B3C;
  --fin-text-primary:   #EEF0F5;
  --fin-text-secondary: #8A96A8;
  --fin-text-muted:     #5A6574;
  --fin-border:         #1E2D3D;
  --fin-border-strong:  #2A3D52;

  --fin-buy:         #34D399;
  --fin-buy-hover:   #10B981;
  --fin-buy-subtle:  rgba(52, 211, 153, 0.12);
  --fin-buy-glow:    0 4px 18px rgba(52, 211, 153, 0.18);

  --fin-gold:        #D4A843;
  --fin-gold-hover:  #B8922A;
  --fin-gold-subtle: rgba(212, 168, 67, 0.12);
  --fin-gold-glow:   0 4px 18px rgba(212, 168, 67, 0.18);

  --fin-danger:        #EF4444;
  --fin-danger-hover:  #DC2626;
  --fin-danger-subtle: rgba(239, 68, 68, 0.10);

  --fin-shadow-card:  0 1px 6px rgba(0,0,0,0.30), 0 4px 20px rgba(0,0,0,0.20);
  --fin-shadow-hover: 0 8px 36px rgba(0,0,0,0.40);
  --fin-shadow-deep:  0 20px 60px rgba(0,0,0,0.50);
}

/* ──────────────────────────────────────────────
   TABULAR NUMBERS
   Apply to any element showing prices,
   percentages, or aligned numeric data.
   ────────────────────────────────────────────── */
.tabnum,
.price,
.pct-change,
.portfolio-value,
.kpi-value,
.return-value,
.nav-value,
.irr-value,
.moic-value,
.shares-value,
.volume-value,
td.num,
th.num,
.data-value,
.data-value-lg,
.data-value-sm,
[data-tabnum] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

/* ──────────────────────────────────────────────
   VALUE INDICATORS
   ────────────────────────────────────────────── */
.val-up, .val-positive, .positive {
  color: var(--fin-buy) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.val-down, .val-negative, .negative {
  color: var(--fin-danger) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.val-neutral {
  color: var(--fin-text-secondary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.badge-up {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--fin-buy); background: var(--fin-buy-subtle);
  font-variant-numeric: tabular-nums;
}
.badge-down {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--fin-danger); background: var(--fin-danger-subtle);
  font-variant-numeric: tabular-nums;
}
.badge-neutral {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--fin-text-secondary); background: var(--fin-surface-soft);
}

/* ──────────────────────────────────────────────
   PREMIUM BUTTONS
   Emerald = Buy | Gold = Invest | Slate = neutral
   ────────────────────────────────────────────── */
.btn-buy {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 24px;
  border-radius: var(--fin-radius-btn); border: none;
  background: var(--fin-buy); color: #ffffff;
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: 0.1px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--fin-buy-glow); text-decoration: none; white-space: nowrap;
}
.btn-buy:hover {
  background: var(--fin-buy-hover); transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.32);
}
.btn-buy:active { transform: translateY(0); box-shadow: var(--fin-buy-glow); }

.btn-invest {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 24px;
  border-radius: var(--fin-radius-btn); border: none;
  background: var(--fin-gold); color: #ffffff;
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: 0.1px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--fin-gold-glow); text-decoration: none; white-space: nowrap;
}
.btn-invest:hover {
  background: var(--fin-gold-hover); transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(184, 146, 42, 0.32);
}
.btn-invest:active { transform: translateY(0); }

.btn-invest-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 24px;
  border-radius: var(--fin-radius-btn); border: 1.5px solid var(--fin-gold);
  background: var(--fin-gold-subtle); color: var(--fin-gold);
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.2s ease;
  text-decoration: none; white-space: nowrap;
}
.btn-invest-outline:hover {
  background: var(--fin-gold); color: #ffffff;
  transform: translateY(-2px); box-shadow: var(--fin-gold-glow);
}

.btn-neutral {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 24px;
  border-radius: var(--fin-radius-btn); border: 1.5px solid var(--fin-border);
  background: var(--fin-surface); color: var(--fin-text-primary);
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease;
  text-decoration: none; white-space: nowrap;
}
.btn-neutral:hover {
  border-color: var(--fin-border-strong);
  background: var(--fin-surface-soft);
  transform: translateY(-1px);
}

.btn-download {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 18px;
  border-radius: var(--fin-radius-btn); border: 1.5px solid var(--fin-border);
  background: var(--fin-surface); color: var(--fin-text-primary);
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease; text-decoration: none;
}
.btn-download:hover { border-color: var(--fin-buy); color: var(--fin-buy); background: var(--fin-buy-subtle); }

/* Size modifiers */
.btn-sm { height: 36px !important; padding: 0 16px !important; font-size: 13px !important; }
.btn-lg { height: 54px !important; padding: 0 32px !important; font-size: 16px !important; }

/* ──────────────────────────────────────────────
   PREMIUM CARD
   ────────────────────────────────────────────── */
.fin-card {
  background: var(--fin-surface);
  border: 1px solid var(--fin-border);
  border-radius: var(--fin-radius-card);
  box-shadow: var(--fin-shadow-card);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.fin-card:hover {
  box-shadow: var(--fin-shadow-hover);
  transform: translateY(-2px);
  border-color: var(--fin-border-strong);
}
.fin-card-body   { padding: 24px; }
.fin-card-header {
  padding: 20px 24px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.fin-card-footer { padding: 16px 24px 20px; border-top: 1px solid var(--fin-border); }
.fin-card-raised {
  background: var(--fin-surface-raised);
  border: 1px solid var(--fin-border);
  border-radius: var(--fin-radius-card);
  box-shadow: var(--fin-shadow-hover);
}

/* ──────────────────────────────────────────────
   GRID SYSTEM
   ────────────────────────────────────────────── */
.fin-grid-2    { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.fin-grid-3    { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.fin-grid-4    { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.fin-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 20px; }

@media (max-width: 1100px) { .fin-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 768px)  { .fin-grid-2, .fin-grid-3, .fin-grid-4 { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────────────
   FINANCIAL DATA TYPOGRAPHY
   ────────────────────────────────────────────── */
.data-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--fin-text-muted); line-height: 1.4;
}
.data-value {
  font-size: 22px; font-weight: 700; color: var(--fin-text-primary);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  line-height: 1.2; letter-spacing: -0.3px;
}
.data-value-lg {
  font-size: 32px; font-weight: 800; letter-spacing: -0.8px; color: var(--fin-text-primary);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.data-value-sm {
  font-size: 15px; font-weight: 600; color: var(--fin-text-primary);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.data-unit { font-size: 13px; font-weight: 500; color: var(--fin-text-secondary); margin-left: 3px; }
.data-change {
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 3px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.data-change.up   { color: var(--fin-buy); }
.data-change.down { color: var(--fin-danger); }

.kpi-block { display: flex; flex-direction: column; gap: 6px; }
.kpi-block .kpi-number {
  font-size: 28px; font-weight: 800; color: var(--fin-text-primary);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  letter-spacing: -0.6px; line-height: 1.1;
}

/* ──────────────────────────────────────────────
   FIN-TABLE — Clean Financial Data Table
   Horizontal rules only, tabular nums enforced
   ────────────────────────────────────────────── */
.fin-table-wrap {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--fin-radius-card); border: 1px solid var(--fin-border);
  background: var(--fin-surface); box-shadow: var(--fin-shadow-card);
}
.fin-table {
  width: 100%; border-collapse: collapse;
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; color: var(--fin-text-primary);
}
.fin-table thead tr { border-bottom: 1px solid var(--fin-border); }
.fin-table thead th {
  padding: 14px 16px; text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--fin-text-muted);
  white-space: nowrap; background: var(--fin-surface-soft);
}
.fin-table thead th:first-child { border-radius: 15px 0 0 0; }
.fin-table thead th:last-child  { border-radius: 0 15px 0 0; }
.fin-table thead th.num,
.fin-table thead th[data-tabnum] { text-align: right; }

.fin-table tbody tr { border-bottom: 1px solid var(--fin-border); transition: background 0.15s ease; }
.fin-table tbody tr:last-child { border-bottom: none; }
.fin-table tbody tr:hover      { background: var(--fin-surface-soft); }
.fin-table tbody td { padding: 13px 16px; vertical-align: middle; white-space: nowrap; }

.fin-table tbody td.num,
.fin-table tbody td[data-tabnum] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

.fin-table .col-ticker { font-weight: 700; font-size: 13px; color: var(--fin-text-primary); letter-spacing: 0.3px; }
.fin-table .col-name   { font-weight: 500; color: var(--fin-text-secondary); font-size: 13px; }
.fin-table .col-price  { font-weight: 600; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.fin-table .col-change.positive { color: var(--fin-buy);    font-weight: 600; }
.fin-table .col-change.negative { color: var(--fin-danger); font-weight: 600; }

.fin-table th.sortable { cursor: pointer; user-select: none; }
.fin-table th.sortable:hover { color: var(--fin-text-primary); }
.fin-table th.sort-asc::after  { content: " ↑"; opacity: 0.6; }
.fin-table th.sort-desc::after { content: " ↓"; opacity: 0.6; }

/* ──────────────────────────────────────────────
   SECTION HEADER
   ────────────────────────────────────────────── */
.fin-section-title {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 20px; font-weight: 700; color: var(--fin-text-primary); letter-spacing: -0.3px;
}
.fin-section-subtitle { font-size: 14px; color: var(--fin-text-secondary); margin-top: 4px; }
.fin-divider { width: 100%; height: 1px; background: var(--fin-border); margin: 20px 0; }

/* ──────────────────────────────────────────────
   MICRO-ANIMATIONS
   ────────────────────────────────────────────── */
@keyframes fin-fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fin-pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
.fin-animate-up { animation: fin-fadeUp 0.35s ease both; }

.live-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--fin-buy);
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--fin-buy);
  animation: fin-pulse-green 2s ease-in-out infinite;
}

/* ──────────────────────────────────────────────
   WATCHLIST CHIP
   ────────────────────────────────────────────── */
.watchlist-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--fin-radius-pill);
  border: 1px solid var(--fin-border); background: var(--fin-surface);
  font-size: 12px; font-weight: 600; color: var(--fin-text-primary);
  cursor: pointer; transition: all 0.2s ease;
}
.watchlist-chip:hover, .watchlist-chip.active {
  border-color: var(--fin-gold); color: var(--fin-gold); background: var(--fin-gold-subtle);
}

/* ──────────────────────────────────────────────
   MEMBERSHIP BADGE — muted gold
   ────────────────────────────────────────────── */
.membership-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: var(--fin-radius-pill);
  background: linear-gradient(135deg, var(--fin-gold), #D4A843);
  color: #ffffff; font-size: 12px; font-weight: 700;
  letter-spacing: 0.3px; box-shadow: var(--fin-gold-glow);
}

/* ──────────────────────────────────────────────
   THIN SCROLLBARS
   ────────────────────────────────────────────── */
.fin-table-wrap::-webkit-scrollbar { height: 5px; width: 5px; }
.fin-table-wrap::-webkit-scrollbar-track { background: var(--fin-surface-soft); border-radius: 3px; }
.fin-table-wrap::-webkit-scrollbar-thumb { background: var(--fin-border-strong); border-radius: 3px; }
.fin-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--fin-text-muted); }