/* =============================================================================
   vikcraft-chart.css — v2.0
   6 built-in themes + pro tooltip + crosshair + legend badges
   ============================================================================= */

/* ── 1. DARK THEME (default) ─────────────────────────────────────────────── */
:root {
  --vc-bg:              #070c17;
  --vc-card:            #0d1628;
  --vc-ink:             #e6ecff;
  --vc-muted:           #93a4c4;
  --vc-grid:            rgba(255,255,255,0.08);
  --vc-axis:            rgba(255,255,255,0.18);
  --vc-tooltip-bg:      rgba(13,22,40,0.96);
  --vc-tooltip-ink:     #e6ecff;
  --vc-tooltip-border:  rgba(255,255,255,0.12);
  --vc-tooltip-shadow:  0 8px 32px rgba(0,0,0,0.5);
  --vc-xhair:           rgba(255,255,255,0.18);
  --vc-legend-ink:      #93a4c4;
  --vc-back-bg:         rgba(255,255,255,0.08);
  --vc-back-ink:        #e6ecff;
  --vc-back-border:     rgba(255,255,255,0.12);

  /* legacy aliases (keep backward compat) */
  --bg: var(--vc-bg);
  --card: var(--vc-card);
  --ink: var(--vc-ink);
  --muted: var(--vc-muted);
  --vc-ink-color:    var(--vc-ink);
  --vc-muted-color:  var(--vc-muted);
  --vc-grid-color:   var(--vc-grid);
  --vc-tooltip-bg:   var(--vc-tooltip-bg);
}

/* ── 2. LIGHT THEME ──────────────────────────────────────────────────────── */
.vik-light {
  --vc-bg:              #f4f7fb;
  --vc-card:            #ffffff;
  --vc-ink:             #1f2937;
  --vc-muted:           #6b7280;
  --vc-grid:            #e5e7eb;
  --vc-axis:            #d1d5db;
  --vc-tooltip-bg:      #ffffff;
  --vc-tooltip-ink:     #1f2937;
  --vc-tooltip-border:  #e5e7eb;
  --vc-tooltip-shadow:  0 8px 24px rgba(0,0,0,0.12);
  --vc-xhair:           rgba(0,0,0,0.15);
  --vc-legend-ink:      #6b7280;
  --vc-back-bg:         #f3f4f6;
  --vc-back-ink:        #374151;
  --vc-back-border:     #d1d5db;

  --bg: var(--vc-bg); --card: var(--vc-card);
  --ink: var(--vc-ink); --muted: var(--vc-muted);
  --vc-ink-color: var(--vc-ink); --vc-muted-color: var(--vc-muted);
  --vc-grid-color: var(--vc-grid);
}

/* ── 3. MIDNIGHT THEME ───────────────────────────────────────────────────── */
.vik-midnight {
  --vc-bg:              #0d0d1a;
  --vc-card:            #12122a;
  --vc-ink:             #c9d1f5;
  --vc-muted:           #6d74a8;
  --vc-grid:            rgba(105,115,200,0.15);
  --vc-axis:            rgba(105,115,200,0.3);
  --vc-tooltip-bg:      rgba(18,18,42,0.97);
  --vc-tooltip-ink:     #c9d1f5;
  --vc-tooltip-border:  rgba(105,115,200,0.25);
  --vc-tooltip-shadow:  0 8px 32px rgba(80,80,180,0.35);
  --vc-xhair:           rgba(120,130,220,0.25);
  --vc-legend-ink:      #6d74a8;
  --vc-back-bg:         rgba(255,255,255,0.06);
  --vc-back-ink:        #c9d1f5;
  --vc-back-border:     rgba(105,115,200,0.2);

  --bg: var(--vc-bg); --card: var(--vc-card);
  --ink: var(--vc-ink); --muted: var(--vc-muted);
  --vc-ink-color: var(--vc-ink); --vc-muted-color: var(--vc-muted);
  --vc-grid-color: var(--vc-grid);
}

/* ── 4. OCEAN THEME ──────────────────────────────────────────────────────── */
.vik-ocean {
  --vc-bg:              #050f1a;
  --vc-card:            #071727;
  --vc-ink:             #caf0f8;
  --vc-muted:           #5a9eb5;
  --vc-grid:            rgba(0,180,216,0.12);
  --vc-axis:            rgba(0,180,216,0.28);
  --vc-tooltip-bg:      rgba(7,23,39,0.97);
  --vc-tooltip-ink:     #caf0f8;
  --vc-tooltip-border:  rgba(0,180,216,0.22);
  --vc-tooltip-shadow:  0 8px 32px rgba(0,120,160,0.4);
  --vc-xhair:           rgba(0,200,240,0.22);
  --vc-legend-ink:      #5a9eb5;
  --vc-back-bg:         rgba(0,180,216,0.08);
  --vc-back-ink:        #caf0f8;
  --vc-back-border:     rgba(0,180,216,0.18);

  --bg: var(--vc-bg); --card: var(--vc-card);
  --ink: var(--vc-ink); --muted: var(--vc-muted);
  --vc-ink-color: var(--vc-ink); --vc-muted-color: var(--vc-muted);
  --vc-grid-color: var(--vc-grid);
}

/* ── 5. FOREST THEME ─────────────────────────────────────────────────────── */
.vik-forest {
  --vc-bg:              #060f0a;
  --vc-card:            #0c1a10;
  --vc-ink:             #d4edda;
  --vc-muted:           #6aaa7a;
  --vc-grid:            rgba(40,160,70,0.12);
  --vc-axis:            rgba(40,160,70,0.28);
  --vc-tooltip-bg:      rgba(12,26,16,0.97);
  --vc-tooltip-ink:     #d4edda;
  --vc-tooltip-border:  rgba(40,160,70,0.22);
  --vc-tooltip-shadow:  0 8px 32px rgba(20,90,40,0.4);
  --vc-xhair:           rgba(80,200,100,0.22);
  --vc-legend-ink:      #6aaa7a;
  --vc-back-bg:         rgba(40,160,70,0.08);
  --vc-back-ink:        #d4edda;
  --vc-back-border:     rgba(40,160,70,0.18);

  --bg: var(--vc-bg); --card: var(--vc-card);
  --ink: var(--vc-ink); --muted: var(--vc-muted);
  --vc-ink-color: var(--vc-ink); --vc-muted-color: var(--vc-muted);
  --vc-grid-color: var(--vc-grid);
}

/* ── 6. NEON THEME ───────────────────────────────────────────────────────── */
.vik-neon {
  --vc-bg:              #08080f;
  --vc-card:            #0f0f1e;
  --vc-ink:             #f0f0ff;
  --vc-muted:           #8888cc;
  --vc-grid:            rgba(130,80,255,0.14);
  --vc-axis:            rgba(130,80,255,0.3);
  --vc-tooltip-bg:      rgba(15,15,30,0.98);
  --vc-tooltip-ink:     #f0f0ff;
  --vc-tooltip-border:  rgba(130,80,255,0.3);
  --vc-tooltip-shadow:  0 0 24px rgba(130,80,255,0.4), 0 8px 32px rgba(0,0,0,0.6);
  --vc-xhair:           rgba(160,80,255,0.28);
  --vc-legend-ink:      #8888cc;
  --vc-back-bg:         rgba(130,80,255,0.08);
  --vc-back-ink:        #f0f0ff;
  --vc-back-border:     rgba(130,80,255,0.2);

  --bg: var(--vc-bg); --card: var(--vc-card);
  --ink: var(--vc-ink); --muted: var(--vc-muted);
  --vc-ink-color: var(--vc-ink); --vc-muted-color: var(--vc-muted);
  --vc-grid-color: var(--vc-grid);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  DEMO PAGE LAYOUT (chart-grid, chart-card, etc.)                          */
/* ══════════════════════════════════════════════════════════════════════════ */
.vc-main-header {
  background-color: #fff;
  padding: 20px 40px;
  border-bottom: 1px solid #ddd;
  text-align: center;
}
.vc-main-header h1 { margin: 0; color: #1a237e; }

.vc-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
}

.vc-chart-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.vc-chart-card h3 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
}
.vc-chart-card > div {
  width: 100%;
  min-height: 300px;
  position: relative;
  display: flex;
  flex-grow: 1;
}
.vc-chart-card > .vikcraft-3d-wrapper { min-height: 400px; }

.vc-chart-container,
.vikcraft-3d-wrapper {
  position: relative;
  width: 100%;
  flex-grow: 1;
  display: flex;
}

canvas { width: 100%; height: 100%; }

/* ══════════════════════════════════════════════════════════════════════════ */
/*  BACK BUTTON                                                               */
/* ══════════════════════════════════════════════════════════════════════════ */
.vc-back-button {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--vc-back-bg, rgba(255,255,255,0.08));
  color: var(--vc-back-ink, #e6ecff);
  border: 1px solid var(--vc-back-border, rgba(255,255,255,0.12));
  border-radius: 20px;
  z-index: 10;
  display: none;
  transition: opacity 0.2s;
}
.vc-back-button:hover { opacity: 0.8; }

/* ══════════════════════════════════════════════════════════════════════════ */
/*  3D CHART LABELS                                                           */
/* ══════════════════════════════════════════════════════════════════════════ */
.vikcraft-3d-labels {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.vikcraft-3d-label {
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  background-color: rgba(255,255,255,0.75);
  padding: 2px 5px;
  border-radius: 3px;
  text-shadow: 1px 1px 2px white;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  PRO TOOLTIP v2.0                                                          */
/* ══════════════════════════════════════════════════════════════════════════ */
.vc-tooltip {
  position: absolute;
  background: var(--vc-tooltip-bg, rgba(13,22,40,0.96));
  color: var(--vc-tooltip-ink, #e6ecff);
  padding: 0;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  white-space: nowrap;
  z-index: 200;
  border: 1px solid var(--vc-tooltip-border, rgba(255,255,255,0.12));
  box-shadow: var(--vc-tooltip-shadow, 0 8px 32px rgba(0,0,0,0.5));
  min-width: 60px;
  /* Smart transform offset — JS overrides left/top, this just primes the transition */
  transform: translate(12px, -50%);
}
.vc-tooltip.vc-tooltip-left  { transform: translate(calc(-100% - 12px), -50%); }
.vc-tooltip.vc-tooltip-above { transform: translate(-50%, calc(-100% - 12px)); }

.vc-tooltip-header {
  padding: 8px 14px;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid var(--vc-tooltip-border, rgba(255,255,255,0.1));
  letter-spacing: 0.01em;
}
.vc-tooltip-body {
  padding: 8px 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 12px;
  align-items: center;
}
.vc-tooltip-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.vc-tooltip-label {
  color: var(--vc-muted, #93a4c4);
  font-size: 12px;
}
.vc-tooltip-value {
  font-weight: 700;
  font-size: 13px;
  text-align: right;
  color: var(--vc-ink, #e6ecff);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  LEGEND v2.0 — pill-style                                                  */
/* ══════════════════════════════════════════════════════════════════════════ */
.vc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 6px 0 4px;
  justify-content: center;
}
.vc-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.2s;
  font-size: 12px;
  color: var(--vc-legend-ink, #93a4c4);
  user-select: none;
}
.vc-legend-item:hover { background: rgba(255,255,255,0.09); }
.vc-legend-item.hidden { opacity: 0.38; }
.vc-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  THEME SWITCHER (demo page helper)                                         */
/* ══════════════════════════════════════════════════════════════════════════ */
.vc-theme-switcher {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.vc-theme-btn {
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--vc-ink, #e6ecff);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.vc-theme-btn:hover, .vc-theme-btn.active {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
}