npm - @memberjunction/ng-dashboards - Versions diffs - 5.37.0 → 5.39.0 - Mend

@memberjunction/ng-dashboards 5.37.0 → 5.39.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (328) hide show

package/dist/KnowledgeHub/components/analytics/analytics-resource.component.js CHANGED Viewed

@@ -4226,7 +4226,7 @@ let AnalyticsResourceComponent = class AnalyticsResourceComponent extends BaseRe
         }
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵAnalyticsResourceComponent_BaseFactory; return function AnalyticsResourceComponent_Factory(__ngFactoryType__) { return (ɵAnalyticsResourceComponent_BaseFactory || (ɵAnalyticsResourceComponent_BaseFactory = i0.ɵɵgetInheritedFactory(AnalyticsResourceComponent)))(__ngFactoryType__ || AnalyticsResourceComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AnalyticsResourceComponent, selectors: [["app-analytics-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 5, consts: [["Title", "Knowledge Hub Analytics", "Icon", "fa-solid fa-chart-line", "Subtitle", "Pipeline health, trending tags, and content insights"], ["meta", ""], [3, "Label", "Variant"], [3, "Flex", "Padding"], [1, "analytics-loading"], [1, "analytics-layout"], ["text", "Loading analytics data...", "size", "medium"], [3, "ItemClicked", "Sections", "ActiveId"], ["footer", "", 1, "trending-section"], [1, "fa-solid", "fa-arrow-trend-up"], [1, "tag-cloud"], [3, "font-size", "font-weight"], [1, "no-trending"], [1, "main-content"], [1, "tab-section"], [1, "tab-section-header"], [1, "fa-solid", "fa-grip"], [1, "filter-bar"], [1, "date-chips"], [1, "date-chip", 3, "active"], [1, "filter-dropdown", 3, "ngModelChange", "ngModel"], [3, "value"], [1, "kpi-row"], [1, "kpi-card"], [1, "drill-down-panel"], [1, "cards-grid"], [1, "widget-card", 3, "click"], [1, "widget-title"], [1, "fa-solid", "fa-chart-line"], [1, "bar-chart"], [1, "bar-col"], [1, "fa-solid", "fa-bullseye"], [1, "rings-grid"], [1, "ring-item"], [1, "widget-empty"], [1, "fa-solid", "fa-gauge-high"], [1, "gauge-container"], ["width", "180", "height", "110", "viewBox", "0 0 180 110"], ["d", "M 20 95 A 70 70 0 0 1 160 95", "fill", "none", "stroke", "var(--mj-border-default)", "stroke-width", "14", "stroke-linecap", "round"], ["d", "M 20 95 A 70 70 0 0 1 48.6 35.2", "fill", "none", "stroke", "var(--mj-status-error)", "stroke-width", "14", "stroke-linecap", "round", "opacity", "0.3"], ["d", "M 48.6 35.2 A 70 70 0 0 1 118 28", "fill", "none", "stroke", "var(--mj-status-warning)", "stroke-width", "14", "opacity", "0.3"], ["d", "M 118 28 A 70 70 0 0 1 160 95", "fill", "none", "stroke", "var(--mj-status-success)", "stroke-width", "14", "stroke-linecap", "round", "opacity", "0.3"], ["x", "90", "y", "88", "text-anchor", "middle", "font-size", "26", "font-weight", "800", "fill", "var(--mj-text-primary)"], ["x", "90", "y", "105", "text-anchor", "middle", "font-size", "10", "fill", "var(--mj-text-muted)"], ["x", "28", "y", "108", "font-size", "8", "fill", "var(--mj-text-muted)"], ["x", "86", "y", "18", "font-size", "8", "fill", "var(--mj-text-muted)"], ["x", "155", "y", "108", "font-size", "8", "fill", "var(--mj-text-muted)"], [1, "mini-histogram"], [1, "mini-hist-bar", 3, "height", "background", "title"], [1, "mini-hist-label"], [1, "fa-solid", "fa-ranking-star"], [1, "h-bar-list"], [1, "h-bar-row"], [1, "widget-footnote"], [1, "fa-solid", "fa-bolt"], [1, "throughput-bars"], [1, "tp-bar", 3, "height", "background"], [1, "legend"], [1, "legend-item"], [1, "legend-dot", 2, "background", "var(--mj-status-success)"], [1, "legend-dot", 2, "background", "var(--mj-status-error)"], [1, "fa-solid", "fa-sitemap"], [1, "taxonomy-ring-container"], ["width", "140", "height", "140", "viewBox", "0 0 140 140"], ["cx", "70", "cy", "70", "r", "54", "fill", "none", "stroke", "var(--mj-border-default)", "stroke-width", "18"], ["cx", "70", "cy", "70", "r", "54", "fill", "none", "stroke-width", "18", "transform", "rotate(-90 70 70)"], ["x", "70", "y", "66", "text-anchor", "middle", "font-size", "22", "font-weight", "800", "fill", "var(--mj-text-primary)"], ["x", "70", "y", "82", "text-anchor", "middle", "font-size", "10", "fill", "var(--mj-text-muted)"], [1, "taxonomy-stats"], [1, "tax-stat", 3, "background", "color"], [1, "date-chip", 3, "click"], [1, "kpi-card", 3, "click"], [1, "kpi-label"], [1, "kpi-value"], [1, "kpi-delta"], [1, "fa-solid", "fa-arrow-up", 2, "font-size", "9px"], [1, "fa-solid", "fa-arrow-down", 2, "font-size", "9px"], [1, "kpi-sparkline"], ["width", "64", "height", "28", "viewBox", "0 0 64 28"], ["fill", "none", "stroke-width", "2", "stroke-linecap", "round", "stroke-linejoin", "round"], [1, "drill-down-header"], [1, "drill-down-title"], [1, "fa-solid", "fa-table"], [1, "drill-down-header-actions"], ["title", "Export CSV", 1, "drill-export-btn"], ["aria-label", "Close drill-down", 1, "drill-down-close", 3, "click"], [1, "fa-solid", "fa-times"], ["text", "Loading details...", "size", "small"], [1, "drill-down-table-wrap"], [1, "drill-down-empty"], ["title", "Export CSV", 1, "drill-export-btn", 3, "click"], [1, "fa-solid", "fa-download"], [1, "data-table"], [1, "drill-action-col"], ["title", "Open record", 1, "drill-open-btn"], ["title", "Open record", 1, "drill-open-btn", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "bar-value"], [1, "bar", 2, "background", "var(--mj-brand-primary)"], [1, "bar-label"], ["width", "48", "height", "48", "viewBox", "0 0 48 48"], ["cx", "24", "cy", "24", "r", "20", "fill", "none", "stroke", "var(--mj-border-default)", "stroke-width", "5"], ["cx", "24", "cy", "24", "r", "20", "fill", "none", "stroke-width", "5", "stroke-dashoffset", "31.4", "stroke-linecap", "round", "transform", "rotate(-90 24 24)"], ["x", "24", "y", "26", "text-anchor", "middle", "font-size", "11", "font-weight", "700", "fill", "var(--mj-text-primary)"], [1, "ring-label"], [1, "ring-stat"], [1, "mini-hist-bar", 3, "title"], [1, "h-bar-name"], [1, "h-bar-track"], [1, "h-bar-fill"], [1, "tp-bar"], [1, "tp-bar-label"], [1, "tax-stat"], [1, "fa-solid", "fa-tags"], [1, "sub-section", 2, "margin-top", "0"], [1, "sub-section-header"], [1, "fa-solid", "fa-trophy"], [1, "table-scroll"], [1, "empty-state"], [1, "sub-section"], [1, "sub-section", "co-occurrence-section"], [1, "fa-solid", "fa-link"], [1, "co-occurrence-actions"], ["title", "Last computed timestamp", 1, "co-occurrence-staleness"], ["title", "Recompute co-occurrence data", 1, "drill-export-btn", 3, "click", "disabled"], [1, "num"], [2, "cursor", "pointer"], [2, "cursor", "pointer", 3, "click"], [1, "weight-bar"], ["width", "48", "height", "16"], ["fill", "none", "stroke-width", "1.5", "stroke-linecap", "round"], [1, "muted"], ["aria-label", "Open record", "title", "Open record", 1, "drill-open-btn"], ["aria-label", "Open record", "title", "Open record", 1, "drill-open-btn", 3, "click"], [1, "fa-solid", "fa-chart-bar"], [1, "stacked-bar-chart"], [1, "stacked-row"], [1, "legend", 2, "margin-top", "12px"], [1, "stacked-label"], [1, "stacked-track"], [1, "stacked-seg", 3, "width", "background", "title"], [1, "stacked-seg", 3, "title"], [1, "legend-dot"], [1, "fa-solid", "fa-layer-group"], [1, "v-bar-chart"], [1, "v-bar-col"], [1, "chart-footnote"], [1, "v-bar", 2, "background", "var(--mj-brand-primary)"], [1, "v-bar-label"], [1, "fa-regular", "fa-clock"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-arrows-rotate"], [1, "weight-bar", 2, "background", "var(--mj-status-info)"], [1, "fa-solid", "fa-database"], [2, "cursor", "pointer", 3, "source-selected"], [2, "margin-right", "4px"], [1, "badge"], [1, "fa-solid", "fa-circle", 2, "font-size", "6px", "margin-right", "3px"], [1, "fa-solid", "fa-chart-area"], [1, "two-col"], [1, "widget-card"], [1, "bar-chart", 2, "height", "100px"], [1, "fa-solid", "fa-star-half-stroke"], [1, "quality-bands"], [1, "quality-band-row"], [1, "source-quality-note"], [1, "fa-solid", "fa-circle-info", 2, "color", "var(--mj-status-info)", "margin-right", "4px"], [1, "bar-value", 2, "font-size", "9px"], [1, "quality-band-label"], [1, "quality-band-track"], [1, "quality-band-fill"], [1, "fa-solid", "fa-heart-pulse"], [1, "source-health-grid"], [1, "source-health-card", 3, "border-top-color"], [1, "source-health-card"], [1, "health-card-name"], [1, "health-card-value"], [1, "health-card-label"], [1, "fa-solid", "fa-gears"], [1, "pipeline-throughput-bars"], [1, "pipeline-bar", 2, "cursor", "pointer", 3, "height", "background", "opacity"], [1, "pipeline-date-labels"], [1, "fa-solid", "fa-stopwatch"], [1, "stage-bars"], [1, "stage-row"], [1, "stage-summary"], [1, "stage-warning"], [1, "success-rate-display"], [1, "success-rate-stat"], [1, "success-rate-value", 2, "color", "var(--mj-status-success)"], [1, "success-rate-label"], [1, "success-rate-value", 2, "color", "var(--mj-status-error)"], [1, "success-rate-value", 2, "color", "var(--mj-text-primary)"], [1, "pipeline-bar", 2, "cursor", "pointer", 3, "click"], [1, "stage-name"], [1, "stage-track"], [1, "stage-fill"], [1, "stage-time"], [1, "fa-solid", "fa-triangle-exclamation", 2, "color", "var(--mj-status-warning)", "margin-right", "4px"], [1, "fa-solid", "fa-spinner"], [1, "monospace-cell"], [1, "progress-track"], [1, "progress-fill", 2, "background", "var(--mj-brand-primary)"], [1, "progress-text"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "error-log"], [1, "error-entry"], [1, "error-time"], [1, "error-source"], [1, "error-msg"], [1, "fa-solid", "fa-circle-check"], [1, "fa-solid", "fa-chart-column"], [1, "histogram"], [1, "hist-bar-col", 2, "cursor", "pointer"], [1, "confidence-stats"], [1, "fa-solid", "fa-robot"], [1, "model-grid"], [1, "model-card"], [1, "model-recommendation"], [1, "hist-bar-col", 2, "cursor", "pointer", 3, "click"], [1, "hist-bar"], [1, "hist-label"], [1, "fa-solid", "fa-weight-scale"], [1, "grouped-bar-chart"], [1, "grouped-col"], [1, "legend", 2, "justify-content", "center", "margin-top", "14px"], [1, "grouped-bars"], [1, "g-bar", 2, "background", "var(--mj-brand-primary)", 3, "title"], [1, "g-bar", 2, "background", "var(--mj-status-info)", 3, "title"], [1, "g-bar", 2, "background", "var(--mj-text-muted)", 3, "title"], [1, "grouped-label"], [1, "accuracy-chart"], [1, "accuracy-y-labels"], [1, "accuracy-area"], [1, "accuracy-grid-line", 2, "top", "33%"], [1, "accuracy-grid-line", 2, "top", "66%"], ["width", "100%", "height", "110", "viewBox", "0 0 400 110", "preserveAspectRatio", "none", 1, "accuracy-svg"], ["fill", "none", "stroke", "var(--mj-brand-primary)", "stroke-width", "2.5", "vector-effect", "non-scaling-stroke", "stroke-linecap", "round", "stroke-linejoin", "round"], ["r", "3", "fill", "var(--mj-brand-primary)"], [1, "accuracy-x-labels"], [1, "accuracy-trend-text"], [1, "fa-solid", "fa-arrow-trend-up", 2, "margin-right", "4px"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "model-name"], ["width", "80", "height", "80", "viewBox", "0 0 80 80", 2, "margin", "4px 0"], ["cx", "40", "cy", "40", "r", "32", "fill", "none", "stroke", "var(--mj-border-default)", "stroke-width", "8"], ["cx", "40", "cy", "40", "r", "32", "fill", "none", "stroke-width", "8", "stroke-dashoffset", "50", "transform", "rotate(-90 40 40)", "stroke-linecap", "round"], [1, "model-score"], [1, "model-detail"], [1, "model-detail", 2, "font-weight", "600"], [1, "fa-solid", "fa-lightbulb", 2, "color", "var(--mj-status-warning)"], [1, "fa-solid", "fa-coins"], [1, "tab-header-actions"], ["title", "Print (PDF alternative)", 1, "drill-export-btn", 3, "click"], [1, "fa-solid", "fa-print"], [1, "cost-kpi-row"], [1, "cost-kpi-card"], [1, "cost-kpi-icon"], [1, "cost-kpi-value"], [1, "cost-kpi-label"], [1, "cost-kpi-sub"], [1, "empty-state-hint"]], template: function AnalyticsResourceComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AnalyticsResourceComponent, selectors: [["app-analytics-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 5, consts: [["Title", "Knowledge Hub Analytics", "Icon", "fa-solid fa-chart-line", "Subtitle", "Pipeline health, trending tags, and content insights"], ["meta", ""], [3, "Label", "Variant"], [3, "Flex", "Padding"], [1, "analytics-loading"], [1, "analytics-layout"], ["text", "Loading analytics data...", "size", "medium"], ["MobileTitle", "Analytics", 3, "ItemClicked", "Sections", "ActiveId"], ["footer", "", 1, "trending-section"], [1, "fa-solid", "fa-arrow-trend-up"], [1, "tag-cloud"], [3, "font-size", "font-weight"], [1, "no-trending"], [1, "main-content"], [1, "tab-section"], [1, "tab-section-header"], [1, "fa-solid", "fa-grip"], [1, "filter-bar"], [1, "date-chips"], [1, "date-chip", 3, "active"], [1, "filter-dropdown", 3, "ngModelChange", "ngModel"], [3, "value"], [1, "kpi-row"], [1, "kpi-card"], [1, "drill-down-panel"], [1, "cards-grid"], [1, "widget-card", 3, "click"], [1, "widget-title"], [1, "fa-solid", "fa-chart-line"], [1, "bar-chart"], [1, "bar-col"], [1, "fa-solid", "fa-bullseye"], [1, "rings-grid"], [1, "ring-item"], [1, "widget-empty"], [1, "fa-solid", "fa-gauge-high"], [1, "gauge-container"], ["width", "180", "height", "110", "viewBox", "0 0 180 110"], ["d", "M 20 95 A 70 70 0 0 1 160 95", "fill", "none", "stroke", "var(--mj-border-default)", "stroke-width", "14", "stroke-linecap", "round"], ["d", "M 20 95 A 70 70 0 0 1 48.6 35.2", "fill", "none", "stroke", "var(--mj-status-error)", "stroke-width", "14", "stroke-linecap", "round", "opacity", "0.3"], ["d", "M 48.6 35.2 A 70 70 0 0 1 118 28", "fill", "none", "stroke", "var(--mj-status-warning)", "stroke-width", "14", "opacity", "0.3"], ["d", "M 118 28 A 70 70 0 0 1 160 95", "fill", "none", "stroke", "var(--mj-status-success)", "stroke-width", "14", "stroke-linecap", "round", "opacity", "0.3"], ["x", "90", "y", "88", "text-anchor", "middle", "font-size", "26", "font-weight", "800", "fill", "var(--mj-text-primary)"], ["x", "90", "y", "105", "text-anchor", "middle", "font-size", "10", "fill", "var(--mj-text-muted)"], ["x", "28", "y", "108", "font-size", "8", "fill", "var(--mj-text-muted)"], ["x", "86", "y", "18", "font-size", "8", "fill", "var(--mj-text-muted)"], ["x", "155", "y", "108", "font-size", "8", "fill", "var(--mj-text-muted)"], [1, "mini-histogram"], [1, "mini-hist-bar", 3, "height", "background", "title"], [1, "mini-hist-label"], [1, "fa-solid", "fa-ranking-star"], [1, "h-bar-list"], [1, "h-bar-row"], [1, "widget-footnote"], [1, "fa-solid", "fa-bolt"], [1, "throughput-bars"], [1, "tp-bar", 3, "height", "background"], [1, "legend"], [1, "legend-item"], [1, "legend-dot", 2, "background", "var(--mj-status-success)"], [1, "legend-dot", 2, "background", "var(--mj-status-error)"], [1, "fa-solid", "fa-sitemap"], [1, "taxonomy-ring-container"], ["width", "140", "height", "140", "viewBox", "0 0 140 140"], ["cx", "70", "cy", "70", "r", "54", "fill", "none", "stroke", "var(--mj-border-default)", "stroke-width", "18"], ["cx", "70", "cy", "70", "r", "54", "fill", "none", "stroke-width", "18", "transform", "rotate(-90 70 70)"], ["x", "70", "y", "66", "text-anchor", "middle", "font-size", "22", "font-weight", "800", "fill", "var(--mj-text-primary)"], ["x", "70", "y", "82", "text-anchor", "middle", "font-size", "10", "fill", "var(--mj-text-muted)"], [1, "taxonomy-stats"], [1, "tax-stat", 3, "background", "color"], [1, "date-chip", 3, "click"], [1, "kpi-card", 3, "click"], [1, "kpi-label"], [1, "kpi-value"], [1, "kpi-delta"], [1, "fa-solid", "fa-arrow-up", 2, "font-size", "9px"], [1, "fa-solid", "fa-arrow-down", 2, "font-size", "9px"], [1, "kpi-sparkline"], ["width", "64", "height", "28", "viewBox", "0 0 64 28"], ["fill", "none", "stroke-width", "2", "stroke-linecap", "round", "stroke-linejoin", "round"], [1, "drill-down-header"], [1, "drill-down-title"], [1, "fa-solid", "fa-table"], [1, "drill-down-header-actions"], ["title", "Export CSV", 1, "drill-export-btn"], ["aria-label", "Close drill-down", 1, "drill-down-close", 3, "click"], [1, "fa-solid", "fa-times"], ["text", "Loading details...", "size", "small"], [1, "drill-down-table-wrap"], [1, "drill-down-empty"], ["title", "Export CSV", 1, "drill-export-btn", 3, "click"], [1, "fa-solid", "fa-download"], [1, "data-table"], [1, "drill-action-col"], ["title", "Open record", 1, "drill-open-btn"], ["title", "Open record", 1, "drill-open-btn", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "bar-value"], [1, "bar", 2, "background", "var(--mj-brand-primary)"], [1, "bar-label"], ["width", "48", "height", "48", "viewBox", "0 0 48 48"], ["cx", "24", "cy", "24", "r", "20", "fill", "none", "stroke", "var(--mj-border-default)", "stroke-width", "5"], ["cx", "24", "cy", "24", "r", "20", "fill", "none", "stroke-width", "5", "stroke-dashoffset", "31.4", "stroke-linecap", "round", "transform", "rotate(-90 24 24)"], ["x", "24", "y", "26", "text-anchor", "middle", "font-size", "11", "font-weight", "700", "fill", "var(--mj-text-primary)"], [1, "ring-label"], [1, "ring-stat"], [1, "mini-hist-bar", 3, "title"], [1, "h-bar-name"], [1, "h-bar-track"], [1, "h-bar-fill"], [1, "tp-bar"], [1, "tp-bar-label"], [1, "tax-stat"], [1, "fa-solid", "fa-tags"], [1, "sub-section", 2, "margin-top", "0"], [1, "sub-section-header"], [1, "fa-solid", "fa-trophy"], [1, "table-scroll"], [1, "empty-state"], [1, "sub-section"], [1, "sub-section", "co-occurrence-section"], [1, "fa-solid", "fa-link"], [1, "co-occurrence-actions"], ["title", "Last computed timestamp", 1, "co-occurrence-staleness"], ["title", "Recompute co-occurrence data", 1, "drill-export-btn", 3, "click", "disabled"], [1, "num"], [2, "cursor", "pointer"], [2, "cursor", "pointer", 3, "click"], [1, "weight-bar"], ["width", "48", "height", "16"], ["fill", "none", "stroke-width", "1.5", "stroke-linecap", "round"], [1, "muted"], ["aria-label", "Open record", "title", "Open record", 1, "drill-open-btn"], ["aria-label", "Open record", "title", "Open record", 1, "drill-open-btn", 3, "click"], [1, "fa-solid", "fa-chart-bar"], [1, "stacked-bar-chart"], [1, "stacked-row"], [1, "legend", 2, "margin-top", "12px"], [1, "stacked-label"], [1, "stacked-track"], [1, "stacked-seg", 3, "width", "background", "title"], [1, "stacked-seg", 3, "title"], [1, "legend-dot"], [1, "fa-solid", "fa-layer-group"], [1, "v-bar-chart"], [1, "v-bar-col"], [1, "chart-footnote"], [1, "v-bar", 2, "background", "var(--mj-brand-primary)"], [1, "v-bar-label"], [1, "fa-regular", "fa-clock"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-arrows-rotate"], [1, "weight-bar", 2, "background", "var(--mj-status-info)"], [1, "fa-solid", "fa-database"], [2, "cursor", "pointer", 3, "source-selected"], [2, "margin-right", "4px"], [1, "badge"], [1, "fa-solid", "fa-circle", 2, "font-size", "6px", "margin-right", "3px"], [1, "fa-solid", "fa-chart-area"], [1, "two-col"], [1, "widget-card"], [1, "bar-chart", 2, "height", "100px"], [1, "fa-solid", "fa-star-half-stroke"], [1, "quality-bands"], [1, "quality-band-row"], [1, "source-quality-note"], [1, "fa-solid", "fa-circle-info", 2, "color", "var(--mj-status-info)", "margin-right", "4px"], [1, "bar-value", 2, "font-size", "9px"], [1, "quality-band-label"], [1, "quality-band-track"], [1, "quality-band-fill"], [1, "fa-solid", "fa-heart-pulse"], [1, "source-health-grid"], [1, "source-health-card", 3, "border-top-color"], [1, "source-health-card"], [1, "health-card-name"], [1, "health-card-value"], [1, "health-card-label"], [1, "fa-solid", "fa-gears"], [1, "pipeline-throughput-bars"], [1, "pipeline-bar", 2, "cursor", "pointer", 3, "height", "background", "opacity"], [1, "pipeline-date-labels"], [1, "fa-solid", "fa-stopwatch"], [1, "stage-bars"], [1, "stage-row"], [1, "stage-summary"], [1, "stage-warning"], [1, "success-rate-display"], [1, "success-rate-stat"], [1, "success-rate-value", 2, "color", "var(--mj-status-success)"], [1, "success-rate-label"], [1, "success-rate-value", 2, "color", "var(--mj-status-error)"], [1, "success-rate-value", 2, "color", "var(--mj-text-primary)"], [1, "pipeline-bar", 2, "cursor", "pointer", 3, "click"], [1, "stage-name"], [1, "stage-track"], [1, "stage-fill"], [1, "stage-time"], [1, "fa-solid", "fa-triangle-exclamation", 2, "color", "var(--mj-status-warning)", "margin-right", "4px"], [1, "fa-solid", "fa-spinner"], [1, "monospace-cell"], [1, "progress-track"], [1, "progress-fill", 2, "background", "var(--mj-brand-primary)"], [1, "progress-text"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "error-log"], [1, "error-entry"], [1, "error-time"], [1, "error-source"], [1, "error-msg"], [1, "fa-solid", "fa-circle-check"], [1, "fa-solid", "fa-chart-column"], [1, "histogram"], [1, "hist-bar-col", 2, "cursor", "pointer"], [1, "confidence-stats"], [1, "fa-solid", "fa-robot"], [1, "model-grid"], [1, "model-card"], [1, "model-recommendation"], [1, "hist-bar-col", 2, "cursor", "pointer", 3, "click"], [1, "hist-bar"], [1, "hist-label"], [1, "fa-solid", "fa-weight-scale"], [1, "grouped-bar-chart"], [1, "grouped-col"], [1, "legend", 2, "justify-content", "center", "margin-top", "14px"], [1, "grouped-bars"], [1, "g-bar", 2, "background", "var(--mj-brand-primary)", 3, "title"], [1, "g-bar", 2, "background", "var(--mj-status-info)", 3, "title"], [1, "g-bar", 2, "background", "var(--mj-text-muted)", 3, "title"], [1, "grouped-label"], [1, "accuracy-chart"], [1, "accuracy-y-labels"], [1, "accuracy-area"], [1, "accuracy-grid-line", 2, "top", "33%"], [1, "accuracy-grid-line", 2, "top", "66%"], ["width", "100%", "height", "110", "viewBox", "0 0 400 110", "preserveAspectRatio", "none", 1, "accuracy-svg"], ["fill", "none", "stroke", "var(--mj-brand-primary)", "stroke-width", "2.5", "vector-effect", "non-scaling-stroke", "stroke-linecap", "round", "stroke-linejoin", "round"], ["r", "3", "fill", "var(--mj-brand-primary)"], [1, "accuracy-x-labels"], [1, "accuracy-trend-text"], [1, "fa-solid", "fa-arrow-trend-up", 2, "margin-right", "4px"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "model-name"], ["width", "80", "height", "80", "viewBox", "0 0 80 80", 2, "margin", "4px 0"], ["cx", "40", "cy", "40", "r", "32", "fill", "none", "stroke", "var(--mj-border-default)", "stroke-width", "8"], ["cx", "40", "cy", "40", "r", "32", "fill", "none", "stroke-width", "8", "stroke-dashoffset", "50", "transform", "rotate(-90 40 40)", "stroke-linecap", "round"], [1, "model-score"], [1, "model-detail"], [1, "model-detail", 2, "font-weight", "600"], [1, "fa-solid", "fa-lightbulb", 2, "color", "var(--mj-status-warning)"], [1, "fa-solid", "fa-coins"], [1, "tab-header-actions"], ["title", "Print (PDF alternative)", 1, "drill-export-btn", 3, "click"], [1, "fa-solid", "fa-print"], [1, "cost-kpi-row"], [1, "cost-kpi-card"], [1, "cost-kpi-icon"], [1, "cost-kpi-value"], [1, "cost-kpi-label"], [1, "cost-kpi-sub"], [1, "empty-state-hint"]], template: function AnalyticsResourceComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1);
             i0.ɵɵelement(3, "mj-stat-badge", 2);
             i0.ɵɵelementEnd()();
@@ -4248,7 +4248,7 @@ AnalyticsResourceComponent = AnalyticsResourceComponent_1 = __decorate([
 export { AnalyticsResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AnalyticsResourceComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-analytics-resource', template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Knowledge Hub Analytics\"\n    Icon=\"fa-solid fa-chart-line\"\n    Subtitle=\"Pipeline health, trending tags, and content insights\">\n    <div meta>\n      <mj-stat-badge\n        [Label]=\"PipelineStatusText\"\n        [Variant]=\"PipelineStatusOk ? 'success' : 'error'\">\n      </mj-stat-badge>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body [Flex]=\"true\" [Padding]=\"false\">\n@if (IsLoading) {\n    <div class=\"analytics-loading\">\n        <mj-loading text=\"Loading analytics data...\" size=\"medium\"></mj-loading>\n    </div>\n} @else {\n    <div class=\"analytics-layout\">\n        <mj-left-nav\n            [Sections]=\"navSections\"\n            [ActiveId]=\"ActiveTab\"\n            (ItemClicked)=\"onNavItemClicked($event)\">\n            <!-- Trending Tags Cloud projected into the rail's footer slot. -->\n            <div footer class=\"trending-section\">\n                <h3><i class=\"fa-solid fa-arrow-trend-up\"></i> Trending Tags</h3>\n                <div class=\"tag-cloud\">\n                    @for (tag of TrendingTags; track tag.Name) {\n                        <span [style.font-size.px]=\"tag.Size\" [style.font-weight]=\"tag.Weight\">{{ tag.Name }}</span>\n                    }\n                    @if (TrendingTags.length === 0) {\n                        <span class=\"no-trending\">No trending tags yet</span>\n                    }\n                </div>\n            </div>\n        </mj-left-nav>\n\n        <mj-left-nav-content>\n        <div class=\"main-content\">\n\n            <!-- ====================================================== -->\n            <!-- TAB 1: OVERVIEW                                        -->\n            <!-- ====================================================== -->\n            @if (ActiveTab === 'overview') {\n                <section class=\"tab-section\">\n                    <div class=\"tab-section-header\">\n                        <i class=\"fa-solid fa-grip\"></i>\n                        <h1>Overview</h1>\n                    </div>\n\n                    <!-- Filter Bar -->\n                    <div class=\"filter-bar\">\n                        <div class=\"date-chips\">\n                            @for (range of DateRanges; track range.Label) {\n                                <button\n                                    class=\"date-chip\"\n                                    [class.active]=\"ActiveDateRange === range.Label\"\n                                    (click)=\"SetDateRange(range.Label)\"\n                                >{{ range.Label }}</button>\n                            }\n                        </div>\n                        <select class=\"filter-dropdown\" [ngModel]=\"EntityFilter\" (ngModelChange)=\"SetEntityFilter($event)\">\n                            @for (opt of EntityFilterOptions; track opt) {\n                                <option [value]=\"opt\">{{ opt }}</option>\n                            }\n                        </select>\n                    </div>\n\n                    <!-- KPI Cards -->\n                    <div class=\"kpi-row\">\n                        @for (kpi of KPIs; track kpi.Label) {\n                            <div class=\"kpi-card\" (click)=\"OpenDrillDown(kpi.DrillDownKey)\">\n                                <div>\n                                    <div class=\"kpi-label\">{{ kpi.Label }}</div>\n                                    <div class=\"kpi-value\">{{ kpi.Value }}</div>\n                                    <div class=\"kpi-delta\" [class.up]=\"kpi.DeltaDirection === 'up'\" [class.down]=\"kpi.DeltaDirection === 'down'\">\n                                        @if (kpi.DeltaDirection === 'up') {\n                                            <i class=\"fa-solid fa-arrow-up\" style=\"font-size:9px\"></i>\n                                        } @else if (kpi.DeltaDirection === 'down') {\n                                            <i class=\"fa-solid fa-arrow-down\" style=\"font-size:9px\"></i>\n                                        }\n                                        {{ kpi.Delta }}\n                                    </div>\n                                </div>\n                                <div class=\"kpi-sparkline\">\n                                    <svg width=\"64\" height=\"28\" viewBox=\"0 0 64 28\">\n                                        <polyline [attr.points]=\"kpi.SparklinePoints\" fill=\"none\" [attr.stroke]=\"kpi.SparklineColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                    </svg>\n                                </div>\n                            </div>\n                        }\n                    </div>\n\n                    <!-- KPI Drill-Down -->\n                    @if (DrillDownTarget && DrillDownTarget.startsWith('kpi-')) {\n                        <div class=\"drill-down-panel\">\n                            <div class=\"drill-down-header\">\n                                <span class=\"drill-down-title\"><i class=\"fa-solid fa-table\"></i> Detail View</span>\n                                <div class=\"drill-down-header-actions\">\n                                    @if (DrillDownData.length > 0) {\n                                        <button class=\"drill-export-btn\" (click)=\"ExportDrillDownCSV()\" title=\"Export CSV\">\n                                            <i class=\"fa-solid fa-download\"></i> CSV\n                                        </button>\n                                    }\n                                    <button class=\"drill-down-close\" aria-label=\"Close drill-down\" (click)=\"CloseDrillDown()\">\n                                        <i class=\"fa-solid fa-times\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            @if (IsDrillDownLoading) {\n                                <mj-loading text=\"Loading details...\" size=\"small\"></mj-loading>\n                            } @else if (DrillDownData.length > 0) {\n                                <div class=\"drill-down-table-wrap\">\n                                    <table class=\"data-table\">\n                                        <thead>\n                                            <tr>\n                                                @for (col of DrillDownColumns; track col) {\n                                                    <th>{{ col }}</th>\n                                                }\n                                                @if (DrillDownHasActions) {\n                                                    <th class=\"drill-action-col\"></th>\n                                                }\n                                            </tr>\n                                        </thead>\n                                        <tbody>\n                                            @for (row of DrillDownData; track TrackByIndex($index)) {\n                                                <tr>\n                                                    @for (col of DrillDownColumns; track col) {\n                                                        <td>{{ row[col] }}</td>\n                                                    }\n                                                    @if (DrillDownHasActions) {\n                                                        <td class=\"drill-action-col\">\n                                                            @if (row['_RecordID']) {\n                                                                <button class=\"drill-open-btn\" (click)=\"OpenDrillDownRecord(row)\" title=\"Open record\">\n                                                                    <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                                                                </button>\n                                                            }\n                                                        </td>\n                                                    }\n                                                </tr>\n                                            }\n                                        </tbody>\n                                    </table>\n                                </div>\n                            } @else {\n                                <div class=\"drill-down-empty\">No data available</div>\n                            }\n                        </div>\n                    }\n\n                    <!-- Widget Cards Grid (2x3) -->\n                    <div class=\"cards-grid\">\n\n                        <!-- Card 1: Tag Growth -->\n                        <div class=\"widget-card\" (click)=\"OpenDrillDown('tagGrowth')\">\n                            <div class=\"widget-title\"><i class=\"fa-solid fa-chart-line\"></i> Tag Growth</div>\n                            <div class=\"bar-chart\">\n                                @for (bar of TagGrowthData; track bar.Label) {\n                                    <div class=\"bar-col\">\n                                        <div class=\"bar-value\">{{ bar.Count }}</div>\n                                        <div class=\"bar\" [style.height.%]=\"bar.Percentage\" style=\"background:var(--mj-brand-primary)\" [style.opacity]=\"0.5 + (bar.Percentage / 200)\"></div>\n                                        <div class=\"bar-label\">{{ bar.Label }}</div>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Card 2: Content Coverage -->\n                        <div class=\"widget-card\" (click)=\"OpenDrillDown('contentCoverage')\">\n                            <div class=\"widget-title\"><i class=\"fa-solid fa-bullseye\"></i> Content Coverage</div>\n                            <div class=\"rings-grid\">\n                                @for (entity of CoverageData; track entity.Name) {\n                                    <div class=\"ring-item\">\n                                        <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n                                            <circle cx=\"24\" cy=\"24\" r=\"20\" fill=\"none\" stroke=\"var(--mj-border-default)\" stroke-width=\"5\"/>\n                                            <circle cx=\"24\" cy=\"24\" r=\"20\" fill=\"none\" [attr.stroke]=\"entity.Color\" stroke-width=\"5\"\n                                                [attr.stroke-dasharray]=\"entity.StrokeDash\" stroke-dashoffset=\"31.4\" stroke-linecap=\"round\"\n                                                transform=\"rotate(-90 24 24)\"/>\n                                            <text x=\"24\" y=\"26\" text-anchor=\"middle\" font-size=\"11\" font-weight=\"700\" fill=\"var(--mj-text-primary)\">{{ entity.Percentage }}%</text>\n                                        </svg>\n                                        <div>\n                                            <div class=\"ring-label\">{{ entity.Name }}</div>\n                                            <div class=\"ring-stat\">{{ FormatNumber(entity.Tagged) }} / {{ FormatNumber(entity.Total) }}</div>\n                                        </div>\n                                    </div>\n                                }\n                                @if (CoverageData.length === 0) {\n                                    <div class=\"widget-empty\">No content types found</div>\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Card 3: Quality Score Gauge -->\n                        <div class=\"widget-card\" (click)=\"OpenDrillDown('qualityScore')\">\n                            <div class=\"widget-title\"><i class=\"fa-solid fa-gauge-high\"></i> Quality Score</div>\n                            <div class=\"gauge-container\">\n                                <svg width=\"180\" height=\"110\" viewBox=\"0 0 180 110\">\n                                    <!-- Background arc -->\n                                    <path d=\"M 20 95 A 70 70 0 0 1 160 95\" fill=\"none\" stroke=\"var(--mj-border-default)\" stroke-width=\"14\" stroke-linecap=\"round\"/>\n                                    <!-- Zone arcs -->\n                                    <path d=\"M 20 95 A 70 70 0 0 1 48.6 35.2\" fill=\"none\" stroke=\"var(--mj-status-error)\" stroke-width=\"14\" stroke-linecap=\"round\" opacity=\"0.3\"/>\n                                    <path d=\"M 48.6 35.2 A 70 70 0 0 1 118 28\" fill=\"none\" stroke=\"var(--mj-status-warning)\" stroke-width=\"14\" opacity=\"0.3\"/>\n                                    <path d=\"M 118 28 A 70 70 0 0 1 160 95\" fill=\"none\" stroke=\"var(--mj-status-success)\" stroke-width=\"14\" stroke-linecap=\"round\" opacity=\"0.3\"/>\n                                    <!-- Score text -->\n                                    <text x=\"90\" y=\"88\" text-anchor=\"middle\" font-size=\"26\" font-weight=\"800\" fill=\"var(--mj-text-primary)\">{{ QualityScore }}</text>\n                                    <text x=\"90\" y=\"105\" text-anchor=\"middle\" font-size=\"10\" fill=\"var(--mj-text-muted)\">out of 100</text>\n                                    <text x=\"28\" y=\"108\" font-size=\"8\" fill=\"var(--mj-text-muted)\">0</text>\n                                    <text x=\"86\" y=\"18\" font-size=\"8\" fill=\"var(--mj-text-muted)\">50</text>\n                                    <text x=\"155\" y=\"108\" font-size=\"8\" fill=\"var(--mj-text-muted)\">100</text>\n                                </svg>\n                            </div>\n                            <!-- Mini confidence histogram -->\n                            <div class=\"mini-histogram\">\n                                @for (bin of MiniConfidenceBins; track TrackByIndex($index)) {\n                                    <div class=\"mini-hist-bar\" [style.height.px]=\"bin.Height\" [style.background]=\"bin.Color\" [title]=\"bin.Title\"></div>\n                                }\n                            </div>\n                            <div class=\"mini-hist-label\">Confidence Distribution</div>\n                        </div>\n\n                        <!-- Card 4: Source Performance -->\n                        <div class=\"widget-card\" (click)=\"OpenDrillDown('sourcePerformance')\">\n                            <div class=\"widget-title\"><i class=\"fa-solid fa-ranking-star\"></i> Source Performance</div>\n                            <div class=\"h-bar-list\">\n                                @for (source of SourcePerfData; track source.Name) {\n                                    <div class=\"h-bar-row\">\n                                        <div class=\"h-bar-name\">{{ source.Name }}</div>\n                                        <div class=\"h-bar-track\">\n                                            <div class=\"h-bar-fill\" [style.width.%]=\"source.Percentage\" [style.background]=\"source.Color\">{{ source.AvgTagsPerItem }}</div>\n                                        </div>\n                                    </div>\n                                }\n                                @if (SourcePerfData.length === 0) {\n                                    <div class=\"widget-empty\">No source data</div>\n                                }\n                            </div>\n                            <div class=\"widget-footnote\">Average tags per item</div>\n                        </div>\n\n                        <!-- Card 5: Daily Throughput -->\n                        <div class=\"widget-card\" (click)=\"OpenDrillDown('dailyThroughput')\">\n                            <div class=\"widget-title\"><i class=\"fa-solid fa-bolt\"></i> Daily Throughput</div>\n                            <div class=\"throughput-bars\">\n                                @for (day of ThroughputData; track day.Label) {\n                                    <div class=\"tp-bar\"\n                                        [style.height.%]=\"day.Percentage\"\n                                        [style.background]=\"day.IsError ? 'var(--mj-status-error)' : 'var(--mj-status-success)'\"\n                                    >\n                                        <span class=\"tp-bar-label\">{{ day.Label }}</span>\n                                    </div>\n                                }\n                            </div>\n                            <div class=\"legend\">\n                                <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:var(--mj-status-success)\"></div> Success</div>\n                                <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:var(--mj-status-error)\"></div> Failures</div>\n                            </div>\n                        </div>\n\n                        <!-- Card 6: Taxonomy Health -->\n                        <div class=\"widget-card\" (click)=\"OpenDrillDown('taxonomyHealth')\">\n                            <div class=\"widget-title\"><i class=\"fa-solid fa-sitemap\"></i> Taxonomy Health</div>\n                            <div class=\"taxonomy-ring-container\">\n                                <svg width=\"140\" height=\"140\" viewBox=\"0 0 140 140\">\n                                    <circle cx=\"70\" cy=\"70\" r=\"54\" fill=\"none\" stroke=\"var(--mj-border-default)\" stroke-width=\"18\"/>\n                                    @for (seg of TaxonomyRingSegments; track TrackByIndex($index)) {\n                                        <circle cx=\"70\" cy=\"70\" r=\"54\" fill=\"none\"\n                                            [attr.stroke]=\"seg.Color\" stroke-width=\"18\"\n                                            [attr.stroke-dasharray]=\"seg.StrokeDash\"\n                                            [attr.stroke-dashoffset]=\"seg.StrokeOffset\"\n                                            transform=\"rotate(-90 70 70)\"/>\n                                    }\n                                    <text x=\"70\" y=\"66\" text-anchor=\"middle\" font-size=\"22\" font-weight=\"800\" fill=\"var(--mj-text-primary)\">{{ TaxonomyTotal }}</text>\n                                    <text x=\"70\" y=\"82\" text-anchor=\"middle\" font-size=\"10\" fill=\"var(--mj-text-muted)\">total tags</text>\n                                </svg>\n                            </div>\n                            <div class=\"taxonomy-stats\">\n                                @for (stat of TaxonomyStats; track stat.Label) {\n                                    <div class=\"tax-stat\" [style.background]=\"stat.BgColor\" [style.color]=\"stat.Color\">\n                                        {{ stat.Count }}<small>{{ stat.Label }}</small>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n\n                    </div><!-- /cards-grid -->\n\n                    <!-- Widget Drill-Down -->\n                    @if (DrillDownTarget && !DrillDownTarget.startsWith('kpi-')) {\n                        <div class=\"drill-down-panel\">\n                            <div class=\"drill-down-header\">\n                                <span class=\"drill-down-title\"><i class=\"fa-solid fa-table\"></i> {{ DrillDownTarget }} Detail</span>\n                                <button class=\"drill-down-close\" aria-label=\"Close drill-down\" (click)=\"CloseDrillDown()\">\n                                    <i class=\"fa-solid fa-times\"></i>\n                                </button>\n                            </div>\n                            @if (IsDrillDownLoading) {\n                                <mj-loading text=\"Loading details...\" size=\"small\"></mj-loading>\n                            } @else if (DrillDownData.length > 0) {\n                                <div class=\"drill-down-table-wrap\">\n                                    <table class=\"data-table\">\n                                        <thead>\n                                            <tr>\n                                                @for (col of DrillDownColumns; track col) {\n                                                    <th>{{ col }}</th>\n                                                }\n                                                @if (DrillDownHasActions) {\n                                                    <th class=\"drill-action-col\"></th>\n                                                }\n                                            </tr>\n                                        </thead>\n                                        <tbody>\n                                            @for (row of DrillDownData; track TrackByIndex($index)) {\n                                                <tr>\n                                                    @for (col of DrillDownColumns; track col) {\n                                                        <td>{{ row[col] }}</td>\n                                                    }\n                                                    @if (DrillDownHasActions) {\n                                                        <td class=\"drill-action-col\">\n                                                            @if (row['_RecordID']) {\n                                                                <button class=\"drill-open-btn\" (click)=\"OpenDrillDownRecord(row)\" title=\"Open record\">\n                                                                    <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                                                                </button>\n                                                            }\n                                                        </td>\n                                                    }\n                                                </tr>\n                                            }\n                                        </tbody>\n                                    </table>\n                                </div>\n                            } @else {\n                                <div class=\"drill-down-empty\">No data available</div>\n                            }\n                        </div>\n                    }\n                </section>\n            }\n\n            <!-- ====================================================== -->\n            <!-- TAB 2: TAGS                                            -->\n            <!-- ====================================================== -->\n            @if (ActiveTab === 'tags') {\n                <section class=\"tab-section\">\n                    <div class=\"tab-section-header\">\n                        <i class=\"fa-solid fa-tags\"></i>\n                        <h1>Tags</h1>\n                    </div>\n\n                    <!-- Top 20 Tags Table -->\n                    <div class=\"sub-section\" style=\"margin-top:0\">\n                        <div class=\"sub-section-header\">\n                            <h3><i class=\"fa-solid fa-trophy\"></i> Top 20 Tags</h3>\n                            @if (TopTags.length > 0) {\n                                <button class=\"drill-export-btn\" (click)=\"ExportTabDataCSV('top-tags')\" title=\"Export CSV\">\n                                    <i class=\"fa-solid fa-download\"></i> CSV\n                                </button>\n                            }\n                        </div>\n                        @if (TopTags.length > 0) {\n                            <div class=\"table-scroll\">\n                                <table class=\"data-table\">\n                                    <thead>\n                                        <tr>\n                                            <th>#</th>\n                                            <th>Tag Name</th>\n                                            <th class=\"num\">Usage Count</th>\n                                            <th>Avg Weight</th>\n                                            <th>Trend</th>\n                                            <th>Top Entity</th>\n                                            <th>First Seen</th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        @for (tag of TopTags; track tag.Name) {\n                                            <tr style=\"cursor:pointer\" (click)=\"OpenDrillDown('tag-row:' + tag.Name)\">\n                                                <td>{{ tag.Rank }}</td>\n                                                <td><strong>{{ tag.Name }}</strong></td>\n                                                <td class=\"num\">{{ FormatNumber(tag.UsageCount) }}</td>\n                                                <td>\n                                                    <span class=\"weight-bar\" [style.width.px]=\"tag.WeightBarWidth\" [style.background]=\"tag.WeightBarColor\"></span>\n                                                    {{ tag.AvgWeight }}\n                                                </td>\n                                                <td>\n                                                    <svg width=\"48\" height=\"16\">\n                                                        <polyline [attr.points]=\"tag.TrendPoints\" fill=\"none\" [attr.stroke]=\"tag.TrendColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                                                    </svg>\n                                                </td>\n                                                <td>{{ tag.TopEntity }}</td>\n                                                <td class=\"muted\">{{ tag.FirstSeen }}</td>\n                                            </tr>\n                                        }\n                                    </tbody>\n                                </table>\n                            </div>\n                        } @else {\n                            <div class=\"empty-state\">\n                                <i class=\"fa-solid fa-tags\"></i>\n                                <p>No tag data available yet. Process content to generate tags.</p>\n                            </div>\n                        }\n                    </div>\n\n                    <!-- D10: Tags tab drill-down -->\n                    @if (DrillDownTarget && DrillDownTarget.startsWith('tag-row:')) {\n                        <div class=\"drill-down-panel\">\n                            <div class=\"drill-down-header\">\n                                <span class=\"drill-down-title\"><i class=\"fa-solid fa-table\"></i> Content Items Tagged \"{{ DrillDownTarget.replace('tag-row:', '') }}\"</span>\n                                <div class=\"drill-down-header-actions\">\n                                    @if (DrillDownData.length > 0) {\n                                        <button class=\"drill-export-btn\" (click)=\"ExportDrillDownCSV()\" title=\"Export CSV\">\n                                            <i class=\"fa-solid fa-download\"></i> CSV\n                                        </button>\n                                    }\n                                    <button class=\"drill-down-close\" aria-label=\"Close drill-down\" (click)=\"CloseDrillDown()\"><i class=\"fa-solid fa-times\"></i></button>\n                                </div>\n                            </div>\n                            @if (IsDrillDownLoading) {\n                                <mj-loading text=\"Loading details...\" size=\"small\"></mj-loading>\n                            } @else if (DrillDownData.length > 0) {\n                                <div class=\"drill-down-table-wrap\">\n                                    <table class=\"data-table\">\n                                        <thead><tr>\n                                            @for (col of DrillDownColumns; track col) { <th>{{ col }}</th> }\n                                            @if (DrillDownHasActions) { <th class=\"drill-action-col\"></th> }\n                                        </tr></thead>\n                                        <tbody>\n                                            @for (row of DrillDownData; track TrackByIndex($index)) {\n                                                <tr>\n                                                    @for (col of DrillDownColumns; track col) { <td>{{ row[col] }}</td> }\n                                                    @if (DrillDownHasActions) {\n                                                        <td class=\"drill-action-col\">\n                                                            @if (row['_RecordID']) {\n                                                                <button class=\"drill-open-btn\" aria-label=\"Open record\" (click)=\"OpenDrillDownRecord(row)\" title=\"Open record\"><i class=\"fa-solid fa-arrow-up-right-from-square\"></i></button>\n                                                            }\n                                                        </td>\n                                                    }\n                                                </tr>\n                                            }\n                                        </tbody>\n                                    </table>\n                                </div>\n                            } @else {\n                                <div class=\"drill-down-empty\">No items found for this tag</div>\n                            }\n                        </div>\n                    }\n\n                    <!-- Tag Distribution by Entity -->\n                    @if (EntityDistribution.length > 0) {\n                        <div class=\"sub-section\">\n                            <h3><i class=\"fa-solid fa-chart-bar\"></i> Tag Distribution by Entity</h3>\n                            <div class=\"stacked-bar-chart\">\n                                @for (row of EntityDistribution; track row.EntityName) {\n                                    <div class=\"stacked-row\">\n                                        <div class=\"stacked-label\">{{ row.EntityName }}</div>\n                                        <div class=\"stacked-track\">\n                                            @for (seg of row.Segments; track TrackByIndex($index)) {\n                                                <div class=\"stacked-seg\" [style.width.%]=\"seg.Percentage\" [style.background]=\"seg.Color\" [title]=\"seg.Label + ': ' + seg.Percentage + '%'\">{{ seg.Label }}</div>\n                                            }\n                                        </div>\n                                    </div>\n                                }\n                            </div>\n                            <div class=\"legend\" style=\"margin-top:12px\">\n                                @for (item of DistributionLegend; track item.Label) {\n                                    <div class=\"legend-item\"><div class=\"legend-dot\" [style.background]=\"item.Color\"></div> {{ item.Label }}</div>\n                                }\n                            </div>\n                        </div>\n                    }\n\n                    <!-- Tag Depth Distribution -->\n                    @if (TagDepthBars.length > 0) {\n                        <div class=\"sub-section\">\n                            <h3><i class=\"fa-solid fa-layer-group\"></i> Tag Depth Distribution</h3>\n                            <div class=\"v-bar-chart\">\n                                @for (bar of TagDepthBars; track bar.Label) {\n                                    <div class=\"v-bar-col\">\n                                        <div class=\"v-bar\" [style.height.%]=\"bar.Percentage\" style=\"background:var(--mj-brand-primary)\" [style.min-height.px]=\"bar.Count > 0 ? 24 : 0\">{{ bar.Count }}</div>\n                                        <div class=\"v-bar-label\">{{ bar.Label }}</div>\n                                    </div>\n                                }\n                            </div>\n                            <div class=\"chart-footnote\">\n                                Taxonomy hierarchy depth -- Most tags at depth 2-3 indicating a healthy mid-level structure\n                            </div>\n                        </div>\n                    }\n\n                    <!-- Frequently Paired Tags (Co-Occurrence) -->\n                    <div class=\"sub-section co-occurrence-section\">\n                        <div class=\"sub-section-header\">\n                            <h3><i class=\"fa-solid fa-link\"></i> Frequently Paired Tags</h3>\n                            <div class=\"co-occurrence-actions\">\n                                @if (CoOccurrenceLastComputed) {\n                                    <span class=\"co-occurrence-staleness\" title=\"Last computed timestamp\">\n                                        <i class=\"fa-regular fa-clock\"></i>\n                                        Last computed: {{ CoOccurrenceLastComputed }}\n                                    </span>\n                                }\n                                <button class=\"drill-export-btn\" (click)=\"RecomputeCoOccurrence()\" [disabled]=\"IsRecomputingCoOccurrence\" title=\"Recompute co-occurrence data\">\n                                    @if (IsRecomputingCoOccurrence) {\n                                        <i class=\"fa-solid fa-spinner fa-spin\"></i> Computing...\n                                    } @else {\n                                        <i class=\"fa-solid fa-arrows-rotate\"></i> Recompute\n                                    }\n                                </button>\n                            </div>\n                        </div>\n                        @if (CoOccurrencePairs.length > 0) {\n                            <div class=\"table-scroll\">\n                                <table class=\"data-table\">\n                                    <thead>\n                                        <tr>\n                                            <th>#</th>\n                                            <th>Tag A</th>\n                                            <th>Tag B</th>\n                                            <th class=\"num\">Co-Occurrences</th>\n                                            <th>Frequency</th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        @for (pair of CoOccurrencePairs; track pair.TagAName + pair.TagBName; let i = $index) {\n                                            <tr>\n                                                <td class=\"muted\">{{ i + 1 }}</td>\n                                                <td><strong>{{ pair.TagAName }}</strong></td>\n                                                <td><strong>{{ pair.TagBName }}</strong></td>\n                                                <td class=\"num\">{{ FormatNumber(pair.Count) }}</td>\n                                                <td>\n                                                    <span class=\"weight-bar\" [style.width.px]=\"pair.BarWidth\" style=\"background: var(--mj-status-info)\"></span>\n                                                </td>\n                                            </tr>\n                                        }\n                                    </tbody>\n                                </table>\n                            </div>\n                        } @else {\n                            <div class=\"empty-state\">\n                                <i class=\"fa-solid fa-link\"></i>\n                                <p>No co-occurrence data available yet. Process content and recompute to see which tags frequently appear together.</p>\n                            </div>\n                        }\n                    </div>\n                </section>\n            }\n\n            <!-- ====================================================== -->\n            <!-- TAB 3: SOURCES                                         -->\n            <!-- ====================================================== -->\n            @if (ActiveTab === 'sources') {\n                <section class=\"tab-section\">\n                    <div class=\"tab-section-header\">\n                        <i class=\"fa-solid fa-database\"></i>\n                        <h1>Sources</h1>\n                    </div>\n\n                    <!-- Source Comparison Table -->\n                    <div class=\"sub-section\" style=\"margin-top:0\">\n                        <h3><i class=\"fa-solid fa-table\"></i> Source Comparison</h3>\n                        @if (SourceComparison.length > 0) {\n                            <div class=\"table-scroll\">\n                                <table class=\"data-table\">\n                                    <thead>\n                                        <tr>\n                                            <th>Source Name</th>\n                                            <th>Type</th>\n                                            <th class=\"num\">Items</th>\n                                            <th class=\"num\">Tags Generated</th>\n                                            <th class=\"num\">Avg Tags/Item</th>\n                                            <th class=\"num\">Avg Weight</th>\n                                            <th>Last Run</th>\n                                            <th>Status</th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        @for (source of SourceComparison; track source.Name) {\n                                            <tr (click)=\"SelectSource(source.Name); OpenDrillDown('source-row:' + source.Name)\" style=\"cursor:pointer\" [class.source-selected]=\"SelectedSourceName === source.Name\">\n                                                <td><strong>{{ source.Name }}</strong></td>\n                                                <td><i [class]=\"source.TypeIcon\" [style.color]=\"source.TypeColor\" style=\"margin-right:4px\"></i> {{ source.Type }}</td>\n                                                <td class=\"num\">{{ FormatNumber(source.Items) }}</td>\n                                                <td class=\"num\">{{ FormatNumber(source.TagsGenerated) }}</td>\n                                                <td class=\"num\">{{ source.AvgTagsPerItem }}</td>\n                                                <td class=\"num\">{{ source.AvgWeight }}</td>\n                                                <td class=\"muted\">{{ source.LastRun }}</td>\n                                                <td><span class=\"badge\" [class]=\"source.StatusClass\"><i class=\"fa-solid fa-circle\" style=\"font-size:6px;margin-right:3px\"></i> {{ source.Status }}</span></td>\n                                            </tr>\n                                        }\n                                    </tbody>\n                                </table>\n                            </div>\n                        } @else {\n                            <div class=\"empty-state\">\n                                <i class=\"fa-solid fa-database\"></i>\n                                <p>No content sources configured yet.</p>\n                            </div>\n                        }\n                    </div>\n\n                    <!-- D10: Sources tab drill-down (recent runs) -->\n                    @if (DrillDownTarget && DrillDownTarget.startsWith('source-row:')) {\n                        <div class=\"drill-down-panel\">\n                            <div class=\"drill-down-header\">\n                                <span class=\"drill-down-title\"><i class=\"fa-solid fa-table\"></i> Recent Runs: {{ DrillDownTarget.replace('source-row:', '') }}</span>\n                                <div class=\"drill-down-header-actions\">\n                                    @if (DrillDownData.length > 0) {\n                                        <button class=\"drill-export-btn\" (click)=\"ExportDrillDownCSV()\" title=\"Export CSV\"><i class=\"fa-solid fa-download\"></i> CSV</button>\n                                    }\n                                    <button class=\"drill-down-close\" aria-label=\"Close drill-down\" (click)=\"CloseDrillDown()\"><i class=\"fa-solid fa-times\"></i></button>\n                                </div>\n                            </div>\n                            @if (IsDrillDownLoading) {\n                                <mj-loading text=\"Loading details...\" size=\"small\"></mj-loading>\n                            } @else if (DrillDownData.length > 0) {\n                                <div class=\"drill-down-table-wrap\">\n                                    <table class=\"data-table\">\n                                        <thead><tr>\n                                            @for (col of DrillDownColumns; track col) { <th>{{ col }}</th> }\n                                            @if (DrillDownHasActions) { <th class=\"drill-action-col\"></th> }\n                                        </tr></thead>\n                                        <tbody>\n                                            @for (row of DrillDownData; track TrackByIndex($index)) {\n                                                <tr>\n                                                    @for (col of DrillDownColumns; track col) { <td>{{ row[col] }}</td> }\n                                                    @if (DrillDownHasActions) {\n                                                        <td class=\"drill-action-col\">\n                                                            @if (row['_RecordID']) {\n                                                                <button class=\"drill-open-btn\" aria-label=\"Open record\" (click)=\"OpenDrillDownRecord(row)\" title=\"Open record\"><i class=\"fa-solid fa-arrow-up-right-from-square\"></i></button>\n                                                            }\n                                                        </td>\n                                                    }\n                                                </tr>\n                                            }\n                                        </tbody>\n                                    </table>\n                                </div>\n                            } @else {\n                                <div class=\"drill-down-empty\">No run data for this source</div>\n                            }\n                        </div>\n                    }\n\n                    <!-- Per-Source Detail -->\n                    @if (SelectedSourceName && SourceComparison.length > 0) {\n                        <div class=\"sub-section\">\n                            <h3><i class=\"fa-solid fa-chart-area\"></i> Source Detail: {{ SelectedSourceName }}</h3>\n                            <div class=\"two-col\">\n                                <!-- Items Processed Over Time -->\n                                <div class=\"widget-card\">\n                                    <div class=\"widget-title\"><i class=\"fa-solid fa-chart-bar\"></i> Items Processed (Last 8 Weeks)</div>\n                                    <div class=\"bar-chart\" style=\"height:100px\">\n                                        @for (bar of SourceWeeklyBars; track bar.Label) {\n                                            <div class=\"bar-col\">\n                                                <div class=\"bar-value\" style=\"font-size:9px\">{{ bar.Value }}</div>\n                                                <div class=\"bar\" [style.height.%]=\"bar.Percentage\" style=\"background:var(--mj-brand-primary)\" [style.opacity]=\"0.5 + (bar.Percentage / 200)\"></div>\n                                                <div class=\"bar-label\">{{ bar.Label }}</div>\n                                            </div>\n                                        }\n                                    </div>\n                                </div>\n\n                                <!-- Tag Quality Distribution -->\n                                <div class=\"widget-card\">\n                                    <div class=\"widget-title\"><i class=\"fa-solid fa-star-half-stroke\"></i> Tag Quality Distribution</div>\n                                    <div class=\"quality-bands\">\n                                        @for (band of SourceQualityBands; track band.Label) {\n                                            <div class=\"quality-band-row\">\n                                                <span class=\"quality-band-label\">{{ band.Label }}</span>\n                                                <div class=\"quality-band-track\">\n                                                    <div class=\"quality-band-fill\" [style.width.%]=\"band.Percentage\" [style.background]=\"band.Color\">{{ band.Percentage }}%</div>\n                                                </div>\n                                            </div>\n                                        }\n                                    </div>\n                                    <div class=\"source-quality-note\">\n                                        <i class=\"fa-solid fa-circle-info\" style=\"color:var(--mj-status-info);margin-right:4px\"></i>\n                                        {{ SourceQualityNote }}\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    }\n\n                    <!-- Source Health -->\n                    @if (SourceHealthCards.length > 0) {\n                        <div class=\"sub-section\">\n                            <h3><i class=\"fa-solid fa-heart-pulse\"></i> Source Health Summary</h3>\n                            <div class=\"source-health-grid\" [style.grid-template-columns]=\"'repeat(' + SourceHealthCards.length + ', 1fr)'\">\n                                @for (card of SourceHealthCards; track card.Name) {\n                                    <div class=\"source-health-card\" [style.border-top-color]=\"card.Color\">\n                                        <div class=\"health-card-name\">{{ card.Name }}</div>\n                                        <div class=\"health-card-value\" [style.color]=\"card.Color\">{{ card.Uptime }}%</div>\n                                        <div class=\"health-card-label\">uptime</div>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n                    }\n                </section>\n            }\n\n            <!-- ====================================================== -->\n            <!-- TAB 4: PIPELINE                                        -->\n            <!-- ====================================================== -->\n            @if (ActiveTab === 'pipeline') {\n                <section class=\"tab-section\">\n                    <div class=\"tab-section-header\">\n                        <i class=\"fa-solid fa-gears\"></i>\n                        <h1>Pipeline</h1>\n                    </div>\n\n                    <!-- Pipeline Throughput Chart -->\n                    <div class=\"sub-section\" style=\"margin-top:0\">\n                        <h3><i class=\"fa-solid fa-chart-bar\"></i> Pipeline Throughput (Last 30 Days)</h3>\n                        <div class=\"widget-card\">\n                            <div class=\"pipeline-throughput-bars\">\n                                @for (bar of PipelineThroughputBars; track TrackByIndex($index)) {\n                                    <div class=\"pipeline-bar\"\n                                        [style.height.%]=\"bar.Percentage\"\n                                        [style.background]=\"bar.IsError ? 'var(--mj-status-error)' : 'var(--mj-brand-primary)'\"\n                                        [style.opacity]=\"bar.IsError ? 0.7 : (0.6 + bar.Percentage / 300)\"\n                                        style=\"cursor:pointer\"\n                                        (click)=\"OpenDrillDown('pipeline-throughput:' + $index)\"\n                                    ></div>\n                                }\n                            </div>\n                            <div class=\"pipeline-date-labels\">\n                                @for (label of PipelineDateLabels; track label) {\n                                    <span>{{ label }}</span>\n                                }\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- D10: Pipeline throughput drill-down -->\n                    @if (DrillDownTarget && DrillDownTarget.startsWith('pipeline-throughput:')) {\n                        <div class=\"drill-down-panel\">\n                            <div class=\"drill-down-header\">\n                                <span class=\"drill-down-title\"><i class=\"fa-solid fa-table\"></i> Runs for Selected Day</span>\n                                <div class=\"drill-down-header-actions\">\n                                    @if (DrillDownData.length > 0) {\n                                        <button class=\"drill-export-btn\" (click)=\"ExportDrillDownCSV()\" title=\"Export CSV\"><i class=\"fa-solid fa-download\"></i> CSV</button>\n                                    }\n                                    <button class=\"drill-down-close\" aria-label=\"Close drill-down\" (click)=\"CloseDrillDown()\"><i class=\"fa-solid fa-times\"></i></button>\n                                </div>\n                            </div>\n                            @if (IsDrillDownLoading) {\n                                <mj-loading text=\"Loading details...\" size=\"small\"></mj-loading>\n                            } @else if (DrillDownData.length > 0) {\n                                <div class=\"drill-down-table-wrap\">\n                                    <table class=\"data-table\">\n                                        <thead><tr>\n                                            @for (col of DrillDownColumns; track col) { <th>{{ col }}</th> }\n                                            @if (DrillDownHasActions) { <th class=\"drill-action-col\"></th> }\n                                        </tr></thead>\n                                        <tbody>\n                                            @for (row of DrillDownData; track TrackByIndex($index)) {\n                                                <tr>\n                                                    @for (col of DrillDownColumns; track col) { <td>{{ row[col] }}</td> }\n                                                    @if (DrillDownHasActions) {\n                                                        <td class=\"drill-action-col\">\n                                                            @if (row['_RecordID']) {\n                                                                <button class=\"drill-open-btn\" aria-label=\"Open record\" (click)=\"OpenDrillDownRecord(row)\" title=\"Open record\"><i class=\"fa-solid fa-arrow-up-right-from-square\"></i></button>\n                                                            }\n                                                        </td>\n                                                    }\n                                                </tr>\n                                            }\n                                        </tbody>\n                                    </table>\n                                </div>\n                            } @else {\n                                <div class=\"drill-down-empty\">No runs for this day</div>\n                            }\n                        </div>\n                    }\n\n                    <!-- Processing Time Breakdown -->\n                    <div class=\"sub-section\">\n                        <h3><i class=\"fa-solid fa-stopwatch\"></i> Processing Time Breakdown (Avg per Item)</h3>\n                        <div class=\"widget-card\">\n                            <div class=\"stage-bars\">\n                                @for (stage of ProcessingStages; track stage.Name) {\n                                    <div class=\"stage-row\">\n                                        <div class=\"stage-name\">{{ stage.Name }}</div>\n                                        <div class=\"stage-track\">\n                                            <div class=\"stage-fill\" [style.width.%]=\"stage.Percentage\" [style.background]=\"stage.Color\">\n                                                @if (stage.Percentage > 15) {\n                                                    {{ stage.Time }}s\n                                                }\n                                            </div>\n                                        </div>\n                                        <div class=\"stage-time\">{{ stage.Time }}s</div>\n                                    </div>\n                                }\n                            </div>\n                            <div class=\"stage-summary\">\n                                <span><strong>Total avg:</strong> {{ TotalAvgProcessingTime }}s per item</span>\n                                @if (BottleneckStage) {\n                                    <span class=\"stage-warning\">\n                                        <i class=\"fa-solid fa-triangle-exclamation\" style=\"color:var(--mj-status-warning);margin-right:4px\"></i>\n                                        {{ BottleneckStage }} stage is the bottleneck ({{ BottleneckPercent }}% of total time)\n                                    </span>\n                                }\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Success Rate -->\n                    <div class=\"sub-section\">\n                        <h3><i class=\"fa-solid fa-chart-line\"></i> Success Rate Overview</h3>\n                        <div class=\"widget-card\">\n                            <div class=\"success-rate-display\">\n                                <div class=\"success-rate-stat\">\n                                    <div class=\"success-rate-value\" style=\"color:var(--mj-status-success)\">\n                                        {{ rawProcessRuns.length > 0 ? (100 - (ErrorLog.length / rawProcessRuns.length * 100)).toFixed(1) : '100' }}%\n                                    </div>\n                                    <div class=\"success-rate-label\">Success Rate</div>\n                                </div>\n                                <div class=\"success-rate-stat\">\n                                    <div class=\"success-rate-value\" style=\"color:var(--mj-status-error)\">\n                                        {{ rawProcessRuns.length > 0 ? (ErrorLog.length / rawProcessRuns.length * 100).toFixed(1) : '0' }}%\n                                    </div>\n                                    <div class=\"success-rate-label\">Failure Rate</div>\n                                </div>\n                                <div class=\"success-rate-stat\">\n                                    <div class=\"success-rate-value\" style=\"color:var(--mj-text-primary)\">\n                                        {{ FormatNumber(rawProcessRuns.length) }}\n                                    </div>\n                                    <div class=\"success-rate-label\">Total Runs</div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Active Runs Table -->\n                    @if (ActiveRuns.length > 0) {\n                        <div class=\"sub-section\">\n                            <h3><i class=\"fa-solid fa-spinner\"></i> Active Runs</h3>\n                            <div class=\"table-scroll\">\n                                <table class=\"data-table\">\n                                    <thead>\n                                        <tr>\n                                            <th>Run ID</th>\n                                            <th>Source</th>\n                                            <th>Started</th>\n                                            <th>Progress</th>\n                                            <th>Stage</th>\n                                            <th class=\"num\">Items</th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        @for (run of ActiveRuns; track run.RunID) {\n                                            <tr>\n                                                <td class=\"monospace-cell\">{{ run.RunID }}</td>\n                                                <td>{{ run.Source }}</td>\n                                                <td class=\"muted\">{{ run.Started }}</td>\n                                                <td>\n                                                    <div class=\"progress-track\"><div class=\"progress-fill\" [style.width.%]=\"run.Progress\" style=\"background:var(--mj-brand-primary)\"></div></div>\n                                                    <span class=\"progress-text\">{{ run.Progress }}%</span>\n                                                </td>\n                                                <td><span class=\"badge\" [class]=\"run.StageClass\">{{ run.Stage }}</span></td>\n                                                <td class=\"num\">{{ FormatNumber(run.Items) }}</td>\n                                            </tr>\n                                        }\n                                    </tbody>\n                                </table>\n                            </div>\n                        </div>\n                    }\n\n                    <!-- Error Log -->\n                    @if (ErrorLog.length > 0) {\n                        <div class=\"sub-section\">\n                            <h3><i class=\"fa-solid fa-triangle-exclamation\"></i> Recent Errors</h3>\n                            <div class=\"error-log\">\n                                @for (entry of ErrorLog; track TrackByIndex($index)) {\n                                    <div class=\"error-entry\">\n                                        <div class=\"error-time\">{{ entry.Time }}</div>\n                                        <div class=\"error-source\">{{ entry.Source }}</div>\n                                        <div class=\"error-msg\">{{ entry.Message }}</div>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n                    }\n                </section>\n            }\n\n            <!-- ====================================================== -->\n            <!-- TAB 5: QUALITY                                         -->\n            <!-- ====================================================== -->\n            @if (ActiveTab === 'quality') {\n                <section class=\"tab-section\">\n                    <div class=\"tab-section-header\">\n                        <i class=\"fa-solid fa-circle-check\"></i>\n                        <h1>Quality</h1>\n                    </div>\n\n                    <!-- Confidence Distribution Histogram -->\n                    <div class=\"sub-section\" style=\"margin-top:0\">\n                        <h3><i class=\"fa-solid fa-chart-column\"></i> Confidence Distribution</h3>\n                        <div class=\"widget-card\">\n                            <div class=\"histogram\">\n                                @for (bin of ConfidenceHistogram; track bin.Label) {\n                                    <div class=\"hist-bar-col\" style=\"cursor:pointer\" (click)=\"OpenDrillDown('quality-bin:' + bin.Label)\">\n                                        <div class=\"hist-bar\" [style.height.%]=\"bin.Percentage\" [style.background]=\"bin.Color\">\n                                            @if (bin.Count > 0) { {{ bin.Count }} }\n                                        </div>\n                                        <div class=\"hist-label\">{{ bin.Label }}</div>\n                                    </div>\n                                }\n                            </div>\n                            <div class=\"confidence-stats\">\n                                @for (stat of ConfidenceStats; track stat.Label) {\n                                    <span><strong>{{ stat.Label }}:</strong> {{ stat.Value }}</span>\n                                }\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- D10: Quality bin drill-down -->\n                    @if (DrillDownTarget && DrillDownTarget.startsWith('quality-bin:')) {\n                        <div class=\"drill-down-panel\">\n                            <div class=\"drill-down-header\">\n                                <span class=\"drill-down-title\"><i class=\"fa-solid fa-table\"></i> Items in Confidence Range {{ DrillDownTarget.replace('quality-bin:', '') }}</span>\n                                <div class=\"drill-down-header-actions\">\n                                    @if (DrillDownData.length > 0) {\n                                        <button class=\"drill-export-btn\" (click)=\"ExportDrillDownCSV()\" title=\"Export CSV\"><i class=\"fa-solid fa-download\"></i> CSV</button>\n                                    }\n                                    <button class=\"drill-down-close\" aria-label=\"Close drill-down\" (click)=\"CloseDrillDown()\"><i class=\"fa-solid fa-times\"></i></button>\n                                </div>\n                            </div>\n                            @if (IsDrillDownLoading) {\n                                <mj-loading text=\"Loading details...\" size=\"small\"></mj-loading>\n                            } @else if (DrillDownData.length > 0) {\n                                <div class=\"drill-down-table-wrap\">\n                                    <table class=\"data-table\">\n                                        <thead><tr>\n                                            @for (col of DrillDownColumns; track col) { <th>{{ col }}</th> }\n                                            @if (DrillDownHasActions) { <th class=\"drill-action-col\"></th> }\n                                        </tr></thead>\n                                        <tbody>\n                                            @for (row of DrillDownData; track TrackByIndex($index)) {\n                                                <tr>\n                                                    @for (col of DrillDownColumns; track col) { <td>{{ row[col] }}</td> }\n                                                    @if (DrillDownHasActions) {\n                                                        <td class=\"drill-action-col\">\n                                                            @if (row['_RecordID']) {\n                                                                <button class=\"drill-open-btn\" aria-label=\"Open record\" (click)=\"OpenDrillDownRecord(row)\" title=\"Open record\"><i class=\"fa-solid fa-arrow-up-right-from-square\"></i></button>\n                                                            }\n                                                        </td>\n                                                    }\n                                                </tr>\n                                            }\n                                        </tbody>\n                                    </table>\n                                </div>\n                            } @else {\n                                <div class=\"drill-down-empty\">No items in this confidence range</div>\n                            }\n                        </div>\n                    }\n\n                    <!-- Weight Distribution by Entity -->\n                    @if (WeightByEntity.length > 0) {\n                        <div class=\"sub-section\">\n                            <h3><i class=\"fa-solid fa-weight-scale\"></i> Weight Distribution by Entity</h3>\n                            <div class=\"widget-card\">\n                                <div class=\"grouped-bar-chart\">\n                                    @for (entity of WeightByEntity; track entity.Name) {\n                                        <div class=\"grouped-col\">\n                                            <div class=\"grouped-bars\">\n                                                <div class=\"g-bar\" [style.height.%]=\"entity.High\" style=\"background:var(--mj-brand-primary)\" [title]=\"'High: ' + entity.High + '%'\"></div>\n                                                <div class=\"g-bar\" [style.height.%]=\"entity.Med\" style=\"background:var(--mj-status-info)\" [title]=\"'Med: ' + entity.Med + '%'\"></div>\n                                                <div class=\"g-bar\" [style.height.%]=\"entity.Low\" style=\"background:var(--mj-text-muted)\" [title]=\"'Low: ' + entity.Low + '%'\"></div>\n                                            </div>\n                                            <div class=\"grouped-label\">{{ entity.Name }}</div>\n                                        </div>\n                                    }\n                                </div>\n                                <div class=\"legend\" style=\"justify-content:center;margin-top:14px\">\n                                    @for (item of WeightLegend; track item.Label) {\n                                        <div class=\"legend-item\"><div class=\"legend-dot\" [style.background]=\"item.Color\"></div> {{ item.Label }}</div>\n                                    }\n                                </div>\n                            </div>\n                        </div>\n                    }\n\n                    <!-- Tag Accuracy Over Time -->\n                    @if (AccuracyLinePoints) {\n                        <div class=\"sub-section\">\n                            <h3><i class=\"fa-solid fa-chart-line\"></i> Tag Accuracy Over Time (Weekly Avg Confidence)</h3>\n                            <div class=\"widget-card\">\n                                <div class=\"accuracy-chart\">\n                                    <div class=\"accuracy-y-labels\">\n                                        <div>1.0</div>\n                                        <div>0.75</div>\n                                        <div>0.50</div>\n                                        <div>0.25</div>\n                                    </div>\n                                    <div class=\"accuracy-area\">\n                                        <div class=\"accuracy-grid-line\" style=\"top:33%\"></div>\n                                        <div class=\"accuracy-grid-line\" style=\"top:66%\"></div>\n                                        <svg width=\"100%\" height=\"110\" viewBox=\"0 0 400 110\" preserveAspectRatio=\"none\" class=\"accuracy-svg\">\n                                            <polyline [attr.points]=\"AccuracyLinePoints\"\n                                                fill=\"none\" stroke=\"var(--mj-brand-primary)\" stroke-width=\"2.5\" vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                            @for (dot of AccuracyDots; track TrackByIndex($index)) {\n                                                <circle [attr.cx]=\"dot.Cx\" [attr.cy]=\"dot.Cy\" r=\"3\" fill=\"var(--mj-brand-primary)\"/>\n                                            }\n                                        </svg>\n                                    </div>\n                                </div>\n                                <div class=\"accuracy-x-labels\">\n                                    @for (label of AccuracyMonthLabels; track label) {\n                                        <span>{{ label }}</span>\n                                    }\n                                </div>\n                                <div class=\"accuracy-trend-text\">\n                                    <i class=\"fa-solid fa-arrow-trend-up\" style=\"margin-right:4px\"></i>\n                                    {{ AccuracyTrendText }}\n                                </div>\n                            </div>\n                        </div>\n                    }\n\n                    <!-- Low-Confidence Tags Table -->\n                    @if (LowConfidenceTags.length > 0) {\n                        <div class=\"sub-section\">\n                            <h3><i class=\"fa-solid fa-exclamation-triangle\"></i> Low-Confidence Tags (Avg Weight &lt; 0.4)</h3>\n                            <div class=\"table-scroll\">\n                                <table class=\"data-table\">\n                                    <thead>\n                                        <tr>\n                                            <th>Tag Name</th>\n                                            <th class=\"num\">Avg Weight</th>\n                                            <th class=\"num\">Usage Count</th>\n                                            <th>Top Entity</th>\n                                            <th>Suggested Action</th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        @for (tag of LowConfidenceTags; track tag.Name) {\n                                            <tr>\n                                                <td><strong>{{ tag.Name }}</strong></td>\n                                                <td class=\"num\">{{ tag.AvgWeight }}</td>\n                                                <td class=\"num\">{{ tag.UsageCount }}</td>\n                                                <td>{{ tag.TopEntity }}</td>\n                                                <td><span class=\"badge\" [class]=\"tag.ActionClass\">{{ tag.SuggestedAction }}</span></td>\n                                            </tr>\n                                        }\n                                    </tbody>\n                                </table>\n                            </div>\n                        </div>\n                    }\n\n                    <!-- Model Performance Comparison -->\n                    <div class=\"sub-section\">\n                        <h3><i class=\"fa-solid fa-robot\"></i> Model Performance Comparison</h3>\n                        <div class=\"model-grid\">\n                            @for (model of ModelComparisons; track model.Name) {\n                                <div class=\"model-card\">\n                                    <div class=\"model-name\"><i [class]=\"model.Icon\" [style.color]=\"model.IconColor\" style=\"margin-right:4px\"></i> {{ model.Name }}</div>\n                                    <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" style=\"margin:4px 0\">\n                                        <circle cx=\"40\" cy=\"40\" r=\"32\" fill=\"none\" stroke=\"var(--mj-border-default)\" stroke-width=\"8\"/>\n                                        <circle cx=\"40\" cy=\"40\" r=\"32\" fill=\"none\" [attr.stroke]=\"model.ScoreColor\" stroke-width=\"8\"\n                                            [attr.stroke-dasharray]=\"model.StrokeDash\" stroke-dashoffset=\"50\"\n                                            transform=\"rotate(-90 40 40)\" stroke-linecap=\"round\"/>\n                                    </svg>\n                                    <div class=\"model-score\" [style.color]=\"model.ScoreColor\">{{ model.ScorePercentage }}%</div>\n                                    <div class=\"model-detail\">Avg confidence: {{ model.AvgConfidence }}</div>\n                                    <div class=\"model-detail\">{{ FormatNumber(model.TagsGenerated) }} tags generated</div>\n                                    <div class=\"model-detail\" [style.color]=\"model.RoleColor\" style=\"font-weight:600\">{{ model.Role }}</div>\n                                </div>\n                            }\n                        </div>\n                        @if (ModelRecommendation) {\n                            <div class=\"model-recommendation\">\n                                <i class=\"fa-solid fa-lightbulb\" style=\"color:var(--mj-status-warning)\"></i>\n                                <div>\n                                    <strong>Recommendation:</strong> {{ ModelRecommendation }}\n                                </div>\n                            </div>\n                        }\n                    </div>\n                </section>\n            }\n\n            <!-- ====================================================== -->\n            <!-- TAB 6: COST & USAGE (D1)                              -->\n            <!-- ====================================================== -->\n            @if (ActiveTab === 'cost') {\n                <section class=\"tab-section\">\n                    <div class=\"tab-section-header\">\n                        <i class=\"fa-solid fa-coins\"></i>\n                        <h1>Cost & Usage</h1>\n                        <div class=\"tab-header-actions\">\n                            <button class=\"drill-export-btn\" (click)=\"ExportTabDataCSV('cost-usage')\" title=\"Export CSV\">\n                                <i class=\"fa-solid fa-download\"></i> CSV\n                            </button>\n                            <button class=\"drill-export-btn\" (click)=\"PrintCurrentTab()\" title=\"Print (PDF alternative)\">\n                                <i class=\"fa-solid fa-print\"></i> Print\n                            </button>\n                        </div>\n                    </div>\n\n                    <!-- Filter Bar -->\n                    <div class=\"filter-bar\">\n                        <div class=\"date-chips\">\n                            @for (range of DateRanges; track range.Label) {\n                                <button\n                                    class=\"date-chip\"\n                                    [class.active]=\"ActiveDateRange === range.Label\"\n                                    (click)=\"SetDateRange(range.Label)\"\n                                >{{ range.Label }}</button>\n                            }\n                        </div>\n                    </div>\n\n                    <!-- KPI Cards -->\n                    @if (CostKPIs.length > 0) {\n                        <div class=\"cost-kpi-row\">\n                            @for (kpi of CostKPIs; track kpi.Label) {\n                                <div class=\"cost-kpi-card\">\n                                    <div class=\"cost-kpi-icon\"><i [class]=\"kpi.Icon\"></i></div>\n                                    <div>\n                                        <div class=\"cost-kpi-value\">{{ kpi.Value }}</div>\n                                        <div class=\"cost-kpi-label\">{{ kpi.Label }}</div>\n                                        <div class=\"cost-kpi-sub\">{{ kpi.SubLabel }}</div>\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n\n                    <!-- Per-Run Cost Table -->\n                    <div class=\"sub-section\">\n                        <h3><i class=\"fa-solid fa-table\"></i> Cost Breakdown by Run</h3>\n                        @if (CostPerRunRows.length > 0) {\n                            <div class=\"table-scroll\">\n                                <table class=\"data-table\">\n                                    <thead>\n                                        <tr>\n                                            <th>Run ID</th>\n                                            <th>Source</th>\n                                            <th class=\"num\">Tokens</th>\n                                            <th class=\"num\">Cost</th>\n                                            <th>Started</th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        @for (row of CostPerRunRows; track row.RunID) {\n                                            <tr>\n                                                <td class=\"monospace-cell\">{{ row.RunID }}</td>\n                                                <td>{{ row.Source }}</td>\n                                                <td class=\"num\">{{ FormatNumber(row.Tokens) }}</td>\n                                                <td class=\"num\">{{ row.Cost > 0 ? '$' + row.Cost.toFixed(4) : '$0.00' }}</td>\n                                                <td class=\"muted\">{{ row.Started }}</td>\n                                            </tr>\n                                        }\n                                    </tbody>\n                                </table>\n                            </div>\n                        } @else {\n                            <div class=\"empty-state\">\n                                <i class=\"fa-solid fa-coins\"></i>\n                                <p>No cost data available yet. Run the pipeline to generate cost and token usage metrics.</p>\n                                <p class=\"empty-state-hint\">Cost data is aggregated from ContentProcessRunDetail records linked to AI Prompt Runs.</p>\n                            </div>\n                        }\n                    </div>\n                </section>\n            }\n\n        </div><!-- /main-content -->\n        </mj-left-nav-content>\n    </div><!-- /analytics-layout -->\n}\n  </mj-page-body>\n</mj-page-layout>\n", styles: ["/* ===================================================================\n   Analytics & Insights Resource Component\n   ================================================================= */\n\n.analytics-loading {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 400px;\n}\n\n/*\n  Layout \u2014 <mj-left-nav> rail (with trending tags in [footer]) +\n  <mj-left-nav-content>. The shared primitives own the rail's width, nav-item\n  styling, sections, and busy state. Only the trending-section + tag-cloud\n  styling stays bespoke (it's projected content, not nav chrome).\n*/\n.analytics-layout {\n    display: flex;\n    flex: 1;\n    min-height: 0;\n}\n\n.trending-section {\n    padding: 12px 16px 16px;\n}\n\n.trending-section h3 {\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: var(--mj-text-muted);\n    margin: 0 0 10px;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.tag-cloud {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px 6px;\n    line-height: 1.7;\n}\n\n.tag-cloud span {\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    transition: opacity 0.15s;\n}\n\n.tag-cloud span:hover {\n    opacity: 0.7;\n}\n\n.no-trending {\n    color: var(--mj-text-muted) !important;\n    font-size: 12px !important;\n    font-style: italic;\n}\n\n.pipeline-status {\n    padding: 12px 16px;\n    border-top: 1px solid var(--mj-border-default);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 11.5px;\n    color: var(--mj-text-muted);\n}\n\n.status-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: var(--mj-status-success);\n    flex-shrink: 0;\n}\n\n.status-dot-error {\n    background: var(--mj-status-error);\n}\n\n/* ===== MAIN CONTENT ===== */\n.main-content {\n    flex: 1;\n    overflow-y: auto;\n    min-width: 0;\n}\n\n.tab-section {\n    padding: 28px 32px 40px;\n}\n\n.tab-section-header {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 20px;\n    padding-bottom: 12px;\n    border-bottom: 2px solid var(--mj-brand-primary);\n}\n\n.tab-section-header i {\n    font-size: 18px;\n    color: var(--mj-brand-primary);\n}\n\n.tab-section-header h1 {\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0;\n}\n\n/* ===== FILTER BAR ===== */\n.filter-bar {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 20px;\n    flex-wrap: wrap;\n}\n\n.date-chips {\n    display: flex;\n    gap: 0;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.date-chip {\n    padding: 6px 14px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n    border: none;\n    border-right: 1px solid var(--mj-border-default);\n    transition: all 0.15s;\n    font-family: inherit;\n}\n\n.date-chip:last-child {\n    border-right: none;\n}\n\n.date-chip:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.date-chip.active {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.filter-dropdown {\n    padding: 6px 12px;\n    font-size: 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    font-family: inherit;\n}\n\n/* ===== KPI CARDS ===== */\n.kpi-row {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.kpi-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 16px 18px;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    transition: transform 0.15s, box-shadow 0.15s;\n    cursor: pointer;\n}\n\n.kpi-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.kpi-label {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-muted);\n    margin-bottom: 4px;\n}\n\n.kpi-value {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1.1;\n}\n\n.kpi-delta {\n    font-size: 11px;\n    font-weight: 500;\n    margin-top: 4px;\n    color: var(--mj-text-muted);\n}\n\n.kpi-delta.up {\n    color: var(--mj-status-success);\n}\n\n.kpi-delta.down {\n    color: var(--mj-status-error);\n}\n\n.kpi-sparkline {\n    flex-shrink: 0;\n    margin-left: 12px;\n    margin-top: 6px;\n}\n\n/* ===== CARDS GRID ===== */\n.cards-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 16px;\n}\n\n.widget-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 18px 20px;\n    transition: transform 0.15s, box-shadow 0.15s;\n    cursor: pointer;\n}\n\n.widget-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.widget-title {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin-bottom: 14px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.widget-title i {\n    color: var(--mj-brand-primary);\n    font-size: 12px;\n}\n\n.widget-empty {\n    text-align: center;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    padding: 20px;\n}\n\n.widget-footnote {\n    text-align: center;\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    margin-top: 10px;\n}\n\n/* ===== BAR CHART ===== */\n.bar-chart {\n    display: flex;\n    align-items: flex-end;\n    gap: 8px;\n    height: 120px;\n    padding-top: 10px;\n}\n\n.bar-col {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n    justify-content: flex-end;\n}\n\n.bar {\n    width: 100%;\n    border-radius: 4px 4px 0 0;\n    transition: height 0.3s;\n    min-height: 2px;\n}\n\n.bar-label {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    margin-top: 6px;\n}\n\n.bar-value {\n    font-size: 10px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin-bottom: 4px;\n}\n\n/* ===== PROGRESS RINGS ===== */\n.rings-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n}\n\n.ring-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 6px 0;\n}\n\n.ring-label {\n    font-size: 12px;\n    color: var(--mj-text-primary);\n    font-weight: 500;\n}\n\n.ring-stat {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n/* ===== GAUGE ===== */\n.gauge-container {\n    display: flex;\n    justify-content: center;\n    margin-bottom: 8px;\n}\n\n/* ===== MINI HISTOGRAM ===== */\n.mini-histogram {\n    display: flex;\n    align-items: flex-end;\n    gap: 3px;\n    height: 32px;\n    justify-content: center;\n}\n\n.mini-hist-bar {\n    width: 14px;\n    border-radius: 2px;\n}\n\n.mini-hist-label {\n    text-align: center;\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    margin-top: 4px;\n}\n\n/* ===== HORIZONTAL BARS ===== */\n.h-bar-list {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.h-bar-row {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.h-bar-name {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    width: 100px;\n    flex-shrink: 0;\n    text-align: right;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.h-bar-track {\n    flex: 1;\n    height: 20px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 4px;\n    overflow: hidden;\n}\n\n.h-bar-fill {\n    height: 100%;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    padding-left: 8px;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-text-inverse);\n    min-width: 36px;\n}\n\n/* ===== THROUGHPUT BARS ===== */\n.throughput-bars {\n    display: flex;\n    align-items: flex-end;\n    gap: 4px;\n    height: 110px;\n    margin-bottom: 22px;\n}\n\n.tp-bar {\n    flex: 1;\n    border-radius: 3px 3px 0 0;\n    position: relative;\n    min-height: 4px;\n}\n\n.tp-bar-label {\n    position: absolute;\n    bottom: -18px;\n    left: 50%;\n    transform: translateX(-50%);\n    font-size: 8px;\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n}\n\n/* ===== TAXONOMY ===== */\n.taxonomy-ring-container {\n    display: flex;\n    justify-content: center;\n}\n\n.taxonomy-stats {\n    display: flex;\n    gap: 8px;\n    margin-top: 12px;\n}\n\n.tax-stat {\n    flex: 1;\n    text-align: center;\n    padding: 8px 4px;\n    border-radius: 6px;\n    font-size: 20px;\n    font-weight: 700;\n}\n\n.tax-stat small {\n    display: block;\n    font-size: 10px;\n    font-weight: 500;\n    margin-top: 2px;\n}\n\n/* ===== LEGEND ===== */\n.legend {\n    display: flex;\n    gap: 16px;\n    margin-top: 10px;\n    flex-wrap: wrap;\n    justify-content: center;\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n.legend-dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 3px;\n    flex-shrink: 0;\n}\n\n/* ===== DATA TABLES ===== */\n.table-scroll {\n    overflow-x: auto;\n}\n\n.data-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 12.5px;\n}\n\n.data-table thead th {\n    text-align: left;\n    padding: 10px 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--mj-text-muted);\n    border-bottom: 2px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n    white-space: nowrap;\n}\n\n.data-table tbody td {\n    padding: 10px 12px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-primary);\n    vertical-align: middle;\n}\n\n.data-table tbody tr:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.data-table .num {\n    text-align: right;\n    font-variant-numeric: tabular-nums;\n}\n\n.muted {\n    color: var(--mj-text-muted);\n}\n\n.monospace-cell {\n    font-family: monospace;\n    font-size: 11px;\n    color: var(--mj-brand-primary);\n}\n\n.weight-bar {\n    display: inline-block;\n    height: 6px;\n    border-radius: 3px;\n    vertical-align: middle;\n    margin-right: 6px;\n}\n\n/* ===== BADGES ===== */\n.badge {\n    display: inline-block;\n    padding: 2px 8px;\n    border-radius: 10px;\n    font-size: 10.5px;\n    font-weight: 600;\n}\n\n.badge-success {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.badge-warning {\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.badge-error {\n    background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.badge-info {\n    background: color-mix(in srgb, var(--mj-status-info) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-info);\n}\n\n/* ===== SUB-SECTIONS ===== */\n.sub-section {\n    margin-top: 24px;\n}\n\n.sub-section h3 {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 12px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.sub-section h3 i {\n    font-size: 13px;\n    color: var(--mj-brand-primary);\n}\n\n/* ===== EMPTY STATE ===== */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 3rem 2rem;\n    text-align: center;\n    gap: 0.75rem;\n    border: 2px dashed var(--mj-border-default);\n    border-radius: 12px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n}\n\n.empty-state i {\n    font-size: 2.5rem;\n    color: var(--mj-text-disabled);\n}\n\n.empty-state p {\n    margin: 0;\n    font-size: 0.85rem;\n    max-width: 400px;\n}\n\n/* ===== DRILL-DOWN PANEL ===== */\n.drill-down-panel {\n    margin-top: 16px;\n    margin-bottom: 16px;\n    background: var(--mj-bg-surface);\n    border: 2px solid var(--mj-brand-primary);\n    border-radius: 10px;\n    overflow: hidden;\n    animation: slideDown 0.2s ease-out;\n}\n\n@keyframes slideDown {\n    from {\n        opacity: 0;\n        max-height: 0;\n    }\n    to {\n        opacity: 1;\n        max-height: 600px;\n    }\n}\n\n.drill-down-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 16px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.drill-down-title {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.drill-down-close {\n    border: none;\n    background: transparent;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    font-size: 14px;\n    padding: 4px 8px;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.drill-down-close:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n.drill-down-table-wrap {\n    max-height: 400px;\n    overflow-y: auto;\n    padding: 8px;\n}\n\n.drill-action-col {\n    width: 40px;\n    text-align: center;\n    padding: 6px !important;\n}\n\n.drill-open-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 26px;\n    height: 26px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 5px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 10px;\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.drill-open-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n.drill-down-header-actions {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.drill-export-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 5px;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    font-size: 11px;\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.drill-export-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n.sub-section-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 0;\n}\n\n.sub-section-header h3 {\n    margin: 0;\n}\n\n.drill-down-empty {\n    padding: 24px;\n    text-align: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n/* ===== STACKED BAR CHART ===== */\n.stacked-bar-chart {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.stacked-row {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.stacked-label {\n    width: 90px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    text-align: right;\n    flex-shrink: 0;\n}\n\n.stacked-track {\n    flex: 1;\n    height: 22px;\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n}\n\n.stacked-seg {\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 9px;\n    font-weight: 600;\n    color: var(--mj-text-inverse);\n    min-width: 20px;\n}\n\n/* ===== VERTICAL BAR CHART ===== */\n.v-bar-chart {\n    display: flex;\n    align-items: flex-end;\n    gap: 24px;\n    height: 140px;\n    padding-top: 10px;\n    justify-content: center;\n}\n\n.v-bar-col {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n    justify-content: flex-end;\n    min-width: 60px;\n}\n\n.v-bar {\n    width: 48px;\n    border-radius: 4px 4px 0 0;\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    padding-top: 4px;\n    font-size: 11px;\n    font-weight: 700;\n    color: var(--mj-text-inverse);\n}\n\n.v-bar-label {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    margin-top: 8px;\n    text-align: center;\n}\n\n.chart-footnote {\n    text-align: center;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    margin-top: 14px;\n}\n\n/* ===== TWO COLUMN ===== */\n.two-col {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 20px;\n}\n\n/* ===== SOURCE SELECTED ===== */\n.source-selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n/* ===== QUALITY BANDS ===== */\n.quality-bands {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.quality-band-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.quality-band-label {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    width: 65px;\n    text-align: right;\n    flex-shrink: 0;\n}\n\n.quality-band-track {\n    flex: 1;\n    height: 18px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 4px;\n    overflow: hidden;\n}\n\n.quality-band-fill {\n    height: 100%;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    padding-left: 8px;\n    font-size: 10px;\n    font-weight: 600;\n    color: var(--mj-text-inverse);\n    min-width: 30px;\n}\n\n.source-quality-note {\n    margin-top: 14px;\n    padding: 10px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n}\n\n/* ===== SOURCE HEALTH ===== */\n.source-health-grid {\n    display: grid;\n    gap: 12px;\n}\n\n.source-health-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 14px;\n    text-align: center;\n    border-top: 3px solid;\n}\n\n.health-card-name {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    margin-bottom: 4px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.health-card-value {\n    font-size: 22px;\n    font-weight: 700;\n}\n\n.health-card-label {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n}\n\n/* ===== PIPELINE ===== */\n.pipeline-throughput-bars {\n    display: flex;\n    align-items: flex-end;\n    gap: 3px;\n    height: 110px;\n}\n\n.pipeline-bar {\n    flex: 1;\n    border-radius: 2px 2px 0 0;\n    min-height: 3px;\n}\n\n.pipeline-date-labels {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 6px;\n    font-size: 10px;\n    color: var(--mj-text-muted);\n}\n\n/* ===== PROCESSING STAGES ===== */\n.stage-bars {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.stage-row {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.stage-name {\n    width: 80px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    text-align: right;\n    flex-shrink: 0;\n}\n\n.stage-track {\n    flex: 1;\n    height: 24px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 4px;\n    overflow: hidden;\n}\n\n.stage-fill {\n    height: 100%;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    padding-right: 8px;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-text-inverse);\n}\n\n.stage-time {\n    width: 50px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    text-align: right;\n    flex-shrink: 0;\n}\n\n.stage-summary {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 14px;\n    padding-top: 10px;\n    border-top: 1px solid var(--mj-border-default);\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.stage-warning {\n    color: var(--mj-text-muted);\n}\n\n/* ===== SUCCESS RATE ===== */\n.success-rate-display {\n    display: flex;\n    justify-content: center;\n    gap: 48px;\n    padding: 20px;\n}\n\n.success-rate-stat {\n    text-align: center;\n}\n\n.success-rate-value {\n    font-size: 32px;\n    font-weight: 700;\n    line-height: 1.1;\n}\n\n.success-rate-label {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    margin-top: 4px;\n}\n\n/* ===== PROGRESS ===== */\n.progress-track {\n    width: 100px;\n    height: 6px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 3px;\n    overflow: hidden;\n    display: inline-block;\n    vertical-align: middle;\n    margin-right: 6px;\n}\n\n.progress-fill {\n    height: 100%;\n    border-radius: 3px;\n}\n\n.progress-text {\n    font-size: 11px;\n    font-weight: 600;\n}\n\n/* ===== ERROR LOG ===== */\n.error-log {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.error-entry {\n    display: flex;\n    gap: 12px;\n    padding: 10px 14px;\n    background: color-mix(in srgb, var(--mj-status-error) 4%, var(--mj-bg-surface));\n    border-left: 3px solid var(--mj-status-error);\n    border-radius: 0 6px 6px 0;\n    font-size: 12px;\n}\n\n.error-time {\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    white-space: nowrap;\n    flex-shrink: 0;\n    width: 130px;\n}\n\n.error-source {\n    color: var(--mj-brand-primary);\n    font-weight: 600;\n    flex-shrink: 0;\n    width: 120px;\n}\n\n.error-msg {\n    color: var(--mj-text-secondary);\n}\n\n/* ===== HISTOGRAM ===== */\n.histogram {\n    display: flex;\n    align-items: flex-end;\n    gap: 6px;\n    height: 130px;\n    padding-bottom: 24px;\n}\n\n.hist-bar-col {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n    justify-content: flex-end;\n}\n\n.hist-bar {\n    width: 100%;\n    border-radius: 3px 3px 0 0;\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    padding-top: 3px;\n    font-size: 10px;\n    font-weight: 600;\n    color: var(--mj-text-inverse);\n    min-height: 2px;\n}\n\n.hist-label {\n    font-size: 9px;\n    color: var(--mj-text-muted);\n    margin-top: 6px;\n    text-align: center;\n}\n\n.confidence-stats {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 8px;\n    padding: 10px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n/* ===== GROUPED BAR CHART ===== */\n.grouped-bar-chart {\n    display: flex;\n    align-items: flex-end;\n    gap: 20px;\n    height: 140px;\n    justify-content: center;\n}\n\n.grouped-col {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n    justify-content: flex-end;\n}\n\n.grouped-bars {\n    display: flex;\n    gap: 3px;\n    align-items: flex-end;\n    height: 100%;\n}\n\n.g-bar {\n    width: 18px;\n    border-radius: 3px 3px 0 0;\n    min-height: 2px;\n}\n\n.grouped-label {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    margin-top: 6px;\n    text-align: center;\n}\n\n/* ===== ACCURACY CHART ===== */\n.accuracy-chart {\n    position: relative;\n    display: flex;\n    margin: 0 10px;\n}\n\n.accuracy-y-labels {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    font-size: 9px;\n    color: var(--mj-text-muted);\n    margin-right: 8px;\n    height: 110px;\n}\n\n.accuracy-area {\n    flex: 1;\n    position: relative;\n    height: 110px;\n    border-left: 1px solid var(--mj-border-default);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.accuracy-grid-line {\n    position: absolute;\n    left: 0;\n    right: 0;\n    border-top: 1px dashed var(--mj-border-subtle);\n}\n\n.accuracy-svg {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n}\n\n.accuracy-x-labels {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 8px;\n    padding: 0 40px 0 40px;\n    font-size: 10px;\n    color: var(--mj-text-muted);\n}\n\n.accuracy-trend-text {\n    text-align: center;\n    margin-top: 10px;\n    font-size: 12px;\n    color: var(--mj-status-success);\n}\n\n/* ===== MODEL COMPARISON ===== */\n.model-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 12px;\n}\n\n.model-card {\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    padding: 14px;\n    text-align: center;\n    border: 1px solid var(--mj-border-default);\n}\n\n.model-name {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin-bottom: 8px;\n}\n\n.model-score {\n    font-size: 28px;\n    font-weight: 700;\n    line-height: 1;\n}\n\n.model-detail {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    margin-top: 4px;\n}\n\n.model-recommendation {\n    margin-top: 14px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n/* ===== RESPONSIVE ===== */\n@media (max-width: 1200px) {\n    .cards-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .kpi-row {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .model-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (max-width: 768px) {\n    .analytics-layout {\n        flex-direction: column;\n    }\n\n    .analytics-sidebar {\n        width: 100%;\n        min-width: 100%;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .sidebar-nav {\n        flex-direction: row;\n        overflow-x: auto;\n    }\n\n    .nav-item {\n        border-left: none;\n        border-bottom: 3px solid transparent;\n        white-space: nowrap;\n    }\n\n    .nav-item.active {\n        border-left-color: transparent;\n        border-bottom-color: var(--mj-brand-primary);\n    }\n\n    .trending-section,\n    .sidebar-divider {\n        display: none;\n    }\n\n    .tab-section {\n        padding: 16px;\n    }\n\n    .cards-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .kpi-row {\n        grid-template-columns: 1fr;\n    }\n\n    .two-col {\n        grid-template-columns: 1fr;\n    }\n\n    .cost-kpi-row {\n        grid-template-columns: 1fr;\n    }\n}\n\n/* ===== COST & USAGE TAB (D1) ===== */\n\n.tab-header-actions {\n    display: flex;\n    gap: 8px;\n    margin-left: auto;\n}\n\n.cost-kpi-row {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.cost-kpi-card {\n    display: flex;\n    gap: 14px;\n    align-items: center;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    padding: 18px 20px;\n    transition: box-shadow 0.15s ease;\n}\n\n.cost-kpi-card:hover {\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.cost-kpi-icon {\n    width: 44px;\n    height: 44px;\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 18px;\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    flex-shrink: 0;\n}\n\n.cost-kpi-value {\n    font-size: 22px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1.2;\n}\n\n.cost-kpi-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.03em;\n}\n\n.cost-kpi-sub {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n\n.empty-state-hint {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    margin-top: 4px;\n}\n\n/* ===== D5: PRINT STYLES ===== */\n\n@media print {\n    .analytics-sidebar,\n    .filter-bar,\n    .tab-header-actions,\n    .drill-down-close,\n    .drill-export-btn,\n    .drill-open-btn {\n        display: none !important;\n    }\n\n    .analytics-layout {\n        display: block;\n    }\n\n    .main-content {\n        padding: 0;\n    }\n\n    .tab-section {\n        padding: 0;\n    }\n\n    .widget-card,\n    .cost-kpi-card,\n    .kpi-card {\n        break-inside: avoid;\n        box-shadow: none;\n        border: 1px solid var(--mj-border-default);\n    }\n\n    .data-table {\n        font-size: 10px;\n    }\n}\n\n/* \u2500\u2500 Co-Occurrence Section \u2500\u2500 */\n\n/* Constrain the co-occurrence sub-section so an empty state or large table\n   does not blow out the page height and render the app unusable. */\n.co-occurrence-section {\n    max-height: 500px;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n.co-occurrence-section .table-scroll {\n    overflow-y: auto;\n    max-height: 400px;\n    flex: 1;\n    min-height: 0;\n}\n\n.co-occurrence-section .empty-state {\n    max-height: 200px;\n    overflow: hidden;\n}\n\n.co-occurrence-actions {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.co-occurrence-staleness {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    font-size: 0.78rem;\n    color: var(--mj-text-muted);\n}\n"] }]
+        args: [{ standalone: false, selector: 'app-analytics-resource', template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Knowledge Hub Analytics\"\n    Icon=\"fa-solid fa-chart-line\"\n    Subtitle=\"Pipeline health, trending tags, and content insights\">\n    <div meta>\n      <mj-stat-badge\n        [Label]=\"PipelineStatusText\"\n        [Variant]=\"PipelineStatusOk ? 'success' : 'error'\">\n      </mj-stat-badge>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body [Flex]=\"true\" [Padding]=\"false\">\n@if (IsLoading) {\n    <div class=\"analytics-loading\">\n        <mj-loading text=\"Loading analytics data...\" size=\"medium\"></mj-loading>\n    </div>\n} @else {\n    <div class=\"analytics-layout\">\n        <mj-left-nav\n            MobileTitle=\"Analytics\"\n            [Sections]=\"navSections\"\n            [ActiveId]=\"ActiveTab\"\n            (ItemClicked)=\"onNavItemClicked($event)\">\n            <!-- Trending Tags Cloud projected into the rail's footer slot. -->\n            <div footer class=\"trending-section\">\n                <h3><i class=\"fa-solid fa-arrow-trend-up\"></i> Trending Tags</h3>\n                <div class=\"tag-cloud\">\n                    @for (tag of TrendingTags; track tag.Name) {\n                        <span [style.font-size.px]=\"tag.Size\" [style.font-weight]=\"tag.Weight\">{{ tag.Name }}</span>\n                    }\n                    @if (TrendingTags.length === 0) {\n                        <span class=\"no-trending\">No trending tags yet</span>\n                    }\n                </div>\n            </div>\n        </mj-left-nav>\n\n        <mj-left-nav-content>\n        <div class=\"main-content\">\n\n            <!-- ====================================================== -->\n            <!-- TAB 1: OVERVIEW                                        -->\n            <!-- ====================================================== -->\n            @if (ActiveTab === 'overview') {\n                <section class=\"tab-section\">\n                    <div class=\"tab-section-header\">\n                        <i class=\"fa-solid fa-grip\"></i>\n                        <h1>Overview</h1>\n                    </div>\n\n                    <!-- Filter Bar -->\n                    <div class=\"filter-bar\">\n                        <div class=\"date-chips\">\n                            @for (range of DateRanges; track range.Label) {\n                                <button\n                                    class=\"date-chip\"\n                                    [class.active]=\"ActiveDateRange === range.Label\"\n                                    (click)=\"SetDateRange(range.Label)\"\n                                >{{ range.Label }}</button>\n                            }\n                        </div>\n                        <select class=\"filter-dropdown\" [ngModel]=\"EntityFilter\" (ngModelChange)=\"SetEntityFilter($event)\">\n                            @for (opt of EntityFilterOptions; track opt) {\n                                <option [value]=\"opt\">{{ opt }}</option>\n                            }\n                        </select>\n                    </div>\n\n                    <!-- KPI Cards -->\n                    <div class=\"kpi-row\">\n                        @for (kpi of KPIs; track kpi.Label) {\n                            <div class=\"kpi-card\" (click)=\"OpenDrillDown(kpi.DrillDownKey)\">\n                                <div>\n                                    <div class=\"kpi-label\">{{ kpi.Label }}</div>\n                                    <div class=\"kpi-value\">{{ kpi.Value }}</div>\n                                    <div class=\"kpi-delta\" [class.up]=\"kpi.DeltaDirection === 'up'\" [class.down]=\"kpi.DeltaDirection === 'down'\">\n                                        @if (kpi.DeltaDirection === 'up') {\n                                            <i class=\"fa-solid fa-arrow-up\" style=\"font-size:9px\"></i>\n                                        } @else if (kpi.DeltaDirection === 'down') {\n                                            <i class=\"fa-solid fa-arrow-down\" style=\"font-size:9px\"></i>\n                                        }\n                                        {{ kpi.Delta }}\n                                    </div>\n                                </div>\n                                <div class=\"kpi-sparkline\">\n                                    <svg width=\"64\" height=\"28\" viewBox=\"0 0 64 28\">\n                                        <polyline [attr.points]=\"kpi.SparklinePoints\" fill=\"none\" [attr.stroke]=\"kpi.SparklineColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                    </svg>\n                                </div>\n                            </div>\n                        }\n                    </div>\n\n                    <!-- KPI Drill-Down -->\n                    @if (DrillDownTarget && DrillDownTarget.startsWith('kpi-')) {\n                        <div class=\"drill-down-panel\">\n                            <div class=\"drill-down-header\">\n                                <span class=\"drill-down-title\"><i class=\"fa-solid fa-table\"></i> Detail View</span>\n                                <div class=\"drill-down-header-actions\">\n                                    @if (DrillDownData.length > 0) {\n                                        <button class=\"drill-export-btn\" (click)=\"ExportDrillDownCSV()\" title=\"Export CSV\">\n                                            <i class=\"fa-solid fa-download\"></i> CSV\n                                        </button>\n                                    }\n                                    <button class=\"drill-down-close\" aria-label=\"Close drill-down\" (click)=\"CloseDrillDown()\">\n                                        <i class=\"fa-solid fa-times\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            @if (IsDrillDownLoading) {\n                                <mj-loading text=\"Loading details...\" size=\"small\"></mj-loading>\n                            } @else if (DrillDownData.length > 0) {\n                                <div class=\"drill-down-table-wrap\">\n                                    <table class=\"data-table\">\n                                        <thead>\n                                            <tr>\n                                                @for (col of DrillDownColumns; track col) {\n                                                    <th>{{ col }}</th>\n                                                }\n                                                @if (DrillDownHasActions) {\n                                                    <th class=\"drill-action-col\"></th>\n                                                }\n                                            </tr>\n                                        </thead>\n                                        <tbody>\n                                            @for (row of DrillDownData; track TrackByIndex($index)) {\n                                                <tr>\n                                                    @for (col of DrillDownColumns; track col) {\n                                                        <td>{{ row[col] }}</td>\n                                                    }\n                                                    @if (DrillDownHasActions) {\n                                                        <td class=\"drill-action-col\">\n                                                            @if (row['_RecordID']) {\n                                                                <button class=\"drill-open-btn\" (click)=\"OpenDrillDownRecord(row)\" title=\"Open record\">\n                                                                    <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                                                                </button>\n                                                            }\n                                                        </td>\n                                                    }\n                                                </tr>\n                                            }\n                                        </tbody>\n                                    </table>\n                                </div>\n                            } @else {\n                                <div class=\"drill-down-empty\">No data available</div>\n                            }\n                        </div>\n                    }\n\n                    <!-- Widget Cards Grid (2x3) -->\n                    <div class=\"cards-grid\">\n\n                        <!-- Card 1: Tag Growth -->\n                        <div class=\"widget-card\" (click)=\"OpenDrillDown('tagGrowth')\">\n                            <div class=\"widget-title\"><i class=\"fa-solid fa-chart-line\"></i> Tag Growth</div>\n                            <div class=\"bar-chart\">\n                                @for (bar of TagGrowthData; track bar.Label) {\n                                    <div class=\"bar-col\">\n                                        <div class=\"bar-value\">{{ bar.Count }}</div>\n                                        <div class=\"bar\" [style.height.%]=\"bar.Percentage\" style=\"background:var(--mj-brand-primary)\" [style.opacity]=\"0.5 + (bar.Percentage / 200)\"></div>\n                                        <div class=\"bar-label\">{{ bar.Label }}</div>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Card 2: Content Coverage -->\n                        <div class=\"widget-card\" (click)=\"OpenDrillDown('contentCoverage')\">\n                            <div class=\"widget-title\"><i class=\"fa-solid fa-bullseye\"></i> Content Coverage</div>\n                            <div class=\"rings-grid\">\n                                @for (entity of CoverageData; track entity.Name) {\n                                    <div class=\"ring-item\">\n                                        <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n                                            <circle cx=\"24\" cy=\"24\" r=\"20\" fill=\"none\" stroke=\"var(--mj-border-default)\" stroke-width=\"5\"/>\n                                            <circle cx=\"24\" cy=\"24\" r=\"20\" fill=\"none\" [attr.stroke]=\"entity.Color\" stroke-width=\"5\"\n                                                [attr.stroke-dasharray]=\"entity.StrokeDash\" stroke-dashoffset=\"31.4\" stroke-linecap=\"round\"\n                                                transform=\"rotate(-90 24 24)\"/>\n                                            <text x=\"24\" y=\"26\" text-anchor=\"middle\" font-size=\"11\" font-weight=\"700\" fill=\"var(--mj-text-primary)\">{{ entity.Percentage }}%</text>\n                                        </svg>\n                                        <div>\n                                            <div class=\"ring-label\">{{ entity.Name }}</div>\n                                            <div class=\"ring-stat\">{{ FormatNumber(entity.Tagged) }} / {{ FormatNumber(entity.Total) }}</div>\n                                        </div>\n                                    </div>\n                                }\n                                @if (CoverageData.length === 0) {\n                                    <div class=\"widget-empty\">No content types found</div>\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Card 3: Quality Score Gauge -->\n                        <div class=\"widget-card\" (click)=\"OpenDrillDown('qualityScore')\">\n                            <div class=\"widget-title\"><i class=\"fa-solid fa-gauge-high\"></i> Quality Score</div>\n                            <div class=\"gauge-container\">\n                                <svg width=\"180\" height=\"110\" viewBox=\"0 0 180 110\">\n                                    <!-- Background arc -->\n                                    <path d=\"M 20 95 A 70 70 0 0 1 160 95\" fill=\"none\" stroke=\"var(--mj-border-default)\" stroke-width=\"14\" stroke-linecap=\"round\"/>\n                                    <!-- Zone arcs -->\n                                    <path d=\"M 20 95 A 70 70 0 0 1 48.6 35.2\" fill=\"none\" stroke=\"var(--mj-status-error)\" stroke-width=\"14\" stroke-linecap=\"round\" opacity=\"0.3\"/>\n                                    <path d=\"M 48.6 35.2 A 70 70 0 0 1 118 28\" fill=\"none\" stroke=\"var(--mj-status-warning)\" stroke-width=\"14\" opacity=\"0.3\"/>\n                                    <path d=\"M 118 28 A 70 70 0 0 1 160 95\" fill=\"none\" stroke=\"var(--mj-status-success)\" stroke-width=\"14\" stroke-linecap=\"round\" opacity=\"0.3\"/>\n                                    <!-- Score text -->\n                                    <text x=\"90\" y=\"88\" text-anchor=\"middle\" font-size=\"26\" font-weight=\"800\" fill=\"var(--mj-text-primary)\">{{ QualityScore }}</text>\n                                    <text x=\"90\" y=\"105\" text-anchor=\"middle\" font-size=\"10\" fill=\"var(--mj-text-muted)\">out of 100</text>\n                                    <text x=\"28\" y=\"108\" font-size=\"8\" fill=\"var(--mj-text-muted)\">0</text>\n                                    <text x=\"86\" y=\"18\" font-size=\"8\" fill=\"var(--mj-text-muted)\">50</text>\n                                    <text x=\"155\" y=\"108\" font-size=\"8\" fill=\"var(--mj-text-muted)\">100</text>\n                                </svg>\n                            </div>\n                            <!-- Mini confidence histogram -->\n                            <div class=\"mini-histogram\">\n                                @for (bin of MiniConfidenceBins; track TrackByIndex($index)) {\n                                    <div class=\"mini-hist-bar\" [style.height.px]=\"bin.Height\" [style.background]=\"bin.Color\" [title]=\"bin.Title\"></div>\n                                }\n                            </div>\n                            <div class=\"mini-hist-label\">Confidence Distribution</div>\n                        </div>\n\n                        <!-- Card 4: Source Performance -->\n                        <div class=\"widget-card\" (click)=\"OpenDrillDown('sourcePerformance')\">\n                            <div class=\"widget-title\"><i class=\"fa-solid fa-ranking-star\"></i> Source Performance</div>\n                            <div class=\"h-bar-list\">\n                                @for (source of SourcePerfData; track source.Name) {\n                                    <div class=\"h-bar-row\">\n                                        <div class=\"h-bar-name\">{{ source.Name }}</div>\n                                        <div class=\"h-bar-track\">\n                                            <div class=\"h-bar-fill\" [style.width.%]=\"source.Percentage\" [style.background]=\"source.Color\">{{ source.AvgTagsPerItem }}</div>\n                                        </div>\n                                    </div>\n                                }\n                                @if (SourcePerfData.length === 0) {\n                                    <div class=\"widget-empty\">No source data</div>\n                                }\n                            </div>\n                            <div class=\"widget-footnote\">Average tags per item</div>\n                        </div>\n\n                        <!-- Card 5: Daily Throughput -->\n                        <div class=\"widget-card\" (click)=\"OpenDrillDown('dailyThroughput')\">\n                            <div class=\"widget-title\"><i class=\"fa-solid fa-bolt\"></i> Daily Throughput</div>\n                            <div class=\"throughput-bars\">\n                                @for (day of ThroughputData; track day.Label) {\n                                    <div class=\"tp-bar\"\n                                        [style.height.%]=\"day.Percentage\"\n                                        [style.background]=\"day.IsError ? 'var(--mj-status-error)' : 'var(--mj-status-success)'\"\n                                    >\n                                        <span class=\"tp-bar-label\">{{ day.Label }}</span>\n                                    </div>\n                                }\n                            </div>\n                            <div class=\"legend\">\n                                <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:var(--mj-status-success)\"></div> Success</div>\n                                <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:var(--mj-status-error)\"></div> Failures</div>\n                            </div>\n                        </div>\n\n                        <!-- Card 6: Taxonomy Health -->\n                        <div class=\"widget-card\" (click)=\"OpenDrillDown('taxonomyHealth')\">\n                            <div class=\"widget-title\"><i class=\"fa-solid fa-sitemap\"></i> Taxonomy Health</div>\n                            <div class=\"taxonomy-ring-container\">\n                                <svg width=\"140\" height=\"140\" viewBox=\"0 0 140 140\">\n                                    <circle cx=\"70\" cy=\"70\" r=\"54\" fill=\"none\" stroke=\"var(--mj-border-default)\" stroke-width=\"18\"/>\n                                    @for (seg of TaxonomyRingSegments; track TrackByIndex($index)) {\n                                        <circle cx=\"70\" cy=\"70\" r=\"54\" fill=\"none\"\n                                            [attr.stroke]=\"seg.Color\" stroke-width=\"18\"\n                                            [attr.stroke-dasharray]=\"seg.StrokeDash\"\n                                            [attr.stroke-dashoffset]=\"seg.StrokeOffset\"\n                                            transform=\"rotate(-90 70 70)\"/>\n                                    }\n                                    <text x=\"70\" y=\"66\" text-anchor=\"middle\" font-size=\"22\" font-weight=\"800\" fill=\"var(--mj-text-primary)\">{{ TaxonomyTotal }}</text>\n                                    <text x=\"70\" y=\"82\" text-anchor=\"middle\" font-size=\"10\" fill=\"var(--mj-text-muted)\">total tags</text>\n                                </svg>\n                            </div>\n                            <div class=\"taxonomy-stats\">\n                                @for (stat of TaxonomyStats; track stat.Label) {\n                                    <div class=\"tax-stat\" [style.background]=\"stat.BgColor\" [style.color]=\"stat.Color\">\n                                        {{ stat.Count }}<small>{{ stat.Label }}</small>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n\n                    </div><!-- /cards-grid -->\n\n                    <!-- Widget Drill-Down -->\n                    @if (DrillDownTarget && !DrillDownTarget.startsWith('kpi-')) {\n                        <div class=\"drill-down-panel\">\n                            <div class=\"drill-down-header\">\n                                <span class=\"drill-down-title\"><i class=\"fa-solid fa-table\"></i> {{ DrillDownTarget }} Detail</span>\n                                <button class=\"drill-down-close\" aria-label=\"Close drill-down\" (click)=\"CloseDrillDown()\">\n                                    <i class=\"fa-solid fa-times\"></i>\n                                </button>\n                            </div>\n                            @if (IsDrillDownLoading) {\n                                <mj-loading text=\"Loading details...\" size=\"small\"></mj-loading>\n                            } @else if (DrillDownData.length > 0) {\n                                <div class=\"drill-down-table-wrap\">\n                                    <table class=\"data-table\">\n                                        <thead>\n                                            <tr>\n                                                @for (col of DrillDownColumns; track col) {\n                                                    <th>{{ col }}</th>\n                                                }\n                                                @if (DrillDownHasActions) {\n                                                    <th class=\"drill-action-col\"></th>\n                                                }\n                                            </tr>\n                                        </thead>\n                                        <tbody>\n                                            @for (row of DrillDownData; track TrackByIndex($index)) {\n                                                <tr>\n                                                    @for (col of DrillDownColumns; track col) {\n                                                        <td>{{ row[col] }}</td>\n                                                    }\n                                                    @if (DrillDownHasActions) {\n                                                        <td class=\"drill-action-col\">\n                                                            @if (row['_RecordID']) {\n                                                                <button class=\"drill-open-btn\" (click)=\"OpenDrillDownRecord(row)\" title=\"Open record\">\n                                                                    <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                                                                </button>\n                                                            }\n                                                        </td>\n                                                    }\n                                                </tr>\n                                            }\n                                        </tbody>\n                                    </table>\n                                </div>\n                            } @else {\n                                <div class=\"drill-down-empty\">No data available</div>\n                            }\n                        </div>\n                    }\n                </section>\n            }\n\n            <!-- ====================================================== -->\n            <!-- TAB 2: TAGS                                            -->\n            <!-- ====================================================== -->\n            @if (ActiveTab === 'tags') {\n                <section class=\"tab-section\">\n                    <div class=\"tab-section-header\">\n                        <i class=\"fa-solid fa-tags\"></i>\n                        <h1>Tags</h1>\n                    </div>\n\n                    <!-- Top 20 Tags Table -->\n                    <div class=\"sub-section\" style=\"margin-top:0\">\n                        <div class=\"sub-section-header\">\n                            <h3><i class=\"fa-solid fa-trophy\"></i> Top 20 Tags</h3>\n                            @if (TopTags.length > 0) {\n                                <button class=\"drill-export-btn\" (click)=\"ExportTabDataCSV('top-tags')\" title=\"Export CSV\">\n                                    <i class=\"fa-solid fa-download\"></i> CSV\n                                </button>\n                            }\n                        </div>\n                        @if (TopTags.length > 0) {\n                            <div class=\"table-scroll\">\n                                <table class=\"data-table\">\n                                    <thead>\n                                        <tr>\n                                            <th>#</th>\n                                            <th>Tag Name</th>\n                                            <th class=\"num\">Usage Count</th>\n                                            <th>Avg Weight</th>\n                                            <th>Trend</th>\n                                            <th>Top Entity</th>\n                                            <th>First Seen</th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        @for (tag of TopTags; track tag.Name) {\n                                            <tr style=\"cursor:pointer\" (click)=\"OpenDrillDown('tag-row:' + tag.Name)\">\n                                                <td>{{ tag.Rank }}</td>\n                                                <td><strong>{{ tag.Name }}</strong></td>\n                                                <td class=\"num\">{{ FormatNumber(tag.UsageCount) }}</td>\n                                                <td>\n                                                    <span class=\"weight-bar\" [style.width.px]=\"tag.WeightBarWidth\" [style.background]=\"tag.WeightBarColor\"></span>\n                                                    {{ tag.AvgWeight }}\n                                                </td>\n                                                <td>\n                                                    <svg width=\"48\" height=\"16\">\n                                                        <polyline [attr.points]=\"tag.TrendPoints\" fill=\"none\" [attr.stroke]=\"tag.TrendColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                                                    </svg>\n                                                </td>\n                                                <td>{{ tag.TopEntity }}</td>\n                                                <td class=\"muted\">{{ tag.FirstSeen }}</td>\n                                            </tr>\n                                        }\n                                    </tbody>\n                                </table>\n                            </div>\n                        } @else {\n                            <div class=\"empty-state\">\n                                <i class=\"fa-solid fa-tags\"></i>\n                                <p>No tag data available yet. Process content to generate tags.</p>\n                            </div>\n                        }\n                    </div>\n\n                    <!-- D10: Tags tab drill-down -->\n                    @if (DrillDownTarget && DrillDownTarget.startsWith('tag-row:')) {\n                        <div class=\"drill-down-panel\">\n                            <div class=\"drill-down-header\">\n                                <span class=\"drill-down-title\"><i class=\"fa-solid fa-table\"></i> Content Items Tagged \"{{ DrillDownTarget.replace('tag-row:', '') }}\"</span>\n                                <div class=\"drill-down-header-actions\">\n                                    @if (DrillDownData.length > 0) {\n                                        <button class=\"drill-export-btn\" (click)=\"ExportDrillDownCSV()\" title=\"Export CSV\">\n                                            <i class=\"fa-solid fa-download\"></i> CSV\n                                        </button>\n                                    }\n                                    <button class=\"drill-down-close\" aria-label=\"Close drill-down\" (click)=\"CloseDrillDown()\"><i class=\"fa-solid fa-times\"></i></button>\n                                </div>\n                            </div>\n                            @if (IsDrillDownLoading) {\n                                <mj-loading text=\"Loading details...\" size=\"small\"></mj-loading>\n                            } @else if (DrillDownData.length > 0) {\n                                <div class=\"drill-down-table-wrap\">\n                                    <table class=\"data-table\">\n                                        <thead><tr>\n                                            @for (col of DrillDownColumns; track col) { <th>{{ col }}</th> }\n                                            @if (DrillDownHasActions) { <th class=\"drill-action-col\"></th> }\n                                        </tr></thead>\n                                        <tbody>\n                                            @for (row of DrillDownData; track TrackByIndex($index)) {\n                                                <tr>\n                                                    @for (col of DrillDownColumns; track col) { <td>{{ row[col] }}</td> }\n                                                    @if (DrillDownHasActions) {\n                                                        <td class=\"drill-action-col\">\n                                                            @if (row['_RecordID']) {\n                                                                <button class=\"drill-open-btn\" aria-label=\"Open record\" (click)=\"OpenDrillDownRecord(row)\" title=\"Open record\"><i class=\"fa-solid fa-arrow-up-right-from-square\"></i></button>\n                                                            }\n                                                        </td>\n                                                    }\n                                                </tr>\n                                            }\n                                        </tbody>\n                                    </table>\n                                </div>\n                            } @else {\n                                <div class=\"drill-down-empty\">No items found for this tag</div>\n                            }\n                        </div>\n                    }\n\n                    <!-- Tag Distribution by Entity -->\n                    @if (EntityDistribution.length > 0) {\n                        <div class=\"sub-section\">\n                            <h3><i class=\"fa-solid fa-chart-bar\"></i> Tag Distribution by Entity</h3>\n                            <div class=\"stacked-bar-chart\">\n                                @for (row of EntityDistribution; track row.EntityName) {\n                                    <div class=\"stacked-row\">\n                                        <div class=\"stacked-label\">{{ row.EntityName }}</div>\n                                        <div class=\"stacked-track\">\n                                            @for (seg of row.Segments; track TrackByIndex($index)) {\n                                                <div class=\"stacked-seg\" [style.width.%]=\"seg.Percentage\" [style.background]=\"seg.Color\" [title]=\"seg.Label + ': ' + seg.Percentage + '%'\">{{ seg.Label }}</div>\n                                            }\n                                        </div>\n                                    </div>\n                                }\n                            </div>\n                            <div class=\"legend\" style=\"margin-top:12px\">\n                                @for (item of DistributionLegend; track item.Label) {\n                                    <div class=\"legend-item\"><div class=\"legend-dot\" [style.background]=\"item.Color\"></div> {{ item.Label }}</div>\n                                }\n                            </div>\n                        </div>\n                    }\n\n                    <!-- Tag Depth Distribution -->\n                    @if (TagDepthBars.length > 0) {\n                        <div class=\"sub-section\">\n                            <h3><i class=\"fa-solid fa-layer-group\"></i> Tag Depth Distribution</h3>\n                            <div class=\"v-bar-chart\">\n                                @for (bar of TagDepthBars; track bar.Label) {\n                                    <div class=\"v-bar-col\">\n                                        <div class=\"v-bar\" [style.height.%]=\"bar.Percentage\" style=\"background:var(--mj-brand-primary)\" [style.min-height.px]=\"bar.Count > 0 ? 24 : 0\">{{ bar.Count }}</div>\n                                        <div class=\"v-bar-label\">{{ bar.Label }}</div>\n                                    </div>\n                                }\n                            </div>\n                            <div class=\"chart-footnote\">\n                                Taxonomy hierarchy depth -- Most tags at depth 2-3 indicating a healthy mid-level structure\n                            </div>\n                        </div>\n                    }\n\n                    <!-- Frequently Paired Tags (Co-Occurrence) -->\n                    <div class=\"sub-section co-occurrence-section\">\n                        <div class=\"sub-section-header\">\n                            <h3><i class=\"fa-solid fa-link\"></i> Frequently Paired Tags</h3>\n                            <div class=\"co-occurrence-actions\">\n                                @if (CoOccurrenceLastComputed) {\n                                    <span class=\"co-occurrence-staleness\" title=\"Last computed timestamp\">\n                                        <i class=\"fa-regular fa-clock\"></i>\n                                        Last computed: {{ CoOccurrenceLastComputed }}\n                                    </span>\n                                }\n                                <button class=\"drill-export-btn\" (click)=\"RecomputeCoOccurrence()\" [disabled]=\"IsRecomputingCoOccurrence\" title=\"Recompute co-occurrence data\">\n                                    @if (IsRecomputingCoOccurrence) {\n                                        <i class=\"fa-solid fa-spinner fa-spin\"></i> Computing...\n                                    } @else {\n                                        <i class=\"fa-solid fa-arrows-rotate\"></i> Recompute\n                                    }\n                                </button>\n                            </div>\n                        </div>\n                        @if (CoOccurrencePairs.length > 0) {\n                            <div class=\"table-scroll\">\n                                <table class=\"data-table\">\n                                    <thead>\n                                        <tr>\n                                            <th>#</th>\n                                            <th>Tag A</th>\n                                            <th>Tag B</th>\n                                            <th class=\"num\">Co-Occurrences</th>\n                                            <th>Frequency</th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        @for (pair of CoOccurrencePairs; track pair.TagAName + pair.TagBName; let i = $index) {\n                                            <tr>\n                                                <td class=\"muted\">{{ i + 1 }}</td>\n                                                <td><strong>{{ pair.TagAName }}</strong></td>\n                                                <td><strong>{{ pair.TagBName }}</strong></td>\n                                                <td class=\"num\">{{ FormatNumber(pair.Count) }}</td>\n                                                <td>\n                                                    <span class=\"weight-bar\" [style.width.px]=\"pair.BarWidth\" style=\"background: var(--mj-status-info)\"></span>\n                                                </td>\n                                            </tr>\n                                        }\n                                    </tbody>\n                                </table>\n                            </div>\n                        } @else {\n                            <div class=\"empty-state\">\n                                <i class=\"fa-solid fa-link\"></i>\n                                <p>No co-occurrence data available yet. Process content and recompute to see which tags frequently appear together.</p>\n                            </div>\n                        }\n                    </div>\n                </section>\n            }\n\n            <!-- ====================================================== -->\n            <!-- TAB 3: SOURCES                                         -->\n            <!-- ====================================================== -->\n            @if (ActiveTab === 'sources') {\n                <section class=\"tab-section\">\n                    <div class=\"tab-section-header\">\n                        <i class=\"fa-solid fa-database\"></i>\n                        <h1>Sources</h1>\n                    </div>\n\n                    <!-- Source Comparison Table -->\n                    <div class=\"sub-section\" style=\"margin-top:0\">\n                        <h3><i class=\"fa-solid fa-table\"></i> Source Comparison</h3>\n                        @if (SourceComparison.length > 0) {\n                            <div class=\"table-scroll\">\n                                <table class=\"data-table\">\n                                    <thead>\n                                        <tr>\n                                            <th>Source Name</th>\n                                            <th>Type</th>\n                                            <th class=\"num\">Items</th>\n                                            <th class=\"num\">Tags Generated</th>\n                                            <th class=\"num\">Avg Tags/Item</th>\n                                            <th class=\"num\">Avg Weight</th>\n                                            <th>Last Run</th>\n                                            <th>Status</th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        @for (source of SourceComparison; track source.Name) {\n                                            <tr (click)=\"SelectSource(source.Name); OpenDrillDown('source-row:' + source.Name)\" style=\"cursor:pointer\" [class.source-selected]=\"SelectedSourceName === source.Name\">\n                                                <td><strong>{{ source.Name }}</strong></td>\n                                                <td><i [class]=\"source.TypeIcon\" [style.color]=\"source.TypeColor\" style=\"margin-right:4px\"></i> {{ source.Type }}</td>\n                                                <td class=\"num\">{{ FormatNumber(source.Items) }}</td>\n                                                <td class=\"num\">{{ FormatNumber(source.TagsGenerated) }}</td>\n                                                <td class=\"num\">{{ source.AvgTagsPerItem }}</td>\n                                                <td class=\"num\">{{ source.AvgWeight }}</td>\n                                                <td class=\"muted\">{{ source.LastRun }}</td>\n                                                <td><span class=\"badge\" [class]=\"source.StatusClass\"><i class=\"fa-solid fa-circle\" style=\"font-size:6px;margin-right:3px\"></i> {{ source.Status }}</span></td>\n                                            </tr>\n                                        }\n                                    </tbody>\n                                </table>\n                            </div>\n                        } @else {\n                            <div class=\"empty-state\">\n                                <i class=\"fa-solid fa-database\"></i>\n                                <p>No content sources configured yet.</p>\n                            </div>\n                        }\n                    </div>\n\n                    <!-- D10: Sources tab drill-down (recent runs) -->\n                    @if (DrillDownTarget && DrillDownTarget.startsWith('source-row:')) {\n                        <div class=\"drill-down-panel\">\n                            <div class=\"drill-down-header\">\n                                <span class=\"drill-down-title\"><i class=\"fa-solid fa-table\"></i> Recent Runs: {{ DrillDownTarget.replace('source-row:', '') }}</span>\n                                <div class=\"drill-down-header-actions\">\n                                    @if (DrillDownData.length > 0) {\n                                        <button class=\"drill-export-btn\" (click)=\"ExportDrillDownCSV()\" title=\"Export CSV\"><i class=\"fa-solid fa-download\"></i> CSV</button>\n                                    }\n                                    <button class=\"drill-down-close\" aria-label=\"Close drill-down\" (click)=\"CloseDrillDown()\"><i class=\"fa-solid fa-times\"></i></button>\n                                </div>\n                            </div>\n                            @if (IsDrillDownLoading) {\n                                <mj-loading text=\"Loading details...\" size=\"small\"></mj-loading>\n                            } @else if (DrillDownData.length > 0) {\n                                <div class=\"drill-down-table-wrap\">\n                                    <table class=\"data-table\">\n                                        <thead><tr>\n                                            @for (col of DrillDownColumns; track col) { <th>{{ col }}</th> }\n                                            @if (DrillDownHasActions) { <th class=\"drill-action-col\"></th> }\n                                        </tr></thead>\n                                        <tbody>\n                                            @for (row of DrillDownData; track TrackByIndex($index)) {\n                                                <tr>\n                                                    @for (col of DrillDownColumns; track col) { <td>{{ row[col] }}</td> }\n                                                    @if (DrillDownHasActions) {\n                                                        <td class=\"drill-action-col\">\n                                                            @if (row['_RecordID']) {\n                                                                <button class=\"drill-open-btn\" aria-label=\"Open record\" (click)=\"OpenDrillDownRecord(row)\" title=\"Open record\"><i class=\"fa-solid fa-arrow-up-right-from-square\"></i></button>\n                                                            }\n                                                        </td>\n                                                    }\n                                                </tr>\n                                            }\n                                        </tbody>\n                                    </table>\n                                </div>\n                            } @else {\n                                <div class=\"drill-down-empty\">No run data for this source</div>\n                            }\n                        </div>\n                    }\n\n                    <!-- Per-Source Detail -->\n                    @if (SelectedSourceName && SourceComparison.length > 0) {\n                        <div class=\"sub-section\">\n                            <h3><i class=\"fa-solid fa-chart-area\"></i> Source Detail: {{ SelectedSourceName }}</h3>\n                            <div class=\"two-col\">\n                                <!-- Items Processed Over Time -->\n                                <div class=\"widget-card\">\n                                    <div class=\"widget-title\"><i class=\"fa-solid fa-chart-bar\"></i> Items Processed (Last 8 Weeks)</div>\n                                    <div class=\"bar-chart\" style=\"height:100px\">\n                                        @for (bar of SourceWeeklyBars; track bar.Label) {\n                                            <div class=\"bar-col\">\n                                                <div class=\"bar-value\" style=\"font-size:9px\">{{ bar.Value }}</div>\n                                                <div class=\"bar\" [style.height.%]=\"bar.Percentage\" style=\"background:var(--mj-brand-primary)\" [style.opacity]=\"0.5 + (bar.Percentage / 200)\"></div>\n                                                <div class=\"bar-label\">{{ bar.Label }}</div>\n                                            </div>\n                                        }\n                                    </div>\n                                </div>\n\n                                <!-- Tag Quality Distribution -->\n                                <div class=\"widget-card\">\n                                    <div class=\"widget-title\"><i class=\"fa-solid fa-star-half-stroke\"></i> Tag Quality Distribution</div>\n                                    <div class=\"quality-bands\">\n                                        @for (band of SourceQualityBands; track band.Label) {\n                                            <div class=\"quality-band-row\">\n                                                <span class=\"quality-band-label\">{{ band.Label }}</span>\n                                                <div class=\"quality-band-track\">\n                                                    <div class=\"quality-band-fill\" [style.width.%]=\"band.Percentage\" [style.background]=\"band.Color\">{{ band.Percentage }}%</div>\n                                                </div>\n                                            </div>\n                                        }\n                                    </div>\n                                    <div class=\"source-quality-note\">\n                                        <i class=\"fa-solid fa-circle-info\" style=\"color:var(--mj-status-info);margin-right:4px\"></i>\n                                        {{ SourceQualityNote }}\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    }\n\n                    <!-- Source Health -->\n                    @if (SourceHealthCards.length > 0) {\n                        <div class=\"sub-section\">\n                            <h3><i class=\"fa-solid fa-heart-pulse\"></i> Source Health Summary</h3>\n                            <div class=\"source-health-grid\" [style.grid-template-columns]=\"'repeat(' + SourceHealthCards.length + ', 1fr)'\">\n                                @for (card of SourceHealthCards; track card.Name) {\n                                    <div class=\"source-health-card\" [style.border-top-color]=\"card.Color\">\n                                        <div class=\"health-card-name\">{{ card.Name }}</div>\n                                        <div class=\"health-card-value\" [style.color]=\"card.Color\">{{ card.Uptime }}%</div>\n                                        <div class=\"health-card-label\">uptime</div>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n                    }\n                </section>\n            }\n\n            <!-- ====================================================== -->\n            <!-- TAB 4: PIPELINE                                        -->\n            <!-- ====================================================== -->\n            @if (ActiveTab === 'pipeline') {\n                <section class=\"tab-section\">\n                    <div class=\"tab-section-header\">\n                        <i class=\"fa-solid fa-gears\"></i>\n                        <h1>Pipeline</h1>\n                    </div>\n\n                    <!-- Pipeline Throughput Chart -->\n                    <div class=\"sub-section\" style=\"margin-top:0\">\n                        <h3><i class=\"fa-solid fa-chart-bar\"></i> Pipeline Throughput (Last 30 Days)</h3>\n                        <div class=\"widget-card\">\n                            <div class=\"pipeline-throughput-bars\">\n                                @for (bar of PipelineThroughputBars; track TrackByIndex($index)) {\n                                    <div class=\"pipeline-bar\"\n                                        [style.height.%]=\"bar.Percentage\"\n                                        [style.background]=\"bar.IsError ? 'var(--mj-status-error)' : 'var(--mj-brand-primary)'\"\n                                        [style.opacity]=\"bar.IsError ? 0.7 : (0.6 + bar.Percentage / 300)\"\n                                        style=\"cursor:pointer\"\n                                        (click)=\"OpenDrillDown('pipeline-throughput:' + $index)\"\n                                    ></div>\n                                }\n                            </div>\n                            <div class=\"pipeline-date-labels\">\n                                @for (label of PipelineDateLabels; track label) {\n                                    <span>{{ label }}</span>\n                                }\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- D10: Pipeline throughput drill-down -->\n                    @if (DrillDownTarget && DrillDownTarget.startsWith('pipeline-throughput:')) {\n                        <div class=\"drill-down-panel\">\n                            <div class=\"drill-down-header\">\n                                <span class=\"drill-down-title\"><i class=\"fa-solid fa-table\"></i> Runs for Selected Day</span>\n                                <div class=\"drill-down-header-actions\">\n                                    @if (DrillDownData.length > 0) {\n                                        <button class=\"drill-export-btn\" (click)=\"ExportDrillDownCSV()\" title=\"Export CSV\"><i class=\"fa-solid fa-download\"></i> CSV</button>\n                                    }\n                                    <button class=\"drill-down-close\" aria-label=\"Close drill-down\" (click)=\"CloseDrillDown()\"><i class=\"fa-solid fa-times\"></i></button>\n                                </div>\n                            </div>\n                            @if (IsDrillDownLoading) {\n                                <mj-loading text=\"Loading details...\" size=\"small\"></mj-loading>\n                            } @else if (DrillDownData.length > 0) {\n                                <div class=\"drill-down-table-wrap\">\n                                    <table class=\"data-table\">\n                                        <thead><tr>\n                                            @for (col of DrillDownColumns; track col) { <th>{{ col }}</th> }\n                                            @if (DrillDownHasActions) { <th class=\"drill-action-col\"></th> }\n                                        </tr></thead>\n                                        <tbody>\n                                            @for (row of DrillDownData; track TrackByIndex($index)) {\n                                                <tr>\n                                                    @for (col of DrillDownColumns; track col) { <td>{{ row[col] }}</td> }\n                                                    @if (DrillDownHasActions) {\n                                                        <td class=\"drill-action-col\">\n                                                            @if (row['_RecordID']) {\n                                                                <button class=\"drill-open-btn\" aria-label=\"Open record\" (click)=\"OpenDrillDownRecord(row)\" title=\"Open record\"><i class=\"fa-solid fa-arrow-up-right-from-square\"></i></button>\n                                                            }\n                                                        </td>\n                                                    }\n                                                </tr>\n                                            }\n                                        </tbody>\n                                    </table>\n                                </div>\n                            } @else {\n                                <div class=\"drill-down-empty\">No runs for this day</div>\n                            }\n                        </div>\n                    }\n\n                    <!-- Processing Time Breakdown -->\n                    <div class=\"sub-section\">\n                        <h3><i class=\"fa-solid fa-stopwatch\"></i> Processing Time Breakdown (Avg per Item)</h3>\n                        <div class=\"widget-card\">\n                            <div class=\"stage-bars\">\n                                @for (stage of ProcessingStages; track stage.Name) {\n                                    <div class=\"stage-row\">\n                                        <div class=\"stage-name\">{{ stage.Name }}</div>\n                                        <div class=\"stage-track\">\n                                            <div class=\"stage-fill\" [style.width.%]=\"stage.Percentage\" [style.background]=\"stage.Color\">\n                                                @if (stage.Percentage > 15) {\n                                                    {{ stage.Time }}s\n                                                }\n                                            </div>\n                                        </div>\n                                        <div class=\"stage-time\">{{ stage.Time }}s</div>\n                                    </div>\n                                }\n                            </div>\n                            <div class=\"stage-summary\">\n                                <span><strong>Total avg:</strong> {{ TotalAvgProcessingTime }}s per item</span>\n                                @if (BottleneckStage) {\n                                    <span class=\"stage-warning\">\n                                        <i class=\"fa-solid fa-triangle-exclamation\" style=\"color:var(--mj-status-warning);margin-right:4px\"></i>\n                                        {{ BottleneckStage }} stage is the bottleneck ({{ BottleneckPercent }}% of total time)\n                                    </span>\n                                }\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Success Rate -->\n                    <div class=\"sub-section\">\n                        <h3><i class=\"fa-solid fa-chart-line\"></i> Success Rate Overview</h3>\n                        <div class=\"widget-card\">\n                            <div class=\"success-rate-display\">\n                                <div class=\"success-rate-stat\">\n                                    <div class=\"success-rate-value\" style=\"color:var(--mj-status-success)\">\n                                        {{ rawProcessRuns.length > 0 ? (100 - (ErrorLog.length / rawProcessRuns.length * 100)).toFixed(1) : '100' }}%\n                                    </div>\n                                    <div class=\"success-rate-label\">Success Rate</div>\n                                </div>\n                                <div class=\"success-rate-stat\">\n                                    <div class=\"success-rate-value\" style=\"color:var(--mj-status-error)\">\n                                        {{ rawProcessRuns.length > 0 ? (ErrorLog.length / rawProcessRuns.length * 100).toFixed(1) : '0' }}%\n                                    </div>\n                                    <div class=\"success-rate-label\">Failure Rate</div>\n                                </div>\n                                <div class=\"success-rate-stat\">\n                                    <div class=\"success-rate-value\" style=\"color:var(--mj-text-primary)\">\n                                        {{ FormatNumber(rawProcessRuns.length) }}\n                                    </div>\n                                    <div class=\"success-rate-label\">Total Runs</div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Active Runs Table -->\n                    @if (ActiveRuns.length > 0) {\n                        <div class=\"sub-section\">\n                            <h3><i class=\"fa-solid fa-spinner\"></i> Active Runs</h3>\n                            <div class=\"table-scroll\">\n                                <table class=\"data-table\">\n                                    <thead>\n                                        <tr>\n                                            <th>Run ID</th>\n                                            <th>Source</th>\n                                            <th>Started</th>\n                                            <th>Progress</th>\n                                            <th>Stage</th>\n                                            <th class=\"num\">Items</th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        @for (run of ActiveRuns; track run.RunID) {\n                                            <tr>\n                                                <td class=\"monospace-cell\">{{ run.RunID }}</td>\n                                                <td>{{ run.Source }}</td>\n                                                <td class=\"muted\">{{ run.Started }}</td>\n                                                <td>\n                                                    <div class=\"progress-track\"><div class=\"progress-fill\" [style.width.%]=\"run.Progress\" style=\"background:var(--mj-brand-primary)\"></div></div>\n                                                    <span class=\"progress-text\">{{ run.Progress }}%</span>\n                                                </td>\n                                                <td><span class=\"badge\" [class]=\"run.StageClass\">{{ run.Stage }}</span></td>\n                                                <td class=\"num\">{{ FormatNumber(run.Items) }}</td>\n                                            </tr>\n                                        }\n                                    </tbody>\n                                </table>\n                            </div>\n                        </div>\n                    }\n\n                    <!-- Error Log -->\n                    @if (ErrorLog.length > 0) {\n                        <div class=\"sub-section\">\n                            <h3><i class=\"fa-solid fa-triangle-exclamation\"></i> Recent Errors</h3>\n                            <div class=\"error-log\">\n                                @for (entry of ErrorLog; track TrackByIndex($index)) {\n                                    <div class=\"error-entry\">\n                                        <div class=\"error-time\">{{ entry.Time }}</div>\n                                        <div class=\"error-source\">{{ entry.Source }}</div>\n                                        <div class=\"error-msg\">{{ entry.Message }}</div>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n                    }\n                </section>\n            }\n\n            <!-- ====================================================== -->\n            <!-- TAB 5: QUALITY                                         -->\n            <!-- ====================================================== -->\n            @if (ActiveTab === 'quality') {\n                <section class=\"tab-section\">\n                    <div class=\"tab-section-header\">\n                        <i class=\"fa-solid fa-circle-check\"></i>\n                        <h1>Quality</h1>\n                    </div>\n\n                    <!-- Confidence Distribution Histogram -->\n                    <div class=\"sub-section\" style=\"margin-top:0\">\n                        <h3><i class=\"fa-solid fa-chart-column\"></i> Confidence Distribution</h3>\n                        <div class=\"widget-card\">\n                            <div class=\"histogram\">\n                                @for (bin of ConfidenceHistogram; track bin.Label) {\n                                    <div class=\"hist-bar-col\" style=\"cursor:pointer\" (click)=\"OpenDrillDown('quality-bin:' + bin.Label)\">\n                                        <div class=\"hist-bar\" [style.height.%]=\"bin.Percentage\" [style.background]=\"bin.Color\">\n                                            @if (bin.Count > 0) { {{ bin.Count }} }\n                                        </div>\n                                        <div class=\"hist-label\">{{ bin.Label }}</div>\n                                    </div>\n                                }\n                            </div>\n                            <div class=\"confidence-stats\">\n                                @for (stat of ConfidenceStats; track stat.Label) {\n                                    <span><strong>{{ stat.Label }}:</strong> {{ stat.Value }}</span>\n                                }\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- D10: Quality bin drill-down -->\n                    @if (DrillDownTarget && DrillDownTarget.startsWith('quality-bin:')) {\n                        <div class=\"drill-down-panel\">\n                            <div class=\"drill-down-header\">\n                                <span class=\"drill-down-title\"><i class=\"fa-solid fa-table\"></i> Items in Confidence Range {{ DrillDownTarget.replace('quality-bin:', '') }}</span>\n                                <div class=\"drill-down-header-actions\">\n                                    @if (DrillDownData.length > 0) {\n                                        <button class=\"drill-export-btn\" (click)=\"ExportDrillDownCSV()\" title=\"Export CSV\"><i class=\"fa-solid fa-download\"></i> CSV</button>\n                                    }\n                                    <button class=\"drill-down-close\" aria-label=\"Close drill-down\" (click)=\"CloseDrillDown()\"><i class=\"fa-solid fa-times\"></i></button>\n                                </div>\n                            </div>\n                            @if (IsDrillDownLoading) {\n                                <mj-loading text=\"Loading details...\" size=\"small\"></mj-loading>\n                            } @else if (DrillDownData.length > 0) {\n                                <div class=\"drill-down-table-wrap\">\n                                    <table class=\"data-table\">\n                                        <thead><tr>\n                                            @for (col of DrillDownColumns; track col) { <th>{{ col }}</th> }\n                                            @if (DrillDownHasActions) { <th class=\"drill-action-col\"></th> }\n                                        </tr></thead>\n                                        <tbody>\n                                            @for (row of DrillDownData; track TrackByIndex($index)) {\n                                                <tr>\n                                                    @for (col of DrillDownColumns; track col) { <td>{{ row[col] }}</td> }\n                                                    @if (DrillDownHasActions) {\n                                                        <td class=\"drill-action-col\">\n                                                            @if (row['_RecordID']) {\n                                                                <button class=\"drill-open-btn\" aria-label=\"Open record\" (click)=\"OpenDrillDownRecord(row)\" title=\"Open record\"><i class=\"fa-solid fa-arrow-up-right-from-square\"></i></button>\n                                                            }\n                                                        </td>\n                                                    }\n                                                </tr>\n                                            }\n                                        </tbody>\n                                    </table>\n                                </div>\n                            } @else {\n                                <div class=\"drill-down-empty\">No items in this confidence range</div>\n                            }\n                        </div>\n                    }\n\n                    <!-- Weight Distribution by Entity -->\n                    @if (WeightByEntity.length > 0) {\n                        <div class=\"sub-section\">\n                            <h3><i class=\"fa-solid fa-weight-scale\"></i> Weight Distribution by Entity</h3>\n                            <div class=\"widget-card\">\n                                <div class=\"grouped-bar-chart\">\n                                    @for (entity of WeightByEntity; track entity.Name) {\n                                        <div class=\"grouped-col\">\n                                            <div class=\"grouped-bars\">\n                                                <div class=\"g-bar\" [style.height.%]=\"entity.High\" style=\"background:var(--mj-brand-primary)\" [title]=\"'High: ' + entity.High + '%'\"></div>\n                                                <div class=\"g-bar\" [style.height.%]=\"entity.Med\" style=\"background:var(--mj-status-info)\" [title]=\"'Med: ' + entity.Med + '%'\"></div>\n                                                <div class=\"g-bar\" [style.height.%]=\"entity.Low\" style=\"background:var(--mj-text-muted)\" [title]=\"'Low: ' + entity.Low + '%'\"></div>\n                                            </div>\n                                            <div class=\"grouped-label\">{{ entity.Name }}</div>\n                                        </div>\n                                    }\n                                </div>\n                                <div class=\"legend\" style=\"justify-content:center;margin-top:14px\">\n                                    @for (item of WeightLegend; track item.Label) {\n                                        <div class=\"legend-item\"><div class=\"legend-dot\" [style.background]=\"item.Color\"></div> {{ item.Label }}</div>\n                                    }\n                                </div>\n                            </div>\n                        </div>\n                    }\n\n                    <!-- Tag Accuracy Over Time -->\n                    @if (AccuracyLinePoints) {\n                        <div class=\"sub-section\">\n                            <h3><i class=\"fa-solid fa-chart-line\"></i> Tag Accuracy Over Time (Weekly Avg Confidence)</h3>\n                            <div class=\"widget-card\">\n                                <div class=\"accuracy-chart\">\n                                    <div class=\"accuracy-y-labels\">\n                                        <div>1.0</div>\n                                        <div>0.75</div>\n                                        <div>0.50</div>\n                                        <div>0.25</div>\n                                    </div>\n                                    <div class=\"accuracy-area\">\n                                        <div class=\"accuracy-grid-line\" style=\"top:33%\"></div>\n                                        <div class=\"accuracy-grid-line\" style=\"top:66%\"></div>\n                                        <svg width=\"100%\" height=\"110\" viewBox=\"0 0 400 110\" preserveAspectRatio=\"none\" class=\"accuracy-svg\">\n                                            <polyline [attr.points]=\"AccuracyLinePoints\"\n                                                fill=\"none\" stroke=\"var(--mj-brand-primary)\" stroke-width=\"2.5\" vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                            @for (dot of AccuracyDots; track TrackByIndex($index)) {\n                                                <circle [attr.cx]=\"dot.Cx\" [attr.cy]=\"dot.Cy\" r=\"3\" fill=\"var(--mj-brand-primary)\"/>\n                                            }\n                                        </svg>\n                                    </div>\n                                </div>\n                                <div class=\"accuracy-x-labels\">\n                                    @for (label of AccuracyMonthLabels; track label) {\n                                        <span>{{ label }}</span>\n                                    }\n                                </div>\n                                <div class=\"accuracy-trend-text\">\n                                    <i class=\"fa-solid fa-arrow-trend-up\" style=\"margin-right:4px\"></i>\n                                    {{ AccuracyTrendText }}\n                                </div>\n                            </div>\n                        </div>\n                    }\n\n                    <!-- Low-Confidence Tags Table -->\n                    @if (LowConfidenceTags.length > 0) {\n                        <div class=\"sub-section\">\n                            <h3><i class=\"fa-solid fa-exclamation-triangle\"></i> Low-Confidence Tags (Avg Weight &lt; 0.4)</h3>\n                            <div class=\"table-scroll\">\n                                <table class=\"data-table\">\n                                    <thead>\n                                        <tr>\n                                            <th>Tag Name</th>\n                                            <th class=\"num\">Avg Weight</th>\n                                            <th class=\"num\">Usage Count</th>\n                                            <th>Top Entity</th>\n                                            <th>Suggested Action</th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        @for (tag of LowConfidenceTags; track tag.Name) {\n                                            <tr>\n                                                <td><strong>{{ tag.Name }}</strong></td>\n                                                <td class=\"num\">{{ tag.AvgWeight }}</td>\n                                                <td class=\"num\">{{ tag.UsageCount }}</td>\n                                                <td>{{ tag.TopEntity }}</td>\n                                                <td><span class=\"badge\" [class]=\"tag.ActionClass\">{{ tag.SuggestedAction }}</span></td>\n                                            </tr>\n                                        }\n                                    </tbody>\n                                </table>\n                            </div>\n                        </div>\n                    }\n\n                    <!-- Model Performance Comparison -->\n                    <div class=\"sub-section\">\n                        <h3><i class=\"fa-solid fa-robot\"></i> Model Performance Comparison</h3>\n                        <div class=\"model-grid\">\n                            @for (model of ModelComparisons; track model.Name) {\n                                <div class=\"model-card\">\n                                    <div class=\"model-name\"><i [class]=\"model.Icon\" [style.color]=\"model.IconColor\" style=\"margin-right:4px\"></i> {{ model.Name }}</div>\n                                    <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" style=\"margin:4px 0\">\n                                        <circle cx=\"40\" cy=\"40\" r=\"32\" fill=\"none\" stroke=\"var(--mj-border-default)\" stroke-width=\"8\"/>\n                                        <circle cx=\"40\" cy=\"40\" r=\"32\" fill=\"none\" [attr.stroke]=\"model.ScoreColor\" stroke-width=\"8\"\n                                            [attr.stroke-dasharray]=\"model.StrokeDash\" stroke-dashoffset=\"50\"\n                                            transform=\"rotate(-90 40 40)\" stroke-linecap=\"round\"/>\n                                    </svg>\n                                    <div class=\"model-score\" [style.color]=\"model.ScoreColor\">{{ model.ScorePercentage }}%</div>\n                                    <div class=\"model-detail\">Avg confidence: {{ model.AvgConfidence }}</div>\n                                    <div class=\"model-detail\">{{ FormatNumber(model.TagsGenerated) }} tags generated</div>\n                                    <div class=\"model-detail\" [style.color]=\"model.RoleColor\" style=\"font-weight:600\">{{ model.Role }}</div>\n                                </div>\n                            }\n                        </div>\n                        @if (ModelRecommendation) {\n                            <div class=\"model-recommendation\">\n                                <i class=\"fa-solid fa-lightbulb\" style=\"color:var(--mj-status-warning)\"></i>\n                                <div>\n                                    <strong>Recommendation:</strong> {{ ModelRecommendation }}\n                                </div>\n                            </div>\n                        }\n                    </div>\n                </section>\n            }\n\n            <!-- ====================================================== -->\n            <!-- TAB 6: COST & USAGE (D1)                              -->\n            <!-- ====================================================== -->\n            @if (ActiveTab === 'cost') {\n                <section class=\"tab-section\">\n                    <div class=\"tab-section-header\">\n                        <i class=\"fa-solid fa-coins\"></i>\n                        <h1>Cost & Usage</h1>\n                        <div class=\"tab-header-actions\">\n                            <button class=\"drill-export-btn\" (click)=\"ExportTabDataCSV('cost-usage')\" title=\"Export CSV\">\n                                <i class=\"fa-solid fa-download\"></i> CSV\n                            </button>\n                            <button class=\"drill-export-btn\" (click)=\"PrintCurrentTab()\" title=\"Print (PDF alternative)\">\n                                <i class=\"fa-solid fa-print\"></i> Print\n                            </button>\n                        </div>\n                    </div>\n\n                    <!-- Filter Bar -->\n                    <div class=\"filter-bar\">\n                        <div class=\"date-chips\">\n                            @for (range of DateRanges; track range.Label) {\n                                <button\n                                    class=\"date-chip\"\n                                    [class.active]=\"ActiveDateRange === range.Label\"\n                                    (click)=\"SetDateRange(range.Label)\"\n                                >{{ range.Label }}</button>\n                            }\n                        </div>\n                    </div>\n\n                    <!-- KPI Cards -->\n                    @if (CostKPIs.length > 0) {\n                        <div class=\"cost-kpi-row\">\n                            @for (kpi of CostKPIs; track kpi.Label) {\n                                <div class=\"cost-kpi-card\">\n                                    <div class=\"cost-kpi-icon\"><i [class]=\"kpi.Icon\"></i></div>\n                                    <div>\n                                        <div class=\"cost-kpi-value\">{{ kpi.Value }}</div>\n                                        <div class=\"cost-kpi-label\">{{ kpi.Label }}</div>\n                                        <div class=\"cost-kpi-sub\">{{ kpi.SubLabel }}</div>\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n\n                    <!-- Per-Run Cost Table -->\n                    <div class=\"sub-section\">\n                        <h3><i class=\"fa-solid fa-table\"></i> Cost Breakdown by Run</h3>\n                        @if (CostPerRunRows.length > 0) {\n                            <div class=\"table-scroll\">\n                                <table class=\"data-table\">\n                                    <thead>\n                                        <tr>\n                                            <th>Run ID</th>\n                                            <th>Source</th>\n                                            <th class=\"num\">Tokens</th>\n                                            <th class=\"num\">Cost</th>\n                                            <th>Started</th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        @for (row of CostPerRunRows; track row.RunID) {\n                                            <tr>\n                                                <td class=\"monospace-cell\">{{ row.RunID }}</td>\n                                                <td>{{ row.Source }}</td>\n                                                <td class=\"num\">{{ FormatNumber(row.Tokens) }}</td>\n                                                <td class=\"num\">{{ row.Cost > 0 ? '$' + row.Cost.toFixed(4) : '$0.00' }}</td>\n                                                <td class=\"muted\">{{ row.Started }}</td>\n                                            </tr>\n                                        }\n                                    </tbody>\n                                </table>\n                            </div>\n                        } @else {\n                            <div class=\"empty-state\">\n                                <i class=\"fa-solid fa-coins\"></i>\n                                <p>No cost data available yet. Run the pipeline to generate cost and token usage metrics.</p>\n                                <p class=\"empty-state-hint\">Cost data is aggregated from ContentProcessRunDetail records linked to AI Prompt Runs.</p>\n                            </div>\n                        }\n                    </div>\n                </section>\n            }\n\n        </div><!-- /main-content -->\n        </mj-left-nav-content>\n    </div><!-- /analytics-layout -->\n}\n  </mj-page-body>\n</mj-page-layout>\n", styles: ["/* ===================================================================\n   Analytics & Insights Resource Component\n   ================================================================= */\n\n.analytics-loading {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 400px;\n}\n\n/*\n  Layout \u2014 <mj-left-nav> rail (with trending tags in [footer]) +\n  <mj-left-nav-content>. The shared primitives own the rail's width, nav-item\n  styling, sections, and busy state. Only the trending-section + tag-cloud\n  styling stays bespoke (it's projected content, not nav chrome).\n*/\n.analytics-layout {\n    display: flex;\n    flex: 1;\n    min-height: 0;\n}\n\n.trending-section {\n    padding: 12px 16px 16px;\n}\n\n.trending-section h3 {\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: var(--mj-text-muted);\n    margin: 0 0 10px;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.tag-cloud {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px 6px;\n    line-height: 1.7;\n}\n\n.tag-cloud span {\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    transition: opacity 0.15s;\n}\n\n.tag-cloud span:hover {\n    opacity: 0.7;\n}\n\n.no-trending {\n    color: var(--mj-text-muted) !important;\n    font-size: 12px !important;\n    font-style: italic;\n}\n\n.pipeline-status {\n    padding: 12px 16px;\n    border-top: 1px solid var(--mj-border-default);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 11.5px;\n    color: var(--mj-text-muted);\n}\n\n.status-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: var(--mj-status-success);\n    flex-shrink: 0;\n}\n\n.status-dot-error {\n    background: var(--mj-status-error);\n}\n\n/* ===== MAIN CONTENT ===== */\n.main-content {\n    flex: 1;\n    overflow-y: auto;\n    min-width: 0;\n}\n\n.tab-section {\n    padding: 28px 32px 40px;\n}\n\n.tab-section-header {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 20px;\n    padding-bottom: 12px;\n    border-bottom: 2px solid var(--mj-brand-primary);\n}\n\n.tab-section-header i {\n    font-size: 18px;\n    color: var(--mj-brand-primary);\n}\n\n.tab-section-header h1 {\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0;\n}\n\n/* ===== FILTER BAR ===== */\n.filter-bar {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 20px;\n    flex-wrap: wrap;\n}\n\n.date-chips {\n    display: flex;\n    gap: 0;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.date-chip {\n    padding: 6px 14px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n    border: none;\n    border-right: 1px solid var(--mj-border-default);\n    transition: all 0.15s;\n    font-family: inherit;\n}\n\n.date-chip:last-child {\n    border-right: none;\n}\n\n.date-chip:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.date-chip.active {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.filter-dropdown {\n    padding: 6px 12px;\n    font-size: 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    font-family: inherit;\n}\n\n/* ===== KPI CARDS ===== */\n.kpi-row {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.kpi-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 16px 18px;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    transition: transform 0.15s, box-shadow 0.15s;\n    cursor: pointer;\n}\n\n.kpi-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.kpi-label {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-muted);\n    margin-bottom: 4px;\n}\n\n.kpi-value {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1.1;\n}\n\n.kpi-delta {\n    font-size: 11px;\n    font-weight: 500;\n    margin-top: 4px;\n    color: var(--mj-text-muted);\n}\n\n.kpi-delta.up {\n    color: var(--mj-status-success);\n}\n\n.kpi-delta.down {\n    color: var(--mj-status-error);\n}\n\n.kpi-sparkline {\n    flex-shrink: 0;\n    margin-left: 12px;\n    margin-top: 6px;\n}\n\n/* ===== CARDS GRID ===== */\n.cards-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 16px;\n}\n\n.widget-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 18px 20px;\n    transition: transform 0.15s, box-shadow 0.15s;\n    cursor: pointer;\n}\n\n.widget-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.widget-title {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin-bottom: 14px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.widget-title i {\n    color: var(--mj-brand-primary);\n    font-size: 12px;\n}\n\n.widget-empty {\n    text-align: center;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    padding: 20px;\n}\n\n.widget-footnote {\n    text-align: center;\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    margin-top: 10px;\n}\n\n/* ===== BAR CHART ===== */\n.bar-chart {\n    display: flex;\n    align-items: flex-end;\n    gap: 8px;\n    height: 120px;\n    padding-top: 10px;\n}\n\n.bar-col {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n    justify-content: flex-end;\n}\n\n.bar {\n    width: 100%;\n    border-radius: 4px 4px 0 0;\n    transition: height 0.3s;\n    min-height: 2px;\n}\n\n.bar-label {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    margin-top: 6px;\n}\n\n.bar-value {\n    font-size: 10px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin-bottom: 4px;\n}\n\n/* ===== PROGRESS RINGS ===== */\n.rings-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n}\n\n.ring-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 6px 0;\n}\n\n.ring-label {\n    font-size: 12px;\n    color: var(--mj-text-primary);\n    font-weight: 500;\n}\n\n.ring-stat {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n/* ===== GAUGE ===== */\n.gauge-container {\n    display: flex;\n    justify-content: center;\n    margin-bottom: 8px;\n}\n\n/* ===== MINI HISTOGRAM ===== */\n.mini-histogram {\n    display: flex;\n    align-items: flex-end;\n    gap: 3px;\n    height: 32px;\n    justify-content: center;\n}\n\n.mini-hist-bar {\n    width: 14px;\n    border-radius: 2px;\n}\n\n.mini-hist-label {\n    text-align: center;\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    margin-top: 4px;\n}\n\n/* ===== HORIZONTAL BARS ===== */\n.h-bar-list {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.h-bar-row {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.h-bar-name {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    width: 100px;\n    flex-shrink: 0;\n    text-align: right;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.h-bar-track {\n    flex: 1;\n    height: 20px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 4px;\n    overflow: hidden;\n}\n\n.h-bar-fill {\n    height: 100%;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    padding-left: 8px;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-text-inverse);\n    min-width: 36px;\n}\n\n/* ===== THROUGHPUT BARS ===== */\n.throughput-bars {\n    display: flex;\n    align-items: flex-end;\n    gap: 4px;\n    height: 110px;\n    margin-bottom: 22px;\n}\n\n.tp-bar {\n    flex: 1;\n    border-radius: 3px 3px 0 0;\n    position: relative;\n    min-height: 4px;\n}\n\n.tp-bar-label {\n    position: absolute;\n    bottom: -18px;\n    left: 50%;\n    transform: translateX(-50%);\n    font-size: 8px;\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n}\n\n/* ===== TAXONOMY ===== */\n.taxonomy-ring-container {\n    display: flex;\n    justify-content: center;\n}\n\n.taxonomy-stats {\n    display: flex;\n    gap: 8px;\n    margin-top: 12px;\n}\n\n.tax-stat {\n    flex: 1;\n    text-align: center;\n    padding: 8px 4px;\n    border-radius: 6px;\n    font-size: 20px;\n    font-weight: 700;\n}\n\n.tax-stat small {\n    display: block;\n    font-size: 10px;\n    font-weight: 500;\n    margin-top: 2px;\n}\n\n/* ===== LEGEND ===== */\n.legend {\n    display: flex;\n    gap: 16px;\n    margin-top: 10px;\n    flex-wrap: wrap;\n    justify-content: center;\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n.legend-dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 3px;\n    flex-shrink: 0;\n}\n\n/* ===== DATA TABLES ===== */\n.table-scroll {\n    overflow-x: auto;\n}\n\n.data-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 12.5px;\n}\n\n.data-table thead th {\n    text-align: left;\n    padding: 10px 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--mj-text-muted);\n    border-bottom: 2px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n    white-space: nowrap;\n}\n\n.data-table tbody td {\n    padding: 10px 12px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-primary);\n    vertical-align: middle;\n}\n\n.data-table tbody tr:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.data-table .num {\n    text-align: right;\n    font-variant-numeric: tabular-nums;\n}\n\n.muted {\n    color: var(--mj-text-muted);\n}\n\n.monospace-cell {\n    font-family: monospace;\n    font-size: 11px;\n    color: var(--mj-brand-primary);\n}\n\n.weight-bar {\n    display: inline-block;\n    height: 6px;\n    border-radius: 3px;\n    vertical-align: middle;\n    margin-right: 6px;\n}\n\n/* ===== BADGES ===== */\n.badge {\n    display: inline-block;\n    padding: 2px 8px;\n    border-radius: 10px;\n    font-size: 10.5px;\n    font-weight: 600;\n}\n\n.badge-success {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.badge-warning {\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.badge-error {\n    background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.badge-info {\n    background: color-mix(in srgb, var(--mj-status-info) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-info);\n}\n\n/* ===== SUB-SECTIONS ===== */\n.sub-section {\n    margin-top: 24px;\n}\n\n.sub-section h3 {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 12px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.sub-section h3 i {\n    font-size: 13px;\n    color: var(--mj-brand-primary);\n}\n\n/* ===== EMPTY STATE ===== */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 3rem 2rem;\n    text-align: center;\n    gap: 0.75rem;\n    border: 2px dashed var(--mj-border-default);\n    border-radius: 12px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n}\n\n.empty-state i {\n    font-size: 2.5rem;\n    color: var(--mj-text-disabled);\n}\n\n.empty-state p {\n    margin: 0;\n    font-size: 0.85rem;\n    max-width: 400px;\n}\n\n/* ===== DRILL-DOWN PANEL ===== */\n.drill-down-panel {\n    margin-top: 16px;\n    margin-bottom: 16px;\n    background: var(--mj-bg-surface);\n    border: 2px solid var(--mj-brand-primary);\n    border-radius: 10px;\n    overflow: hidden;\n    animation: slideDown 0.2s ease-out;\n}\n\n@keyframes slideDown {\n    from {\n        opacity: 0;\n        max-height: 0;\n    }\n    to {\n        opacity: 1;\n        max-height: 600px;\n    }\n}\n\n.drill-down-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 16px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.drill-down-title {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.drill-down-close {\n    border: none;\n    background: transparent;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    font-size: 14px;\n    padding: 4px 8px;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.drill-down-close:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n.drill-down-table-wrap {\n    max-height: 400px;\n    overflow-y: auto;\n    padding: 8px;\n}\n\n.drill-action-col {\n    width: 40px;\n    text-align: center;\n    padding: 6px !important;\n}\n\n.drill-open-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 26px;\n    height: 26px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 5px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 10px;\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.drill-open-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n.drill-down-header-actions {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.drill-export-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 5px;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    font-size: 11px;\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.drill-export-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n.sub-section-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 0;\n}\n\n.sub-section-header h3 {\n    margin: 0;\n}\n\n.drill-down-empty {\n    padding: 24px;\n    text-align: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n/* ===== STACKED BAR CHART ===== */\n.stacked-bar-chart {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.stacked-row {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.stacked-label {\n    width: 90px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    text-align: right;\n    flex-shrink: 0;\n}\n\n.stacked-track {\n    flex: 1;\n    height: 22px;\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n}\n\n.stacked-seg {\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 9px;\n    font-weight: 600;\n    color: var(--mj-text-inverse);\n    min-width: 20px;\n}\n\n/* ===== VERTICAL BAR CHART ===== */\n.v-bar-chart {\n    display: flex;\n    align-items: flex-end;\n    gap: 24px;\n    height: 140px;\n    padding-top: 10px;\n    justify-content: center;\n}\n\n.v-bar-col {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n    justify-content: flex-end;\n    min-width: 60px;\n}\n\n.v-bar {\n    width: 48px;\n    border-radius: 4px 4px 0 0;\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    padding-top: 4px;\n    font-size: 11px;\n    font-weight: 700;\n    color: var(--mj-text-inverse);\n}\n\n.v-bar-label {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    margin-top: 8px;\n    text-align: center;\n}\n\n.chart-footnote {\n    text-align: center;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    margin-top: 14px;\n}\n\n/* ===== TWO COLUMN ===== */\n.two-col {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 20px;\n}\n\n/* ===== SOURCE SELECTED ===== */\n.source-selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n/* ===== QUALITY BANDS ===== */\n.quality-bands {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.quality-band-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.quality-band-label {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    width: 65px;\n    text-align: right;\n    flex-shrink: 0;\n}\n\n.quality-band-track {\n    flex: 1;\n    height: 18px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 4px;\n    overflow: hidden;\n}\n\n.quality-band-fill {\n    height: 100%;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    padding-left: 8px;\n    font-size: 10px;\n    font-weight: 600;\n    color: var(--mj-text-inverse);\n    min-width: 30px;\n}\n\n.source-quality-note {\n    margin-top: 14px;\n    padding: 10px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n}\n\n/* ===== SOURCE HEALTH ===== */\n.source-health-grid {\n    display: grid;\n    gap: 12px;\n}\n\n.source-health-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 14px;\n    text-align: center;\n    border-top: 3px solid;\n}\n\n.health-card-name {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    margin-bottom: 4px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.health-card-value {\n    font-size: 22px;\n    font-weight: 700;\n}\n\n.health-card-label {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n}\n\n/* ===== PIPELINE ===== */\n.pipeline-throughput-bars {\n    display: flex;\n    align-items: flex-end;\n    gap: 3px;\n    height: 110px;\n}\n\n.pipeline-bar {\n    flex: 1;\n    border-radius: 2px 2px 0 0;\n    min-height: 3px;\n}\n\n.pipeline-date-labels {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 6px;\n    font-size: 10px;\n    color: var(--mj-text-muted);\n}\n\n/* ===== PROCESSING STAGES ===== */\n.stage-bars {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.stage-row {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.stage-name {\n    width: 80px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    text-align: right;\n    flex-shrink: 0;\n}\n\n.stage-track {\n    flex: 1;\n    height: 24px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 4px;\n    overflow: hidden;\n}\n\n.stage-fill {\n    height: 100%;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    padding-right: 8px;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-text-inverse);\n}\n\n.stage-time {\n    width: 50px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    text-align: right;\n    flex-shrink: 0;\n}\n\n.stage-summary {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 14px;\n    padding-top: 10px;\n    border-top: 1px solid var(--mj-border-default);\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.stage-warning {\n    color: var(--mj-text-muted);\n}\n\n/* ===== SUCCESS RATE ===== */\n.success-rate-display {\n    display: flex;\n    justify-content: center;\n    gap: 48px;\n    padding: 20px;\n}\n\n.success-rate-stat {\n    text-align: center;\n}\n\n.success-rate-value {\n    font-size: 32px;\n    font-weight: 700;\n    line-height: 1.1;\n}\n\n.success-rate-label {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    margin-top: 4px;\n}\n\n/* ===== PROGRESS ===== */\n.progress-track {\n    width: 100px;\n    height: 6px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 3px;\n    overflow: hidden;\n    display: inline-block;\n    vertical-align: middle;\n    margin-right: 6px;\n}\n\n.progress-fill {\n    height: 100%;\n    border-radius: 3px;\n}\n\n.progress-text {\n    font-size: 11px;\n    font-weight: 600;\n}\n\n/* ===== ERROR LOG ===== */\n.error-log {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.error-entry {\n    display: flex;\n    gap: 12px;\n    padding: 10px 14px;\n    background: color-mix(in srgb, var(--mj-status-error) 4%, var(--mj-bg-surface));\n    border-left: 3px solid var(--mj-status-error);\n    border-radius: 0 6px 6px 0;\n    font-size: 12px;\n}\n\n.error-time {\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    white-space: nowrap;\n    flex-shrink: 0;\n    width: 130px;\n}\n\n.error-source {\n    color: var(--mj-brand-primary);\n    font-weight: 600;\n    flex-shrink: 0;\n    width: 120px;\n}\n\n.error-msg {\n    color: var(--mj-text-secondary);\n}\n\n/* ===== HISTOGRAM ===== */\n.histogram {\n    display: flex;\n    align-items: flex-end;\n    gap: 6px;\n    height: 130px;\n    padding-bottom: 24px;\n}\n\n.hist-bar-col {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n    justify-content: flex-end;\n}\n\n.hist-bar {\n    width: 100%;\n    border-radius: 3px 3px 0 0;\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    padding-top: 3px;\n    font-size: 10px;\n    font-weight: 600;\n    color: var(--mj-text-inverse);\n    min-height: 2px;\n}\n\n.hist-label {\n    font-size: 9px;\n    color: var(--mj-text-muted);\n    margin-top: 6px;\n    text-align: center;\n}\n\n.confidence-stats {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 8px;\n    padding: 10px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n/* ===== GROUPED BAR CHART ===== */\n.grouped-bar-chart {\n    display: flex;\n    align-items: flex-end;\n    gap: 20px;\n    height: 140px;\n    justify-content: center;\n}\n\n.grouped-col {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n    justify-content: flex-end;\n}\n\n.grouped-bars {\n    display: flex;\n    gap: 3px;\n    align-items: flex-end;\n    height: 100%;\n}\n\n.g-bar {\n    width: 18px;\n    border-radius: 3px 3px 0 0;\n    min-height: 2px;\n}\n\n.grouped-label {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    margin-top: 6px;\n    text-align: center;\n}\n\n/* ===== ACCURACY CHART ===== */\n.accuracy-chart {\n    position: relative;\n    display: flex;\n    margin: 0 10px;\n}\n\n.accuracy-y-labels {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    font-size: 9px;\n    color: var(--mj-text-muted);\n    margin-right: 8px;\n    height: 110px;\n}\n\n.accuracy-area {\n    flex: 1;\n    position: relative;\n    height: 110px;\n    border-left: 1px solid var(--mj-border-default);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.accuracy-grid-line {\n    position: absolute;\n    left: 0;\n    right: 0;\n    border-top: 1px dashed var(--mj-border-subtle);\n}\n\n.accuracy-svg {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n}\n\n.accuracy-x-labels {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 8px;\n    padding: 0 40px 0 40px;\n    font-size: 10px;\n    color: var(--mj-text-muted);\n}\n\n.accuracy-trend-text {\n    text-align: center;\n    margin-top: 10px;\n    font-size: 12px;\n    color: var(--mj-status-success);\n}\n\n/* ===== MODEL COMPARISON ===== */\n.model-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 12px;\n}\n\n.model-card {\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    padding: 14px;\n    text-align: center;\n    border: 1px solid var(--mj-border-default);\n}\n\n.model-name {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin-bottom: 8px;\n}\n\n.model-score {\n    font-size: 28px;\n    font-weight: 700;\n    line-height: 1;\n}\n\n.model-detail {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    margin-top: 4px;\n}\n\n.model-recommendation {\n    margin-top: 14px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n/* ===== RESPONSIVE ===== */\n@media (max-width: 1200px) {\n    .cards-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .kpi-row {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .model-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (max-width: 768px) {\n    .analytics-layout {\n        flex-direction: column;\n    }\n\n    .analytics-sidebar {\n        width: 100%;\n        min-width: 100%;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .sidebar-nav {\n        flex-direction: row;\n        overflow-x: auto;\n    }\n\n    .nav-item {\n        border-left: none;\n        border-bottom: 3px solid transparent;\n        white-space: nowrap;\n    }\n\n    .nav-item.active {\n        border-left-color: transparent;\n        border-bottom-color: var(--mj-brand-primary);\n    }\n\n    .trending-section,\n    .sidebar-divider {\n        display: none;\n    }\n\n    .tab-section {\n        padding: 16px;\n    }\n\n    .cards-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .kpi-row {\n        grid-template-columns: 1fr;\n    }\n\n    .two-col {\n        grid-template-columns: 1fr;\n    }\n\n    .cost-kpi-row {\n        grid-template-columns: 1fr;\n    }\n}\n\n/* ===== COST & USAGE TAB (D1) ===== */\n\n.tab-header-actions {\n    display: flex;\n    gap: 8px;\n    margin-left: auto;\n}\n\n.cost-kpi-row {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.cost-kpi-card {\n    display: flex;\n    gap: 14px;\n    align-items: center;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    padding: 18px 20px;\n    transition: box-shadow 0.15s ease;\n}\n\n.cost-kpi-card:hover {\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.cost-kpi-icon {\n    width: 44px;\n    height: 44px;\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 18px;\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    flex-shrink: 0;\n}\n\n.cost-kpi-value {\n    font-size: 22px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1.2;\n}\n\n.cost-kpi-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.03em;\n}\n\n.cost-kpi-sub {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n\n.empty-state-hint {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    margin-top: 4px;\n}\n\n/* ===== D5: PRINT STYLES ===== */\n\n@media print {\n    .analytics-sidebar,\n    .filter-bar,\n    .tab-header-actions,\n    .drill-down-close,\n    .drill-export-btn,\n    .drill-open-btn {\n        display: none !important;\n    }\n\n    .analytics-layout {\n        display: block;\n    }\n\n    .main-content {\n        padding: 0;\n    }\n\n    .tab-section {\n        padding: 0;\n    }\n\n    .widget-card,\n    .cost-kpi-card,\n    .kpi-card {\n        break-inside: avoid;\n        box-shadow: none;\n        border: 1px solid var(--mj-border-default);\n    }\n\n    .data-table {\n        font-size: 10px;\n    }\n}\n\n/* \u2500\u2500 Co-Occurrence Section \u2500\u2500 */\n\n/* Constrain the co-occurrence sub-section so an empty state or large table\n   does not blow out the page height and render the app unusable. */\n.co-occurrence-section {\n    max-height: 500px;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n.co-occurrence-section .table-scroll {\n    overflow-y: auto;\n    max-height: 400px;\n    flex: 1;\n    min-height: 0;\n}\n\n.co-occurrence-section .empty-state {\n    max-height: 200px;\n    overflow: hidden;\n}\n\n.co-occurrence-actions {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.co-occurrence-staleness {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    font-size: 0.78rem;\n    color: var(--mj-text-muted);\n}\n"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AnalyticsResourceComponent, { className: "AnalyticsResourceComponent", filePath: "src/KnowledgeHub/components/analytics/analytics-resource.component.ts", lineNumber: 223 }); })();
 /** Tree-shaking prevention */