/* ==========================================================================
   10. ANALYTICS CHART (partner-chart.js)
   Replaces the stacked bars, which rendered as unreadable specks whenever
   the numbers were small.
   ========================================================================== */
.mbgp-chart { position: relative; }

.mbgp-chart-legend {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
}
.mbgp-chart-legend button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  cursor: pointer; transition: all .15s ease; min-height: 32px;
}
.mbgp-chart-legend button i {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .35;
}
.mbgp-chart-legend button.is-on { color: var(--text, #14231b); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.mbgp-chart-legend button.is-on i { opacity: 1; }
.mbgp-chart-legend .views.is-on i { background: #0f6e56; }
.mbgp-chart-legend .visits.is-on i { background: #d9a441; }
.mbgp-chart-legend .purchases.is-on i { background: #3b6fd4; }
.mbgp-chart-legend button:not(.is-on) { opacity: .55; }

.mbgp-chart-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
}
.mbgp-chart-live em {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: mbgp-live-pulse 2.4s ease-in-out infinite;
}
.mbgp-chart-live.is-pulse { animation: mbgp-live-flash .9s ease; }
@keyframes mbgp-live-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }
@keyframes mbgp-live-flash { 0% { opacity: .3; } 100% { opacity: 1; } }

.mbgp-chart-canvas { position: relative; width: 100%; }
.mbgp-chart-svg { width: 100%; height: 240px; display: block; overflow: visible; }

.mbgp-chart-grid { stroke: color-mix(in srgb, var(--border) 70%, transparent); stroke-width: 1; }
.mbgp-chart-ylabel { fill: var(--muted); font-size: 10px; text-anchor: end; font-weight: 600; }
.mbgp-chart-xlabel { fill: var(--muted); font-size: 10px; text-anchor: middle; font-weight: 600; }
.mbgp-chart-crosshair { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; transition: opacity .12s ease; }
.mbgp-chart-dot { opacity: 0; transition: opacity .12s ease, r .12s ease; }
.mbgp-chart-dot.is-active { opacity: 1; r: 4.5; }
.mbgp-chart-line { transition: opacity .2s ease; }

.mbgp-chart-tip {
  position: absolute; top: 6px; z-index: 4; pointer-events: none;
  min-width: 150px; padding: 9px 11px; border-radius: 10px;
  background: #14231b; color: #fff;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.45);
  font-size: 11.5px; line-height: 1.5;
}
.mbgp-chart-tip strong { display: block; margin-bottom: 5px; font-size: 11px; opacity: .75; }
.mbgp-chart-tip span { display: flex; align-items: center; gap: 6px; }
.mbgp-chart-tip span i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.mbgp-chart-tip span b { margin-left: auto; font-weight: 800; }

.mbgp-chart-empty,
.mbgp-chart-fallback {
  padding: 44px 16px; text-align: center; color: var(--muted); font-size: 12.5px; margin: 0;
}

@media (max-width: 760px) {
  .mbgp-chart-svg { height: 200px; }
  .mbgp-chart-legend button { font-size: 11px; padding: 5px 9px; }
  .mbgp-chart-live { width: 100%; margin-left: 0; justify-content: flex-end; }
  .mbgp-chart-tip { min-width: 132px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .mbgp-chart-live em { animation: none; }
  .mbgp-chart-line { transition: none !important; }
}

/* ---- Timeframe control ---- */
.mbgp-chart-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.mbgp-chart-ranges{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border,#e2ebe6);border-radius:10px;background:var(--card,#fff)}
.mbgp-chart-ranges button{
  border:0;background:none;cursor:pointer;padding:5px 11px;border-radius:8px;
  font-size:11.5px;font-weight:750;color:var(--muted,#667a6f);transition:all .14s ease;min-height:30px
}
.mbgp-chart-ranges button:hover{color:var(--text,#14231b)}
.mbgp-chart-ranges button.is-active{background:var(--accent,#0f6e56);color:#fff}
.mbgp-chart-ranges button:disabled{opacity:.5;cursor:default}

/* ---- Empty state overlay ----
   When every series is zero the axis still renders, which on its own reads as
   a broken chart. This says plainly that there is simply nothing yet. */
.mbgp-chart-canvas{position:relative}
.mbgp-chart-nodata{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  pointer-events:none;padding:20px
}
.mbgp-chart-nodata span{
  display:block;max-width:34ch;font-size:12.5px;line-height:1.55;color:var(--muted,#667a6f);
  background:color-mix(in srgb, var(--card,#fff) 88%, transparent);padding:10px 14px;border-radius:10px
}
.mbgp-chart-nodata b{display:block;color:var(--text,#14231b);font-size:13px;margin-bottom:3px}

/* ---- Loading ---- */
.mbgp-chart-canvas.is-loading{opacity:.45;transition:opacity .15s ease}

/* ---- Summary chips ---- */
.mbgp-chart-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.mbgp-chart-chip{
  display:inline-flex;align-items:baseline;gap:6px;padding:7px 13px;border-radius:999px;
  background:color-mix(in srgb, var(--accent,#0f6e56) 7%, transparent);
  font-size:11px;color:var(--muted,#667a6f);font-weight:650
}
.mbgp-chart-chip b{font-size:14px;font-weight:800;color:var(--text,#14231b);font-variant-numeric:tabular-nums}

/* ---- Range row: 7 options need to scroll on narrow screens ---- */
.mbgp-chart-ranges{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
.mbgp-chart-ranges::-webkit-scrollbar{display:none}
.mbgp-chart-ranges button{white-space:nowrap;flex:0 0 auto}

/* Date labels must never be stretched or clipped. */
.mbgp-chart-svg{overflow:visible}
.mbgp-chart-xlabel,.mbgp-chart-ylabel{font-family:inherit}

@media (max-width:640px){
  .mbgp-chart-head{gap:8px}
  .mbgp-chart-ranges button{padding:5px 9px;font-size:11px}
  .mbgp-chart-xlabel{font-size:9px}
}