/*
 * dc-theme.css — dc.js (crossfilter) dashboard styling for the Studio.
 *
 * Two concerns:
 *   1. Framework picker + badge chrome (engine selector).
 *   2. dc.js SVG charts, themed to the same --dash-* / --text / --border tokens
 *      the ECharts boards use, so a dc board matches the AI skin in light & dark.
 *      Series colour comes from the theme's --series-N slots, same as ECharts.
 *
 * dc's own base styles come from dc.min.css (loaded from CDN); this overrides the
 * colours/typography. All chart rules are scoped under #builder-canvas.
 */

/* ── framework picker (segmented control) ─────────────────────────────────── */
.fw-picker {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  margin: 0 auto 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--lift);
}
.fw-picker-sm { margin: 0 0 8px; width: 100%; }
.fw-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted, #8b98ab);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.fw-picker-sm .fw-btn { flex: 1; justify-content: center; }
.fw-btn:hover { color: var(--text); }
.fw-btn.active {
  background: var(--accent, #4C8EDA);
  color: var(--on-accent, #fff);
}
.fw-btn .fw-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .7;
}

/* ── framework badge next to the dashboard title ──────────────────────────── */
.builder-fw-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  padding: 3px 9px;
  border: 1px solid var(--dash-accent-line, var(--border, #1e2535));
  border-radius: 999px;
  background: var(--dash-accent-soft, rgba(76,142,218,.12));
  color: var(--dash-accent, var(--accent, #4C8EDA));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  vertical-align: middle;
}
/* `display:inline-flex` on a class beats the UA's `[hidden]{display:none}` (same
   specificity, later in the cascade), so the badge kept showing the PREVIOUS
   board's engine after starting a new one. */
.builder-fw-badge[hidden] { display: none; }

/* ── dc.js toolbar (reset filters + selects) ──────────────────────────────── */
#builder-canvas .dc-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 4px 4px;
  margin-bottom: var(--dash-gap, 16px);
}
#builder-canvas .dc-toolbar-hint {
  color: var(--muted, #8b98ab);
  font-size: 12px;
  margin-right: auto;
}
/* The toolbar's fallbacks used to be --card-bg / --fg, which no theme defines —
   so it always painted itself the same hardcoded dark, including on the light
   themes. Fallbacks are real tokens now, and the select is the platform's
   compact boxed dropdown (app.css) with the skin's surface on top. */
#builder-canvas .dc-reset-btn {
  padding: 6px 12px;
  border: 1px solid var(--dash-card-border, var(--border));
  border-radius: min(var(--dash-radius, var(--dd-r-sm)), 10px);
  background: var(--dash-card-bg, var(--lift));
  color: var(--text);
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
#builder-canvas .dc-reset-btn:hover { border-color: var(--dash-accent, var(--accent)); }
#builder-canvas .dc-filter-select {
  background-color: var(--dash-card-bg, var(--lift));
  border-color:     var(--dash-card-border, var(--border));
  border-radius:    min(var(--dash-radius, var(--dd-r-sm)), 10px);
  font-family:      var(--dash-font, var(--sans));
  font-size:        12.5px;
  padding:          6px 26px 6px 10px;
}
#builder-canvas .dc-filter-select:hover         { border-color: var(--dash-accent, var(--bhi)); }
#builder-canvas .dc-filter-select:focus-visible { border-color: var(--dash-accent, var(--accent)); }

#builder-canvas .dc-filter-range {
  display: inline-flex; align-items: center; gap: 6px;
}
#builder-canvas .dc-filter-range-label {
  color: var(--muted, #8b98ab); font-size: 12.5px; font-weight: 500;
}
#builder-canvas .dc-filter-range-sep { color: var(--muted, #8b98ab); }
/* Sits in the same filter bar as the selects, so it matches them. */
#builder-canvas .dc-filter-date {
  padding: 5px 8px;
  border: 1px solid var(--dash-card-border, var(--border));
  border-radius: min(var(--dash-radius, var(--dd-r-sm)), 10px);
  background: var(--dash-card-bg, var(--lift));
  color: var(--text);
  font: inherit; font-size: 12.5px;
  font-family: var(--dash-font, var(--sans));
}
#builder-canvas .dc-filter-date:hover         { border-color: var(--dash-accent, var(--bhi)); }
#builder-canvas .dc-filter-date:focus-visible { border-color: var(--dash-accent, var(--accent)); outline: none; }

/* ── dc chart canvas ──────────────────────────────────────────────────────── */
/* Charts are sized to this container's pixels at render time (no viewBox scaling),
 * so the svg keeps dc's own width/height attributes — just let it lay out block. */
#builder-canvas .dc-chart { position: relative; width: 100%; }
#builder-canvas .dc-chart svg { display: block; max-width: 100%; overflow: visible; font-family: var(--dash-font, inherit); }

/* text (axis labels, tick labels, row labels) */
#builder-canvas .dc-chart text { fill: var(--text, #e2e8f0); font-size: 11px; }
#builder-canvas .dc-chart .axis text { fill: var(--muted, #8b98ab); }

/* Axes + grid lines. Recessive by construction: the domain path is the one line
   the reader measures from, ticks are noise, and gridlines are a faint solid
   guide rather than a ladder. Matches the ECharts treatment in _applyTheme so a
   dc.js board and an ECharts board of the same data read the same. */
#builder-canvas .dc-chart .axis path.domain {
  stroke: color-mix(in srgb, var(--muted, #8b98ab) 28%, transparent);
  shape-rendering: crispEdges;
}
#builder-canvas .dc-chart .axis .tick line { stroke: none; }
#builder-canvas .dc-chart .grid-line line,
#builder-canvas .dc-chart .grid-line path {
  stroke: color-mix(in srgb, var(--muted, #8b98ab) 13%, transparent);
  stroke-opacity: 1;
  stroke-dasharray: none;
}

/* bar / row marks — slot 1 of the board's validated categorical palette (the
   theme's, for a board that matches the theme), so a single-series dc chart
   matches the equivalent ECharts one. */
#builder-canvas .dc-chart rect.bar { fill: var(--dash-series-1, var(--series-1, var(--dash-accent, var(--accent, #4C8EDA)))); }
#builder-canvas .dc-chart g.row rect { fill-opacity: .9; }
#builder-canvas .dc-chart g.row text { fill: var(--text, #e2e8f0); }

/* line marks */
#builder-canvas .dc-chart path.line { stroke: var(--dash-series-1, var(--series-1, var(--dash-accent, var(--accent, #4C8EDA)))); stroke-width: 2; }
/* no area wash under a line: see the `line` case in _styleOneSeries */
#builder-canvas .dc-chart .area { fill: none; }
#builder-canvas .dc-chart circle.dot { stroke: var(--dash-series-1, var(--series-1, var(--dash-accent, var(--accent)))); }

/* brush (range filtering on an axis) */
#builder-canvas .dc-chart .brush rect.selection {
  fill: var(--dash-accent, var(--accent, #4C8EDA));
  fill-opacity: .18;
  stroke: var(--dash-accent-line, var(--accent));
}

/* pie slices */
#builder-canvas .dc-chart .pie-slice path { stroke: var(--void, #0b0f16); stroke-width: 1.5; }
#builder-canvas .dc-chart .pie-slice.selected path { stroke-width: 2.5; }
#builder-canvas .dc-chart .pie-label,
#builder-canvas .dc-chart .pie-slice { fill: var(--text, #e2e8f0); font-size: 11px; }

/* de-emphasise marks filtered out by another chart */
#builder-canvas .dc-chart .deselected { opacity: .28; }
#builder-canvas .dc-chart .selected { opacity: 1; }

/* legend */
#builder-canvas .dc-chart .dc-legend-item text { fill: var(--text, #e2e8f0); font-size: 11px; }

/* live KPI number (dc.numberDisplay writes into .kpi-value) */
#builder-canvas .kpi-card[data-engine="dcjs"] .kpi-value { font-variant-numeric: tabular-nums; }

/* ── dc.dataTable (detail rows) ───────────────────────────────────────────── */
#builder-canvas .dc-table-wrap {
  width: 100%;
  height: 100%;
  overflow: auto;
}
#builder-canvas table.dc-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: var(--text, #e2e8f0);
}
#builder-canvas table.dc-data-table thead th {
  position: sticky;
  top: 0;
  text-align: left;
  font-weight: 600;
  color: var(--muted, #8b98ab);
  background: var(--dash-card-bg, var(--surface, #141922));
  padding: 8px 10px;
  border-bottom: 1px solid var(--dash-card-border, var(--border, #1e2535));
  white-space: nowrap;
}
#builder-canvas table.dc-data-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border, #1e2535);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#builder-canvas table.dc-data-table tr.dc-table-row:hover td {
  background: var(--dash-accent-soft, rgba(76,142,218,.10));
}

/* empty-dataset note */
#builder-canvas .dc-empty {
  padding: 40px; text-align: center;
  color: var(--muted, #8b98ab); font-size: 13px;
}

/* ── hover tooltip (dc charts) ────────────────────────────────────────────── */
#dc-tooltip {
  position: fixed;
  z-index: 300;
  max-width: 300px;
  padding: 6px 10px;
  border: 1px solid var(--dash-accent-line, var(--border, #1e2535));
  border-radius: 8px;
  background: var(--surface, #141922);
  color: var(--text, #e2e8f0);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .40);
  white-space: nowrap;
}
#dc-tooltip[hidden] { display: none; }

/* ── drill-through modal (raw rows behind the current selection) ──────────── */
.drill-card { width: min(920px, 92vw); }
.drill-table-wrap {
  max-height: 55vh;
  overflow: auto;
  border: 1px solid var(--border, #1e2535);
  border-radius: 10px;
  margin-top: 10px;
}
/* the modal lives outside #builder-canvas, so restate the table skin here */
.drill-card table.dc-data-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px; color: var(--text, #e2e8f0);
}
.drill-card table.dc-data-table thead th {
  position: sticky; top: 0;
  text-align: left; font-weight: 600;
  color: var(--muted, #8b98ab);
  background: var(--surface, #141922);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, #1e2535);
  white-space: nowrap;
}
.drill-card table.dc-data-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border, #1e2535);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.drill-foot { margin-top: 12px; text-align: right; }

/* ── engine chooser (new-dashboard modal) ─────────────────────────────────
   The engine is fixed for the life of a dashboard, so this is the one moment
   the trade-off can be laid out — hence cards with a preview and real copy
   rather than the row of toggles with a tooltip this replaced. */
.engine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.engine-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  text-align: start;
  background: var(--lift);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.engine-card:hover { border-color: var(--bhi); }
.engine-card.is-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--lift));
}
.engine-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.engine-preview {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--void);
  border: 1px solid var(--border);
  color: var(--faint);
}
.engine-card.is-on .engine-preview { color: var(--accent); }
.engine-preview svg { display: block; width: 100%; height: auto; }

.engine-name {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 13.5px; font-weight: 600;
}
.engine-name em {
  font-style: normal; font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px;
}
.engine-tagline { font-size: 12px; line-height: 1.45; color: var(--muted); }
.engine-strengths {
  margin: 0; padding-inline-start: 15px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11.5px; line-height: 1.4; color: var(--muted);
}
.engine-strengths li::marker { color: var(--faint); }
/* The downside, stated. A chooser that only lists upsides isn't a chooser. */
.engine-caveat {
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px; line-height: 1.4; color: var(--faint);
}

/* inline entry point that opens the chooser */
.fw-choose {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--lift); color: var(--muted);
  font: inherit; font-size: 12px; cursor: pointer;
  transition: border-color .14s, color .14s;
}
.fw-choose:hover { border-color: var(--accent); color: var(--text); }
.fw-choose .fw-dot { background: var(--accent); opacity: 1; }
.fw-choose-label { font-weight: 600; color: var(--text); }
.fw-choose-hint { color: var(--faint); font-size: 11px; }