/* =========================================================================
   ReportingChartCard — shared chart styling. All reporting charts across the
   app (Dashboard, Client Overview, future metrics) use these classes.
   Colours/spacing come from the --chart-* design tokens (tokens.css).
   ========================================================================= */

/* card shell — white, soft border, rounded, subtle shadow, calm padding */
.rchart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--chart-pad);
}

/* placeholder shell shown while a card's data is fetched (one render, no
   double-played bar animation); sized like a populated card to avoid jumps */
.rchart-pending { min-height: 430px; animation: rchart-pulse 1.2s ease-in-out infinite alternate; }
@keyframes rchart-pulse { from { opacity: 1; } to { opacity: 0.55; } }

/* header: title / metric dropdown + value + comparison · time range */
.rchart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
/* ResponsiveTabs measures the range control's available width from its
   neighbour, so the headline must be the STABLE (non-shrinking) side and the
   range control the flexible one (it self-collapses via overflow). This keeps
   the "+N more" button correctly sized and never clipped. */
.rchart-head > .rchart-headline { flex-shrink: 0; }
.rchart-headline { min-width: 0; }
.rchart-titlewrap { position: relative; margin-bottom: var(--space-2); }
.rchart-title { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-strong); }
.rchart-sub.up { color: var(--success-600); }
.rchart-sub.down { color: var(--danger-600); }

/* metric dropdown */
.rchart-metric { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-strong); border-radius: var(--radius-sm); transition: color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .rchart-metric:hover { color: var(--primary-600); }
}
.rchart-metric .updown { color: var(--text-soft); display: inline-flex; }
.rchart-metric .updown svg { width: 15px; height: 15px; }
.rchart-metric-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-popover); min-width: 206px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.rchart-metric-menu[hidden] { display: none; }
.rchart-metric-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 36px; padding: 0 10px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text); text-align: left; white-space: nowrap; transition: background var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .rchart-metric-opt:hover { background: var(--nav-hover-bg); }
}
.rchart-metric-opt.sel { color: var(--primary-700); font-weight: var(--fw-semibold); }
.rchart-metric-opt svg { width: 15px; height: 15px; color: var(--primary-600); flex-shrink: 0; }

/* grid-cell host (dashboard) */
.dash-cell { min-width: 0; }

/* chart area */
.rchart-area { position: relative; margin-top: var(--space-1); }
.rchart-canvas { position: relative; width: 100%; }
.rchart-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* gradient stops driven by tokens */
.rchart-grad-bg-a { stop-color: var(--chart-bar-fill-top); }
.rchart-grad-bg-b { stop-color: var(--chart-bar-fill-bottom); }
.rchart-grad-sel-a { stop-color: var(--chart-bar-sel-top); }
.rchart-grad-sel-b { stop-color: var(--chart-bar-sel-bottom); }

/* grid, axes, trend, markers */
.rchart-grid { stroke: var(--chart-grid); stroke-width: 1; stroke-dasharray: 5 6; }
.rchart-axis { stroke: var(--chart-axis-line); stroke-width: 1; }
.rchart-trend { stroke: var(--chart-trend); stroke-width: 1.3; stroke-dasharray: 0.5 5.5; stroke-linecap: round; }
.rchart-guide { stroke: var(--chart-guide); stroke-width: 1.3; stroke-dasharray: 4 3; pointer-events: none; }
.rchart-point { fill: var(--chart-point); stroke: #fff; stroke-width: 2; pointer-events: none; }
.rchart-ylabel { fill: var(--chart-axis-text); font-size: var(--text-xs); font-family: var(--font-sans); }
.rchart-xlabel { fill: var(--chart-axis-text); font-size: var(--text-sm); font-family: var(--font-sans); }
.rchart-xlabel.sel { fill: var(--primary-600); font-weight: var(--fw-bold); }

/* bars — light grey fill, purple cap; selected/hover = soft purple tint */
.rchart-barg { cursor: pointer; }
.rchart-bar-hit { fill: transparent; }
.rchart-bar { fill: var(--rc-bar-bg); transition: fill 0.16s var(--ease); }
.rchart-cap { fill: var(--chart-bar-cap); transition: fill 0.16s var(--ease); }
.rchart-barg.sel .rchart-bar, .rchart-barg.hot .rchart-bar { fill: var(--rc-bar-sel); }
.rchart-barg.sel .rchart-cap, .rchart-barg.hot .rchart-cap { fill: var(--chart-bar-cap-sel); }

/* floating tooltip — white fill, soft border, shadow; glides above bar */
.rchart-tip {
  position: absolute; pointer-events: none;
  background: var(--chart-tip-bg); border: 1px solid var(--chart-tip-border);
  border-radius: var(--radius-lg); box-shadow: var(--chart-tip-shadow);
  padding: 12px 16px; white-space: nowrap;
  transition: left 0.2s var(--ease), top 0.2s var(--ease), transform 0.2s var(--ease), opacity 0.15s var(--ease);
}
.rchart-guide, .rchart-point { transition: opacity 0.15s var(--ease); }
.rchart-tip-label { font-size: var(--text-sm); color: var(--text-muted); }
.rchart-tip-val { display: flex; align-items: center; gap: var(--space-2); margin-top: 4px; }
.rchart-tip-val b { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.01em; }

/* optional footer slot (e.g. summary stats) */
.rchart-footer { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.rchart-footer[hidden] { display: none; }
.rchart-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.rchart-stat { display: flex; flex-direction: column; gap: 4px; }
.rchart-stat-k { font-size: var(--text-xs); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); }
.rchart-stat-v { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--text-strong); }
.rchart-stat-v.up { color: var(--success-600); }
.rchart-stat-v.down { color: var(--danger-600); }

/* ===== Empty state (metric has no connected data source) — matches Notes =====
   Reuses the shared .lead-empty-* classes (art / title / desc / cta) from
   views.css so it reads identically to the Notes empty state. min-height
   matches the chart canvas (320 / 240 on phones) so the analytics container
   never resizes when a metric has no data; the content is then optically
   centred in that fixed height. */
.rchart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); text-align: center; min-height: 320px; padding: var(--space-4); }
.rchart-empty .lead-empty-art { width: 240px; height: 138px; margin-bottom: 0; }
.rchart-empty .lead-empty-card { width: 112px; height: 112px; }
@media (max-width: 560px) { .rchart-empty { min-height: 240px; } }