/* ===========================
   KP3 Chart - clean
   =========================== */

/* Base */
.kp3chart {
  --panel: rgba(16,24,32,.82);
  --panel-soft: rgba(16,24,32,.66);
  --edge: #34495E30;
  --muted: rgba(255,255,255,.78);
  --accent: #4CAF50;
  --radius: 14px;
  --pad-x: 14px;
  --pad-y: 14px;
  display: block;
  width: 100%;
  background: transparent;
  color: var(--ink);
}

/* Framed (beholdes andre steder) */
.kp3chart.kp3chart--framed {
  position: relative;
  padding: var(--pad-y) var(--pad-x) 10px;
  
  background: var(--panel);
  border-radius: 8px; /* Juster etter behov for ønsket runding */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Lett skyggeeffekt */
}

.kp3chart.kp3chart--framed::before,
.kp3chart.kp3chart--framed::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Canvas */
.kp3chart .kp3chart-canvas-wrap {
  position: relative;
  height: 340px;
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: 12px;
}

/* Tabs */
.kp3chart .kp3chart-tabs {
  display: flex;
  justify-content: center;
  padding: 12px 10px 4px;
}
.kp3chart .kp3tabs-frame {
  display: flex;
  gap: 6px;
  width: 100%;
  background: var(--panel-soft);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 4px;
  justify-content: space-between;
}
.kp3chart .kp3tab {
  appearance: none;
  border: 0;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 9px;
  font: 600 13px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: transparent;
  color: rgba(255,255,255,.92);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.kp3chart .kp3tab:hover {
  background: rgba(255,255,255,.06);
}
.kp3chart .kp3tab.active {
  background: #101820;
  border: 1px solid var(--edge);
  color: #fff;
}
.kp3chart .kp3tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Updated text */
.kp3chart .kp3chart-updated {
  text-align: center;
  font: 500 12px/1.25 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--muted);
  padding: 8px 0 0;
}

/* Chart.js grid/axes/tooltip */
.kp3chart .kp3chart-canvas-wrap {
  --grid-line: rgba(255,255,255,.07);
  --axis-text: rgba(255,255,255,.72);
}
.kp3chart .kp3chart-canvas-wrap .chartjs-render-monitor + svg line {
  stroke: var(--grid-line) !important;
}
.kp3chart .kp3chart-canvas-wrap .chartjs-render-monitor + svg text {
  fill: var(--axis-text) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: .2px;
}
.kp3chart .chartjs-tooltip {
  background: rgba(16,24,32,.92) !important;
  border: 1px solid #34495E30 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.kp3chart .kp3chart-clouds,
.kp3chart .kp3chart-clouds * {
  color: rgba(255,255,255,.82) !important;
  font-weight: 400;
}

/* ===========================
   Integrated (flat edge-to-edge)
   =========================== */

.kp3chart.kp3chart--integrated {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Canvas flat */
.kp3chart.kp3chart--integrated .kp3chart-canvas-wrap {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 340px;
}

/* Tabs flat without extra vertical spacing */
.kp3chart.kp3chart--integrated .kp3chart-tabs {
  padding: 8px 0 4px;
}
.kp3chart.kp3chart--integrated .kp3tabs-frame {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.kp3chart.kp3chart--integrated .kp3tab {
  border-radius: 0;
}
.kp3chart.kp3chart--integrated .kp3tab.active {
  background: transparent;
  border: 0;
  color: #fff;
}