/*
    Report block styles, shared by every page that draws a ReportBlockRenderer:
    the Designer (/reports/builder-v2) and Custom Dashboards (/reports/dashboards/{id}).

    These rules lived in a style block inside ReportBuilderV2.razor, so they only
    existed while the Designer was on screen. A Custom Dashboard tile rendered the
    same component without them and its CSS bar charts came out as a bare list of
    labels and numbers. A page that renders blocks wraps them in .rbv2-wrap and gets
    these rules from here. Designer-only rules (palette, canvas, rail, drill drawer)
    stay in ReportBuilderV2.razor.
*/
.rbv2-wrap .rbv2-block-inner { flex: 1; overflow: auto; }
.rbv2-wrap .rbv2-block-title { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.rbv2-wrap .rbv2-empty { color: #9ca3af; font-size: 12px; padding: 12px 0; }
.rbv2-wrap .rbv2-warn { color: #B45309; font-size: 11px; margin-top: 6px; }
.rbv2-wrap .rbv2-table { font-size: 12px; width: max-content; min-width: 100%; }
.rbv2-wrap .rbv2-table th { white-space: nowrap; background: #f8f9fa; position: sticky; top: 0; }
.rbv2-wrap .rbv2-total, .rbv2-wrap .rbv2-grand { font-weight: 600; background: #f8f9fa; }
.rbv2-wrap .rbv2-scroll { max-height: 100%; overflow: auto; }
.rbv2-wrap .rbv2-kpi { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.rbv2-wrap .rbv2-kpi-value { font-size: 30px; font-weight: 700; line-height: 1.1; }
.rbv2-wrap .rbv2-kpi-label { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .4px; }
.rbv2-wrap .rbv2-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 12px; }
.rbv2-wrap .rbv2-bar-label { width: 34%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbv2-wrap .rbv2-bar-track { flex: 1; height: 16px; background: #eef1f5; border-radius: 3px; display: flex; overflow: hidden; }
.rbv2-wrap .rbv2-bar-seg { height: 100%; }
/* ECharts needs a resolved height - it renders nothing into a zero-height
   box and reports no error, which is the usual cause of a blank chart. */
.rbv2-wrap .rbv2-chart-js { width: 100%; height: 100%; min-height: 180px; }
.rbv2-wrap .rbv2-bar-value { width: 62px; text-align: right; font-variant-numeric: tabular-nums; }