/* ===== Base Font & Colors ===== */
body, .cve-kpi-card, .cve-chart-card {
  color: #e0e8ff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== KPI (unverändert gut) ===== */
.cve-kpi-row { display:flex; gap:20px; margin-bottom:20px; }
.cve-kpi-card{
  flex:1; min-width:250px; height:140px;
  display:flex; justify-content:space-between; align-items:center;
  background:#0a0f25; border-radius:14px; padding:18px 22px;
  box-shadow:0 0 20px rgba(44,122,255,.2);
}
.cve-kpi-left { display:flex; flex-direction:column; gap:6px; }
.cve-kpi-title{ font-size:14px; font-weight:500; color:#5c8cff; }
.cve-kpi-number{ font-size:32px; font-weight:700; color:#fff; }
.cve-kpi-trend{ display:inline-block; font-size:13px; padding:2px 8px; border-radius:6px; }

/* =========================================================
   ROW-LAYOUT für die drei Trend-Charts
   ========================================================= */
.cve-chart-row{
  display:flex;
  gap:20px;
  margin-bottom:20px;
  flex-wrap:wrap;                  /* falls viewport zu schmal */
}
.cve-chart-row > .cve-chart-card{
  flex:1 1 calc(33.333% - 14px);   /* 3 Spalten */
  min-width:260px;
}

/* =========================================================
   TREND CHART CARDS (year/month/week)
   ========================================================= */
/* === Trend-Chart-Row (3 Karten nebeneinander) === */
.cve-chart-row {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

/* === Trend-Charts (Jahr/Monat/Woche) === */
.cve-card-chart {
  flex: 1;
  min-width: 260px;
  height: 300px;                 /* feste Kartenhöhe */
  background: #0a0f25;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 0 20px rgba(44,122,255,0.20);
  display: flex;
  flex-direction: column;
}

.cve-card-chart canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;       /* wichtig: Canvas füllt die Karte */
}

/* === Products-Chart (SVG) — bleibt eigenständig === */
.cve-products-card {
  background: #0a0f25;
  border-radius: 14px;
  padding: 16px 18px 18px;
  box-shadow: 0 0 22px rgba(44,122,255,0.18);
  margin: 24px 0;
  overflow: visible;             /* damit Achse nicht abgeschnitten wird */
}

.cve-products-card .cve-products-svg {
  width: 100%;
  height: auto;                  /* SVG skaliert scharf */
}

.cve-chart-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: #5c8cff;
  font-size: 14px;
  font-weight: 500;
}

.cve-toggle {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.cve-toggle button {
  background: #1a2440;
  border: 1px solid #2c7aff;
  color: #e0e8ff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

.cve-toggle button.active {
  background: #2c7aff;
  color: #fff;
}

/* ===============================
   CVEs by Products – SVG Version
================================= */

.cve-products-card{
  background:#0a0f25;
  color:#e0e8ff;
  border-radius:14px;
  box-shadow:0 0 24px rgba(44,122,255,.18);
  padding:22px 24px 28px;
  min-height:560px;        /* Startgröße – SVG passt an */
  position:relative;
  overflow:visible;
  display:flex;
  flex-direction:column;
}

.cve-products-card .cve-chart-header{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:8px;
  color:#5c8cff;
  font-size:14px;
  font-weight:600;
}

.cve-products-card .cve-toggle{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-bottom:8px;
}

.cve-products-card .cve-toggle button{
  background:#1a2440;
  border:1px solid #2c7aff;
  color:#e0e8ff;
  padding:4px 12px;
  border-radius:8px;
  font-size:12px;
  cursor:pointer;
  transition:all .15s ease;
}

.cve-products-card .cve-toggle button:hover{
  background:#2c7aff33;
}

.cve-products-card .cve-toggle button.active{
  background:#2c7aff;
  color:#fff;
}

/* SVG Host */
.cve-products-card .cve-products-svg{
  width:100%;
  height:auto;
  display:block;
}

/* Y-Labels etwas heller */
.cve-products-card .cve-ylabel{
  paint-order: stroke;
  stroke: transparent;
  stroke-width: 0;
  letter-spacing: .2px;
}

/* Balken hover */
.cve-products-card .cve-bar{
  filter:saturate(1);
  transition:filter .12s ease, opacity .12s ease;
}
.cve-products-card .cve-bar:hover{
  filter:saturate(1.25);
  opacity:.95;
}

/* Tooltip */
.cve-tooltip{
  position:absolute;
  display:none;
  max-width:260px;
  pointer-events:none;
  z-index:5;
  background:#0a0f25;
  border:1px solid #2c7aff;
  color:#e0e8ff;
  padding:8px 10px;
  border-radius:8px;
  font-size:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  backdrop-filter:saturate(120%) blur(2px);
}
.cve-tooltip b{ color:#fff; }