/**
 * variables.css — IDX Suite Centralized Design Tokens
 * Mendukung Dark Mode (default) dan Modern High-Contrast Light Mode via [data-theme="light"].
 */

/* ── 1. DARK THEME (DEFAULT) ────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  /* Background & Surfaces */
  --bg:               #080b10;
  --bg-darker:        #05070a;
  --bg-card:          #0d1117;
  --bg-modal:         #0f141c;
  --bg-input:         rgba(255, 255, 255, 0.05);

  /* Surface layers (glassmorphism elevations) */
  --s1:               rgba(255, 255, 255, 0.04);
  --s2:               rgba(255, 255, 255, 0.07);
  --s3:               rgba(255, 255, 255, 0.02);
  --s-hover:          rgba(255, 255, 255, 0.06);
  --s-active:         rgba(255, 255, 255, 0.10);
  --s-highlight:      rgba(255, 255, 255, 0.15);

  /* Overlays & Backdrops */
  --overlay-bg:       rgba(0, 0, 0, 0.25);
  --overlay-heavy:    rgba(0, 0, 0, 0.60);
  --overlay-loading:  rgba(8, 11, 16, 0.95);
  --tooltip-bg:       rgba(15, 23, 42, 0.95);
  --topbar-bg:        rgba(8, 11, 16, 0.75);

  /* Borders & Dividers */
  --border:           rgba(255, 255, 255, 0.08);
  --border2:          rgba(255, 255, 255, 0.12);
  --border3:          rgba(255, 255, 255, 0.18);
  --border-subtle:    rgba(255, 255, 255, 0.04);
  --border-glow:      rgba(0, 255, 163, 0.30);

  /* Typography & Text */
  --text:             #e8edf5;
  --text-secondary:   #c9d1d9;
  --text-muted:       #8899aa;
  --muted:            #a9bad2;
  --muted2:           #98a9ba;
  --text-dim:         #5a6a80;

  /* Fonts */
  --mono:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Semantic Trading Colors (Upgraded TradingView Pro Palette) */
  --up:               #00ffa3;
  --up-light:         #10b981;
  --up-emerald:       #059669;
  --up-mint:          #34d399;
  --up-bg-subtle:     rgba(0, 255, 163, 0.08);
  --up-bg:            rgba(0, 255, 163, 0.14);
  --up-bg-hover:      rgba(0, 255, 163, 0.24);
  --up-border:        rgba(0, 255, 163, 0.35);
  --up-glow:          rgba(0, 255, 163, 0.45);
  --up-grad:          linear-gradient(135deg, #047857 0%, #10b981 100%);
  --up-grad-h:        linear-gradient(90deg, #047857 0%, #00ffa3 100%);

  --down:             #ef4444;
  --down-light:       #f87171;
  --down-coral:       #fb7185;
  --danger:           #ef4444;
  --down-bg-subtle:   rgba(239, 68, 68, 0.08);
  --down-bg:          rgba(239, 68, 68, 0.14);
  --down-bg-hover:    rgba(239, 68, 68, 0.24);
  --down-border:      rgba(239, 68, 68, 0.35);
  --down-glow:        rgba(239, 68, 68, 0.45);
  --down-grad:        linear-gradient(135deg, #991b1b 0%, #ef4444 100%);
  --down-grad-h:      linear-gradient(90deg, #991b1b 0%, #ef4444 100%);

  --blue:             #4d9fff;
  --blue-light:       #60a5fa;
  --blue-sky:         #38bdf8;
  --blue-bg-subtle:   rgba(77, 159, 255, 0.06);
  --blue-bg:          rgba(77, 159, 255, 0.10);
  --blue-bg-hover:    rgba(77, 159, 255, 0.20);
  --blue-border:      rgba(77, 159, 255, 0.30);
  --blue-glow:        rgba(77, 159, 255, 0.40);

  --gold:             #f5c842;
  --gold-vivid:       #ffb300;
  --amber:            #f59e0b;
  --yellow:           #fbbf24;
  --gold-bg-subtle:   rgba(245, 200, 66, 0.06);
  --gold-bg:          rgba(245, 200, 66, 0.10);
  --gold-bg-hover:    rgba(245, 200, 66, 0.20);
  --gold-border:      rgba(245, 200, 66, 0.30);

  --accent:           #00ffa3;
  --purple:           #a78bfa;
  --purple-vivid:     #a855f7;
  --purple-bg:        rgba(168, 85, 247, 0.12);
  --cyan:             #22d3ee;
  --teal:             #2dd4bf;
  --orange:           #fb923c;
  --orange-vivid:     #ff8c42;

  /* Layout Tokens */
  --radius:           10px;
  --radius-sm:        6px;
  --radius-lg:        14px;
  --nav-h:            50px;

  /* Sidebar Tokens */
  --sb-w:             220px;
  --sb-w-col:         56px;
  --sb-bg:            rgba(8, 11, 16, 0.97);
  --sb-border:        rgba(255, 255, 255, 0.07);
  --sb-shadow:        4px 0 16px rgba(0, 0, 0, 0.25);
  --sb-text:          #6b7c93;
  --transition:       0.22s cubic-bezier(.4, 0, .2, 1);

  /* Elevation Shadows & Chart Defaults */
  --card-shadow:      none;
  --chart-grid:       rgba(255, 255, 255, 0.05);
}

/* ── 2. CLEAN, MODERN & HIGH-CONTRAST LIGHT THEME ───────────────────── */
[data-theme="light"] {
  /* 1. Surface & Background */
  --bg:               #f8fafc;
  --bg-darker:        #f1f5f9;
  --bg-card:          #ffffff;
  --bg-modal:         #ffffff;
  --bg-input:         #ffffff;

  /* Surface layers */
  --s1:               #ffffff;
  --s2:               #f1f5f9;
  --s3:               #f8fafc;
  --s-hover:          #f1f5f9;
  --s-active:         #e2e8f0;
  --s-highlight:      #cbd5e1;

  /* Overlays & Backdrops */
  --overlay-bg:       rgba(15, 23, 42, 0.15);
  --overlay-heavy:    rgba(15, 23, 42, 0.50);
  --overlay-loading:  rgba(248, 250, 252, 0.95);
  --tooltip-bg:       #0f172a;
  --topbar-bg:        rgba(255, 255, 255, 0.90);

  /* Borders & Dividers */
  --border:           #e2e8f0;
  --border2:          #cbd5e1;
  --border3:          #94a3b8;
  --border-subtle:    #f1f5f9;
  --border-glow:      rgba(22, 163, 74, 0.35);

  /* 2. Typography (Sharp & High Contrast) */
  --text:             #0f172a;
  --text-secondary:   #334155;
  --text-muted:       #475569;
  --muted:            #475569;
  --muted2:           #64748b;
  --text-dim:         #94a3b8;

  /* 3. Bold & Vibrant Semantic Trading Colors (Nendang di Putih) */
  /* Hijau (Up / Bullish / Profit) */
  --up:               #16a34a;
  --up-light:         #15803d;
  --up-emerald:       #16a34a;
  --up-mint:          #16a34a;
  --up-bg-subtle:     #dcfce7;
  --up-bg:            #dcfce7;
  --up-bg-hover:      #bbf7d0;
  --up-border:        #86efac;
  --up-glow:          rgba(22, 163, 74, 0.30);
  --up-grad:          linear-gradient(135deg, #15803d 0%, #22c55e 100%);
  --up-grad-h:        linear-gradient(90deg, #15803d 0%, #16a34a 100%);

  /* Merah (Down / Bearish / Loss) */
  --down:             #dc2626;
  --down-light:       #b91c1c;
  --down-coral:       #dc2626;
  --danger:           #dc2626;
  --down-bg-subtle:   #fee2e2;
  --down-bg:          #fee2e2;
  --down-bg-hover:    #fecaca;
  --down-border:      #fca5a5;
  --down-glow:        rgba(220, 38, 38, 0.30);
  --down-grad:        linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
  --down-grad-h:      linear-gradient(90deg, #b91c1c 0%, #dc2626 100%);

  /* 4. Brand & Neutral Accents (Deep Royal Blue) */
  --blue:             #2563eb;
  --blue-light:       #1d4ed8;
  --blue-sky:         #0284c7;
  --blue-bg-subtle:   #dbeafe;
  --blue-bg:          #dbeafe;
  --blue-bg-hover:    #bfdbfe;
  --blue-border:      #93c5fd;
  --blue-glow:        rgba(37, 99, 235, 0.30);

  /* Gold / Amber / Commodity (Vibrant Golden Yellow) */
  --gold:             #eab308;
  --gold-vivid:       #f59e0b;
  --amber:            #f59e0b;
  --yellow:           #eab308;
  --gold-bg-subtle:   #fef9c3;
  --gold-bg:          #fef9c3;
  --gold-bg-hover:    #fef08a;
  --gold-border:      #fde047;

  /* Secondary Accents */
  --accent:           #16a34a;
  --purple:           #7c3aed;
  --purple-vivid:     #6d28d9;
  --purple-bg:        #ede9fe;
  --cyan:             #0891b2;
  --teal:             #0d9488;
  --orange:           #ea580c;
  --orange-vivid:     #c2410c;

  /* Sidebar Tokens */
  --sb-bg:            #ffffff;
  --sb-border:        #e2e8f0;
  --sb-shadow:        4px 0 14px rgba(0, 0, 0, 0.05);
  --sb-text:          #334155;

  /* Elevation Shadows & Chart Grid */
  --card-shadow:      0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
  --chart-grid:       rgba(0, 0, 0, 0.06);
}

/* ── 3. COMPONENT STYLING FOR LIGHT MODE ────────────────────────────── */
[data-theme="light"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

[data-theme="light"] .card,
[data-theme="light"] .sc,
[data-theme="light"] .hero-chart-card,
[data-theme="light"] .card-top3,
[data-theme="light"] .card-treemap,
[data-theme="light"] .modal-box,
[data-theme="light"] .modal-content,
[data-theme="light"] .bt-panel {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .card:hover,
[data-theme="light"] .sc:hover,
[data-theme="light"] .hero-chart-card:hover {
  border-color: var(--border2) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .topbar {
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-theme="light"] .sidebar {
  background: var(--sb-bg) !important;
  border-right: 1px solid var(--border) !important;
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

[data-theme="light"] table thead th {
  background: #f8fafc !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--border) !important;
}

[data-theme="light"] table tbody tr:nth-child(even) {
  background: #f8fafc !important;
}

[data-theme="light"] table tbody tr:hover {
  background: #f1f5f9 !important;
}

[data-theme="light"] table tbody td {
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text);
}

[data-theme="light"] .td-up,
[data-theme="light"] .top3-ret.td-up,
[data-theme="light"] .badge-up,
[data-theme="light"] .tag-up,
[data-theme="light"] .up,
[data-theme="light"] .td-pos {
  color: var(--up) !important;
  font-weight: 700;
}

[data-theme="light"] .badge-up {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
  color: var(--up-light) !important;
  border: 1px solid var(--up-border) !important;
  font-weight: 700 !important;
}

[data-theme="light"] .td-down,
[data-theme="light"] .top3-ret.td-down,
[data-theme="light"] .badge-down,
[data-theme="light"] .tag-down,
[data-theme="light"] .down,
[data-theme="light"] .td-neg {
  color: var(--down) !important;
  font-weight: 700;
}

[data-theme="light"] .badge-down {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
  color: var(--down-light) !important;
  border: 1px solid var(--down-border) !important;
  font-weight: 700 !important;
}

[data-theme="light"] .hero-ihsg-badge.up,
[data-theme="light"] .hero-ihsg-badge.down {
  color: #ffffff !important;
}

[data-theme="light"] .badge-neutral {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid var(--border) !important;
  font-weight: 700 !important;
}

[data-theme="light"] .sb-link {
  color: var(--sb-text) !important;
  font-weight: 500 !important;
}

[data-theme="light"] .sb-link .sb-label {
  color: var(--sb-text) !important;
}

[data-theme="light"] .sb-link:hover {
  color: var(--text) !important;
  background: var(--s2) !important;
}

[data-theme="light"] .sb-link:hover .sb-label {
  color: var(--text) !important;
}

[data-theme="light"] .sb-link.active {
  color: var(--up) !important;
  background: var(--up-bg-subtle) !important;
  font-weight: 700 !important;
}

[data-theme="light"] .sb-link.active .sb-label {
  color: var(--up) !important;
  font-weight: 700 !important;
}

[data-theme="light"] .sb-profile-btn:hover {
  background: var(--s2) !important;
}

[data-theme="light"] .sb-profile-name {
  color: var(--text) !important;
}

[data-theme="light"] .btn-refresh {
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  font-weight: 600 !important;
}

[data-theme="light"] .btn-refresh:hover {
  background: var(--s2) !important;
  border-color: var(--border2) !important;
}

[data-theme="light"] .theme-toggle-btn {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

[data-theme="light"] .theme-toggle-btn:hover {
  background: var(--s2) !important;
  border-color: var(--border2) !important;
}

[data-theme="light"] .filter-btn,
[data-theme="light"] .macro-btn,
[data-theme="light"] .timeframe-btn {
  color: var(--muted) !important;
  font-weight: 500 !important;
}

[data-theme="light"] .filter-btn.active,
[data-theme="light"] .macro-btn.active,
[data-theme="light"] .timeframe-btn.active {
  background: #ffffff !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .treemap-label {
  font-weight: 800 !important;
  text-shadow: none !important;
}

[data-theme="light"] .treemap-val {
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* 4. LOGO & BRANDING (GRADIENT MATCHING ICON) */
.logo-subtle {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--danger);
  font-weight: 700;
}

.logo-highlight {
  background: linear-gradient(135deg, #00ffa3 0%, #10b981 60%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--accent);
  font-weight: 800;
  filter: drop-shadow(0 0 8px rgba(0, 255, 163, 0.25));
}

[data-theme="light"] .logo-subtle {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 60%, #b91c1c 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: #dc2626 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

[data-theme="light"] .logo-highlight {
  background: linear-gradient(135deg, #10b981 0%, #059669 60%, #047857 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: #15803d !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

[data-theme="light"] .sb-logo-icon {
  filter: contrast(1.1) saturate(1.15);
}

/* 5. LOADING OVERLAY (LIGHT THEME) */
[data-theme="light"] #loading-overlay {
  background: rgba(248, 250, 252, 0.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 6. REFRESH BUTTON */
.btn-refresh {
  background: transparent;
  border: 1px solid var(--up-border);
  color: var(--accent);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all .2s;
  letter-spacing: .05em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-refresh:hover {
  background: var(--up-bg);
  border-color: var(--accent);
}

.btn-refresh:disabled {
  opacity: .3;
  cursor: default;
}

[data-theme="light"] .btn-refresh {
  background: #ecfdf5 !important;
  border: 1px solid #86efac !important;
  color: #15803d !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(22, 163, 74, 0.08) !important;
}

[data-theme="light"] .btn-refresh:hover {
  background: #dcfce7 !important;
  border-color: #4ade80 !important;
  color: #166534 !important;
  box-shadow: 0 2px 4px rgba(22, 163, 74, 0.15) !important;
}

[data-theme="light"] .btn-refresh:disabled {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
}

[data-theme="light"] #ld-text {
  color: #0f172a !important;
  font-weight: 600 !important;
}

[data-theme="light"] #ld-sub {
  color: #64748b !important;
  font-weight: 500 !important;
}

[data-theme="light"] #ld-bar-track {
  background: #e2e8f0 !important;
}

[data-theme="light"] #ld-meta {
  color: #64748b !important;
  font-weight: 600 !important;
}