/* ==========================================================================
   Coffer Phase 3 — Chart palette overlay
   --------------------------------------------------------------------------
   Sure's d3 charts (sankey + time-series) bind fills/strokes via inline
   `attr("fill", ...)` and `attr("stroke", ...)` calls. Inline SVG attrs
   beat CSS by default (presentation attributes lose to CSS, BUT only when
   the CSS has matching specificity AND uses fill/stroke directly on the
   element — which we can do).
   --------------------------------------------------------------------------
   What we DO override:
     - SVG text elements (axis ticks, labels) -> Backstage white/55-70
     - Empty-state placeholder strokes (the dashed line)
     - Tooltip styling if present
   What we DO NOT override:
     - Sankey node/link colors (these come from per-category user-picked colors)
     - Time-series trend.color (server-computed positive/negative tone)
   ========================================================================== */

/* Sankey chart text labels — Backstage neutral white */
#cashflow-sankey-chart svg text {
  fill: rgb(255 255 255 / 0.70) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Time-series chart axis ticks + labels */
#netWorthChart svg text,
#netWorthChart svg .tick text {
  fill: rgb(255 255 255 / 0.55) !important;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
}

/* Grid + tick lines — barely-there white */
#netWorthChart svg .tick line,
#netWorthChart svg .domain {
  stroke: rgb(255 255 255 / 0.08) !important;
}

/* Empty-state placeholder dashed line (uses var(--color-gray-300) by default,
   which Phase 1 has already remapped to a slate token — but pin it just in case) */
#netWorthChart svg line[stroke-dasharray] {
  stroke: rgb(255 255 255 / 0.15) !important;
}

/* d3 tooltips that the controllers create dynamically — Backstage panel chrome */
.d3-tooltip,
[id$="-tooltip"] {
  background-color: rgb(15 23 42 / 0.92) !important;
  border: 1px solid rgb(255 255 255 / 0.08) !important;
  color: rgb(255 255 255 / 0.92) !important;
  border-radius: 0.75rem !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.75rem !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.5) !important;
}

/* Sankey link hover saturation — already strong in the controller, just make
   sure the dim fade plays well on the dark canvas. */
#cashflow-sankey-chart svg g path[fill="none"] {
  mix-blend-mode: screen;
}