/* ============================================================
   Shared SVG-chart internals — single source of truth for the chart-INTERNAL
   `.rpt-dash-*` rules emitted by the renderers in `svg-charts.js`.

   Loaded by BOTH surfaces that use those renderers so they render identically
   and can never drift again:
     • Financial Reports dashboard  → ensured by ReportDashboardView._injectStyles()
       (which keeps ONLY the finance page-layout chrome: .rpt-dash-grid / layout
        variants / .rpt-dash-tile / -tile-header / -tile-body card padding).
     • Personal Dashboards page     → <link> in index.html, loaded BEFORE
       dashboards-styles.css so the dashboard's more-specific
       `.pdash-tile-body .rpt-dash-kpi-value` overrides still win.

   Rule BODIES here are byte-for-byte copies of the block that used to live inline
   in report-dashboard-view.js (same colors, var() fallbacks, sizes). Container-agnostic
   only — NO finance page-layout chrome. Not a JS file → no `// @ts-check`.
   ============================================================ */

/* KPI (base — dashboards override the value/label size via .pdash-tile-body .rpt-dash-kpi-*) */
.rpt-dash-kpi-value { font-size:28px; font-weight:700; color:var(--cell-text, #1e293b); font-variant-numeric:tabular-nums; }
.rpt-dash-kpi-label { font-size:11px; color:var(--tb-color, #64748b); margin-top:2px; }
.rpt-dash-kpi-subtitle { font-size:10px; color:var(--tb-color, #94a3b8); margin-top:4px; }

/* Mini table */
.rpt-dash-table { width:100%; border-collapse:collapse; font-size:11px; }
.rpt-dash-table th { text-align:left; font-weight:600; color:var(--tb-color, #64748b); padding:4px 6px; border-bottom:1px solid var(--header-border, #e2e8f0); font-size:10px; text-transform:uppercase; }
.rpt-dash-table td { padding:4px 6px; border-bottom:1px solid var(--header-border, #f1f5f9); }
.rpt-dash-table .rpt-r { text-align:right; font-family:'SF Mono','Cascadia Code',Consolas,monospace; font-size:10px; }

/* Donut */
.rpt-dash-donut-wrap { display:flex; align-items:center; gap:16px; width:100%; }
.rpt-dash-donut-legend { font-size:10px; display:flex; flex-direction:column; gap:3px; }
.rpt-dash-donut-legend-item { display:flex; align-items:center; gap:5px; }
.rpt-dash-donut-swatch { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }

/* Bar */
.rpt-dash-bar-wrap { width:100%; }

/* Progress */
.rpt-dash-progress-list { width:100%; display:flex; flex-direction:column; gap:8px; }
.rpt-dash-progress-item { width:100%; }
.rpt-dash-progress-label { display:flex; justify-content:space-between; font-size:11px; margin-bottom:2px; }
.rpt-dash-progress-bar { height:8px; border-radius:4px; background:var(--zebra-bg, #f1f5f9); overflow:hidden; }
.rpt-dash-progress-fill { height:100%; border-radius:4px; transition:width .3s; }

/* Error */
.rpt-dash-error { color:#ef4444; font-size:12px; display:flex; align-items:center; gap:8px; }

/* Chart wrapper (decision A1, 2026-07-16) — ONE self-contained column block: plot on top, legend
   directly below, centered, INDEPENDENT of the host tile-body's flex direction. This is what stops
   legends flying to the tile edge (the row-flex builder body) and the above/below inconsistency that
   came from renderers appending the legend before vs after the svg. */
.rpt-dash-chart { display:flex; flex-direction:column; align-items:center; width:100%; min-width:0; gap:6px; }
.rpt-dash-chart > svg { flex:0 0 auto; }

/* Chart legend — centered, wrapping row hugging the plot; rounded-square swatch for non-pie charts. */
.rpt-dash-chart-legend { display:flex; flex-wrap:wrap; gap:4px 12px; justify-content:center; align-items:center; max-width:100%; margin:0; }
.rpt-dash-chart-legend-item { display:flex; align-items:center; gap:4px; font-size:9px; color:var(--tb-color, #64748b); min-width:0; }
.rpt-dash-legend-swatch { width:8px; height:8px; border-radius:2px; flex-shrink:0; display:inline-block; }
/* long series/project names truncate rather than blow the legend out (full text on hover via title) */
.rpt-dash-legend-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px; }

/* Chart tiles — center the inline SVG in BOTH containers (finance report tile + dashboards tile) */
.rpt-dash-tile-body svg, .pdash-tile-body svg { display:block; margin:0 auto; }

/* Hover value tooltip (H1, decision F2, 2026-07-16) — ONE reused div, appended to <body> and
   positioned inline by the renderer JS (_showTip); this rule owns the look. pointer-events:none so it
   never eats the hover it describes. Shared by both chart surfaces (finance report + dashboards). */
.rpt-dash-tooltip {
    position:fixed; z-index:10000; pointer-events:none; opacity:0; transition:opacity .09s ease;
    background:#0f172a; color:#f8fafc; border:1px solid #334155; border-radius:6px; padding:5px 8px;
    font:11px/1.35 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    box-shadow:0 4px 14px rgba(0,0,0,.28); max-width:220px;
}
.rpt-dash-tooltip .rpt-tt-t { display:block; color:#cbd5e1; font-size:10px; margin-bottom:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rpt-dash-tooltip .rpt-tt-v { display:block; font-weight:700; font-variant-numeric:tabular-nums; }