@careonbrasil/dashboard 14.0.0

package/fesm2020/careonbrasil-dashboard.mjs

@@ -0,0 +1,677 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, HostBinding, EventEmitter, Output, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@careonbrasil/ng-charts';
+import { CareonChartsModule } from '@careonbrasil/ng-charts';
+
+/**
+ * Periodo de agregacao temporal para consulta e exibicao das metricas do dashboard.
+ */
+var DashboardPeriod;
+(function (DashboardPeriod) {
+    /** Visualizacao agregada das metricas do dia atual. */
+    DashboardPeriod["Today"] = "Today";
+    /** Visualizacao agregada dos ultimos 7 dias. */
+    DashboardPeriod["Week"] = "Week";
+    /** Visualizacao agregada do mes corrente (ultimos 30 dias). */
+    DashboardPeriod["Month"] = "Month";
+})(DashboardPeriod || (DashboardPeriod = {}));
+/**
+ * Nivel qualitativo de atratividade e conversao institucional.
+ * Utilizado para parametrizar a renderizacao da onda vetorial de performance.
+ */
+var PerformanceLevel;
+(function (PerformanceLevel) {
+    /** Nivel Azul: Desempenho satisfatorio, alta conversao e boa procura de candidatos. */
+    PerformanceLevel["Blue"] = "Blue";
+    /** Nivel Laranja: Desempenho moderado, vagas visualizadas com conversao abaixo do potencial. */
+    PerformanceLevel["Orange"] = "Orange";
+    /** Nivel Vermelho: Desempenho critico, baixa procura ou periodo prolongado sem publicacoes. */
+    PerformanceLevel["Red"] = "Red";
+})(PerformanceLevel || (PerformanceLevel = {}));
+/**
+ * Classificacao comparativa da remuneracao oferecida em relacao a media regional de mercado.
+ */
+var DutySalaryStatus;
+(function (DutySalaryStatus) {
+    /** Remuneracao oferecida abaixo da media praticada na regiao. */
+    DutySalaryStatus["BelowMarket"] = "BelowMarket";
+    /** Remuneracao alinhada com a faixa media de mercado da regiao. */
+    DutySalaryStatus["AtMarket"] = "AtMarket";
+    /** Remuneracao acima da media regional, conferindo vantagem competitiva. */
+    DutySalaryStatus["AboveMarket"] = "AboveMarket";
+    /** Remuneracao a combinar ou nao informada no cadastro da vaga. */
+    DutySalaryStatus["NotInformed"] = "NotInformed";
+    /** Volume amostral insuficiente na regiao para calculo de referencia confiavel. */
+    DutySalaryStatus["InsufficientData"] = "InsufficientData";
+})(DutySalaryStatus || (DutySalaryStatus = {}));
+
+/**
+ * Componente grafico de onda vetorial (SVG inline) para representacao qualitativa de desempenho.
+ * Renderiza tres perfis distintos de curva:
+ * - Blue: Curva suave e ascendente, simbolizando alto engajamento.
+ * - Orange: Curva intermediaria com pequenas oscilacoes.
+ * - Red: Curva descendente acentuada, indicando necessidade de atencao.
+ */
+class PerformanceWaveComponent {
+    constructor() {
+        this.PerformanceLevel = PerformanceLevel;
+        /**
+         * Nivel de performance que determina o formato da onda e as cores do gradiente vetorial.
+         * @default PerformanceLevel.Blue
+         */
+        this.level = PerformanceLevel.Blue;
+    }
+}
+PerformanceWaveComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PerformanceWaveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PerformanceWaveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PerformanceWaveComponent, selector: "careon-performance-wave", inputs: { level: "level" }, ngImport: i0, template: "<div class=\"performance-wave-container\" [ngSwitch]=\"level\">\r\n  <!-- Gr\u00E1fico Azul: taxa >= 4% -->\r\n  <svg\r\n    *ngSwitchCase=\"PerformanceLevel.Blue\"\r\n    class=\"performance-wave-svg\"\r\n    viewBox=\"0 0 452 98\"\r\n    preserveAspectRatio=\"none\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M0.485352 79.9565C0.485352 78.4292 1.65796 77.1444 3.17418 76.9605C91.3906 66.2645 136.386 21.7967 225.485 31.8008C314.054 41.7454 380.833 7.65094 447.265 1.74872C449.003 1.59429 450.485 2.97287 450.485 4.71795V94.485C450.485 96.1419 449.142 97.485 447.485 97.485H3.48535C1.82849 97.485 0.485352 96.1419 0.485352 94.485V79.9565Z\"\r\n      fill=\"#DBEAFD\"\r\n    />\r\n    <path\r\n      d=\"M1.48535 76.4851C91.2853 66.4851 136.185 21.4851 225.985 31.4851C315.785 41.4851 383.135 6.48506 450.485 1.48506\"\r\n      stroke=\"#245DEF\"\r\n      stroke-width=\"2.97\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n\r\n  <!-- Gr\u00E1fico Laranja: taxa < 4% -->\r\n  <svg\r\n    *ngSwitchCase=\"PerformanceLevel.Orange\"\r\n    class=\"performance-wave-svg\"\r\n    viewBox=\"0 0 451 98\"\r\n    preserveAspectRatio=\"none\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M0 48.297C0 47.5374 0.433006 46.8417 1.11413 46.5054C68.2428 13.3645 135.371 -3.17555 202.5 2.37853C269.731 7.94106 350.354 41.2053 448.816 85.6166C449.533 85.9398 450 86.656 450 87.4422V95.3202C450 96.4248 449.105 97.3202 448 97.3202H1.99999C0.89542 97.3202 0 96.4248 0 95.3202V48.297Z\"\r\n      fill=\"#E88618\"\r\n      fill-opacity=\"0.22\"\r\n    />\r\n    <path\r\n      d=\"M1.5 48.3202C69 17.1144 136 -2.89515 203.5 2.30581C271 7.50677 350 45.2125 449 86.8202\"\r\n      stroke=\"#E88618\"\r\n      stroke-width=\"2.97\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n\r\n  <!-- Gr\u00E1fico Vermelho: 0 vagas no per\u00EDodo -->\r\n  <svg\r\n    *ngSwitchDefault\r\n    class=\"performance-wave-svg\"\r\n    viewBox=\"0 0 450 97\"\r\n    preserveAspectRatio=\"none\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M0 3.97707C0 2.14014 1.66636 0.739066 3.48178 1.01927C91.1757 14.5544 136.168 28.0029 225 34.771C313.933 41.5468 380.896 61.7137 447.599 75.4232C448.996 75.7104 450 76.939 450 78.3656V93.4853C450 95.1421 448.657 96.4853 447 96.4853H3C1.34314 96.4853 0 95.1421 0 93.4853V3.97707Z\"\r\n      fill=\"#FFDEDE\"\r\n    />\r\n    <path\r\n      d=\"M1.5 1.48529C72.9286 15.771 108.571 21.8424 180 28.9853C251.429 36.1281 394.429 60.6996 448 74.9853\"\r\n      stroke=\"#E8412A\"\r\n      stroke-width=\"2.97\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:98px;margin:6px 0 14px}.performance-wave-container{width:100%;height:100%;overflow:hidden;display:flex;align-items:flex-end}.performance-wave-container .performance-wave-svg{width:100%;height:100%;display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PerformanceWaveComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'careon-performance-wave', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"performance-wave-container\" [ngSwitch]=\"level\">\r\n  <!-- Gr\u00E1fico Azul: taxa >= 4% -->\r\n  <svg\r\n    *ngSwitchCase=\"PerformanceLevel.Blue\"\r\n    class=\"performance-wave-svg\"\r\n    viewBox=\"0 0 452 98\"\r\n    preserveAspectRatio=\"none\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M0.485352 79.9565C0.485352 78.4292 1.65796 77.1444 3.17418 76.9605C91.3906 66.2645 136.386 21.7967 225.485 31.8008C314.054 41.7454 380.833 7.65094 447.265 1.74872C449.003 1.59429 450.485 2.97287 450.485 4.71795V94.485C450.485 96.1419 449.142 97.485 447.485 97.485H3.48535C1.82849 97.485 0.485352 96.1419 0.485352 94.485V79.9565Z\"\r\n      fill=\"#DBEAFD\"\r\n    />\r\n    <path\r\n      d=\"M1.48535 76.4851C91.2853 66.4851 136.185 21.4851 225.985 31.4851C315.785 41.4851 383.135 6.48506 450.485 1.48506\"\r\n      stroke=\"#245DEF\"\r\n      stroke-width=\"2.97\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n\r\n  <!-- Gr\u00E1fico Laranja: taxa < 4% -->\r\n  <svg\r\n    *ngSwitchCase=\"PerformanceLevel.Orange\"\r\n    class=\"performance-wave-svg\"\r\n    viewBox=\"0 0 451 98\"\r\n    preserveAspectRatio=\"none\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M0 48.297C0 47.5374 0.433006 46.8417 1.11413 46.5054C68.2428 13.3645 135.371 -3.17555 202.5 2.37853C269.731 7.94106 350.354 41.2053 448.816 85.6166C449.533 85.9398 450 86.656 450 87.4422V95.3202C450 96.4248 449.105 97.3202 448 97.3202H1.99999C0.89542 97.3202 0 96.4248 0 95.3202V48.297Z\"\r\n      fill=\"#E88618\"\r\n      fill-opacity=\"0.22\"\r\n    />\r\n    <path\r\n      d=\"M1.5 48.3202C69 17.1144 136 -2.89515 203.5 2.30581C271 7.50677 350 45.2125 449 86.8202\"\r\n      stroke=\"#E88618\"\r\n      stroke-width=\"2.97\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n\r\n  <!-- Gr\u00E1fico Vermelho: 0 vagas no per\u00EDodo -->\r\n  <svg\r\n    *ngSwitchDefault\r\n    class=\"performance-wave-svg\"\r\n    viewBox=\"0 0 450 97\"\r\n    preserveAspectRatio=\"none\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M0 3.97707C0 2.14014 1.66636 0.739066 3.48178 1.01927C91.1757 14.5544 136.168 28.0029 225 34.771C313.933 41.5468 380.896 61.7137 447.599 75.4232C448.996 75.7104 450 76.939 450 78.3656V93.4853C450 95.1421 448.657 96.4853 447 96.4853H3C1.34314 96.4853 0 95.1421 0 93.4853V3.97707Z\"\r\n      fill=\"#FFDEDE\"\r\n    />\r\n    <path\r\n      d=\"M1.5 1.48529C72.9286 15.771 108.571 21.8424 180 28.9853C251.429 36.1281 394.429 60.6996 448 74.9853\"\r\n      stroke=\"#E8412A\"\r\n      stroke-width=\"2.97\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:98px;margin:6px 0 14px}.performance-wave-container{width:100%;height:100%;overflow:hidden;display:flex;align-items:flex-end}.performance-wave-container .performance-wave-svg{width:100%;height:100%;display:block}\n"] }]
+        }], propDecorators: { level: [{
+                type: Input
+            }] } });
+
+/**
+ * Componente interno para renderizacao de icones vetoriais SVG leves do dashboard.
+ */
+class DashboardIconComponent {
+    constructor() {
+        /** Nome do icone a ser exibido. */
+        this.name = 'info';
+        /** Aplica rotacao de 180 graus (util para setas de expansao e indicadores de tendencia). */
+        this.rotated = false;
+        /** Classes CSS adicionais a serem anexadas ao elemento SVG. */
+        this.customClass = '';
+    }
+}
+DashboardIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DashboardIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashboardIconComponent, selector: "careon-dashboard-icon", inputs: { name: "name", rotated: "rotated", customClass: "customClass" }, host: { properties: { "class.rotated": "this.rotated" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"name\">\r\n  <!-- Arrow Up Icon -->\r\n  <svg\r\n    *ngSwitchCase=\"'arrow-up'\"\r\n    [class]=\"customClass\"\r\n    viewBox=\"0 0 10 10\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M2.5 7.5L7.5 2.5M7.5 2.5H3.75M7.5 2.5V6.25\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"1.6\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n\r\n  <!-- Arrow Down Icon -->\r\n  <svg\r\n    *ngSwitchCase=\"'arrow-down'\"\r\n    [class]=\"customClass\"\r\n    viewBox=\"0 0 10 10\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M2.5 2.5L7.5 7.5M7.5 7.5H3.75M7.5 7.5V3.75\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"1.6\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n\r\n  <!-- Info Icon -->\r\n  <svg\r\n    *ngSwitchCase=\"'info'\"\r\n    [class]=\"customClass\"\r\n    viewBox=\"0 0 20 20\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <circle cx=\"10\" cy=\"10\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\" />\r\n    <path d=\"M10 8.5V14\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" />\r\n    <circle cx=\"10\" cy=\"5.5\" r=\"1.1\" fill=\"currentColor\" />\r\n  </svg>\r\n\r\n  <!-- Chevron Down Icon -->\r\n  <svg\r\n    *ngSwitchCase=\"'chevron-down'\"\r\n    [class]=\"customClass\"\r\n    viewBox=\"0 0 20 20\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M5 7.5L10 12.5L15 7.5\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n</ng-container>\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:1}svg{display:block;width:100%;height:100%}:host(.rotated){transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'careon-dashboard-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"name\">\r\n  <!-- Arrow Up Icon -->\r\n  <svg\r\n    *ngSwitchCase=\"'arrow-up'\"\r\n    [class]=\"customClass\"\r\n    viewBox=\"0 0 10 10\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M2.5 7.5L7.5 2.5M7.5 2.5H3.75M7.5 2.5V6.25\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"1.6\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n\r\n  <!-- Arrow Down Icon -->\r\n  <svg\r\n    *ngSwitchCase=\"'arrow-down'\"\r\n    [class]=\"customClass\"\r\n    viewBox=\"0 0 10 10\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M2.5 2.5L7.5 7.5M7.5 7.5H3.75M7.5 7.5V3.75\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"1.6\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n\r\n  <!-- Info Icon -->\r\n  <svg\r\n    *ngSwitchCase=\"'info'\"\r\n    [class]=\"customClass\"\r\n    viewBox=\"0 0 20 20\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <circle cx=\"10\" cy=\"10\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\" />\r\n    <path d=\"M10 8.5V14\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" />\r\n    <circle cx=\"10\" cy=\"5.5\" r=\"1.1\" fill=\"currentColor\" />\r\n  </svg>\r\n\r\n  <!-- Chevron Down Icon -->\r\n  <svg\r\n    *ngSwitchCase=\"'chevron-down'\"\r\n    [class]=\"customClass\"\r\n    viewBox=\"0 0 20 20\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M5 7.5L10 12.5L15 7.5\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n</ng-container>\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:1}svg{display:block;width:100%;height:100%}:host(.rotated){transform:rotate(180deg)}\n"] }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], rotated: [{
+                type: HostBinding,
+                args: ['class.rotated']
+            }, {
+                type: Input
+            }], customClass: [{
+                type: Input
+            }] } });
+
+/**
+ * Componente visual de esqueleto de carregamento (Loading Skeleton).
+ * Reproduz fielmente a distribuicao espacial dos cards, graficos e secoes do dashboard
+ * com efeito animado de shimmer durante operacoes assincronas de carregamento.
+ */
+class DashboardSkeletonComponent {
+}
+DashboardSkeletonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DashboardSkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashboardSkeletonComponent, selector: "careon-dashboard-skeleton", ngImport: i0, template: "<div class=\"dashboard-skeleton-container\" aria-busy=\"true\" aria-label=\"Carregando dados do dashboard\">\r\n  <!-- #region Section1: KPIs -->\r\n  <section class=\"skeleton-section skeleton-section--kpis\">\r\n    <div class=\"kpi-grid\">\r\n      <!-- 4 Standard KPI Cards -->\r\n      <article class=\"skeleton-card skeleton-kpi-card\" *ngFor=\"let kpi of [1, 2, 3, 4]\">\r\n        <div class=\"skeleton-line skeleton-w-40 skeleton-h-12\"></div>\r\n        <div class=\"skeleton-kpi-body\">\r\n          <div class=\"skeleton-line skeleton-w-50 skeleton-h-20\"></div>\r\n          <div class=\"skeleton-pill skeleton-badge\"></div>\r\n        </div>\r\n        <div class=\"skeleton-line skeleton-w-30 skeleton-h-10\"></div>\r\n      </article>\r\n\r\n      <!-- 1 Status KPI Card -->\r\n      <article class=\"skeleton-card skeleton-kpi-card skeleton-kpi-card--status\">\r\n        <div class=\"skeleton-line skeleton-w-50 skeleton-h-12\"></div>\r\n        <div class=\"skeleton-status-bar\">\r\n          <div class=\"skeleton-bar-segment skeleton-bar-segment--main\"></div>\r\n          <div class=\"skeleton-bar-segment skeleton-bar-segment--secondary\"></div>\r\n        </div>\r\n        <div class=\"skeleton-status-legend\">\r\n          <div class=\"skeleton-legend-item\">\r\n            <span class=\"skeleton-dot\"></span>\r\n            <div class=\"skeleton-line skeleton-w-40 skeleton-h-10\"></div>\r\n          </div>\r\n          <div class=\"skeleton-legend-item\">\r\n            <span class=\"skeleton-dot\"></span>\r\n            <div class=\"skeleton-line skeleton-w-45 skeleton-h-10\"></div>\r\n          </div>\r\n        </div>\r\n      </article>\r\n    </div>\r\n  </section>\r\n  <!-- #endregion -->\r\n\r\n  <!-- #region Section2: Attention & Performance -->\r\n  <section class=\"skeleton-section skeleton-section--attention\">\r\n    <div class=\"attention-perf-grid\">\r\n      <!-- Attention Card -->\r\n      <article class=\"skeleton-card skeleton-card--attention\">\r\n        <div class=\"skeleton-line skeleton-w-60 skeleton-h-18 skeleton-mb-24\"></div>\r\n        <div class=\"skeleton-attention-list\">\r\n          <div class=\"skeleton-attention-row\" *ngFor=\"let row of [1, 2, 3]; let last = last\">\r\n            <div class=\"skeleton-line skeleton-w-50 skeleton-h-14 skeleton-mb-8\"></div>\r\n            <div class=\"skeleton-line skeleton-w-85 skeleton-h-12\"></div>\r\n            <div class=\"skeleton-divider\" *ngIf=\"!last\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"skeleton-button-pill skeleton-mt-auto\"></div>\r\n      </article>\r\n\r\n      <!-- Performance Card -->\r\n      <article class=\"skeleton-card skeleton-card--performance\">\r\n        <div class=\"skeleton-perf-header skeleton-mb-16\">\r\n          <div class=\"skeleton-line skeleton-w-55 skeleton-h-18\"></div>\r\n          <span class=\"skeleton-info-icon\">\r\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#C9CDD0\" stroke-width=\"2\"/>\r\n              <circle cx=\"12\" cy=\"8\" r=\"1.25\" fill=\"#C9CDD0\"/>\r\n              <line x1=\"12\" y1=\"11\" x2=\"12\" y2=\"16\" stroke=\"#C9CDD0\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n            </svg>\r\n          </span>\r\n        </div>\r\n\r\n        <div class=\"skeleton-perf-wave-box\">\r\n          <svg class=\"skeleton-wave-svg\" viewBox=\"0 0 450 100\" preserveAspectRatio=\"none\">\r\n            <path\r\n              d=\"M 0,80 Q 90,70 180,45 T 450,20 L 450,100 L 0,100 Z\"\r\n              fill=\"#DEE2E6\"\r\n            />\r\n            <path\r\n              d=\"M 0,80 Q 90,70 180,45 T 450,20\"\r\n              fill=\"none\"\r\n              stroke=\"#C2C7CC\"\r\n              stroke-width=\"2.8\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </div>\r\n\r\n        <div class=\"skeleton-line skeleton-w-75 skeleton-h-14 skeleton-mb-8\"></div>\r\n        <div class=\"skeleton-line skeleton-w-90 skeleton-h-14 skeleton-mb-24\"></div>\r\n        <div class=\"skeleton-button-pill skeleton-mt-auto\"></div>\r\n      </article>\r\n    </div>\r\n  </section>\r\n  <!-- #endregion -->\r\n\r\n  <!-- #region Section3: Vacancy Deep Dive -->\r\n  <section class=\"skeleton-section skeleton-section--deepdive\">\r\n    <article class=\"skeleton-card skeleton-card--deepdive\">\r\n      <!-- Header with Dropdown Selector -->\r\n      <div class=\"skeleton-deepdive-header skeleton-mb-24\">\r\n        <div class=\"skeleton-header-titles\">\r\n          <div class=\"skeleton-line skeleton-w-40 skeleton-h-18 skeleton-mb-8\"></div>\r\n          <div class=\"skeleton-line skeleton-w-25 skeleton-h-12\"></div>\r\n        </div>\r\n        <div class=\"skeleton-dropdown-pill\">\r\n          <div class=\"skeleton-line skeleton-w-50 skeleton-h-12\"></div>\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n            <path d=\"M6 9L12 15L18 9\" stroke=\"#87898A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Timeline Chart Box -->\r\n      <div class=\"skeleton-timeline-container skeleton-mb-32\">\r\n        <svg class=\"skeleton-timeline-overlay-svg\" viewBox=\"0 0 700 170\" preserveAspectRatio=\"none\">\r\n          <line x1=\"0\" y1=\"140\" x2=\"700\" y2=\"140\" stroke=\"#F7F7F7\" stroke-width=\"1\"/>\r\n          <polyline\r\n            points=\"50,110 150,60 250,90 350,50 450,135 550,60 650,25\"\r\n            fill=\"none\"\r\n            stroke=\"#C2C7CC\"\r\n            stroke-width=\"1.6\"\r\n            stroke-dasharray=\"2 3\"\r\n          />\r\n          <circle cx=\"50\" cy=\"110\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"150\" cy=\"60\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"250\" cy=\"90\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"350\" cy=\"50\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"450\" cy=\"135\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"550\" cy=\"60\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"650\" cy=\"25\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n        </svg>\r\n\r\n        <div class=\"skeleton-timeline-columns\">\r\n          <div class=\"skeleton-timeline-col\">\r\n            <div class=\"skeleton-bar-hatched\" style=\"height: 32px;\"></div>\r\n            <div class=\"skeleton-line skeleton-w-60 skeleton-h-12 skeleton-mt-8\"></div>\r\n          </div>\r\n          <div class=\"skeleton-timeline-col\">\r\n            <div class=\"skeleton-bar-hatched\" style=\"height: 82px;\"></div>\r\n            <div class=\"skeleton-line skeleton-w-60 skeleton-h-12 skeleton-mt-8\"></div>\r\n          </div>\r\n          <div class=\"skeleton-timeline-col\">\r\n            <div class=\"skeleton-bar-hatched\" style=\"height: 52px;\"></div>\r\n            <div class=\"skeleton-line skeleton-w-60 skeleton-h-12 skeleton-mt-8\"></div>\r\n          </div>\r\n          <div class=\"skeleton-timeline-col\">\r\n            <div class=\"skeleton-bar-hatched\" style=\"height: 92px;\"></div>\r\n            <div class=\"skeleton-line skeleton-w-60 skeleton-h-12 skeleton-mt-8\"></div>\r\n          </div>\r\n          <div class=\"skeleton-timeline-col\">\r\n            <div class=\"skeleton-bar-hatched\" style=\"height: 8px;\"></div>\r\n            <div class=\"skeleton-line skeleton-w-60 skeleton-h-12 skeleton-mt-8\"></div>\r\n          </div>\r\n          <div class=\"skeleton-timeline-col\">\r\n            <div class=\"skeleton-bar-hatched\" style=\"height: 82px;\"></div>\r\n            <div class=\"skeleton-line skeleton-w-60 skeleton-h-12 skeleton-mt-8\"></div>\r\n          </div>\r\n          <div class=\"skeleton-timeline-col skeleton-timeline-col--active\">\r\n            <div class=\"skeleton-tag-pill\"></div>\r\n            <div class=\"skeleton-bar-solid\" style=\"height: 118px;\"></div>\r\n            <div class=\"skeleton-line skeleton-w-60 skeleton-h-12 skeleton-mt-8\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Middle Subgrid: Donut and Funnel -->\r\n      <div class=\"skeleton-deepdive-middle-grid skeleton-mb-32\">\r\n        <!-- Donut Sub-card -->\r\n        <div class=\"skeleton-subcard skeleton-donut-subcard\">\r\n          <div class=\"skeleton-line skeleton-w-50 skeleton-h-13 skeleton-mb-16\"></div>\r\n          <div class=\"skeleton-donut-layout\">\r\n            <div class=\"skeleton-donut-ring\">\r\n              <svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\">\r\n                <circle cx=\"50\" cy=\"50\" r=\"36\" fill=\"none\" stroke=\"#DEE2E6\" stroke-width=\"16\"/>\r\n                <circle\r\n                  cx=\"50\"\r\n                  cy=\"50\"\r\n                  r=\"36\"\r\n                  fill=\"none\"\r\n                  stroke=\"#C2C7CC\"\r\n                  stroke-width=\"16\"\r\n                  stroke-dasharray=\"60 170\"\r\n                  stroke-dashoffset=\"15\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"skeleton-donut-legends\">\r\n              <div class=\"skeleton-legend-item skeleton-mb-12\">\r\n                <span class=\"skeleton-dot\"></span>\r\n                <div class=\"skeleton-line skeleton-w-70 skeleton-h-11\"></div>\r\n              </div>\r\n              <div class=\"skeleton-legend-item\">\r\n                <span class=\"skeleton-dot\"></span>\r\n                <div class=\"skeleton-line skeleton-w-55 skeleton-h-11\"></div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Funnel Sub-card -->\r\n        <div class=\"skeleton-subcard skeleton-funnel-subcard\">\r\n          <div class=\"skeleton-line skeleton-w-40 skeleton-h-12 skeleton-mb-16\"></div>\r\n          <div class=\"skeleton-funnel-bars\">\r\n            <div class=\"skeleton-funnel-bar skeleton-w-100 skeleton-mb-12\"></div>\r\n            <div class=\"skeleton-funnel-bar skeleton-w-65\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Bottom Row: Salary Comparison -->\r\n      <div class=\"skeleton-salary-grid\">\r\n        <!-- Salary Metrics Box -->\r\n        <div class=\"skeleton-subcard skeleton-salary-metrics-subcard\">\r\n          <div class=\"skeleton-salary-columns skeleton-mb-16\">\r\n            <div class=\"skeleton-salary-metric-col\">\r\n              <div class=\"skeleton-line skeleton-w-60 skeleton-h-12 skeleton-mb-8\"></div>\r\n              <div class=\"skeleton-line skeleton-w-80 skeleton-h-24\"></div>\r\n            </div>\r\n            <div class=\"skeleton-salary-divider\"></div>\r\n            <div class=\"skeleton-salary-metric-col\">\r\n              <div class=\"skeleton-line skeleton-w-60 skeleton-h-12 skeleton-mb-8\"></div>\r\n              <div class=\"skeleton-line skeleton-w-80 skeleton-h-24\"></div>\r\n            </div>\r\n          </div>\r\n          <div class=\"skeleton-line skeleton-w-75 skeleton-h-12 skeleton-mb-6\"></div>\r\n          <div class=\"skeleton-line skeleton-w-90 skeleton-h-12\"></div>\r\n        </div>\r\n\r\n        <!-- Salary Action Box -->\r\n        <div class=\"skeleton-subcard skeleton-salary-action-subcard\">\r\n          <div class=\"skeleton-line skeleton-w-70 skeleton-h-16 skeleton-mb-8\"></div>\r\n          <div class=\"skeleton-line skeleton-w-85 skeleton-h-12 skeleton-mb-24\"></div>\r\n          <div class=\"skeleton-button-pill skeleton-button-pill--medium skeleton-mt-auto\"></div>\r\n        </div>\r\n      </div>\r\n    </article>\r\n  </section>\r\n  <!-- #endregion -->\r\n\r\n  <!-- #region Section4: Applications per Vacancy -->\r\n  <section class=\"skeleton-section skeleton-section--applications\">\r\n    <article class=\"skeleton-card skeleton-card--applications\">\r\n      <div class=\"skeleton-header-titles skeleton-mb-24\">\r\n        <div class=\"skeleton-line skeleton-w-35 skeleton-h-20 skeleton-mb-8\"></div>\r\n        <div class=\"skeleton-line skeleton-w-20 skeleton-h-20\"></div>\r\n      </div>\r\n\r\n      <div class=\"skeleton-comparison-chart-container\">\r\n        <svg class=\"skeleton-comparison-overlay-svg\" viewBox=\"0 0 1040 180\" preserveAspectRatio=\"none\">\r\n          <line x1=\"0\" y1=\"150\" x2=\"1040\" y2=\"150\" stroke=\"#F7F7F7\" stroke-width=\"1\"/>\r\n          <polyline\r\n            points=\"40,85 140,55 240,135 340,105 440,80 540,148 640,40 740,115 840,90 940,125\"\r\n            fill=\"none\"\r\n            stroke=\"#C2C7CC\"\r\n            stroke-width=\"1.6\"\r\n            stroke-dasharray=\"2 3\"\r\n          />\r\n          <circle cx=\"40\" cy=\"85\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"140\" cy=\"55\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"240\" cy=\"135\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"340\" cy=\"105\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"440\" cy=\"80\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"540\" cy=\"148\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"640\" cy=\"40\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"740\" cy=\"115\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"840\" cy=\"90\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"940\" cy=\"125\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n        </svg>\r\n\r\n        <div class=\"skeleton-comparison-bars\">\r\n          <div\r\n            class=\"skeleton-comparison-col\"\r\n            *ngFor=\"let h of ['100px', '130px', '28px', '60px', '85px', '4px', '115px', '48px', '72px', '36px']\"\r\n          >\r\n            <div class=\"skeleton-comparison-bar\" [style.height]=\"h\"></div>\r\n            <div class=\"skeleton-line skeleton-w-70 skeleton-h-12 skeleton-mt-8\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </article>\r\n  </section>\r\n  <!-- #endregion -->\r\n</div>\r\n", styles: [":host{display:block;width:100%}.dashboard-skeleton-container{display:flex;flex-direction:column;gap:32px;width:100%;box-sizing:border-box}.dashboard-skeleton-container .skeleton-card{background-color:#fff;box-shadow:0 4px 16px #0000000f;box-sizing:border-box}.dashboard-skeleton-container .skeleton-section--kpis{width:100%}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.75fr);gap:16px;align-items:stretch;width:100%}@media (max-width: 1200px){.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid{grid-template-columns:repeat(2,1fr)}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card--status{grid-column:span 2}}@media (max-width: 600px){.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid{grid-template-columns:1fr}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card--status{grid-column:span 1}}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card{border-radius:24px;padding:16px 20px;min-height:108px;display:flex;flex-direction:column;justify-content:space-between}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card .skeleton-kpi-body{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card .skeleton-kpi-body .skeleton-badge{width:34px;height:24px;border-radius:8px;background-color:#dee2e6;flex-shrink:0}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card--status .skeleton-status-bar{display:flex;gap:4px;width:100%;height:24px;margin:6px 0}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card--status .skeleton-status-bar .skeleton-bar-segment{height:100%;border-radius:6px;background-color:#dee2e6}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card--status .skeleton-status-bar .skeleton-bar-segment--main{flex:68}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card--status .skeleton-status-bar .skeleton-bar-segment--secondary{flex:32}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card--status .skeleton-status-legend{display:flex;align-items:center;gap:16px}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card--status .skeleton-status-legend .skeleton-legend-item{display:flex;align-items:center;gap:6px;flex:1}.dashboard-skeleton-container .skeleton-section--attention{width:100%}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;width:100%}@media (max-width: 900px){.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid{grid-template-columns:1fr}}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid .skeleton-card--attention{border-radius:24px;padding:24px 28px;min-height:310px;display:flex;flex-direction:column}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid .skeleton-card--attention .skeleton-attention-list{display:flex;flex-direction:column;margin-bottom:24px}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid .skeleton-card--attention .skeleton-attention-list .skeleton-attention-row{display:flex;flex-direction:column;padding:8px 0}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid .skeleton-card--attention .skeleton-attention-list .skeleton-attention-row .skeleton-divider{height:1px;background-color:#f7f7f7;width:100%;margin-top:12px}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid .skeleton-card--performance{border-radius:24px;padding:24px 28px;min-height:310px;display:flex;flex-direction:column}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid .skeleton-card--performance .skeleton-perf-header{display:flex;align-items:center;justify-content:space-between}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid .skeleton-card--performance .skeleton-perf-header .skeleton-info-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid .skeleton-card--performance .skeleton-perf-wave-box{width:100%;height:95px;margin-bottom:20px;border-radius:12px;overflow:hidden}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid .skeleton-card--performance .skeleton-perf-wave-box .skeleton-wave-svg{width:100%;height:100%;display:block}.dashboard-skeleton-container .skeleton-section--deepdive{width:100%}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive{border-radius:24px;padding:28px 32px;display:flex;flex-direction:column}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-header .skeleton-dropdown-pill{padding:8px 18px;border-radius:20.5px;border:1px solid #f7f7f7;background:#ffffff;display:flex;align-items:center;justify-content:space-between;width:320px;max-width:100%;box-sizing:border-box}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-timeline-container{position:relative;height:180px;width:100%;display:flex;align-items:flex-end;padding-bottom:8px;box-sizing:border-box}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-timeline-container .skeleton-timeline-overlay-svg{position:absolute;top:0;left:0;width:100%;height:150px;pointer-events:none;z-index:2}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-timeline-container .skeleton-timeline-columns{display:flex;justify-content:space-around;align-items:flex-end;width:100%;height:100%;z-index:1}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-timeline-container .skeleton-timeline-columns .skeleton-timeline-col{display:flex;flex-direction:column;align-items:center;position:relative;width:48px}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-timeline-container .skeleton-timeline-columns .skeleton-timeline-col .skeleton-bar-hatched{width:32px;border-radius:8px 8px 0 0;background:repeating-linear-gradient(45deg,#c9cdd0,#c9cdd0 1.5px,#ffffff 1.5px,#ffffff 8px);border:1px solid #c9cdd0;box-sizing:border-box}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-timeline-container .skeleton-timeline-columns .skeleton-timeline-col .skeleton-bar-solid{width:32px;border-radius:8px 8px 0 0;background-color:#dee2e6}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-timeline-container .skeleton-timeline-columns .skeleton-timeline-col .skeleton-tag-pill{position:absolute;top:-24px;width:28px;height:16px;border-radius:8px;background-color:#dee2e6}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-middle-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:24px}@media (max-width: 900px){.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-middle-grid{grid-template-columns:1fr}}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-middle-grid .skeleton-donut-subcard .skeleton-donut-layout{display:flex;align-items:center;gap:20px}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-middle-grid .skeleton-donut-subcard .skeleton-donut-layout .skeleton-donut-ring{width:90px;height:90px;flex-shrink:0}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-middle-grid .skeleton-donut-subcard .skeleton-donut-layout .skeleton-donut-ring svg{width:100%;height:100%}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-middle-grid .skeleton-donut-subcard .skeleton-donut-layout .skeleton-donut-legends{display:flex;flex-direction:column;flex:1}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-middle-grid .skeleton-donut-subcard .skeleton-donut-layout .skeleton-donut-legends .skeleton-legend-item{display:flex;align-items:center;gap:8px}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-middle-grid .skeleton-funnel-subcard .skeleton-funnel-bars{display:flex;flex-direction:column;gap:12px;justify-content:center;height:100%}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-middle-grid .skeleton-funnel-subcard .skeleton-funnel-bars .skeleton-funnel-bar{height:42px;border-radius:10px;background-color:#dee2e6}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-salary-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}@media (max-width: 900px){.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-salary-grid{grid-template-columns:1fr}}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-salary-grid .skeleton-salary-metrics-subcard{display:flex;flex-direction:column}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-salary-grid .skeleton-salary-metrics-subcard .skeleton-salary-columns{display:flex;align-items:center;justify-content:space-around;width:100%}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-salary-grid .skeleton-salary-metrics-subcard .skeleton-salary-columns .skeleton-salary-metric-col{display:flex;flex-direction:column;align-items:center;flex:1}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-salary-grid .skeleton-salary-metrics-subcard .skeleton-salary-columns .skeleton-salary-divider{width:1px;height:48px;background-color:#c9cdd0}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-salary-grid .skeleton-salary-action-subcard{display:flex;flex-direction:column;justify-content:space-between}.dashboard-skeleton-container .skeleton-section--applications{width:100%}.dashboard-skeleton-container .skeleton-section--applications .skeleton-card--applications{border-radius:24px;padding:28px 32px;display:flex;flex-direction:column}.dashboard-skeleton-container .skeleton-section--applications .skeleton-card--applications .skeleton-comparison-chart-container{position:relative;height:190px;width:100%;display:flex;align-items:flex-end;padding-bottom:8px;box-sizing:border-box}.dashboard-skeleton-container .skeleton-section--applications .skeleton-card--applications .skeleton-comparison-chart-container .skeleton-comparison-overlay-svg{position:absolute;top:0;left:0;width:100%;height:160px;pointer-events:none;z-index:2}.dashboard-skeleton-container .skeleton-section--applications .skeleton-card--applications .skeleton-comparison-chart-container .skeleton-comparison-bars{display:flex;justify-content:space-between;align-items:flex-end;width:100%;height:100%;z-index:1;padding:0 8px;box-sizing:border-box}.dashboard-skeleton-container .skeleton-section--applications .skeleton-card--applications .skeleton-comparison-chart-container .skeleton-comparison-bars .skeleton-comparison-col{display:flex;flex-direction:column;align-items:center;flex:1}.dashboard-skeleton-container .skeleton-section--applications .skeleton-card--applications .skeleton-comparison-chart-container .skeleton-comparison-bars .skeleton-comparison-col .skeleton-comparison-bar{width:28px;border-radius:8px 8px 0 0;background-color:#dee2e6}.dashboard-skeleton-container .skeleton-subcard{background-color:#f7f7f7;border-radius:24px;padding:20px 24px;box-sizing:border-box}.dashboard-skeleton-container .skeleton-line{border-radius:6px;background-color:#d9dbe0;animation:skeleton-pulse 1.8s ease-in-out infinite}.dashboard-skeleton-container .skeleton-pill{background-color:#dee2e6;animation:skeleton-pulse 1.8s ease-in-out infinite}.dashboard-skeleton-container .skeleton-dot{width:8px;height:8px;border-radius:50%;background-color:#dee2e6;flex-shrink:0}.dashboard-skeleton-container .skeleton-button-pill{height:48px;border-radius:24px;background-color:#dee2e6;width:100%;animation:skeleton-pulse 1.8s ease-in-out infinite}.dashboard-skeleton-container .skeleton-button-pill--medium{height:42px;border-radius:21px}.dashboard-skeleton-container .skeleton-bar-hatched,.dashboard-skeleton-container .skeleton-bar-solid,.dashboard-skeleton-container .skeleton-funnel-bar,.dashboard-skeleton-container .skeleton-comparison-bar{animation:skeleton-pulse 1.8s ease-in-out infinite}.dashboard-skeleton-container .skeleton-w-20{width:20%}.dashboard-skeleton-container .skeleton-w-25{width:25%}.dashboard-skeleton-container .skeleton-w-30{width:30%}.dashboard-skeleton-container .skeleton-w-35{width:35%}.dashboard-skeleton-container .skeleton-w-40{width:40%}.dashboard-skeleton-container .skeleton-w-45{width:45%}.dashboard-skeleton-container .skeleton-w-50{width:50%}.dashboard-skeleton-container .skeleton-w-55{width:55%}.dashboard-skeleton-container .skeleton-w-60{width:60%}.dashboard-skeleton-container .skeleton-w-65{width:65%}.dashboard-skeleton-container .skeleton-w-70{width:70%}.dashboard-skeleton-container .skeleton-w-75{width:75%}.dashboard-skeleton-container .skeleton-w-80{width:80%}.dashboard-skeleton-container .skeleton-w-85{width:85%}.dashboard-skeleton-container .skeleton-w-90{width:90%}.dashboard-skeleton-container .skeleton-w-100{width:100%}.dashboard-skeleton-container .skeleton-h-10{height:10px}.dashboard-skeleton-container .skeleton-h-11{height:11px}.dashboard-skeleton-container .skeleton-h-12{height:12px}.dashboard-skeleton-container .skeleton-h-13{height:13px}.dashboard-skeleton-container .skeleton-h-14{height:14px}.dashboard-skeleton-container .skeleton-h-16{height:16px}.dashboard-skeleton-container .skeleton-h-18{height:18px}.dashboard-skeleton-container .skeleton-h-20{height:20px}.dashboard-skeleton-container .skeleton-h-24{height:24px}.dashboard-skeleton-container .skeleton-mt-auto{margin-top:auto}.dashboard-skeleton-container .skeleton-mt-8{margin-top:8px}.dashboard-skeleton-container .skeleton-mb-6{margin-bottom:6px}.dashboard-skeleton-container .skeleton-mb-8{margin-bottom:8px}.dashboard-skeleton-container .skeleton-mb-12{margin-bottom:12px}.dashboard-skeleton-container .skeleton-mb-16{margin-bottom:16px}.dashboard-skeleton-container .skeleton-mb-24{margin-bottom:24px}.dashboard-skeleton-container .skeleton-mb-32{margin-bottom:32px}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.62}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'careon-dashboard-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dashboard-skeleton-container\" aria-busy=\"true\" aria-label=\"Carregando dados do dashboard\">\r\n  <!-- #region Section1: KPIs -->\r\n  <section class=\"skeleton-section skeleton-section--kpis\">\r\n    <div class=\"kpi-grid\">\r\n      <!-- 4 Standard KPI Cards -->\r\n      <article class=\"skeleton-card skeleton-kpi-card\" *ngFor=\"let kpi of [1, 2, 3, 4]\">\r\n        <div class=\"skeleton-line skeleton-w-40 skeleton-h-12\"></div>\r\n        <div class=\"skeleton-kpi-body\">\r\n          <div class=\"skeleton-line skeleton-w-50 skeleton-h-20\"></div>\r\n          <div class=\"skeleton-pill skeleton-badge\"></div>\r\n        </div>\r\n        <div class=\"skeleton-line skeleton-w-30 skeleton-h-10\"></div>\r\n      </article>\r\n\r\n      <!-- 1 Status KPI Card -->\r\n      <article class=\"skeleton-card skeleton-kpi-card skeleton-kpi-card--status\">\r\n        <div class=\"skeleton-line skeleton-w-50 skeleton-h-12\"></div>\r\n        <div class=\"skeleton-status-bar\">\r\n          <div class=\"skeleton-bar-segment skeleton-bar-segment--main\"></div>\r\n          <div class=\"skeleton-bar-segment skeleton-bar-segment--secondary\"></div>\r\n        </div>\r\n        <div class=\"skeleton-status-legend\">\r\n          <div class=\"skeleton-legend-item\">\r\n            <span class=\"skeleton-dot\"></span>\r\n            <div class=\"skeleton-line skeleton-w-40 skeleton-h-10\"></div>\r\n          </div>\r\n          <div class=\"skeleton-legend-item\">\r\n            <span class=\"skeleton-dot\"></span>\r\n            <div class=\"skeleton-line skeleton-w-45 skeleton-h-10\"></div>\r\n          </div>\r\n        </div>\r\n      </article>\r\n    </div>\r\n  </section>\r\n  <!-- #endregion -->\r\n\r\n  <!-- #region Section2: Attention & Performance -->\r\n  <section class=\"skeleton-section skeleton-section--attention\">\r\n    <div class=\"attention-perf-grid\">\r\n      <!-- Attention Card -->\r\n      <article class=\"skeleton-card skeleton-card--attention\">\r\n        <div class=\"skeleton-line skeleton-w-60 skeleton-h-18 skeleton-mb-24\"></div>\r\n        <div class=\"skeleton-attention-list\">\r\n          <div class=\"skeleton-attention-row\" *ngFor=\"let row of [1, 2, 3]; let last = last\">\r\n            <div class=\"skeleton-line skeleton-w-50 skeleton-h-14 skeleton-mb-8\"></div>\r\n            <div class=\"skeleton-line skeleton-w-85 skeleton-h-12\"></div>\r\n            <div class=\"skeleton-divider\" *ngIf=\"!last\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"skeleton-button-pill skeleton-mt-auto\"></div>\r\n      </article>\r\n\r\n      <!-- Performance Card -->\r\n      <article class=\"skeleton-card skeleton-card--performance\">\r\n        <div class=\"skeleton-perf-header skeleton-mb-16\">\r\n          <div class=\"skeleton-line skeleton-w-55 skeleton-h-18\"></div>\r\n          <span class=\"skeleton-info-icon\">\r\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#C9CDD0\" stroke-width=\"2\"/>\r\n              <circle cx=\"12\" cy=\"8\" r=\"1.25\" fill=\"#C9CDD0\"/>\r\n              <line x1=\"12\" y1=\"11\" x2=\"12\" y2=\"16\" stroke=\"#C9CDD0\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n            </svg>\r\n          </span>\r\n        </div>\r\n\r\n        <div class=\"skeleton-perf-wave-box\">\r\n          <svg class=\"skeleton-wave-svg\" viewBox=\"0 0 450 100\" preserveAspectRatio=\"none\">\r\n            <path\r\n              d=\"M 0,80 Q 90,70 180,45 T 450,20 L 450,100 L 0,100 Z\"\r\n              fill=\"#DEE2E6\"\r\n            />\r\n            <path\r\n              d=\"M 0,80 Q 90,70 180,45 T 450,20\"\r\n              fill=\"none\"\r\n              stroke=\"#C2C7CC\"\r\n              stroke-width=\"2.8\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </div>\r\n\r\n        <div class=\"skeleton-line skeleton-w-75 skeleton-h-14 skeleton-mb-8\"></div>\r\n        <div class=\"skeleton-line skeleton-w-90 skeleton-h-14 skeleton-mb-24\"></div>\r\n        <div class=\"skeleton-button-pill skeleton-mt-auto\"></div>\r\n      </article>\r\n    </div>\r\n  </section>\r\n  <!-- #endregion -->\r\n\r\n  <!-- #region Section3: Vacancy Deep Dive -->\r\n  <section class=\"skeleton-section skeleton-section--deepdive\">\r\n    <article class=\"skeleton-card skeleton-card--deepdive\">\r\n      <!-- Header with Dropdown Selector -->\r\n      <div class=\"skeleton-deepdive-header skeleton-mb-24\">\r\n        <div class=\"skeleton-header-titles\">\r\n          <div class=\"skeleton-line skeleton-w-40 skeleton-h-18 skeleton-mb-8\"></div>\r\n          <div class=\"skeleton-line skeleton-w-25 skeleton-h-12\"></div>\r\n        </div>\r\n        <div class=\"skeleton-dropdown-pill\">\r\n          <div class=\"skeleton-line skeleton-w-50 skeleton-h-12\"></div>\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n            <path d=\"M6 9L12 15L18 9\" stroke=\"#87898A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Timeline Chart Box -->\r\n      <div class=\"skeleton-timeline-container skeleton-mb-32\">\r\n        <svg class=\"skeleton-timeline-overlay-svg\" viewBox=\"0 0 700 170\" preserveAspectRatio=\"none\">\r\n          <line x1=\"0\" y1=\"140\" x2=\"700\" y2=\"140\" stroke=\"#F7F7F7\" stroke-width=\"1\"/>\r\n          <polyline\r\n            points=\"50,110 150,60 250,90 350,50 450,135 550,60 650,25\"\r\n            fill=\"none\"\r\n            stroke=\"#C2C7CC\"\r\n            stroke-width=\"1.6\"\r\n            stroke-dasharray=\"2 3\"\r\n          />\r\n          <circle cx=\"50\" cy=\"110\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"150\" cy=\"60\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"250\" cy=\"90\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"350\" cy=\"50\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"450\" cy=\"135\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"550\" cy=\"60\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"650\" cy=\"25\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n        </svg>\r\n\r\n        <div class=\"skeleton-timeline-columns\">\r\n          <div class=\"skeleton-timeline-col\">\r\n            <div class=\"skeleton-bar-hatched\" style=\"height: 32px;\"></div>\r\n            <div class=\"skeleton-line skeleton-w-60 skeleton-h-12 skeleton-mt-8\"></div>\r\n          </div>\r\n          <div class=\"skeleton-timeline-col\">\r\n            <div class=\"skeleton-bar-hatched\" style=\"height: 82px;\"></div>\r\n            <div class=\"skeleton-line skeleton-w-60 skeleton-h-12 skeleton-mt-8\"></div>\r\n          </div>\r\n          <div class=\"skeleton-timeline-col\">\r\n            <div class=\"skeleton-bar-hatched\" style=\"height: 52px;\"></div>\r\n            <div class=\"skeleton-line skeleton-w-60 skeleton-h-12 skeleton-mt-8\"></div>\r\n          </div>\r\n          <div class=\"skeleton-timeline-col\">\r\n            <div class=\"skeleton-bar-hatched\" style=\"height: 92px;\"></div>\r\n            <div class=\"skeleton-line skeleton-w-60 skeleton-h-12 skeleton-mt-8\"></div>\r\n          </div>\r\n          <div class=\"skeleton-timeline-col\">\r\n            <div class=\"skeleton-bar-hatched\" style=\"height: 8px;\"></div>\r\n            <div class=\"skeleton-line skeleton-w-60 skeleton-h-12 skeleton-mt-8\"></div>\r\n          </div>\r\n          <div class=\"skeleton-timeline-col\">\r\n            <div class=\"skeleton-bar-hatched\" style=\"height: 82px;\"></div>\r\n            <div class=\"skeleton-line skeleton-w-60 skeleton-h-12 skeleton-mt-8\"></div>\r\n          </div>\r\n          <div class=\"skeleton-timeline-col skeleton-timeline-col--active\">\r\n            <div class=\"skeleton-tag-pill\"></div>\r\n            <div class=\"skeleton-bar-solid\" style=\"height: 118px;\"></div>\r\n            <div class=\"skeleton-line skeleton-w-60 skeleton-h-12 skeleton-mt-8\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Middle Subgrid: Donut and Funnel -->\r\n      <div class=\"skeleton-deepdive-middle-grid skeleton-mb-32\">\r\n        <!-- Donut Sub-card -->\r\n        <div class=\"skeleton-subcard skeleton-donut-subcard\">\r\n          <div class=\"skeleton-line skeleton-w-50 skeleton-h-13 skeleton-mb-16\"></div>\r\n          <div class=\"skeleton-donut-layout\">\r\n            <div class=\"skeleton-donut-ring\">\r\n              <svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\">\r\n                <circle cx=\"50\" cy=\"50\" r=\"36\" fill=\"none\" stroke=\"#DEE2E6\" stroke-width=\"16\"/>\r\n                <circle\r\n                  cx=\"50\"\r\n                  cy=\"50\"\r\n                  r=\"36\"\r\n                  fill=\"none\"\r\n                  stroke=\"#C2C7CC\"\r\n                  stroke-width=\"16\"\r\n                  stroke-dasharray=\"60 170\"\r\n                  stroke-dashoffset=\"15\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"skeleton-donut-legends\">\r\n              <div class=\"skeleton-legend-item skeleton-mb-12\">\r\n                <span class=\"skeleton-dot\"></span>\r\n                <div class=\"skeleton-line skeleton-w-70 skeleton-h-11\"></div>\r\n              </div>\r\n              <div class=\"skeleton-legend-item\">\r\n                <span class=\"skeleton-dot\"></span>\r\n                <div class=\"skeleton-line skeleton-w-55 skeleton-h-11\"></div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Funnel Sub-card -->\r\n        <div class=\"skeleton-subcard skeleton-funnel-subcard\">\r\n          <div class=\"skeleton-line skeleton-w-40 skeleton-h-12 skeleton-mb-16\"></div>\r\n          <div class=\"skeleton-funnel-bars\">\r\n            <div class=\"skeleton-funnel-bar skeleton-w-100 skeleton-mb-12\"></div>\r\n            <div class=\"skeleton-funnel-bar skeleton-w-65\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Bottom Row: Salary Comparison -->\r\n      <div class=\"skeleton-salary-grid\">\r\n        <!-- Salary Metrics Box -->\r\n        <div class=\"skeleton-subcard skeleton-salary-metrics-subcard\">\r\n          <div class=\"skeleton-salary-columns skeleton-mb-16\">\r\n            <div class=\"skeleton-salary-metric-col\">\r\n              <div class=\"skeleton-line skeleton-w-60 skeleton-h-12 skeleton-mb-8\"></div>\r\n              <div class=\"skeleton-line skeleton-w-80 skeleton-h-24\"></div>\r\n            </div>\r\n            <div class=\"skeleton-salary-divider\"></div>\r\n            <div class=\"skeleton-salary-metric-col\">\r\n              <div class=\"skeleton-line skeleton-w-60 skeleton-h-12 skeleton-mb-8\"></div>\r\n              <div class=\"skeleton-line skeleton-w-80 skeleton-h-24\"></div>\r\n            </div>\r\n          </div>\r\n          <div class=\"skeleton-line skeleton-w-75 skeleton-h-12 skeleton-mb-6\"></div>\r\n          <div class=\"skeleton-line skeleton-w-90 skeleton-h-12\"></div>\r\n        </div>\r\n\r\n        <!-- Salary Action Box -->\r\n        <div class=\"skeleton-subcard skeleton-salary-action-subcard\">\r\n          <div class=\"skeleton-line skeleton-w-70 skeleton-h-16 skeleton-mb-8\"></div>\r\n          <div class=\"skeleton-line skeleton-w-85 skeleton-h-12 skeleton-mb-24\"></div>\r\n          <div class=\"skeleton-button-pill skeleton-button-pill--medium skeleton-mt-auto\"></div>\r\n        </div>\r\n      </div>\r\n    </article>\r\n  </section>\r\n  <!-- #endregion -->\r\n\r\n  <!-- #region Section4: Applications per Vacancy -->\r\n  <section class=\"skeleton-section skeleton-section--applications\">\r\n    <article class=\"skeleton-card skeleton-card--applications\">\r\n      <div class=\"skeleton-header-titles skeleton-mb-24\">\r\n        <div class=\"skeleton-line skeleton-w-35 skeleton-h-20 skeleton-mb-8\"></div>\r\n        <div class=\"skeleton-line skeleton-w-20 skeleton-h-20\"></div>\r\n      </div>\r\n\r\n      <div class=\"skeleton-comparison-chart-container\">\r\n        <svg class=\"skeleton-comparison-overlay-svg\" viewBox=\"0 0 1040 180\" preserveAspectRatio=\"none\">\r\n          <line x1=\"0\" y1=\"150\" x2=\"1040\" y2=\"150\" stroke=\"#F7F7F7\" stroke-width=\"1\"/>\r\n          <polyline\r\n            points=\"40,85 140,55 240,135 340,105 440,80 540,148 640,40 740,115 840,90 940,125\"\r\n            fill=\"none\"\r\n            stroke=\"#C2C7CC\"\r\n            stroke-width=\"1.6\"\r\n            stroke-dasharray=\"2 3\"\r\n          />\r\n          <circle cx=\"40\" cy=\"85\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"140\" cy=\"55\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"240\" cy=\"135\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"340\" cy=\"105\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"440\" cy=\"80\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"540\" cy=\"148\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"640\" cy=\"40\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"740\" cy=\"115\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"840\" cy=\"90\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n          <circle cx=\"940\" cy=\"125\" r=\"3.2\" fill=\"#FFFFFF\" stroke=\"#C2C7CC\" stroke-width=\"1.6\"/>\r\n        </svg>\r\n\r\n        <div class=\"skeleton-comparison-bars\">\r\n          <div\r\n            class=\"skeleton-comparison-col\"\r\n            *ngFor=\"let h of ['100px', '130px', '28px', '60px', '85px', '4px', '115px', '48px', '72px', '36px']\"\r\n          >\r\n            <div class=\"skeleton-comparison-bar\" [style.height]=\"h\"></div>\r\n            <div class=\"skeleton-line skeleton-w-70 skeleton-h-12 skeleton-mt-8\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </article>\r\n  </section>\r\n  <!-- #endregion -->\r\n</div>\r\n", styles: [":host{display:block;width:100%}.dashboard-skeleton-container{display:flex;flex-direction:column;gap:32px;width:100%;box-sizing:border-box}.dashboard-skeleton-container .skeleton-card{background-color:#fff;box-shadow:0 4px 16px #0000000f;box-sizing:border-box}.dashboard-skeleton-container .skeleton-section--kpis{width:100%}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.75fr);gap:16px;align-items:stretch;width:100%}@media (max-width: 1200px){.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid{grid-template-columns:repeat(2,1fr)}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card--status{grid-column:span 2}}@media (max-width: 600px){.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid{grid-template-columns:1fr}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card--status{grid-column:span 1}}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card{border-radius:24px;padding:16px 20px;min-height:108px;display:flex;flex-direction:column;justify-content:space-between}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card .skeleton-kpi-body{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card .skeleton-kpi-body .skeleton-badge{width:34px;height:24px;border-radius:8px;background-color:#dee2e6;flex-shrink:0}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card--status .skeleton-status-bar{display:flex;gap:4px;width:100%;height:24px;margin:6px 0}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card--status .skeleton-status-bar .skeleton-bar-segment{height:100%;border-radius:6px;background-color:#dee2e6}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card--status .skeleton-status-bar .skeleton-bar-segment--main{flex:68}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card--status .skeleton-status-bar .skeleton-bar-segment--secondary{flex:32}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card--status .skeleton-status-legend{display:flex;align-items:center;gap:16px}.dashboard-skeleton-container .skeleton-section--kpis .kpi-grid .skeleton-kpi-card--status .skeleton-status-legend .skeleton-legend-item{display:flex;align-items:center;gap:6px;flex:1}.dashboard-skeleton-container .skeleton-section--attention{width:100%}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;width:100%}@media (max-width: 900px){.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid{grid-template-columns:1fr}}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid .skeleton-card--attention{border-radius:24px;padding:24px 28px;min-height:310px;display:flex;flex-direction:column}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid .skeleton-card--attention .skeleton-attention-list{display:flex;flex-direction:column;margin-bottom:24px}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid .skeleton-card--attention .skeleton-attention-list .skeleton-attention-row{display:flex;flex-direction:column;padding:8px 0}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid .skeleton-card--attention .skeleton-attention-list .skeleton-attention-row .skeleton-divider{height:1px;background-color:#f7f7f7;width:100%;margin-top:12px}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid .skeleton-card--performance{border-radius:24px;padding:24px 28px;min-height:310px;display:flex;flex-direction:column}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid .skeleton-card--performance .skeleton-perf-header{display:flex;align-items:center;justify-content:space-between}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid .skeleton-card--performance .skeleton-perf-header .skeleton-info-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid .skeleton-card--performance .skeleton-perf-wave-box{width:100%;height:95px;margin-bottom:20px;border-radius:12px;overflow:hidden}.dashboard-skeleton-container .skeleton-section--attention .attention-perf-grid .skeleton-card--performance .skeleton-perf-wave-box .skeleton-wave-svg{width:100%;height:100%;display:block}.dashboard-skeleton-container .skeleton-section--deepdive{width:100%}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive{border-radius:24px;padding:28px 32px;display:flex;flex-direction:column}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-header .skeleton-dropdown-pill{padding:8px 18px;border-radius:20.5px;border:1px solid #f7f7f7;background:#ffffff;display:flex;align-items:center;justify-content:space-between;width:320px;max-width:100%;box-sizing:border-box}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-timeline-container{position:relative;height:180px;width:100%;display:flex;align-items:flex-end;padding-bottom:8px;box-sizing:border-box}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-timeline-container .skeleton-timeline-overlay-svg{position:absolute;top:0;left:0;width:100%;height:150px;pointer-events:none;z-index:2}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-timeline-container .skeleton-timeline-columns{display:flex;justify-content:space-around;align-items:flex-end;width:100%;height:100%;z-index:1}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-timeline-container .skeleton-timeline-columns .skeleton-timeline-col{display:flex;flex-direction:column;align-items:center;position:relative;width:48px}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-timeline-container .skeleton-timeline-columns .skeleton-timeline-col .skeleton-bar-hatched{width:32px;border-radius:8px 8px 0 0;background:repeating-linear-gradient(45deg,#c9cdd0,#c9cdd0 1.5px,#ffffff 1.5px,#ffffff 8px);border:1px solid #c9cdd0;box-sizing:border-box}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-timeline-container .skeleton-timeline-columns .skeleton-timeline-col .skeleton-bar-solid{width:32px;border-radius:8px 8px 0 0;background-color:#dee2e6}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-timeline-container .skeleton-timeline-columns .skeleton-timeline-col .skeleton-tag-pill{position:absolute;top:-24px;width:28px;height:16px;border-radius:8px;background-color:#dee2e6}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-middle-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:24px}@media (max-width: 900px){.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-middle-grid{grid-template-columns:1fr}}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-middle-grid .skeleton-donut-subcard .skeleton-donut-layout{display:flex;align-items:center;gap:20px}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-middle-grid .skeleton-donut-subcard .skeleton-donut-layout .skeleton-donut-ring{width:90px;height:90px;flex-shrink:0}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-middle-grid .skeleton-donut-subcard .skeleton-donut-layout .skeleton-donut-ring svg{width:100%;height:100%}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-middle-grid .skeleton-donut-subcard .skeleton-donut-layout .skeleton-donut-legends{display:flex;flex-direction:column;flex:1}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-middle-grid .skeleton-donut-subcard .skeleton-donut-layout .skeleton-donut-legends .skeleton-legend-item{display:flex;align-items:center;gap:8px}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-middle-grid .skeleton-funnel-subcard .skeleton-funnel-bars{display:flex;flex-direction:column;gap:12px;justify-content:center;height:100%}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-deepdive-middle-grid .skeleton-funnel-subcard .skeleton-funnel-bars .skeleton-funnel-bar{height:42px;border-radius:10px;background-color:#dee2e6}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-salary-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}@media (max-width: 900px){.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-salary-grid{grid-template-columns:1fr}}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-salary-grid .skeleton-salary-metrics-subcard{display:flex;flex-direction:column}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-salary-grid .skeleton-salary-metrics-subcard .skeleton-salary-columns{display:flex;align-items:center;justify-content:space-around;width:100%}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-salary-grid .skeleton-salary-metrics-subcard .skeleton-salary-columns .skeleton-salary-metric-col{display:flex;flex-direction:column;align-items:center;flex:1}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-salary-grid .skeleton-salary-metrics-subcard .skeleton-salary-columns .skeleton-salary-divider{width:1px;height:48px;background-color:#c9cdd0}.dashboard-skeleton-container .skeleton-section--deepdive .skeleton-card--deepdive .skeleton-salary-grid .skeleton-salary-action-subcard{display:flex;flex-direction:column;justify-content:space-between}.dashboard-skeleton-container .skeleton-section--applications{width:100%}.dashboard-skeleton-container .skeleton-section--applications .skeleton-card--applications{border-radius:24px;padding:28px 32px;display:flex;flex-direction:column}.dashboard-skeleton-container .skeleton-section--applications .skeleton-card--applications .skeleton-comparison-chart-container{position:relative;height:190px;width:100%;display:flex;align-items:flex-end;padding-bottom:8px;box-sizing:border-box}.dashboard-skeleton-container .skeleton-section--applications .skeleton-card--applications .skeleton-comparison-chart-container .skeleton-comparison-overlay-svg{position:absolute;top:0;left:0;width:100%;height:160px;pointer-events:none;z-index:2}.dashboard-skeleton-container .skeleton-section--applications .skeleton-card--applications .skeleton-comparison-chart-container .skeleton-comparison-bars{display:flex;justify-content:space-between;align-items:flex-end;width:100%;height:100%;z-index:1;padding:0 8px;box-sizing:border-box}.dashboard-skeleton-container .skeleton-section--applications .skeleton-card--applications .skeleton-comparison-chart-container .skeleton-comparison-bars .skeleton-comparison-col{display:flex;flex-direction:column;align-items:center;flex:1}.dashboard-skeleton-container .skeleton-section--applications .skeleton-card--applications .skeleton-comparison-chart-container .skeleton-comparison-bars .skeleton-comparison-col .skeleton-comparison-bar{width:28px;border-radius:8px 8px 0 0;background-color:#dee2e6}.dashboard-skeleton-container .skeleton-subcard{background-color:#f7f7f7;border-radius:24px;padding:20px 24px;box-sizing:border-box}.dashboard-skeleton-container .skeleton-line{border-radius:6px;background-color:#d9dbe0;animation:skeleton-pulse 1.8s ease-in-out infinite}.dashboard-skeleton-container .skeleton-pill{background-color:#dee2e6;animation:skeleton-pulse 1.8s ease-in-out infinite}.dashboard-skeleton-container .skeleton-dot{width:8px;height:8px;border-radius:50%;background-color:#dee2e6;flex-shrink:0}.dashboard-skeleton-container .skeleton-button-pill{height:48px;border-radius:24px;background-color:#dee2e6;width:100%;animation:skeleton-pulse 1.8s ease-in-out infinite}.dashboard-skeleton-container .skeleton-button-pill--medium{height:42px;border-radius:21px}.dashboard-skeleton-container .skeleton-bar-hatched,.dashboard-skeleton-container .skeleton-bar-solid,.dashboard-skeleton-container .skeleton-funnel-bar,.dashboard-skeleton-container .skeleton-comparison-bar{animation:skeleton-pulse 1.8s ease-in-out infinite}.dashboard-skeleton-container .skeleton-w-20{width:20%}.dashboard-skeleton-container .skeleton-w-25{width:25%}.dashboard-skeleton-container .skeleton-w-30{width:30%}.dashboard-skeleton-container .skeleton-w-35{width:35%}.dashboard-skeleton-container .skeleton-w-40{width:40%}.dashboard-skeleton-container .skeleton-w-45{width:45%}.dashboard-skeleton-container .skeleton-w-50{width:50%}.dashboard-skeleton-container .skeleton-w-55{width:55%}.dashboard-skeleton-container .skeleton-w-60{width:60%}.dashboard-skeleton-container .skeleton-w-65{width:65%}.dashboard-skeleton-container .skeleton-w-70{width:70%}.dashboard-skeleton-container .skeleton-w-75{width:75%}.dashboard-skeleton-container .skeleton-w-80{width:80%}.dashboard-skeleton-container .skeleton-w-85{width:85%}.dashboard-skeleton-container .skeleton-w-90{width:90%}.dashboard-skeleton-container .skeleton-w-100{width:100%}.dashboard-skeleton-container .skeleton-h-10{height:10px}.dashboard-skeleton-container .skeleton-h-11{height:11px}.dashboard-skeleton-container .skeleton-h-12{height:12px}.dashboard-skeleton-container .skeleton-h-13{height:13px}.dashboard-skeleton-container .skeleton-h-14{height:14px}.dashboard-skeleton-container .skeleton-h-16{height:16px}.dashboard-skeleton-container .skeleton-h-18{height:18px}.dashboard-skeleton-container .skeleton-h-20{height:20px}.dashboard-skeleton-container .skeleton-h-24{height:24px}.dashboard-skeleton-container .skeleton-mt-auto{margin-top:auto}.dashboard-skeleton-container .skeleton-mt-8{margin-top:8px}.dashboard-skeleton-container .skeleton-mb-6{margin-bottom:6px}.dashboard-skeleton-container .skeleton-mb-8{margin-bottom:8px}.dashboard-skeleton-container .skeleton-mb-12{margin-bottom:12px}.dashboard-skeleton-container .skeleton-mb-16{margin-bottom:16px}.dashboard-skeleton-container .skeleton-mb-24{margin-bottom:24px}.dashboard-skeleton-container .skeleton-mb-32{margin-bottom:32px}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.62}}\n"] }]
+        }] });
+
+function formatKpiBadge(diff, polarity, isDecimal = false) {
+    const isZero = diff === 0;
+    const isPositive = diff > 0;
+    const isNegative = diff < 0;
+    const changeText = isZero
+        ? (isDecimal ? '0,0' : '0')
+        : (isDecimal ? Math.abs(diff).toFixed(1).replace('.', ',') : `${Math.abs(diff)}`);
+    let badgeClass = 'kpi-badge--gray';
+    if (!isZero) {
+        if (polarity === 'neutral') {
+            badgeClass = 'kpi-badge--blue';
+        }
+        else if (polarity === 'higherIsBetter') {
+            badgeClass = isPositive ? 'kpi-badge--green' : 'kpi-badge--coral';
+        }
+        else if (polarity === 'lowerIsBetter') {
+            badgeClass = isPositive ? 'kpi-badge--coral' : 'kpi-badge--green';
+        }
+    }
+    return { changeText, badgeClass, isPositive, isNegative, isZero };
+}
+const DEFAULT_PERFORMANCE_TEXTS = {
+    [PerformanceLevel.Blue]: {
+        title: 'Ainda tem espaço para se destacar.',
+        description: 'Sua instituição já desperta bom interesse entre os candidatos. Fale com um consultor da CareOn para ir ainda mais longe.'
+    },
+    [PerformanceLevel.Orange]: {
+        title: 'Suas vagas estão sendo vistas, mas pouca gente se candidata.',
+        description: 'Isso pode indicar que os valores oferecidos estão abaixo da média da região, que faltam informações mais atrativas ou que suas informações estão incompletas. Fale com um consultor da CareOn.'
+    },
+    [PerformanceLevel.Red]: {
+        title: 'Sua instituição não está sendo muito procurada pelos candidatos.',
+        description: 'Faz tempo que você não publica uma vaga, por isso sua análise de desempenho vem caindo. Fale com um consultor da CareOn para ter um apoio personalizado.'
+    }
+};
+/**
+ * Componente principal de Dashboard de Recrutamento Institucional da CareOn.
+ *
+ * Centraliza e orquestra a exibicao de:
+ * - Cabecalho com filtros temporais reativos (Hoje, Semana, Mes)
+ * - Cards superiores de Indicadores-Chave de Performance (KPIs)
+ * - Secao acionavel "Precisa da sua atencao" (alertas de vagas criticas)
+ * - Secao "Analise de Desempenho" (curva de ondas vetorial e orientacao consultiva)
+ * - Secao "Analise por Vaga" (dropdown de vagas, timeline, donut de conversao, funil e analise salarial)
+ * - Secao "Candidaturas por Vaga" (grafico comparativo de barras entre vagas)
+ */
+class DashboardComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        /**
+         * Whether the dashboard is currently fetching data from the backend API.
+         * @default false
+         */
+        this.loading = false;
+        /**
+         * Active time period filter.
+         * @default 'Week'
+         */
+        this.currentPeriod = DashboardPeriod.Week;
+        this.DutySalaryStatus = DutySalaryStatus;
+        this.PerformanceLevel = PerformanceLevel;
+        this.DashboardPeriod = DashboardPeriod;
+        /**
+         * Main dashboard title.
+         * @default 'Dashboard'
+         */
+        this.title = 'Dashboard';
+        /**
+         * Optional subtitle or institution name displayed in the header.
+         * @default 'Visão geral de recrutamento'
+         */
+        this.subtitle = 'Visão geral de recrutamento';
+        /**
+         * Empty state message when no data is returned.
+         */
+        this.emptyMessage = 'Nenhum dado registrado para o período selecionado.';
+        /**
+         * Consultant phone number for WhatsApp redirect.
+         * @default '5547996569707'
+         */
+        this.consultantPhone = '5547996569707';
+        /**
+         * Initial message for WhatsApp consultant chat.
+         * @default 'empty string'
+         */
+        this.consultantMessage = '';
+        /**
+         * Controls whether zeroed states display the actionable 'Publicar Vaga' CTA banner or a basic informational zero state.
+         * - 'publish': displays the special business zero state with the 'Publicar Vaga' action button.
+         * - 'basic': displays the simple/basic zero state without the 'Publicar Vaga' action button.
+         * @default 'publish'
+         */
+        this.zeroStateMode = 'publish';
+        // #endregion
+        // #region Outputs
+        /**
+         * Emitted whenever the user selects a different period filter (Today, Week, Month).
+         */
+        this.periodChange = new EventEmitter();
+        /**
+         * Emitted whenever an interactive element in any chart is clicked (reserved for upcoming chart sections).
+         */
+        this.itemSelected = new EventEmitter();
+        /**
+         * Emitted whenever the user clicks on 'Publicar Vaga' across any of the zero-state banners.
+         */
+        this.publishDuty = new EventEmitter();
+        /**
+         * Emitted whenever the user selects a duty in the vacancy analysis dropdown.
+         */
+        this.dutySelected = new EventEmitter();
+        /**
+         * Emitted whenever the user clicks on 'Fale com um consultor' across any section.
+         */
+        this.consultantClick = new EventEmitter();
+        /**
+         * Emitted whenever a vacancy in the attention list is clicked.
+         */
+        this.attentionItemSelected = new EventEmitter();
+        // #endregion
+        // #region PerformanceAnalysisSection
+        this.showInfoTooltip = false;
+        // #endregion
+        // #region VacancyAnalysisSection
+        this.selectedDutyId = null;
+        this.isDutyDropdownOpen = false;
+    }
+    get isPublishZeroState() {
+        return this.zeroStateMode === 'publish';
+    }
+    // #endregion
+    onPublishDuty(section = 'Zero State') {
+        this.publishDuty.emit(section);
+    }
+    ngOnChanges(changes) {
+        if (changes['data']) {
+            this.syncSelectedDuty();
+            this.cdr.markForCheck();
+        }
+        if (changes['loading'] || changes['currentPeriod']) {
+            this.cdr.markForCheck();
+        }
+    }
+    syncSelectedDuty() {
+        if (!this.vacanciesAnalysis || this.vacanciesAnalysis.length === 0) {
+            this.selectedDutyId = null;
+            return;
+        }
+        const exists = this.vacanciesAnalysis.some(d => d.dutyId === this.selectedDutyId);
+        if (!exists) {
+            this.selectedDutyId = this.vacanciesAnalysis[0].dutyId;
+        }
+    }
+    // #region AttentionSection
+    get attentionItems() {
+        return this.data?.attentionItems ?? [];
+    }
+    onAttentionItemClick(item) {
+        this.attentionItemSelected.emit(item);
+    }
+    openConsultantWhatsApp(section = 'Consultor') {
+        this.consultantClick.emit(section);
+        if (typeof window !== 'undefined') {
+            const cleanPhone = (this.consultantPhone || '5547996569707').replace(/\D/g, '');
+            const textParam = this.consultantMessage
+                ? `&text=${encodeURIComponent(this.consultantMessage)}`
+                : '';
+            const whatsappUrl = `https://api.whatsapp.com/send?phone=${cleanPhone}${textParam}`;
+            window.open(whatsappUrl, '_blank', 'noopener,noreferrer');
+        }
+    }
+    toggleInfoTooltip() {
+        this.showInfoTooltip = !this.showInfoTooltip;
+        this.cdr.markForCheck();
+    }
+    onInfoMouseEnter() {
+        this.showInfoTooltip = true;
+        this.cdr.markForCheck();
+    }
+    onInfoMouseLeave() {
+        this.showInfoTooltip = false;
+        this.cdr.markForCheck();
+    }
+    get performanceAnalysis() {
+        return this.data?.performanceAnalysis;
+    }
+    get performanceLevel() {
+        const level = this.performanceAnalysis?.level;
+        if (level === PerformanceLevel.Blue || level === 0)
+            return PerformanceLevel.Blue;
+        if (level === PerformanceLevel.Orange || level === 1)
+            return PerformanceLevel.Orange;
+        if (level === PerformanceLevel.Red || level === 2)
+            return PerformanceLevel.Red;
+        return PerformanceLevel.Red;
+    }
+    get performanceTitle() {
+        return this.performanceAnalysis?.highlightTitle
+            || DEFAULT_PERFORMANCE_TEXTS[this.performanceLevel]?.title
+            || DEFAULT_PERFORMANCE_TEXTS[PerformanceLevel.Red].title;
+    }
+    get performanceDescription() {
+        return this.performanceAnalysis?.description
+            || DEFAULT_PERFORMANCE_TEXTS[this.performanceLevel]?.description
+            || DEFAULT_PERFORMANCE_TEXTS[PerformanceLevel.Red].description;
+    }
+    get vacanciesAnalysis() {
+        return this.data?.vacanciesAnalysis ?? [];
+    }
+    get selectedDuty() {
+        if (this.vacanciesAnalysis.length === 0)
+            return null;
+        if (this.selectedDutyId) {
+            const found = this.vacanciesAnalysis.find(d => d.dutyId === this.selectedDutyId);
+            if (found)
+                return found;
+        }
+        return this.vacanciesAnalysis[0];
+    }
+    toggleDutyDropdown() {
+        this.isDutyDropdownOpen = !this.isDutyDropdownOpen;
+    }
+    closeDutyDropdown() {
+        this.isDutyDropdownOpen = false;
+    }
+    selectDuty(duty) {
+        this.selectedDutyId = duty.dutyId;
+        this.isDutyDropdownOpen = false;
+        this.dutySelected.emit(duty);
+    }
+    get vacancySectionSubtitle() {
+        const candidates = this.selectedDuty?.candidatesCount ?? 0;
+        const candText = candidates === 1 ? 'candidatura' : 'candidaturas';
+        switch (this.currentPeriod) {
+            case DashboardPeriod.Week:
+                return `${candidates} ${candText} nos últimos 7 dias`;
+            case DashboardPeriod.Month:
+                return `${candidates} ${candText} neste mês`;
+            case DashboardPeriod.Today:
+            default:
+                return `${candidates} ${candText} hoje`;
+        }
+    }
+    get selectedDutyTimelinePoints() {
+        return this.selectedDuty?.timelinePoints ?? [];
+    }
+    get selectedDutyDonutItems() {
+        if (this.selectedDuty?.conversionDonut && this.selectedDuty.conversionDonut.length > 0) {
+            return this.selectedDuty.conversionDonut;
+        }
+        const views = this.selectedDuty?.viewsCount ?? 0;
+        const candidates = this.selectedDuty?.candidatesCount ?? 0;
+        return [
+            { label: 'Visualizações', value: views, color: '#1E1B4B' },
+            { label: 'Candidaturas', value: candidates, color: '#3B82F6' }
+        ];
+    }
+    get selectedDutyConversionRateText() {
+        const rate = this.selectedDuty?.conversionRate ?? 0;
+        return `${rate}%`;
+    }
+    get selectedDutyFunnelItems() {
+        if (this.selectedDuty?.funnelItems && this.selectedDuty.funnelItems.length > 0) {
+            return this.selectedDuty.funnelItems;
+        }
+        const views = this.selectedDuty?.viewsCount ?? 0;
+        const candidates = this.selectedDuty?.candidatesCount ?? 0;
+        return [
+            { label: 'Visualizações', count: views, barColor: '#1E1B4B' },
+            { label: 'Candidaturas', count: candidates, barColor: '#3B82F6' }
+        ];
+    }
+    onTimelinePointSelected(point) {
+        this.itemSelected.emit({
+            chart: 'Linha Temporal por Vaga',
+            item: point
+        });
+    }
+    // #endregion
+    // #region VacancySalaryComparisonSection
+    get selectedDutySalaryComparison() {
+        return this.selectedDuty?.salaryComparison;
+    }
+    get salaryStatus() {
+        const s = this.selectedDutySalaryComparison?.status;
+        if (s === DutySalaryStatus.BelowMarket || s === 0)
+            return DutySalaryStatus.BelowMarket;
+        if (s === DutySalaryStatus.AtMarket || s === 1)
+            return DutySalaryStatus.AtMarket;
+        if (s === DutySalaryStatus.AboveMarket || s === 2)
+            return DutySalaryStatus.AboveMarket;
+        if (s === DutySalaryStatus.NotInformed || s === 3)
+            return DutySalaryStatus.NotInformed;
+        if (s === DutySalaryStatus.InsufficientData || s === 4)
+            return DutySalaryStatus.InsufficientData;
+        return null;
+    }
+    formatCurrency(value) {
+        if (value === null || value === undefined) {
+            return '';
+        }
+        return new Intl.NumberFormat('pt-BR', {
+            style: 'currency',
+            currency: 'BRL',
+            maximumFractionDigits: 0
+        }).format(value).replace(/\u00A0/g, ' ');
+    }
+    get formattedYourSalary() {
+        const comparison = this.selectedDutySalaryComparison;
+        if (!comparison || this.salaryStatus === DutySalaryStatus.NotInformed || comparison.yourSalary === null || comparison.yourSalary === undefined) {
+            return 'Não informado';
+        }
+        return this.formatCurrency(comparison.yourSalary);
+    }
+    get formattedRegionalAverage() {
+        const comparison = this.selectedDutySalaryComparison;
+        if (!comparison || this.salaryStatus === DutySalaryStatus.InsufficientData || comparison.regionalAverageSalary === null || comparison.regionalAverageSalary === undefined) {
+            return 'Dados insuficientes';
+        }
+        return this.formatCurrency(comparison.regionalAverageSalary);
+    }
+    get salaryBadgeClass() {
+        switch (this.salaryStatus) {
+            case DutySalaryStatus.BelowMarket:
+                return 'salary-badge--orange';
+            case DutySalaryStatus.AtMarket:
+                return 'salary-badge--blue';
+            case DutySalaryStatus.AboveMarket:
+                return 'salary-badge--purple';
+            default:
+                return '';
+        }
+    }
+    get salaryTitleColorClass() {
+        switch (this.salaryStatus) {
+            case DutySalaryStatus.BelowMarket:
+                return 'salary-title--orange';
+            case DutySalaryStatus.AtMarket:
+                return 'salary-title--blue';
+            case DutySalaryStatus.AboveMarket:
+                return 'salary-title--purple';
+            case DutySalaryStatus.NotInformed:
+                return 'salary-title--red';
+            case DutySalaryStatus.InsufficientData:
+            default:
+                return 'salary-title--default';
+        }
+    }
+    // #endregion
+    // #region KpiGetters
+    // 1. Vagas Publicadas
+    get registeredVacancies() {
+        return this.data?.kpis?.registeredVacancies ?? 0;
+    }
+    get registeredVacanciesDiff() {
+        return this.data?.kpis?.registeredVacanciesDifference ?? 0;
+    }
+    get registeredVacanciesBadge() {
+        return formatKpiBadge(this.registeredVacanciesDiff, 'neutral');
+    }
+    get registeredVacanciesChange() {
+        return this.registeredVacanciesBadge.changeText;
+    }
+    get registeredVacanciesBadgeClass() {
+        return this.registeredVacanciesBadge.badgeClass;
+    }
+    // 2. Candidatos Inscritos
+    get candidateApplications() {
+        return this.data?.kpis?.candidateApplications ?? 0;
+    }
+    get candidateApplicationsDiff() {
+        return this.data?.kpis?.candidateApplicationsDifference ?? 0;
+    }
+    get candidateApplicationsBadge() {
+        return formatKpiBadge(this.candidateApplicationsDiff, 'higherIsBetter');
+    }
+    get candidateApplicationsChange() {
+        return this.candidateApplicationsBadge.changeText;
+    }
+    get candidateApplicationsBadgeClass() {
+        return this.candidateApplicationsBadge.badgeClass;
+    }
+    // 3. Currículos para Avaliar
+    get pendingReviews() {
+        return this.data?.kpis?.pendingReviews ?? 0;
+    }
+    get pendingReviewsDiff() {
+        return this.data?.kpis?.pendingReviewsDifference ?? 0;
+    }
+    get pendingReviewsBadge() {
+        return formatKpiBadge(this.pendingReviewsDiff, 'lowerIsBetter');
+    }
+    get pendingReviewsChange() {
+        return this.pendingReviewsBadge.changeText;
+    }
+    get pendingReviewsBadgeClass() {
+        return this.pendingReviewsBadge.badgeClass;
+    }
+    // 4. Média de Candidatos
+    get averageCandidatesPerVacancy() {
+        const avg = this.data?.kpis?.averageCandidatesPerVacancy;
+        if (avg === undefined || avg === null)
+            return '0,0';
+        return avg.toFixed(1).replace('.', ',');
+    }
+    get averageCandidatesDiff() {
+        return this.data?.kpis?.averageCandidatesDifference ?? 0;
+    }
+    get averageCandidatesBadge() {
+        return formatKpiBadge(this.averageCandidatesDiff, 'higherIsBetter', true);
+    }
+    get averageCandidatesChange() {
+        return this.averageCandidatesBadge.changeText;
+    }
+    get averageCandidatesBadgeClass() {
+        return this.averageCandidatesBadge.badgeClass;
+    }
+    // 5. Status das Vagas
+    get openVacancies() {
+        return this.data?.kpis?.openVacancies ?? 0;
+    }
+    get closedVacancies() {
+        return this.data?.kpis?.closedVacancies ?? 0;
+    }
+    get totalDutiesCount() {
+        return this.data?.kpis?.totalVacancies ?? (this.openVacancies + this.closedVacancies);
+    }
+    get dutiesStatusItems() {
+        if (this.data?.dutiesStatus && this.data.dutiesStatus.length > 0) {
+            return this.data.dutiesStatus;
+        }
+        return [
+            { label: 'Abertas', value: this.openVacancies, color: '#3B82F6' },
+            { label: 'Encerradas', value: this.closedVacancies, color: '#1E1B4B' }
+        ];
+    }
+    // #endregion
+    // #region ComparisonSection
+    get comparisonItems() {
+        return this.data?.comparison ?? [];
+    }
+    get hasComparisonDuties() {
+        return this.comparisonItems.length > 0;
+    }
+    get totalComparisonCandidates() {
+        return this.comparisonItems.reduce((acc, curr) => acc + (curr.value || 0), 0);
+    }
+    get totalComparisonVacancies() {
+        return this.comparisonItems.length;
+    }
+    get comparisonSubtitle() {
+        const candCount = this.totalComparisonCandidates;
+        const dutyCount = this.totalComparisonVacancies;
+        const candText = candCount === 1 ? '1 candidatura no total' : `${candCount} candidaturas no total`;
+        const dutyText = dutyCount === 1 ? '1 vaga ativa' : `${dutyCount} vagas ativas`;
+        return `${candText}, em ${dutyText}`;
+    }
+    // #endregion
+    // #region StateHelpers
+    get hasData() {
+        return !!this.data && !!this.data.kpis;
+    }
+    // #endregion
+    // #region UserActions
+    setPeriod(period) {
+        if (this.currentPeriod === period)
+            return;
+        this.currentPeriod = period;
+        this.periodChange.emit(period);
+    }
+    onChartItemSelected(item, chartName) {
+        this.itemSelected.emit({
+            chart: chartName,
+            item
+        });
+    }
+}
+DashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashboardComponent, selector: "careon-dashboard", inputs: { data: "data", loading: "loading", currentPeriod: "currentPeriod", title: "title", subtitle: "subtitle", emptyMessage: "emptyMessage", consultantPhone: "consultantPhone", consultantMessage: "consultantMessage", zeroStateMode: "zeroStateMode" }, outputs: { periodChange: "periodChange", itemSelected: "itemSelected", publishDuty: "publishDuty", dutySelected: "dutySelected", consultantClick: "consultantClick", attentionItemSelected: "attentionItemSelected" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"careon-dashboard-container\">\r\n  <!-- #region DashboardHeader -->\r\n  <header class=\"dashboard-header\">\r\n    <div class=\"header-titles\">\r\n      <h1 class=\"main-title\">{{ title }}</h1>\r\n      <p *ngIf=\"subtitle\" class=\"subtitle\">\r\n        {{ subtitle }}\r\n      </p>\r\n    </div>\r\n\r\n    <div class=\"period-filter-group\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"period-pill\"\r\n        [class.active]=\"currentPeriod === DashboardPeriod.Today\"\r\n        (click)=\"setPeriod(DashboardPeriod.Today)\"\r\n      >\r\n        Hoje\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"period-pill\"\r\n        [class.active]=\"currentPeriod === DashboardPeriod.Week\"\r\n        (click)=\"setPeriod(DashboardPeriod.Week)\"\r\n      >\r\n        Semana\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"period-pill\"\r\n        [class.active]=\"currentPeriod === DashboardPeriod.Month\"\r\n        (click)=\"setPeriod(DashboardPeriod.Month)\"\r\n      >\r\n        M\u00EAs\r\n      </button>\r\n    </div>\r\n  </header>\r\n  <!-- #endregion -->\r\n\r\n  <!-- #region LoadingSkeletonState -->\r\n  <careon-dashboard-skeleton *ngIf=\"loading\"></careon-dashboard-skeleton>\r\n  <!-- #endregion -->\r\n\r\n  <!-- #region EmptyState -->\r\n  <div *ngIf=\"!loading && !hasData\" class=\"dashboard-empty-state\">\r\n    <p class=\"empty-title\">Sem registros</p>\r\n    <p class=\"empty-description\">{{ emptyMessage }}</p>\r\n  </div>\r\n  <!-- #endregion -->\r\n\r\n  <!-- #region DashboardContent -->\r\n  <main *ngIf=\"!loading && hasData\" class=\"dashboard-content\">\r\n    <!-- #region KpiCardsRow -->\r\n    <section class=\"kpi-cards-grid\">\r\n      <!-- KPI 1: Vagas Publicadas -->\r\n      <article class=\"kpi-card\">\r\n        <div class=\"kpi-card-header\">\r\n          <span class=\"kpi-label\">Vagas Publicadas</span>\r\n        </div>\r\n        <div class=\"kpi-card-body\">\r\n          <span class=\"kpi-value\">{{ registeredVacancies }}</span>\r\n          <span class=\"kpi-badge\" [ngClass]=\"registeredVacanciesBadge.badgeClass\">\r\n            <careon-dashboard-icon *ngIf=\"registeredVacanciesBadge.isPositive\" name=\"arrow-up\" class=\"kpi-badge-icon\"></careon-dashboard-icon>\r\n            <careon-dashboard-icon *ngIf=\"registeredVacanciesBadge.isNegative\" name=\"arrow-down\" class=\"kpi-badge-icon\"></careon-dashboard-icon>\r\n            <span>{{ registeredVacanciesBadge.changeText }}</span>\r\n          </span>\r\n        </div>\r\n        <span class=\"kpi-footer\">\r\n          no total\r\n        </span>\r\n      </article>\r\n\r\n      <!-- KPI 2: Candidatos Inscritos -->\r\n      <article class=\"kpi-card\">\r\n        <div class=\"kpi-card-header\">\r\n          <span class=\"kpi-label\">Candidatos Inscritos</span>\r\n        </div>\r\n        <div class=\"kpi-card-body\">\r\n          <span class=\"kpi-value\">{{ candidateApplications }}</span>\r\n          <span class=\"kpi-badge\" [ngClass]=\"candidateApplicationsBadge.badgeClass\">\r\n            <careon-dashboard-icon *ngIf=\"candidateApplicationsBadge.isPositive\" name=\"arrow-up\" class=\"kpi-badge-icon\"></careon-dashboard-icon>\r\n            <careon-dashboard-icon *ngIf=\"candidateApplicationsBadge.isNegative\" name=\"arrow-down\" class=\"kpi-badge-icon\"></careon-dashboard-icon>\r\n            <span>{{ candidateApplicationsBadge.changeText }}</span>\r\n          </span>\r\n        </div>\r\n        <span class=\"kpi-footer\">\r\n          {{ currentPeriod === 'Today' ? 'hoje' : currentPeriod === 'Week' ? 'essa semana' : 'esse m\u00EAs' }}\r\n        </span>\r\n      </article>\r\n\r\n      <!-- KPI 3: Curr\u00EDculos para Avaliar -->\r\n      <article class=\"kpi-card\">\r\n        <div class=\"kpi-card-header\">\r\n          <span class=\"kpi-label\">Curr\u00EDculos para Avaliar</span>\r\n        </div>\r\n        <div class=\"kpi-card-body\">\r\n          <span class=\"kpi-value\">{{ pendingReviews }}</span>\r\n          <span class=\"kpi-badge\" [ngClass]=\"pendingReviewsBadge.badgeClass\">\r\n            <careon-dashboard-icon *ngIf=\"pendingReviewsBadge.isPositive\" name=\"arrow-up\" class=\"kpi-badge-icon\"></careon-dashboard-icon>\r\n            <careon-dashboard-icon *ngIf=\"pendingReviewsBadge.isNegative\" name=\"arrow-down\" class=\"kpi-badge-icon\"></careon-dashboard-icon>\r\n            <span>{{ pendingReviewsBadge.changeText }}</span>\r\n          </span>\r\n        </div>\r\n        <span class=\"kpi-footer\">aguardando agora</span>\r\n      </article>\r\n\r\n      <!-- KPI 4: M\u00E9dia de Candidatos -->\r\n      <article class=\"kpi-card\">\r\n        <div class=\"kpi-card-header\">\r\n          <span class=\"kpi-label\">M\u00E9dia de Candidatos</span>\r\n        </div>\r\n        <div class=\"kpi-card-body\">\r\n          <span class=\"kpi-value\">{{ averageCandidatesPerVacancy }}</span>\r\n          <span class=\"kpi-badge\" [ngClass]=\"averageCandidatesBadge.badgeClass\">\r\n            <careon-dashboard-icon *ngIf=\"averageCandidatesBadge.isPositive\" name=\"arrow-up\" class=\"kpi-badge-icon\"></careon-dashboard-icon>\r\n            <careon-dashboard-icon *ngIf=\"averageCandidatesBadge.isNegative\" name=\"arrow-down\" class=\"kpi-badge-icon\"></careon-dashboard-icon>\r\n            <span>{{ averageCandidatesBadge.changeText }}</span>\r\n          </span>\r\n        </div>\r\n        <span class=\"kpi-footer\">por vaga</span>\r\n      </article>\r\n\r\n      <!-- KPI 5: Status das Vagas -->\r\n      <article class=\"kpi-card kpi-card--status\">\r\n        <careon-stacked-horizontal-bar\r\n          [title]=\"'Status das Vagas'\"\r\n          [totalLabel]=\"'vagas'\"\r\n          [showHeader]=\"true\"\r\n          [showLegend]=\"true\"\r\n          [data]=\"dutiesStatusItems\"\r\n          [emptyText]=\"'Sem vagas registradas'\"\r\n          (itemSelected)=\"onChartItemSelected($event, 'Status das Vagas')\"\r\n        ></careon-stacked-horizontal-bar>\r\n      </article>\r\n    </section>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region AttentionSection -->\r\n    <section class=\"attention-section\">\r\n      <!-- #region AttentionCard -->\r\n      <article class=\"attention-card\">\r\n        <h2 class=\"attention-card-title\">Precisa da sua aten\u00E7\u00E3o</h2>\r\n\r\n        <ng-container *ngIf=\"attentionItems.length > 0; else noAttention\">\r\n          <div class=\"attention-items-list\">\r\n            <div *ngFor=\"let item of attentionItems; let last = last\" class=\"attention-item-wrapper\">\r\n              <div class=\"attention-item\" (click)=\"onAttentionItemClick(item)\">\r\n                <span class=\"attention-item-title\">{{ item.title }}</span>\r\n                <span class=\"attention-item-subtitle\">{{ item.subtitle }}</span>\r\n              </div>\r\n              <div *ngIf=\"!last\" class=\"attention-divider\"></div>\r\n            </div>\r\n          </div>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn-consultant\"\r\n            (click)=\"openConsultantWhatsApp('Precisa da sua aten\u00E7\u00E3o')\"\r\n          >\r\n            Fale com um consultor\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-template #noAttention>\r\n          <ng-container *ngIf=\"isPublishZeroState; else basicAttentionZero\">\r\n            <div class=\"attention-zero-box\">\r\n              <div class=\"attention-zero-header\">\r\n                <careon-dashboard-icon name=\"info\" class=\"zero-info-icon\"></careon-dashboard-icon>\r\n                <div class=\"attention-zero-texts\">\r\n                  <h3 class=\"attention-zero-title\">Nenhuma vaga precisa de aten\u00E7\u00E3o</h3>\r\n                  <p class=\"attention-zero-subtitle\">Voc\u00EA n\u00E3o tem vagas em aberto para revisar.</p>\r\n                </div>\r\n              </div>\r\n              <button\r\n                type=\"button\"\r\n                class=\"btn-zero-publish btn-zero-publish--full\"\r\n                (click)=\"onPublishDuty('Precisa da sua aten\u00E7\u00E3o')\"\r\n              >\r\n                Publicar Vaga\r\n              </button>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-template #basicAttentionZero>\r\n            <div class=\"basic-empty-state basic-empty-state--attention\">\r\n              <div class=\"basic-empty-icon-wrap\">\r\n                <careon-dashboard-icon name=\"info\" class=\"basic-empty-icon\"></careon-dashboard-icon>\r\n              </div>\r\n              <h3 class=\"basic-empty-title\">Tudo em dia!</h3>\r\n              <p class=\"basic-empty-text\">Nenhuma vaga precisa da sua aten\u00E7\u00E3o no momento.</p>\r\n            </div>\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn-consultant\"\r\n              (click)=\"openConsultantWhatsApp('Precisa da sua aten\u00E7\u00E3o - Sem vagas')\"\r\n            >\r\n              Fale com um consultor\r\n            </button>\r\n          </ng-template>\r\n        </ng-template>\r\n      </article>\r\n      <!-- #endregion -->\r\n\r\n      <!-- #region PerformanceCard -->\r\n      <article class=\"performance-card\">\r\n        <div class=\"performance-card-header\">\r\n          <h2 class=\"performance-card-title\">An\u00E1lise de Desempenho</h2>\r\n\r\n          <div\r\n            class=\"performance-info-wrapper\"\r\n            (mouseenter)=\"onInfoMouseEnter()\"\r\n            (mouseleave)=\"onInfoMouseLeave()\"\r\n          >\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn-info\"\r\n              aria-label=\"Informa\u00E7\u00F5es sobre a An\u00E1lise de Desempenho\"\r\n              (click)=\"toggleInfoTooltip()\"\r\n            >\r\n              <careon-dashboard-icon name=\"info\" class=\"info-icon\"></careon-dashboard-icon>\r\n            </button>\r\n\r\n            <!-- Tooltip -->\r\n            <div *ngIf=\"showInfoTooltip\" class=\"info-tooltip\" role=\"tooltip\">\r\n              <div class=\"tooltip-arrow\"></div>\r\n              <p class=\"tooltip-text\">\r\n                Esta an\u00E1lise mede o interesse dos candidatos pela sua empresa e \u00E9 atualizada continuamente \u00E0 medida que mais profissionais demonstram desejo de fazer parte do seu time.\r\n              </p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Gr\u00E1fico de Ondas -->\r\n        <careon-performance-wave [level]=\"performanceLevel\"></careon-performance-wave>\r\n\r\n        <!-- Conte\u00FAdo Textual -->\r\n        <div class=\"performance-body\">\r\n          <h3 class=\"performance-highlight-title\">{{ performanceTitle }}</h3>\r\n          <p class=\"performance-description\">{{ performanceDescription }}</p>\r\n        </div>\r\n\r\n        <!-- Bot\u00E3o WhatsApp -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn-consultant\"\r\n          (click)=\"openConsultantWhatsApp('An\u00E1lise de Desempenho')\"\r\n        >\r\n          Fale com um consultor\r\n        </button>\r\n      </article>\r\n      <!-- #endregion -->\r\n    </section>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region VacancyAnalysisSection -->\r\n    <section class=\"vacancy-analysis-section vacancy-analysis-card\">\r\n      <!-- #region SectionHeader -->\r\n      <header class=\"vacancy-section-header\">\r\n        <div class=\"vacancy-section-title-group\">\r\n          <h2 class=\"vacancy-section-title\">An\u00E1lise por Vaga</h2>\r\n          <span class=\"vacancy-section-subtitle\" *ngIf=\"selectedDuty\">{{ vacancySectionSubtitle }}</span>\r\n          <span class=\"vacancy-section-subtitle\" *ngIf=\"!selectedDuty\">\r\n            {{ isPublishZeroState ? 'Nenhuma candidatura registrada' : 'Nenhuma vaga ativa no momento' }}\r\n          </span>\r\n        </div>\r\n\r\n        <div class=\"vacancy-dropdown-wrapper\" *ngIf=\"vacanciesAnalysis.length > 0\">\r\n          <span class=\"vacancy-dropdown-label\">Escolha a vaga:</span>\r\n\r\n          <div class=\"vacancy-dropdown-container\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"vacancy-dropdown-btn\"\r\n              [class.vacancy-dropdown-btn--open]=\"isDutyDropdownOpen\"\r\n              (click)=\"toggleDutyDropdown()\"\r\n              [attr.aria-expanded]=\"isDutyDropdownOpen\"\r\n            >\r\n              <span class=\"vacancy-dropdown-btn-text\">{{ selectedDuty?.title || 'Selecione uma vaga' }}</span>\r\n              <careon-dashboard-icon name=\"chevron-down\" [rotated]=\"isDutyDropdownOpen\" class=\"vacancy-dropdown-btn-icon\"></careon-dashboard-icon>\r\n            </button>\r\n\r\n            <!-- Backdrop para fechar dropdown ao clicar fora -->\r\n            <div *ngIf=\"isDutyDropdownOpen\" class=\"vacancy-dropdown-backdrop\" (click)=\"closeDutyDropdown()\"></div>\r\n\r\n            <!-- Menu flutuante do dropdown -->\r\n            <div *ngIf=\"isDutyDropdownOpen\" class=\"vacancy-dropdown-menu\" role=\"menu\">\r\n              <div\r\n                *ngFor=\"let duty of vacanciesAnalysis\"\r\n                class=\"vacancy-dropdown-item\"\r\n                [class.vacancy-dropdown-item--selected]=\"duty.dutyId === selectedDuty?.dutyId\"\r\n                (click)=\"selectDuty(duty)\"\r\n                role=\"menuitem\"\r\n              >\r\n                <div class=\"duty-radio-outer\" [class.duty-radio-outer--checked]=\"duty.dutyId === selectedDuty?.dutyId\">\r\n                  <div class=\"duty-radio-inner\" *ngIf=\"duty.dutyId === selectedDuty?.dutyId\"></div>\r\n                </div>\r\n\r\n                <div class=\"duty-item-content\">\r\n                  <span class=\"duty-item-title\">{{ duty.title }}</span>\r\n                  <span class=\"duty-item-subtitle\">{{ duty.subtitle }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </header>\r\n      <!-- #endregion -->\r\n\r\n      <ng-container *ngIf=\"selectedDuty; else noActiveDuties\">\r\n        <!-- #region TimelineChart -->\r\n        <div class=\"vacancy-timeline-wrapper\">\r\n          <careon-timeline-bar-chart\r\n            [data]=\"selectedDutyTimelinePoints\"\r\n            [autoBarWidth]=\"false\"\r\n            [barWidth]=\"68\"\r\n            (itemSelected)=\"onTimelinePointSelected($event)\"\r\n          ></careon-timeline-bar-chart>\r\n        </div>\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region BottomMetricsRow -->\r\n        <div class=\"vacancy-bottom-grid\">\r\n          <!-- Card Taxa de Convers\u00E3o -->\r\n          <article class=\"vacancy-metric-card vacancy-metric-card--donut\">\r\n            <careon-donut-chart\r\n              [title]=\"'Taxa de convers\u00E3o'\"\r\n              [titleBold]=\"true\"\r\n              [titleSize]=\"14\"\r\n              [titlePadding]=\"6\"\r\n              [data]=\"selectedDutyDonutItems\"\r\n              [centerText]=\"selectedDutyConversionRateText\"\r\n              [size]=\"96\"\r\n              [strokeWidth]=\"18\"\r\n            ></careon-donut-chart>\r\n          </article>\r\n\r\n          <!-- Card Visualiza\u00E7\u00F5es \u2192 Candidaturas -->\r\n          <article class=\"vacancy-metric-card vacancy-metric-card--funnel\">\r\n            <careon-funnel-bar\r\n              [title]=\"'Visualiza\u00E7\u00F5es \u2192 Candidaturas'\"\r\n              [titleBold]=\"true\"\r\n              [titleSize]=\"14\"\r\n              [titlePadding]=\"6\"\r\n              [data]=\"selectedDutyFunnelItems\"\r\n              [minBarWidth]=\"260\"\r\n            ></careon-funnel-bar>\r\n          </article>\r\n        </div>\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region SalaryAndSupportRow -->\r\n        <div class=\"vacancy-salary-support-grid\" *ngIf=\"selectedDutySalaryComparison\">\r\n          <!-- Card M\u00E9dia Salarial -->\r\n          <article class=\"vacancy-salary-card\">\r\n            <header class=\"salary-card-header\">\r\n              <!-- Coluna 1: Seu valor -->\r\n              <div class=\"salary-metric-col\">\r\n                <span class=\"salary-metric-label\">Seu valor</span>\r\n                <span\r\n                  class=\"salary-metric-value\"\r\n                  [class.salary-metric-value--not-informed]=\"salaryStatus === DutySalaryStatus.NotInformed\"\r\n                  [class.salary-metric-value--insufficient]=\"salaryStatus === DutySalaryStatus.InsufficientData\"\r\n                >\r\n                  {{ formattedYourSalary }}\r\n                </span>\r\n              </div>\r\n\r\n              <!-- Divisor vertical -->\r\n              <div class=\"salary-metric-divider\"></div>\r\n\r\n              <!-- Coluna 2: M\u00E9dia da regi\u00E3o -->\r\n              <div class=\"salary-metric-col\">\r\n                <span class=\"salary-metric-label\">M\u00E9dia da regi\u00E3o</span>\r\n                <span\r\n                  class=\"salary-metric-value\"\r\n                  [class.salary-metric-value--orange]=\"salaryStatus === DutySalaryStatus.BelowMarket\"\r\n                  [class.salary-metric-value--blue]=\"salaryStatus === DutySalaryStatus.AtMarket\"\r\n                  [class.salary-metric-value--navy]=\"salaryStatus === DutySalaryStatus.AboveMarket\"\r\n                  [class.salary-metric-value--insufficient]=\"salaryStatus === DutySalaryStatus.InsufficientData\"\r\n                  [class.salary-metric-value--muted]=\"salaryStatus === DutySalaryStatus.NotInformed\"\r\n                >\r\n                  {{ formattedRegionalAverage }}\r\n                </span>\r\n              </div>\r\n\r\n              <!-- Badge Din\u00E2mico -->\r\n              <div\r\n                class=\"salary-badge\"\r\n                [ngClass]=\"salaryBadgeClass\"\r\n                *ngIf=\"selectedDutySalaryComparison.badgeText\"\r\n              >\r\n                {{ selectedDutySalaryComparison.badgeText }}\r\n              </div>\r\n            </header>\r\n\r\n            <!-- Linha/Corpo textual com Destaque e Explica\u00E7\u00E3o -->\r\n            <div class=\"salary-card-body\">\r\n              <h4 class=\"salary-highlight-title\" [ngClass]=\"salaryTitleColorClass\">\r\n                {{ selectedDutySalaryComparison.highlightTitle }}\r\n              </h4>\r\n              <p class=\"salary-description\">\r\n                {{ selectedDutySalaryComparison.description }}\r\n              </p>\r\n            </div>\r\n          </article>\r\n\r\n          <!-- Card de Suporte: D\u00FAvidas sobre esses dados? -->\r\n          <article class=\"vacancy-support-card\">\r\n            <h4 class=\"support-card-title\">Ainda com d\u00FAvidas sobre esses dados?</h4>\r\n            <p class=\"support-card-subtitle\">\r\n              Se depois de ver os gr\u00E1ficos voc\u00EA ficou com perguntas sem resposta, fale com a nossa equipe.\r\n            </p>\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn-support-consultant\"\r\n              (click)=\"openConsultantWhatsApp('D\u00FAvidas sobre esses dados')\"\r\n            >\r\n              Fale com um consultor\r\n            </button>\r\n          </article>\r\n        </div>\r\n        <!-- #endregion -->\r\n      </ng-container>\r\n\r\n      <ng-template #noActiveDuties>\r\n        <div class=\"zero-state-banner\" *ngIf=\"isPublishZeroState; else basicVacancyZero\">\r\n          <div class=\"zero-state-banner-left\">\r\n            <careon-dashboard-icon name=\"info\" class=\"zero-info-icon\"></careon-dashboard-icon>\r\n            <div class=\"zero-state-banner-texts\">\r\n              <h3 class=\"zero-state-banner-title\">Nenhuma vaga para analisar</h3>\r\n              <p class=\"zero-state-banner-subtitle\">Cadastre uma vaga para come\u00E7ar a acompanhar o desempenho dela aqui.</p>\r\n            </div>\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn-zero-publish\"\r\n            (click)=\"onPublishDuty('An\u00E1lise por Vaga')\"\r\n          >\r\n            Publicar Vaga\r\n          </button>\r\n        </div>\r\n\r\n        <ng-template #basicVacancyZero>\r\n          <div class=\"basic-empty-state basic-empty-state--vacancy\">\r\n            <div class=\"basic-empty-icon-wrap\">\r\n              <careon-dashboard-icon name=\"info\" class=\"basic-empty-icon\"></careon-dashboard-icon>\r\n            </div>\r\n            <h3 class=\"basic-empty-title\">Nenhuma vaga para analisar</h3>\r\n            <p class=\"basic-empty-text\">Nenhuma vaga ativa no momento para an\u00E1lise.</p>\r\n          </div>\r\n        </ng-template>\r\n      </ng-template>\r\n    </section>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region ApplicationsPerVacancySection -->\r\n    <section class=\"applications-per-vacancy-section\">\r\n      <header class=\"applications-section-header\">\r\n        <h2 class=\"applications-section-title\">Candidaturas por Vaga</h2>\r\n        <span class=\"applications-section-subtitle\" *ngIf=\"hasComparisonDuties\">\r\n          {{ comparisonSubtitle }}\r\n        </span>\r\n        <span class=\"applications-section-subtitle\" *ngIf=\"!hasComparisonDuties\">\r\n          {{ isPublishZeroState ? '0 candidaturas no total, nenhuma vaga ativa' : 'Nenhuma vaga ativa no momento' }}\r\n        </span>\r\n      </header>\r\n\r\n      <div class=\"applications-chart-wrapper\" *ngIf=\"hasComparisonDuties; else noComparisonDuties\">\r\n        <careon-comparison-bar-chart\r\n          [data]=\"comparisonItems\"\r\n          [autoBarWidth]=\"false\"\r\n          [barWidth]=\"75\"\r\n          [itemSlotWidth]=\"100\"\r\n          [barColor]=\"'#3B82F6'\"\r\n          [zeroColor]=\"'#EF4444'\"\r\n          [trendLineColor]=\"'#1E293B'\"\r\n          [dotColor]=\"'#1E293B'\"\r\n          [textColor]=\"'#64748B'\"\r\n          (itemSelected)=\"onChartItemSelected($event, 'Candidaturas por Vaga')\"\r\n        ></careon-comparison-bar-chart>\r\n      </div>\r\n\r\n      <ng-template #noComparisonDuties>\r\n        <div class=\"zero-state-banner\" *ngIf=\"isPublishZeroState; else basicComparisonZero\">\r\n          <div class=\"zero-state-banner-left\">\r\n            <careon-dashboard-icon name=\"info\" class=\"zero-info-icon\"></careon-dashboard-icon>\r\n            <div class=\"zero-state-banner-texts\">\r\n              <h3 class=\"zero-state-banner-title\">Nenhuma candidatura registrada</h3>\r\n              <p class=\"zero-state-banner-subtitle\">Sem vagas em aberto, ainda n\u00E3o h\u00E1 candidaturas para mostrar.</p>\r\n            </div>\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn-zero-publish\"\r\n            (click)=\"onPublishDuty('Candidaturas por Vaga')\"\r\n          >\r\n            Publicar Vaga\r\n          </button>\r\n        </div>\r\n\r\n        <ng-template #basicComparisonZero>\r\n          <div class=\"basic-empty-state basic-empty-state--comparison\">\r\n            <div class=\"basic-empty-icon-wrap\">\r\n              <careon-dashboard-icon name=\"info\" class=\"basic-empty-icon\"></careon-dashboard-icon>\r\n            </div>\r\n            <h3 class=\"basic-empty-title\">Nenhuma candidatura registrada</h3>\r\n            <p class=\"basic-empty-text\">Nenhuma vaga ativa no momento para an\u00E1lise.</p>\r\n          </div>\r\n        </ng-template>\r\n      </ng-template>\r\n    </section>\r\n    <!-- #endregion -->\r\n  </main>\r\n  <!-- #endregion -->\r\n</div>\r\n", styles: [":host{display:block;width:100%}.careon-dashboard-container{display:flex;flex-direction:column;gap:24px;width:100%;max-width:1400px;margin:0 auto;padding:16px 24px;box-sizing:border-box;font-family:Montserrat,sans-serif;color:#1b2559}.careon-dashboard-container .dashboard-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-bottom:8px}.careon-dashboard-container .dashboard-header .header-titles .main-title{font-size:26px;font-weight:700;color:#1b2559;margin:0;letter-spacing:-.3px}.careon-dashboard-container .dashboard-header .header-titles .subtitle{font-size:13px;color:#a3aed0;margin:4px 0 0;font-weight:500}.careon-dashboard-container .dashboard-header .period-filter-group{display:inline-flex;align-items:center;background:#ffffff;padding:4px;border-radius:9999px;gap:2px;border:1px solid #eef0f4;box-shadow:0 2px 8px #0000000a}.careon-dashboard-container .dashboard-header .period-filter-group .period-pill{padding:14px 25px;font-family:Montserrat,sans-serif;font-size:13px;font-weight:500;color:#8e9091;background:transparent;border:none;border-radius:9999px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);outline:none}.careon-dashboard-container .dashboard-header .period-filter-group .period-pill:hover{color:#292857}.careon-dashboard-container .dashboard-header .period-filter-group .period-pill.active{background:#292857;color:#fff;font-weight:600;box-shadow:0 2px 8px #29285740}.careon-dashboard-container .dashboard-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px;gap:16px}.careon-dashboard-container .dashboard-loading-state .loading-spinner{width:40px;height:40px;border:3px solid #e2e8f0;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite}.careon-dashboard-container .dashboard-loading-state .loading-text{font-size:14px;font-weight:500;color:#64748b;margin:0}.careon-dashboard-container .dashboard-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px;background:#ffffff;border:1px dashed #cbd5e1;border-radius:12px;text-align:center}.careon-dashboard-container .dashboard-empty-state .empty-title{font-size:16px;font-weight:700;color:#334155;margin:0 0 6px}.careon-dashboard-container .dashboard-empty-state .empty-description{font-size:14px;color:#64748b;margin:0}.careon-dashboard-container .dashboard-content{display:flex;flex-direction:column}.careon-dashboard-container .dashboard-content .zero-state-banner{background-color:#dee9fb;border-radius:12px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;box-sizing:border-box}.careon-dashboard-container .dashboard-content .zero-state-banner .zero-state-banner-left{display:flex;align-items:center;gap:14px}.careon-dashboard-container .dashboard-content .zero-state-banner .zero-state-banner-left .zero-info-icon{color:#5c8bef;width:24px;height:24px;flex-shrink:0}.careon-dashboard-container .dashboard-content .zero-state-banner .zero-state-banner-left .zero-state-banner-texts{display:flex;flex-direction:column;gap:4px}.careon-dashboard-container .dashboard-content .zero-state-banner .zero-state-banner-left .zero-state-banner-texts .zero-state-banner-title{font-size:15px;font-weight:700;color:#1e2445;margin:0;font-family:Montserrat,sans-serif;line-height:1.35}.careon-dashboard-container .dashboard-content .zero-state-banner .zero-state-banner-left .zero-state-banner-texts .zero-state-banner-subtitle{font-size:13px;font-weight:400;color:#718096;margin:0;font-family:Montserrat,sans-serif;line-height:1.4}@media (max-width: 768px){.careon-dashboard-container .dashboard-content .zero-state-banner{flex-direction:column;align-items:stretch}.careon-dashboard-container .dashboard-content .zero-state-banner .btn-zero-publish{width:100%;margin-top:8px}}.careon-dashboard-container .dashboard-content .btn-zero-publish{background-color:#5c8bef;color:#fff;border:none;border-radius:10px;padding:12px 28px;font-size:14px;font-weight:600;font-family:Montserrat,sans-serif;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;transition:background-color .2s ease,transform .1s ease;outline:none}.careon-dashboard-container .dashboard-content .btn-zero-publish:hover{background-color:#4a7de6}.careon-dashboard-container .dashboard-content .btn-zero-publish:active{transform:scale(.98)}.careon-dashboard-container .dashboard-content .btn-zero-publish--full{width:100%;margin-top:auto}.careon-dashboard-container .dashboard-content .kpi-cards-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.75fr);gap:16px;align-items:stretch;width:100%;max-width:100%;box-sizing:border-box}@media (max-width: 1200px){.careon-dashboard-container .dashboard-content .kpi-cards-grid{grid-template-columns:repeat(2,1fr)}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card--status{grid-column:span 2}}@media (max-width: 600px){.careon-dashboard-container .dashboard-content .kpi-cards-grid{grid-template-columns:1fr}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card--status{grid-column:span 1}}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card{background:#ffffff;border-radius:24px;padding:14px 18px;border:none;box-shadow:0 4px 20px #0000000a;display:flex;flex-direction:column;justify-content:space-between;min-height:104px;box-sizing:border-box}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-header{display:flex;justify-content:space-between;align-items:center}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-header .kpi-label{font-size:12px;font-weight:600;color:#a3aed0}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-header .kpi-total-badge{font-size:11px;font-weight:700;color:#1b2559}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-body{display:flex;align-items:center;gap:8px;margin-top:4px}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-body .kpi-value{font-size:24px;font-weight:700;color:#1b2559;line-height:1}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-body .kpi-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:12px;white-space:nowrap}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-body .kpi-badge .kpi-badge-icon{width:10px;height:10px;display:inline-block;flex-shrink:0}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-body .kpi-badge--blue{background:#e0f2fe;color:#0284c7}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-body .kpi-badge--green{background:#dcfce7;color:#16a34a}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-body .kpi-badge--coral{background:#fee2e2;color:#dc2626}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-body .kpi-badge--gray{background:#f1f5f9;color:#64748b}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-footer{font-size:11px;color:#a3aed0;font-weight:500;margin-top:6px}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card--status{padding:14px 18px;justify-content:center}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card--status careon-stacked-horizontal-bar{display:block;width:100%}.careon-dashboard-container .dashboard-content .attention-section{margin-top:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;width:100%;box-sizing:border-box}.careon-dashboard-container .dashboard-content .attention-section .attention-card{background:#ffffff;border-radius:24px;padding:24px 28px;border:none;box-shadow:0 4px 20px #0000000a;display:flex;flex-direction:column;width:100%;box-sizing:border-box}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-card-title{font-size:19px;font-weight:700;color:#1b2559;margin:0 0 16px;letter-spacing:-.3px}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-items-list,.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-items-list .attention-item-wrapper{display:flex;flex-direction:column}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-items-list .attention-item-wrapper .attention-item{display:flex;flex-direction:column;gap:4px;padding:14px 0;cursor:pointer;transition:opacity .15s ease}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-items-list .attention-item-wrapper .attention-item:hover{opacity:.82}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-items-list .attention-item-wrapper .attention-item .attention-item-title{font-size:15px;font-weight:600;color:#2b3674;line-height:1.3}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-items-list .attention-item-wrapper .attention-item .attention-item-subtitle{font-size:13px;font-weight:400;color:#8e9091;line-height:1.4}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-items-list .attention-item-wrapper .attention-divider{height:1px;background-color:#f1f5f9;width:100%;margin:0}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-zero-box{background-color:#dee9fb;border-radius:12px;padding:20px;display:flex;flex-direction:column;box-sizing:border-box}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-zero-box .attention-zero-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-zero-box .attention-zero-header .zero-info-icon{color:#5c8bef;width:22px;height:22px;flex-shrink:0;margin-top:1px}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-zero-box .attention-zero-header .attention-zero-texts{display:flex;flex-direction:column;gap:4px}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-zero-box .attention-zero-header .attention-zero-texts .attention-zero-title{font-size:14.5px;font-weight:700;color:#1e2445;margin:0;font-family:Montserrat,sans-serif;line-height:1.35}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-zero-box .attention-zero-header .attention-zero-texts .attention-zero-subtitle{font-size:13px;font-weight:400;color:#718096;margin:0;font-family:Montserrat,sans-serif;line-height:1.4}.careon-dashboard-container .dashboard-content .attention-section .attention-card .basic-empty-state,.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background-color:#f8fafc;border:1px dashed #cbd5e1;border-radius:16px;box-sizing:border-box;padding:28px 20px;flex:1;margin-bottom:20px;min-height:180px}.careon-dashboard-container .dashboard-content .attention-section .attention-card .basic-empty-state .basic-empty-icon-wrap,.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-empty-state .basic-empty-icon-wrap{width:44px;height:44px;border-radius:50%;background-color:#eff6ff;color:#3b82f6;display:flex;align-items:center;justify-content:center;margin-bottom:12px;flex-shrink:0}.careon-dashboard-container .dashboard-content .attention-section .attention-card .basic-empty-state .basic-empty-icon-wrap .basic-empty-icon,.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-empty-state .basic-empty-icon-wrap .basic-empty-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.careon-dashboard-container .dashboard-content .attention-section .attention-card .basic-empty-state .basic-empty-title,.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-empty-state .basic-empty-title{font-size:15px;font-weight:700;color:#1e293b;margin:0 0 6px;font-family:Montserrat,sans-serif;line-height:1.35}.careon-dashboard-container .dashboard-content .attention-section .attention-card .basic-empty-state .basic-empty-text,.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-empty-state .basic-empty-text{font-size:13.5px;font-weight:400;color:#64748b;margin:0;font-family:Montserrat,sans-serif;line-height:1.45;max-width:460px}.careon-dashboard-container .dashboard-content .attention-section .attention-card .btn-consultant{width:100%;display:flex;align-items:center;justify-content:center;background-color:#3b82f6;color:#fff;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;border:none;border-radius:9999px;padding:13px 24px;margin-top:auto;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 14px #3b82f64d;outline:none}.careon-dashboard-container .dashboard-content .attention-section .attention-card .btn-consultant:hover{background-color:#2563eb;box-shadow:0 6px 18px #2563eb66;transform:translateY(-1px)}.careon-dashboard-container .dashboard-content .attention-section .attention-card .btn-consultant:active{transform:translateY(0);box-shadow:0 2px 6px #2563eb40}.careon-dashboard-container .dashboard-content .attention-section .performance-card{background:#ffffff;border-radius:24px;padding:24px 28px;border:none;box-shadow:0 4px 20px #0000000a;display:flex;flex-direction:column;width:100%;box-sizing:border-box;position:relative}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-card-header .performance-card-title{font-size:19px;font-weight:700;color:#1b2559;margin:0;letter-spacing:-.3px}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-card-header .performance-info-wrapper{position:relative;display:inline-flex;align-items:center}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-card-header .performance-info-wrapper .btn-info{background:transparent;border:none;padding:4px;cursor:pointer;color:#a3aed0;transition:color .2s ease;display:flex;align-items:center;justify-content:center;outline:none;border-radius:50%}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-card-header .performance-info-wrapper .btn-info:hover{color:#3b82f6}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-card-header .performance-info-wrapper .btn-info .info-icon{width:18px;height:18px}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-card-header .performance-info-wrapper .info-tooltip{position:absolute;top:calc(100% + 8px);right:0;width:290px;background:#f0f7ff;border:1px solid #93c5fd;border-radius:10px;padding:12px 14px;box-shadow:0 6px 20px #3b82f626;z-index:20;box-sizing:border-box;animation:fadeInTooltip .2s ease-out}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-card-header .performance-info-wrapper .info-tooltip .tooltip-arrow{position:absolute;top:-6px;right:8px;width:10px;height:10px;background:#f0f7ff;border-top:1px solid #93c5fd;border-left:1px solid #93c5fd;transform:rotate(45deg)}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-card-header .performance-info-wrapper .info-tooltip .tooltip-text{font-size:12px;line-height:1.45;color:#334155;margin:0;font-weight:500;font-family:Montserrat,sans-serif}.careon-dashboard-container .dashboard-content .attention-section .performance-card careon-performance-wave{display:block;width:100%}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-body{display:flex;flex-direction:column;margin-bottom:16px}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-body .performance-highlight-title{font-size:13.5px;font-weight:700;color:#3b82f6;margin:0 0 6px;line-height:1.35}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-body .performance-description{font-size:12.5px;font-weight:400;color:#8e9091;margin:0;line-height:1.45}.careon-dashboard-container .dashboard-content .attention-section .performance-card .btn-consultant{width:100%;display:flex;align-items:center;justify-content:center;background-color:#3b82f6;color:#fff;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;border:none;border-radius:9999px;padding:13px 24px;margin-top:auto;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 14px #3b82f64d;outline:none}.careon-dashboard-container .dashboard-content .attention-section .performance-card .btn-consultant:hover{background-color:#2563eb;box-shadow:0 6px 18px #2563eb66;transform:translateY(-1px)}.careon-dashboard-container .dashboard-content .attention-section .performance-card .btn-consultant:active{transform:translateY(0);box-shadow:0 2px 6px #2563eb40}.careon-dashboard-container .dashboard-content .vacancy-analysis-section{margin-top:32px;display:flex;flex-direction:column;background-color:#fff;border:none;border-radius:24px;padding:28px 32px;box-shadow:0 4px 20px #0000000a;box-sizing:border-box}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:24px}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-section-title-group{display:flex;flex-direction:column;gap:4px}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-section-title-group .vacancy-section-title{font-size:20px;font-weight:700;color:#1e1b4b;margin:0;letter-spacing:-.02em}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-section-title-group .vacancy-section-subtitle{font-size:13px;font-weight:400;color:#94a3b8}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper{display:flex;align-items:center;gap:12px}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-label{font-size:13px;font-weight:500;color:#64748b}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container{position:relative}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-width:180px;padding:9px 18px;background-color:#fff;border:1px solid #e2e8f0;border-radius:9999px;font-family:Montserrat,sans-serif;font-size:13.5px;font-weight:600;color:#1e1b4b;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px #0000000a;outline:none}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-btn:hover{border-color:#cbd5e1;background-color:#f8fafc}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-btn--open{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f626}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-btn .vacancy-dropdown-btn-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-btn .vacancy-dropdown-btn-icon{width:18px;height:18px;color:#64748b;flex-shrink:0;transition:transform .2s ease}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-btn .vacancy-dropdown-btn-icon.rotated{transform:rotate(180deg)}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:100;min-width:320px;max-width:440px;max-height:360px;overflow-y:auto;background:#ffffff;border:1px solid #e2e8f0;border-radius:16px;padding:8px;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000000d}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;cursor:pointer;transition:background-color .15s ease}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item:hover{background-color:#f1f5f9}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item--selected{background-color:#eff6ff}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item--selected .duty-item-title{color:#3b82f6}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item .duty-radio-outer{width:18px;height:18px;border-radius:50%;border:2px solid #3b82f6;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s ease}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item .duty-radio-outer:not(.duty-radio-outer--checked){border-color:#93c5fd}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item .duty-radio-outer--checked{border-color:#3b82f6}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item .duty-radio-outer .duty-radio-inner{width:8px;height:8px;border-radius:50%;background-color:#3b82f6}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item .duty-item-content{display:flex;flex-direction:column;gap:2px;overflow:hidden}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item .duty-item-content .duty-item-title{font-size:13.5px;font-weight:600;color:#1e1b4b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item .duty-item-content .duty-item-subtitle{font-size:11.5px;font-weight:400;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-timeline-wrapper{width:100%;margin-bottom:24px;overflow:hidden}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-timeline-wrapper ::ng-deep .timeline-baseline{background-color:#f1f5f9}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-bottom-grid{display:grid;grid-template-columns:minmax(230px,26%) 1fr;gap:20px}@media (max-width: 900px){.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-bottom-grid{grid-template-columns:1fr}}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-bottom-grid .vacancy-metric-card{background-color:#f7f7f7;border:none;border-radius:24px;padding:20px 24px;box-shadow:none;display:flex;flex-direction:column;overflow:visible;min-height:164px}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-bottom-grid .vacancy-metric-card--donut{min-height:164px;overflow:visible}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-bottom-grid .vacancy-metric-card--funnel{min-height:164px}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid{display:grid;grid-template-columns:1fr 450px;gap:20px;margin-top:20px}@media (max-width: 992px){.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid{grid-template-columns:1fr}}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card{background-color:#f7f7f7;border:none;border-radius:24px;padding:24px 28px;display:flex;flex-direction:column;justify-content:center;box-shadow:none}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header{display:flex;align-items:center;gap:24px;margin-bottom:16px;flex-wrap:wrap}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-col{display:flex;flex-direction:column;gap:4px}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-col .salary-metric-label{font-size:13px;font-weight:500;color:#71717a;font-family:Montserrat,sans-serif}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-col .salary-metric-value{font-size:26px;font-weight:700;color:#374151;font-family:Montserrat,sans-serif;line-height:1.2}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-col .salary-metric-value--orange{color:#d97706}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-col .salary-metric-value--blue{color:#2563eb}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-col .salary-metric-value--navy{color:#1e1b4b}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-col .salary-metric-value--not-informed{color:#b91c1c;font-weight:700}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-col .salary-metric-value--insufficient{color:#444;font-weight:700}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-col .salary-metric-value--muted{color:#4b5563}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-divider{width:1px;height:38px;background-color:#e5e7eb}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-badge{margin-left:auto;padding:6px 14px;border-radius:9999px;font-size:13px;font-weight:600;font-family:Montserrat,sans-serif;display:inline-flex;align-items:center;white-space:nowrap}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-badge--orange{background-color:#ffedd5;color:#c2410c;border:none}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-badge--blue{background-color:#dbeafd;color:#1d4ed8;border:none}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-badge--purple{background-color:#ede9fe;color:#1e1b4b;border:none}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-body{display:flex;flex-direction:column;gap:6px}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-body .salary-highlight-title{font-size:14.5px;font-weight:700;margin:0;font-family:Montserrat,sans-serif;line-height:1.4}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-body .salary-highlight-title.salary-title--orange{color:#d97706}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-body .salary-highlight-title.salary-title--blue{color:#2563eb}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-body .salary-highlight-title.salary-title--purple{color:#1e1b4b}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-body .salary-highlight-title.salary-title--red{color:#b91c1c}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-body .salary-highlight-title.salary-title--default{color:#111827}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-body .salary-description{font-size:13px;font-weight:400;color:#4b5563;margin:0;line-height:1.55;font-family:Montserrat,sans-serif}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-support-card{background-color:#f7f7f7;border:none;border-radius:24px;padding:24px 28px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:none}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-support-card .support-card-title{font-size:17px;font-weight:700;color:#3b82f6;margin:0 0 10px;font-family:Montserrat,sans-serif;line-height:1.35}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-support-card .support-card-subtitle{font-size:13.5px;font-weight:400;color:#64748b;margin:0 0 20px;line-height:1.5;font-family:Montserrat,sans-serif;flex-grow:1}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-support-card .btn-support-consultant{background-color:#3b82f6;color:#fff;border:none;border-radius:9999px;padding:13px 24px;font-size:14px;font-weight:700;font-family:Montserrat,sans-serif;cursor:pointer;transition:background-color .15s ease,transform .1s ease;width:100%;text-align:center;box-shadow:none;outline:none}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-support-card .btn-support-consultant:hover{background-color:#2563eb}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-support-card .btn-support-consultant:active{transform:scale(.98)}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .basic-empty-state,.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background-color:#f8fafc;border:1px dashed #cbd5e1;border-radius:16px;box-sizing:border-box;padding:44px 24px;width:100%;min-height:180px}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .basic-empty-state .basic-empty-icon-wrap,.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-empty-state .basic-empty-icon-wrap{width:44px;height:44px;border-radius:50%;background-color:#eff6ff;color:#3b82f6;display:flex;align-items:center;justify-content:center;margin-bottom:12px;flex-shrink:0}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .basic-empty-state .basic-empty-icon-wrap .basic-empty-icon,.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-empty-state .basic-empty-icon-wrap .basic-empty-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .basic-empty-state .basic-empty-title,.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-empty-state .basic-empty-title{font-size:15px;font-weight:700;color:#1e293b;margin:0 0 6px;font-family:Montserrat,sans-serif;line-height:1.35}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .basic-empty-state .basic-empty-text,.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-empty-state .basic-empty-text{font-size:13.5px;font-weight:400;color:#64748b;margin:0;font-family:Montserrat,sans-serif;line-height:1.45;max-width:460px}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section{margin-top:32px;display:flex;flex-direction:column;background-color:#fff;border:none;border-radius:24px;padding:28px 32px;box-shadow:0 4px 20px #0000000a;box-sizing:border-box}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .applications-section-header{display:flex;flex-direction:column;gap:4px;margin-bottom:24px}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .applications-section-header .applications-section-title{font-size:20px;font-weight:700;color:#1e1b4b;margin:0;letter-spacing:-.02em;font-family:Montserrat,sans-serif}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .applications-section-header .applications-section-subtitle{font-size:13px;font-weight:400;color:#94a3b8;font-family:Montserrat,sans-serif}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .applications-chart-wrapper{width:100%;overflow:hidden}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .basic-empty-state,.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .applications-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background-color:#f8fafc;border:1px dashed #cbd5e1;border-radius:16px;box-sizing:border-box;padding:44px 24px;width:100%;min-height:180px}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .basic-empty-state .basic-empty-icon-wrap,.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .applications-empty-state .basic-empty-icon-wrap{width:44px;height:44px;border-radius:50%;background-color:#eff6ff;color:#3b82f6;display:flex;align-items:center;justify-content:center;margin-bottom:12px;flex-shrink:0}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .basic-empty-state .basic-empty-icon-wrap .basic-empty-icon,.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .applications-empty-state .basic-empty-icon-wrap .basic-empty-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .basic-empty-state .basic-empty-title,.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .applications-empty-state .basic-empty-title{font-size:15px;font-weight:700;color:#1e293b;margin:0 0 6px;font-family:Montserrat,sans-serif;line-height:1.35}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .basic-empty-state .basic-empty-text,.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .applications-empty-state .basic-empty-text{font-size:13.5px;font-weight:400;color:#64748b;margin:0;font-family:Montserrat,sans-serif;line-height:1.45;max-width:460px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInTooltip{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TimelineBarChartComponent, selector: "careon-timeline-bar-chart", inputs: ["data", "barColor", "currentBarColor", "pastHatchColor", "zeroColor", "trendLineColor", "dotColor", "tooltipBgColor", "tooltipTextColor", "textColor", "activeTextColor", "autoBarWidth", "barWidth", "itemSlotWidth"], outputs: ["itemSelected"] }, { kind: "component", type: i2.ComparisonBarChartComponent, selector: "careon-comparison-bar-chart", inputs: ["data", "limitTop10", "barColor", "zeroColor", "trendLineColor", "dotColor", "textColor", "autoBarWidth", "barWidth", "itemSlotWidth"], outputs: ["itemSelected"] }, { kind: "component", type: i2.DonutChartComponent, selector: "careon-donut-chart", inputs: ["title", "titleBold", "titleSize", "titlePadding", "data", "maxItems", "centerText", "emptyTrackColor", "size", "strokeWidth", "showLegend", "showLegendPercentage", "showTooltip", "tooltipBgColor", "tooltipTextColor"], outputs: ["itemSelected"] }, { kind: "component", type: i2.StackedHorizontalBarComponent, selector: "careon-stacked-horizontal-bar", inputs: ["title", "totalLabel", "showHeader", "showLegend", "emptyText", "emptyTrackColor", "maxSegments", "data"], outputs: ["itemSelected"] }, { kind: "component", type: i2.FunnelBarComponent, selector: "careon-funnel-bar", inputs: ["title", "titleBold", "titleSize", "titlePadding", "data", "fontColor", "minBarWidth"], outputs: ["itemSelected"] }, { kind: "component", type: PerformanceWaveComponent, selector: "careon-performance-wave", inputs: ["level"] }, { kind: "component", type: DashboardIconComponent, selector: "careon-dashboard-icon", inputs: ["name", "rotated", "customClass"] }, { kind: "component", type: DashboardSkeletonComponent, selector: "careon-dashboard-skeleton" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'careon-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"careon-dashboard-container\">\r\n  <!-- #region DashboardHeader -->\r\n  <header class=\"dashboard-header\">\r\n    <div class=\"header-titles\">\r\n      <h1 class=\"main-title\">{{ title }}</h1>\r\n      <p *ngIf=\"subtitle\" class=\"subtitle\">\r\n        {{ subtitle }}\r\n      </p>\r\n    </div>\r\n\r\n    <div class=\"period-filter-group\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"period-pill\"\r\n        [class.active]=\"currentPeriod === DashboardPeriod.Today\"\r\n        (click)=\"setPeriod(DashboardPeriod.Today)\"\r\n      >\r\n        Hoje\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"period-pill\"\r\n        [class.active]=\"currentPeriod === DashboardPeriod.Week\"\r\n        (click)=\"setPeriod(DashboardPeriod.Week)\"\r\n      >\r\n        Semana\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"period-pill\"\r\n        [class.active]=\"currentPeriod === DashboardPeriod.Month\"\r\n        (click)=\"setPeriod(DashboardPeriod.Month)\"\r\n      >\r\n        M\u00EAs\r\n      </button>\r\n    </div>\r\n  </header>\r\n  <!-- #endregion -->\r\n\r\n  <!-- #region LoadingSkeletonState -->\r\n  <careon-dashboard-skeleton *ngIf=\"loading\"></careon-dashboard-skeleton>\r\n  <!-- #endregion -->\r\n\r\n  <!-- #region EmptyState -->\r\n  <div *ngIf=\"!loading && !hasData\" class=\"dashboard-empty-state\">\r\n    <p class=\"empty-title\">Sem registros</p>\r\n    <p class=\"empty-description\">{{ emptyMessage }}</p>\r\n  </div>\r\n  <!-- #endregion -->\r\n\r\n  <!-- #region DashboardContent -->\r\n  <main *ngIf=\"!loading && hasData\" class=\"dashboard-content\">\r\n    <!-- #region KpiCardsRow -->\r\n    <section class=\"kpi-cards-grid\">\r\n      <!-- KPI 1: Vagas Publicadas -->\r\n      <article class=\"kpi-card\">\r\n        <div class=\"kpi-card-header\">\r\n          <span class=\"kpi-label\">Vagas Publicadas</span>\r\n        </div>\r\n        <div class=\"kpi-card-body\">\r\n          <span class=\"kpi-value\">{{ registeredVacancies }}</span>\r\n          <span class=\"kpi-badge\" [ngClass]=\"registeredVacanciesBadge.badgeClass\">\r\n            <careon-dashboard-icon *ngIf=\"registeredVacanciesBadge.isPositive\" name=\"arrow-up\" class=\"kpi-badge-icon\"></careon-dashboard-icon>\r\n            <careon-dashboard-icon *ngIf=\"registeredVacanciesBadge.isNegative\" name=\"arrow-down\" class=\"kpi-badge-icon\"></careon-dashboard-icon>\r\n            <span>{{ registeredVacanciesBadge.changeText }}</span>\r\n          </span>\r\n        </div>\r\n        <span class=\"kpi-footer\">\r\n          no total\r\n        </span>\r\n      </article>\r\n\r\n      <!-- KPI 2: Candidatos Inscritos -->\r\n      <article class=\"kpi-card\">\r\n        <div class=\"kpi-card-header\">\r\n          <span class=\"kpi-label\">Candidatos Inscritos</span>\r\n        </div>\r\n        <div class=\"kpi-card-body\">\r\n          <span class=\"kpi-value\">{{ candidateApplications }}</span>\r\n          <span class=\"kpi-badge\" [ngClass]=\"candidateApplicationsBadge.badgeClass\">\r\n            <careon-dashboard-icon *ngIf=\"candidateApplicationsBadge.isPositive\" name=\"arrow-up\" class=\"kpi-badge-icon\"></careon-dashboard-icon>\r\n            <careon-dashboard-icon *ngIf=\"candidateApplicationsBadge.isNegative\" name=\"arrow-down\" class=\"kpi-badge-icon\"></careon-dashboard-icon>\r\n            <span>{{ candidateApplicationsBadge.changeText }}</span>\r\n          </span>\r\n        </div>\r\n        <span class=\"kpi-footer\">\r\n          {{ currentPeriod === 'Today' ? 'hoje' : currentPeriod === 'Week' ? 'essa semana' : 'esse m\u00EAs' }}\r\n        </span>\r\n      </article>\r\n\r\n      <!-- KPI 3: Curr\u00EDculos para Avaliar -->\r\n      <article class=\"kpi-card\">\r\n        <div class=\"kpi-card-header\">\r\n          <span class=\"kpi-label\">Curr\u00EDculos para Avaliar</span>\r\n        </div>\r\n        <div class=\"kpi-card-body\">\r\n          <span class=\"kpi-value\">{{ pendingReviews }}</span>\r\n          <span class=\"kpi-badge\" [ngClass]=\"pendingReviewsBadge.badgeClass\">\r\n            <careon-dashboard-icon *ngIf=\"pendingReviewsBadge.isPositive\" name=\"arrow-up\" class=\"kpi-badge-icon\"></careon-dashboard-icon>\r\n            <careon-dashboard-icon *ngIf=\"pendingReviewsBadge.isNegative\" name=\"arrow-down\" class=\"kpi-badge-icon\"></careon-dashboard-icon>\r\n            <span>{{ pendingReviewsBadge.changeText }}</span>\r\n          </span>\r\n        </div>\r\n        <span class=\"kpi-footer\">aguardando agora</span>\r\n      </article>\r\n\r\n      <!-- KPI 4: M\u00E9dia de Candidatos -->\r\n      <article class=\"kpi-card\">\r\n        <div class=\"kpi-card-header\">\r\n          <span class=\"kpi-label\">M\u00E9dia de Candidatos</span>\r\n        </div>\r\n        <div class=\"kpi-card-body\">\r\n          <span class=\"kpi-value\">{{ averageCandidatesPerVacancy }}</span>\r\n          <span class=\"kpi-badge\" [ngClass]=\"averageCandidatesBadge.badgeClass\">\r\n            <careon-dashboard-icon *ngIf=\"averageCandidatesBadge.isPositive\" name=\"arrow-up\" class=\"kpi-badge-icon\"></careon-dashboard-icon>\r\n            <careon-dashboard-icon *ngIf=\"averageCandidatesBadge.isNegative\" name=\"arrow-down\" class=\"kpi-badge-icon\"></careon-dashboard-icon>\r\n            <span>{{ averageCandidatesBadge.changeText }}</span>\r\n          </span>\r\n        </div>\r\n        <span class=\"kpi-footer\">por vaga</span>\r\n      </article>\r\n\r\n      <!-- KPI 5: Status das Vagas -->\r\n      <article class=\"kpi-card kpi-card--status\">\r\n        <careon-stacked-horizontal-bar\r\n          [title]=\"'Status das Vagas'\"\r\n          [totalLabel]=\"'vagas'\"\r\n          [showHeader]=\"true\"\r\n          [showLegend]=\"true\"\r\n          [data]=\"dutiesStatusItems\"\r\n          [emptyText]=\"'Sem vagas registradas'\"\r\n          (itemSelected)=\"onChartItemSelected($event, 'Status das Vagas')\"\r\n        ></careon-stacked-horizontal-bar>\r\n      </article>\r\n    </section>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region AttentionSection -->\r\n    <section class=\"attention-section\">\r\n      <!-- #region AttentionCard -->\r\n      <article class=\"attention-card\">\r\n        <h2 class=\"attention-card-title\">Precisa da sua aten\u00E7\u00E3o</h2>\r\n\r\n        <ng-container *ngIf=\"attentionItems.length > 0; else noAttention\">\r\n          <div class=\"attention-items-list\">\r\n            <div *ngFor=\"let item of attentionItems; let last = last\" class=\"attention-item-wrapper\">\r\n              <div class=\"attention-item\" (click)=\"onAttentionItemClick(item)\">\r\n                <span class=\"attention-item-title\">{{ item.title }}</span>\r\n                <span class=\"attention-item-subtitle\">{{ item.subtitle }}</span>\r\n              </div>\r\n              <div *ngIf=\"!last\" class=\"attention-divider\"></div>\r\n            </div>\r\n          </div>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn-consultant\"\r\n            (click)=\"openConsultantWhatsApp('Precisa da sua aten\u00E7\u00E3o')\"\r\n          >\r\n            Fale com um consultor\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-template #noAttention>\r\n          <ng-container *ngIf=\"isPublishZeroState; else basicAttentionZero\">\r\n            <div class=\"attention-zero-box\">\r\n              <div class=\"attention-zero-header\">\r\n                <careon-dashboard-icon name=\"info\" class=\"zero-info-icon\"></careon-dashboard-icon>\r\n                <div class=\"attention-zero-texts\">\r\n                  <h3 class=\"attention-zero-title\">Nenhuma vaga precisa de aten\u00E7\u00E3o</h3>\r\n                  <p class=\"attention-zero-subtitle\">Voc\u00EA n\u00E3o tem vagas em aberto para revisar.</p>\r\n                </div>\r\n              </div>\r\n              <button\r\n                type=\"button\"\r\n                class=\"btn-zero-publish btn-zero-publish--full\"\r\n                (click)=\"onPublishDuty('Precisa da sua aten\u00E7\u00E3o')\"\r\n              >\r\n                Publicar Vaga\r\n              </button>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-template #basicAttentionZero>\r\n            <div class=\"basic-empty-state basic-empty-state--attention\">\r\n              <div class=\"basic-empty-icon-wrap\">\r\n                <careon-dashboard-icon name=\"info\" class=\"basic-empty-icon\"></careon-dashboard-icon>\r\n              </div>\r\n              <h3 class=\"basic-empty-title\">Tudo em dia!</h3>\r\n              <p class=\"basic-empty-text\">Nenhuma vaga precisa da sua aten\u00E7\u00E3o no momento.</p>\r\n            </div>\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn-consultant\"\r\n              (click)=\"openConsultantWhatsApp('Precisa da sua aten\u00E7\u00E3o - Sem vagas')\"\r\n            >\r\n              Fale com um consultor\r\n            </button>\r\n          </ng-template>\r\n        </ng-template>\r\n      </article>\r\n      <!-- #endregion -->\r\n\r\n      <!-- #region PerformanceCard -->\r\n      <article class=\"performance-card\">\r\n        <div class=\"performance-card-header\">\r\n          <h2 class=\"performance-card-title\">An\u00E1lise de Desempenho</h2>\r\n\r\n          <div\r\n            class=\"performance-info-wrapper\"\r\n            (mouseenter)=\"onInfoMouseEnter()\"\r\n            (mouseleave)=\"onInfoMouseLeave()\"\r\n          >\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn-info\"\r\n              aria-label=\"Informa\u00E7\u00F5es sobre a An\u00E1lise de Desempenho\"\r\n              (click)=\"toggleInfoTooltip()\"\r\n            >\r\n              <careon-dashboard-icon name=\"info\" class=\"info-icon\"></careon-dashboard-icon>\r\n            </button>\r\n\r\n            <!-- Tooltip -->\r\n            <div *ngIf=\"showInfoTooltip\" class=\"info-tooltip\" role=\"tooltip\">\r\n              <div class=\"tooltip-arrow\"></div>\r\n              <p class=\"tooltip-text\">\r\n                Esta an\u00E1lise mede o interesse dos candidatos pela sua empresa e \u00E9 atualizada continuamente \u00E0 medida que mais profissionais demonstram desejo de fazer parte do seu time.\r\n              </p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Gr\u00E1fico de Ondas -->\r\n        <careon-performance-wave [level]=\"performanceLevel\"></careon-performance-wave>\r\n\r\n        <!-- Conte\u00FAdo Textual -->\r\n        <div class=\"performance-body\">\r\n          <h3 class=\"performance-highlight-title\">{{ performanceTitle }}</h3>\r\n          <p class=\"performance-description\">{{ performanceDescription }}</p>\r\n        </div>\r\n\r\n        <!-- Bot\u00E3o WhatsApp -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn-consultant\"\r\n          (click)=\"openConsultantWhatsApp('An\u00E1lise de Desempenho')\"\r\n        >\r\n          Fale com um consultor\r\n        </button>\r\n      </article>\r\n      <!-- #endregion -->\r\n    </section>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region VacancyAnalysisSection -->\r\n    <section class=\"vacancy-analysis-section vacancy-analysis-card\">\r\n      <!-- #region SectionHeader -->\r\n      <header class=\"vacancy-section-header\">\r\n        <div class=\"vacancy-section-title-group\">\r\n          <h2 class=\"vacancy-section-title\">An\u00E1lise por Vaga</h2>\r\n          <span class=\"vacancy-section-subtitle\" *ngIf=\"selectedDuty\">{{ vacancySectionSubtitle }}</span>\r\n          <span class=\"vacancy-section-subtitle\" *ngIf=\"!selectedDuty\">\r\n            {{ isPublishZeroState ? 'Nenhuma candidatura registrada' : 'Nenhuma vaga ativa no momento' }}\r\n          </span>\r\n        </div>\r\n\r\n        <div class=\"vacancy-dropdown-wrapper\" *ngIf=\"vacanciesAnalysis.length > 0\">\r\n          <span class=\"vacancy-dropdown-label\">Escolha a vaga:</span>\r\n\r\n          <div class=\"vacancy-dropdown-container\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"vacancy-dropdown-btn\"\r\n              [class.vacancy-dropdown-btn--open]=\"isDutyDropdownOpen\"\r\n              (click)=\"toggleDutyDropdown()\"\r\n              [attr.aria-expanded]=\"isDutyDropdownOpen\"\r\n            >\r\n              <span class=\"vacancy-dropdown-btn-text\">{{ selectedDuty?.title || 'Selecione uma vaga' }}</span>\r\n              <careon-dashboard-icon name=\"chevron-down\" [rotated]=\"isDutyDropdownOpen\" class=\"vacancy-dropdown-btn-icon\"></careon-dashboard-icon>\r\n            </button>\r\n\r\n            <!-- Backdrop para fechar dropdown ao clicar fora -->\r\n            <div *ngIf=\"isDutyDropdownOpen\" class=\"vacancy-dropdown-backdrop\" (click)=\"closeDutyDropdown()\"></div>\r\n\r\n            <!-- Menu flutuante do dropdown -->\r\n            <div *ngIf=\"isDutyDropdownOpen\" class=\"vacancy-dropdown-menu\" role=\"menu\">\r\n              <div\r\n                *ngFor=\"let duty of vacanciesAnalysis\"\r\n                class=\"vacancy-dropdown-item\"\r\n                [class.vacancy-dropdown-item--selected]=\"duty.dutyId === selectedDuty?.dutyId\"\r\n                (click)=\"selectDuty(duty)\"\r\n                role=\"menuitem\"\r\n              >\r\n                <div class=\"duty-radio-outer\" [class.duty-radio-outer--checked]=\"duty.dutyId === selectedDuty?.dutyId\">\r\n                  <div class=\"duty-radio-inner\" *ngIf=\"duty.dutyId === selectedDuty?.dutyId\"></div>\r\n                </div>\r\n\r\n                <div class=\"duty-item-content\">\r\n                  <span class=\"duty-item-title\">{{ duty.title }}</span>\r\n                  <span class=\"duty-item-subtitle\">{{ duty.subtitle }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </header>\r\n      <!-- #endregion -->\r\n\r\n      <ng-container *ngIf=\"selectedDuty; else noActiveDuties\">\r\n        <!-- #region TimelineChart -->\r\n        <div class=\"vacancy-timeline-wrapper\">\r\n          <careon-timeline-bar-chart\r\n            [data]=\"selectedDutyTimelinePoints\"\r\n            [autoBarWidth]=\"false\"\r\n            [barWidth]=\"68\"\r\n            (itemSelected)=\"onTimelinePointSelected($event)\"\r\n          ></careon-timeline-bar-chart>\r\n        </div>\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region BottomMetricsRow -->\r\n        <div class=\"vacancy-bottom-grid\">\r\n          <!-- Card Taxa de Convers\u00E3o -->\r\n          <article class=\"vacancy-metric-card vacancy-metric-card--donut\">\r\n            <careon-donut-chart\r\n              [title]=\"'Taxa de convers\u00E3o'\"\r\n              [titleBold]=\"true\"\r\n              [titleSize]=\"14\"\r\n              [titlePadding]=\"6\"\r\n              [data]=\"selectedDutyDonutItems\"\r\n              [centerText]=\"selectedDutyConversionRateText\"\r\n              [size]=\"96\"\r\n              [strokeWidth]=\"18\"\r\n            ></careon-donut-chart>\r\n          </article>\r\n\r\n          <!-- Card Visualiza\u00E7\u00F5es \u2192 Candidaturas -->\r\n          <article class=\"vacancy-metric-card vacancy-metric-card--funnel\">\r\n            <careon-funnel-bar\r\n              [title]=\"'Visualiza\u00E7\u00F5es \u2192 Candidaturas'\"\r\n              [titleBold]=\"true\"\r\n              [titleSize]=\"14\"\r\n              [titlePadding]=\"6\"\r\n              [data]=\"selectedDutyFunnelItems\"\r\n              [minBarWidth]=\"260\"\r\n            ></careon-funnel-bar>\r\n          </article>\r\n        </div>\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region SalaryAndSupportRow -->\r\n        <div class=\"vacancy-salary-support-grid\" *ngIf=\"selectedDutySalaryComparison\">\r\n          <!-- Card M\u00E9dia Salarial -->\r\n          <article class=\"vacancy-salary-card\">\r\n            <header class=\"salary-card-header\">\r\n              <!-- Coluna 1: Seu valor -->\r\n              <div class=\"salary-metric-col\">\r\n                <span class=\"salary-metric-label\">Seu valor</span>\r\n                <span\r\n                  class=\"salary-metric-value\"\r\n                  [class.salary-metric-value--not-informed]=\"salaryStatus === DutySalaryStatus.NotInformed\"\r\n                  [class.salary-metric-value--insufficient]=\"salaryStatus === DutySalaryStatus.InsufficientData\"\r\n                >\r\n                  {{ formattedYourSalary }}\r\n                </span>\r\n              </div>\r\n\r\n              <!-- Divisor vertical -->\r\n              <div class=\"salary-metric-divider\"></div>\r\n\r\n              <!-- Coluna 2: M\u00E9dia da regi\u00E3o -->\r\n              <div class=\"salary-metric-col\">\r\n                <span class=\"salary-metric-label\">M\u00E9dia da regi\u00E3o</span>\r\n                <span\r\n                  class=\"salary-metric-value\"\r\n                  [class.salary-metric-value--orange]=\"salaryStatus === DutySalaryStatus.BelowMarket\"\r\n                  [class.salary-metric-value--blue]=\"salaryStatus === DutySalaryStatus.AtMarket\"\r\n                  [class.salary-metric-value--navy]=\"salaryStatus === DutySalaryStatus.AboveMarket\"\r\n                  [class.salary-metric-value--insufficient]=\"salaryStatus === DutySalaryStatus.InsufficientData\"\r\n                  [class.salary-metric-value--muted]=\"salaryStatus === DutySalaryStatus.NotInformed\"\r\n                >\r\n                  {{ formattedRegionalAverage }}\r\n                </span>\r\n              </div>\r\n\r\n              <!-- Badge Din\u00E2mico -->\r\n              <div\r\n                class=\"salary-badge\"\r\n                [ngClass]=\"salaryBadgeClass\"\r\n                *ngIf=\"selectedDutySalaryComparison.badgeText\"\r\n              >\r\n                {{ selectedDutySalaryComparison.badgeText }}\r\n              </div>\r\n            </header>\r\n\r\n            <!-- Linha/Corpo textual com Destaque e Explica\u00E7\u00E3o -->\r\n            <div class=\"salary-card-body\">\r\n              <h4 class=\"salary-highlight-title\" [ngClass]=\"salaryTitleColorClass\">\r\n                {{ selectedDutySalaryComparison.highlightTitle }}\r\n              </h4>\r\n              <p class=\"salary-description\">\r\n                {{ selectedDutySalaryComparison.description }}\r\n              </p>\r\n            </div>\r\n          </article>\r\n\r\n          <!-- Card de Suporte: D\u00FAvidas sobre esses dados? -->\r\n          <article class=\"vacancy-support-card\">\r\n            <h4 class=\"support-card-title\">Ainda com d\u00FAvidas sobre esses dados?</h4>\r\n            <p class=\"support-card-subtitle\">\r\n              Se depois de ver os gr\u00E1ficos voc\u00EA ficou com perguntas sem resposta, fale com a nossa equipe.\r\n            </p>\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn-support-consultant\"\r\n              (click)=\"openConsultantWhatsApp('D\u00FAvidas sobre esses dados')\"\r\n            >\r\n              Fale com um consultor\r\n            </button>\r\n          </article>\r\n        </div>\r\n        <!-- #endregion -->\r\n      </ng-container>\r\n\r\n      <ng-template #noActiveDuties>\r\n        <div class=\"zero-state-banner\" *ngIf=\"isPublishZeroState; else basicVacancyZero\">\r\n          <div class=\"zero-state-banner-left\">\r\n            <careon-dashboard-icon name=\"info\" class=\"zero-info-icon\"></careon-dashboard-icon>\r\n            <div class=\"zero-state-banner-texts\">\r\n              <h3 class=\"zero-state-banner-title\">Nenhuma vaga para analisar</h3>\r\n              <p class=\"zero-state-banner-subtitle\">Cadastre uma vaga para come\u00E7ar a acompanhar o desempenho dela aqui.</p>\r\n            </div>\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn-zero-publish\"\r\n            (click)=\"onPublishDuty('An\u00E1lise por Vaga')\"\r\n          >\r\n            Publicar Vaga\r\n          </button>\r\n        </div>\r\n\r\n        <ng-template #basicVacancyZero>\r\n          <div class=\"basic-empty-state basic-empty-state--vacancy\">\r\n            <div class=\"basic-empty-icon-wrap\">\r\n              <careon-dashboard-icon name=\"info\" class=\"basic-empty-icon\"></careon-dashboard-icon>\r\n            </div>\r\n            <h3 class=\"basic-empty-title\">Nenhuma vaga para analisar</h3>\r\n            <p class=\"basic-empty-text\">Nenhuma vaga ativa no momento para an\u00E1lise.</p>\r\n          </div>\r\n        </ng-template>\r\n      </ng-template>\r\n    </section>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region ApplicationsPerVacancySection -->\r\n    <section class=\"applications-per-vacancy-section\">\r\n      <header class=\"applications-section-header\">\r\n        <h2 class=\"applications-section-title\">Candidaturas por Vaga</h2>\r\n        <span class=\"applications-section-subtitle\" *ngIf=\"hasComparisonDuties\">\r\n          {{ comparisonSubtitle }}\r\n        </span>\r\n        <span class=\"applications-section-subtitle\" *ngIf=\"!hasComparisonDuties\">\r\n          {{ isPublishZeroState ? '0 candidaturas no total, nenhuma vaga ativa' : 'Nenhuma vaga ativa no momento' }}\r\n        </span>\r\n      </header>\r\n\r\n      <div class=\"applications-chart-wrapper\" *ngIf=\"hasComparisonDuties; else noComparisonDuties\">\r\n        <careon-comparison-bar-chart\r\n          [data]=\"comparisonItems\"\r\n          [autoBarWidth]=\"false\"\r\n          [barWidth]=\"75\"\r\n          [itemSlotWidth]=\"100\"\r\n          [barColor]=\"'#3B82F6'\"\r\n          [zeroColor]=\"'#EF4444'\"\r\n          [trendLineColor]=\"'#1E293B'\"\r\n          [dotColor]=\"'#1E293B'\"\r\n          [textColor]=\"'#64748B'\"\r\n          (itemSelected)=\"onChartItemSelected($event, 'Candidaturas por Vaga')\"\r\n        ></careon-comparison-bar-chart>\r\n      </div>\r\n\r\n      <ng-template #noComparisonDuties>\r\n        <div class=\"zero-state-banner\" *ngIf=\"isPublishZeroState; else basicComparisonZero\">\r\n          <div class=\"zero-state-banner-left\">\r\n            <careon-dashboard-icon name=\"info\" class=\"zero-info-icon\"></careon-dashboard-icon>\r\n            <div class=\"zero-state-banner-texts\">\r\n              <h3 class=\"zero-state-banner-title\">Nenhuma candidatura registrada</h3>\r\n              <p class=\"zero-state-banner-subtitle\">Sem vagas em aberto, ainda n\u00E3o h\u00E1 candidaturas para mostrar.</p>\r\n            </div>\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn-zero-publish\"\r\n            (click)=\"onPublishDuty('Candidaturas por Vaga')\"\r\n          >\r\n            Publicar Vaga\r\n          </button>\r\n        </div>\r\n\r\n        <ng-template #basicComparisonZero>\r\n          <div class=\"basic-empty-state basic-empty-state--comparison\">\r\n            <div class=\"basic-empty-icon-wrap\">\r\n              <careon-dashboard-icon name=\"info\" class=\"basic-empty-icon\"></careon-dashboard-icon>\r\n            </div>\r\n            <h3 class=\"basic-empty-title\">Nenhuma candidatura registrada</h3>\r\n            <p class=\"basic-empty-text\">Nenhuma vaga ativa no momento para an\u00E1lise.</p>\r\n          </div>\r\n        </ng-template>\r\n      </ng-template>\r\n    </section>\r\n    <!-- #endregion -->\r\n  </main>\r\n  <!-- #endregion -->\r\n</div>\r\n", styles: [":host{display:block;width:100%}.careon-dashboard-container{display:flex;flex-direction:column;gap:24px;width:100%;max-width:1400px;margin:0 auto;padding:16px 24px;box-sizing:border-box;font-family:Montserrat,sans-serif;color:#1b2559}.careon-dashboard-container .dashboard-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-bottom:8px}.careon-dashboard-container .dashboard-header .header-titles .main-title{font-size:26px;font-weight:700;color:#1b2559;margin:0;letter-spacing:-.3px}.careon-dashboard-container .dashboard-header .header-titles .subtitle{font-size:13px;color:#a3aed0;margin:4px 0 0;font-weight:500}.careon-dashboard-container .dashboard-header .period-filter-group{display:inline-flex;align-items:center;background:#ffffff;padding:4px;border-radius:9999px;gap:2px;border:1px solid #eef0f4;box-shadow:0 2px 8px #0000000a}.careon-dashboard-container .dashboard-header .period-filter-group .period-pill{padding:14px 25px;font-family:Montserrat,sans-serif;font-size:13px;font-weight:500;color:#8e9091;background:transparent;border:none;border-radius:9999px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);outline:none}.careon-dashboard-container .dashboard-header .period-filter-group .period-pill:hover{color:#292857}.careon-dashboard-container .dashboard-header .period-filter-group .period-pill.active{background:#292857;color:#fff;font-weight:600;box-shadow:0 2px 8px #29285740}.careon-dashboard-container .dashboard-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px;gap:16px}.careon-dashboard-container .dashboard-loading-state .loading-spinner{width:40px;height:40px;border:3px solid #e2e8f0;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite}.careon-dashboard-container .dashboard-loading-state .loading-text{font-size:14px;font-weight:500;color:#64748b;margin:0}.careon-dashboard-container .dashboard-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px;background:#ffffff;border:1px dashed #cbd5e1;border-radius:12px;text-align:center}.careon-dashboard-container .dashboard-empty-state .empty-title{font-size:16px;font-weight:700;color:#334155;margin:0 0 6px}.careon-dashboard-container .dashboard-empty-state .empty-description{font-size:14px;color:#64748b;margin:0}.careon-dashboard-container .dashboard-content{display:flex;flex-direction:column}.careon-dashboard-container .dashboard-content .zero-state-banner{background-color:#dee9fb;border-radius:12px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;box-sizing:border-box}.careon-dashboard-container .dashboard-content .zero-state-banner .zero-state-banner-left{display:flex;align-items:center;gap:14px}.careon-dashboard-container .dashboard-content .zero-state-banner .zero-state-banner-left .zero-info-icon{color:#5c8bef;width:24px;height:24px;flex-shrink:0}.careon-dashboard-container .dashboard-content .zero-state-banner .zero-state-banner-left .zero-state-banner-texts{display:flex;flex-direction:column;gap:4px}.careon-dashboard-container .dashboard-content .zero-state-banner .zero-state-banner-left .zero-state-banner-texts .zero-state-banner-title{font-size:15px;font-weight:700;color:#1e2445;margin:0;font-family:Montserrat,sans-serif;line-height:1.35}.careon-dashboard-container .dashboard-content .zero-state-banner .zero-state-banner-left .zero-state-banner-texts .zero-state-banner-subtitle{font-size:13px;font-weight:400;color:#718096;margin:0;font-family:Montserrat,sans-serif;line-height:1.4}@media (max-width: 768px){.careon-dashboard-container .dashboard-content .zero-state-banner{flex-direction:column;align-items:stretch}.careon-dashboard-container .dashboard-content .zero-state-banner .btn-zero-publish{width:100%;margin-top:8px}}.careon-dashboard-container .dashboard-content .btn-zero-publish{background-color:#5c8bef;color:#fff;border:none;border-radius:10px;padding:12px 28px;font-size:14px;font-weight:600;font-family:Montserrat,sans-serif;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;transition:background-color .2s ease,transform .1s ease;outline:none}.careon-dashboard-container .dashboard-content .btn-zero-publish:hover{background-color:#4a7de6}.careon-dashboard-container .dashboard-content .btn-zero-publish:active{transform:scale(.98)}.careon-dashboard-container .dashboard-content .btn-zero-publish--full{width:100%;margin-top:auto}.careon-dashboard-container .dashboard-content .kpi-cards-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.75fr);gap:16px;align-items:stretch;width:100%;max-width:100%;box-sizing:border-box}@media (max-width: 1200px){.careon-dashboard-container .dashboard-content .kpi-cards-grid{grid-template-columns:repeat(2,1fr)}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card--status{grid-column:span 2}}@media (max-width: 600px){.careon-dashboard-container .dashboard-content .kpi-cards-grid{grid-template-columns:1fr}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card--status{grid-column:span 1}}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card{background:#ffffff;border-radius:24px;padding:14px 18px;border:none;box-shadow:0 4px 20px #0000000a;display:flex;flex-direction:column;justify-content:space-between;min-height:104px;box-sizing:border-box}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-header{display:flex;justify-content:space-between;align-items:center}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-header .kpi-label{font-size:12px;font-weight:600;color:#a3aed0}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-header .kpi-total-badge{font-size:11px;font-weight:700;color:#1b2559}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-body{display:flex;align-items:center;gap:8px;margin-top:4px}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-body .kpi-value{font-size:24px;font-weight:700;color:#1b2559;line-height:1}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-body .kpi-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:12px;white-space:nowrap}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-body .kpi-badge .kpi-badge-icon{width:10px;height:10px;display:inline-block;flex-shrink:0}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-body .kpi-badge--blue{background:#e0f2fe;color:#0284c7}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-body .kpi-badge--green{background:#dcfce7;color:#16a34a}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-body .kpi-badge--coral{background:#fee2e2;color:#dc2626}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-card-body .kpi-badge--gray{background:#f1f5f9;color:#64748b}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card .kpi-footer{font-size:11px;color:#a3aed0;font-weight:500;margin-top:6px}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card--status{padding:14px 18px;justify-content:center}.careon-dashboard-container .dashboard-content .kpi-cards-grid .kpi-card--status careon-stacked-horizontal-bar{display:block;width:100%}.careon-dashboard-container .dashboard-content .attention-section{margin-top:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;width:100%;box-sizing:border-box}.careon-dashboard-container .dashboard-content .attention-section .attention-card{background:#ffffff;border-radius:24px;padding:24px 28px;border:none;box-shadow:0 4px 20px #0000000a;display:flex;flex-direction:column;width:100%;box-sizing:border-box}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-card-title{font-size:19px;font-weight:700;color:#1b2559;margin:0 0 16px;letter-spacing:-.3px}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-items-list,.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-items-list .attention-item-wrapper{display:flex;flex-direction:column}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-items-list .attention-item-wrapper .attention-item{display:flex;flex-direction:column;gap:4px;padding:14px 0;cursor:pointer;transition:opacity .15s ease}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-items-list .attention-item-wrapper .attention-item:hover{opacity:.82}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-items-list .attention-item-wrapper .attention-item .attention-item-title{font-size:15px;font-weight:600;color:#2b3674;line-height:1.3}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-items-list .attention-item-wrapper .attention-item .attention-item-subtitle{font-size:13px;font-weight:400;color:#8e9091;line-height:1.4}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-items-list .attention-item-wrapper .attention-divider{height:1px;background-color:#f1f5f9;width:100%;margin:0}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-zero-box{background-color:#dee9fb;border-radius:12px;padding:20px;display:flex;flex-direction:column;box-sizing:border-box}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-zero-box .attention-zero-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-zero-box .attention-zero-header .zero-info-icon{color:#5c8bef;width:22px;height:22px;flex-shrink:0;margin-top:1px}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-zero-box .attention-zero-header .attention-zero-texts{display:flex;flex-direction:column;gap:4px}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-zero-box .attention-zero-header .attention-zero-texts .attention-zero-title{font-size:14.5px;font-weight:700;color:#1e2445;margin:0;font-family:Montserrat,sans-serif;line-height:1.35}.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-zero-box .attention-zero-header .attention-zero-texts .attention-zero-subtitle{font-size:13px;font-weight:400;color:#718096;margin:0;font-family:Montserrat,sans-serif;line-height:1.4}.careon-dashboard-container .dashboard-content .attention-section .attention-card .basic-empty-state,.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background-color:#f8fafc;border:1px dashed #cbd5e1;border-radius:16px;box-sizing:border-box;padding:28px 20px;flex:1;margin-bottom:20px;min-height:180px}.careon-dashboard-container .dashboard-content .attention-section .attention-card .basic-empty-state .basic-empty-icon-wrap,.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-empty-state .basic-empty-icon-wrap{width:44px;height:44px;border-radius:50%;background-color:#eff6ff;color:#3b82f6;display:flex;align-items:center;justify-content:center;margin-bottom:12px;flex-shrink:0}.careon-dashboard-container .dashboard-content .attention-section .attention-card .basic-empty-state .basic-empty-icon-wrap .basic-empty-icon,.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-empty-state .basic-empty-icon-wrap .basic-empty-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.careon-dashboard-container .dashboard-content .attention-section .attention-card .basic-empty-state .basic-empty-title,.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-empty-state .basic-empty-title{font-size:15px;font-weight:700;color:#1e293b;margin:0 0 6px;font-family:Montserrat,sans-serif;line-height:1.35}.careon-dashboard-container .dashboard-content .attention-section .attention-card .basic-empty-state .basic-empty-text,.careon-dashboard-container .dashboard-content .attention-section .attention-card .attention-empty-state .basic-empty-text{font-size:13.5px;font-weight:400;color:#64748b;margin:0;font-family:Montserrat,sans-serif;line-height:1.45;max-width:460px}.careon-dashboard-container .dashboard-content .attention-section .attention-card .btn-consultant{width:100%;display:flex;align-items:center;justify-content:center;background-color:#3b82f6;color:#fff;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;border:none;border-radius:9999px;padding:13px 24px;margin-top:auto;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 14px #3b82f64d;outline:none}.careon-dashboard-container .dashboard-content .attention-section .attention-card .btn-consultant:hover{background-color:#2563eb;box-shadow:0 6px 18px #2563eb66;transform:translateY(-1px)}.careon-dashboard-container .dashboard-content .attention-section .attention-card .btn-consultant:active{transform:translateY(0);box-shadow:0 2px 6px #2563eb40}.careon-dashboard-container .dashboard-content .attention-section .performance-card{background:#ffffff;border-radius:24px;padding:24px 28px;border:none;box-shadow:0 4px 20px #0000000a;display:flex;flex-direction:column;width:100%;box-sizing:border-box;position:relative}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-card-header .performance-card-title{font-size:19px;font-weight:700;color:#1b2559;margin:0;letter-spacing:-.3px}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-card-header .performance-info-wrapper{position:relative;display:inline-flex;align-items:center}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-card-header .performance-info-wrapper .btn-info{background:transparent;border:none;padding:4px;cursor:pointer;color:#a3aed0;transition:color .2s ease;display:flex;align-items:center;justify-content:center;outline:none;border-radius:50%}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-card-header .performance-info-wrapper .btn-info:hover{color:#3b82f6}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-card-header .performance-info-wrapper .btn-info .info-icon{width:18px;height:18px}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-card-header .performance-info-wrapper .info-tooltip{position:absolute;top:calc(100% + 8px);right:0;width:290px;background:#f0f7ff;border:1px solid #93c5fd;border-radius:10px;padding:12px 14px;box-shadow:0 6px 20px #3b82f626;z-index:20;box-sizing:border-box;animation:fadeInTooltip .2s ease-out}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-card-header .performance-info-wrapper .info-tooltip .tooltip-arrow{position:absolute;top:-6px;right:8px;width:10px;height:10px;background:#f0f7ff;border-top:1px solid #93c5fd;border-left:1px solid #93c5fd;transform:rotate(45deg)}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-card-header .performance-info-wrapper .info-tooltip .tooltip-text{font-size:12px;line-height:1.45;color:#334155;margin:0;font-weight:500;font-family:Montserrat,sans-serif}.careon-dashboard-container .dashboard-content .attention-section .performance-card careon-performance-wave{display:block;width:100%}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-body{display:flex;flex-direction:column;margin-bottom:16px}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-body .performance-highlight-title{font-size:13.5px;font-weight:700;color:#3b82f6;margin:0 0 6px;line-height:1.35}.careon-dashboard-container .dashboard-content .attention-section .performance-card .performance-body .performance-description{font-size:12.5px;font-weight:400;color:#8e9091;margin:0;line-height:1.45}.careon-dashboard-container .dashboard-content .attention-section .performance-card .btn-consultant{width:100%;display:flex;align-items:center;justify-content:center;background-color:#3b82f6;color:#fff;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;border:none;border-radius:9999px;padding:13px 24px;margin-top:auto;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 14px #3b82f64d;outline:none}.careon-dashboard-container .dashboard-content .attention-section .performance-card .btn-consultant:hover{background-color:#2563eb;box-shadow:0 6px 18px #2563eb66;transform:translateY(-1px)}.careon-dashboard-container .dashboard-content .attention-section .performance-card .btn-consultant:active{transform:translateY(0);box-shadow:0 2px 6px #2563eb40}.careon-dashboard-container .dashboard-content .vacancy-analysis-section{margin-top:32px;display:flex;flex-direction:column;background-color:#fff;border:none;border-radius:24px;padding:28px 32px;box-shadow:0 4px 20px #0000000a;box-sizing:border-box}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:24px}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-section-title-group{display:flex;flex-direction:column;gap:4px}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-section-title-group .vacancy-section-title{font-size:20px;font-weight:700;color:#1e1b4b;margin:0;letter-spacing:-.02em}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-section-title-group .vacancy-section-subtitle{font-size:13px;font-weight:400;color:#94a3b8}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper{display:flex;align-items:center;gap:12px}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-label{font-size:13px;font-weight:500;color:#64748b}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container{position:relative}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-width:180px;padding:9px 18px;background-color:#fff;border:1px solid #e2e8f0;border-radius:9999px;font-family:Montserrat,sans-serif;font-size:13.5px;font-weight:600;color:#1e1b4b;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px #0000000a;outline:none}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-btn:hover{border-color:#cbd5e1;background-color:#f8fafc}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-btn--open{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f626}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-btn .vacancy-dropdown-btn-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-btn .vacancy-dropdown-btn-icon{width:18px;height:18px;color:#64748b;flex-shrink:0;transition:transform .2s ease}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-btn .vacancy-dropdown-btn-icon.rotated{transform:rotate(180deg)}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:100;min-width:320px;max-width:440px;max-height:360px;overflow-y:auto;background:#ffffff;border:1px solid #e2e8f0;border-radius:16px;padding:8px;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000000d}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;cursor:pointer;transition:background-color .15s ease}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item:hover{background-color:#f1f5f9}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item--selected{background-color:#eff6ff}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item--selected .duty-item-title{color:#3b82f6}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item .duty-radio-outer{width:18px;height:18px;border-radius:50%;border:2px solid #3b82f6;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s ease}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item .duty-radio-outer:not(.duty-radio-outer--checked){border-color:#93c5fd}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item .duty-radio-outer--checked{border-color:#3b82f6}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item .duty-radio-outer .duty-radio-inner{width:8px;height:8px;border-radius:50%;background-color:#3b82f6}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item .duty-item-content{display:flex;flex-direction:column;gap:2px;overflow:hidden}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item .duty-item-content .duty-item-title{font-size:13.5px;font-weight:600;color:#1e1b4b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-section-header .vacancy-dropdown-wrapper .vacancy-dropdown-container .vacancy-dropdown-menu .vacancy-dropdown-item .duty-item-content .duty-item-subtitle{font-size:11.5px;font-weight:400;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-timeline-wrapper{width:100%;margin-bottom:24px;overflow:hidden}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-timeline-wrapper ::ng-deep .timeline-baseline{background-color:#f1f5f9}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-bottom-grid{display:grid;grid-template-columns:minmax(230px,26%) 1fr;gap:20px}@media (max-width: 900px){.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-bottom-grid{grid-template-columns:1fr}}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-bottom-grid .vacancy-metric-card{background-color:#f7f7f7;border:none;border-radius:24px;padding:20px 24px;box-shadow:none;display:flex;flex-direction:column;overflow:visible;min-height:164px}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-bottom-grid .vacancy-metric-card--donut{min-height:164px;overflow:visible}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-bottom-grid .vacancy-metric-card--funnel{min-height:164px}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid{display:grid;grid-template-columns:1fr 450px;gap:20px;margin-top:20px}@media (max-width: 992px){.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid{grid-template-columns:1fr}}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card{background-color:#f7f7f7;border:none;border-radius:24px;padding:24px 28px;display:flex;flex-direction:column;justify-content:center;box-shadow:none}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header{display:flex;align-items:center;gap:24px;margin-bottom:16px;flex-wrap:wrap}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-col{display:flex;flex-direction:column;gap:4px}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-col .salary-metric-label{font-size:13px;font-weight:500;color:#71717a;font-family:Montserrat,sans-serif}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-col .salary-metric-value{font-size:26px;font-weight:700;color:#374151;font-family:Montserrat,sans-serif;line-height:1.2}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-col .salary-metric-value--orange{color:#d97706}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-col .salary-metric-value--blue{color:#2563eb}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-col .salary-metric-value--navy{color:#1e1b4b}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-col .salary-metric-value--not-informed{color:#b91c1c;font-weight:700}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-col .salary-metric-value--insufficient{color:#444;font-weight:700}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-col .salary-metric-value--muted{color:#4b5563}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-metric-divider{width:1px;height:38px;background-color:#e5e7eb}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-badge{margin-left:auto;padding:6px 14px;border-radius:9999px;font-size:13px;font-weight:600;font-family:Montserrat,sans-serif;display:inline-flex;align-items:center;white-space:nowrap}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-badge--orange{background-color:#ffedd5;color:#c2410c;border:none}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-badge--blue{background-color:#dbeafd;color:#1d4ed8;border:none}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-header .salary-badge--purple{background-color:#ede9fe;color:#1e1b4b;border:none}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-body{display:flex;flex-direction:column;gap:6px}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-body .salary-highlight-title{font-size:14.5px;font-weight:700;margin:0;font-family:Montserrat,sans-serif;line-height:1.4}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-body .salary-highlight-title.salary-title--orange{color:#d97706}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-body .salary-highlight-title.salary-title--blue{color:#2563eb}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-body .salary-highlight-title.salary-title--purple{color:#1e1b4b}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-body .salary-highlight-title.salary-title--red{color:#b91c1c}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-body .salary-highlight-title.salary-title--default{color:#111827}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-salary-card .salary-card-body .salary-description{font-size:13px;font-weight:400;color:#4b5563;margin:0;line-height:1.55;font-family:Montserrat,sans-serif}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-support-card{background-color:#f7f7f7;border:none;border-radius:24px;padding:24px 28px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:none}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-support-card .support-card-title{font-size:17px;font-weight:700;color:#3b82f6;margin:0 0 10px;font-family:Montserrat,sans-serif;line-height:1.35}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-support-card .support-card-subtitle{font-size:13.5px;font-weight:400;color:#64748b;margin:0 0 20px;line-height:1.5;font-family:Montserrat,sans-serif;flex-grow:1}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-support-card .btn-support-consultant{background-color:#3b82f6;color:#fff;border:none;border-radius:9999px;padding:13px 24px;font-size:14px;font-weight:700;font-family:Montserrat,sans-serif;cursor:pointer;transition:background-color .15s ease,transform .1s ease;width:100%;text-align:center;box-shadow:none;outline:none}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-support-card .btn-support-consultant:hover{background-color:#2563eb}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-salary-support-grid .vacancy-support-card .btn-support-consultant:active{transform:scale(.98)}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .basic-empty-state,.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background-color:#f8fafc;border:1px dashed #cbd5e1;border-radius:16px;box-sizing:border-box;padding:44px 24px;width:100%;min-height:180px}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .basic-empty-state .basic-empty-icon-wrap,.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-empty-state .basic-empty-icon-wrap{width:44px;height:44px;border-radius:50%;background-color:#eff6ff;color:#3b82f6;display:flex;align-items:center;justify-content:center;margin-bottom:12px;flex-shrink:0}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .basic-empty-state .basic-empty-icon-wrap .basic-empty-icon,.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-empty-state .basic-empty-icon-wrap .basic-empty-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .basic-empty-state .basic-empty-title,.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-empty-state .basic-empty-title{font-size:15px;font-weight:700;color:#1e293b;margin:0 0 6px;font-family:Montserrat,sans-serif;line-height:1.35}.careon-dashboard-container .dashboard-content .vacancy-analysis-section .basic-empty-state .basic-empty-text,.careon-dashboard-container .dashboard-content .vacancy-analysis-section .vacancy-empty-state .basic-empty-text{font-size:13.5px;font-weight:400;color:#64748b;margin:0;font-family:Montserrat,sans-serif;line-height:1.45;max-width:460px}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section{margin-top:32px;display:flex;flex-direction:column;background-color:#fff;border:none;border-radius:24px;padding:28px 32px;box-shadow:0 4px 20px #0000000a;box-sizing:border-box}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .applications-section-header{display:flex;flex-direction:column;gap:4px;margin-bottom:24px}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .applications-section-header .applications-section-title{font-size:20px;font-weight:700;color:#1e1b4b;margin:0;letter-spacing:-.02em;font-family:Montserrat,sans-serif}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .applications-section-header .applications-section-subtitle{font-size:13px;font-weight:400;color:#94a3b8;font-family:Montserrat,sans-serif}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .applications-chart-wrapper{width:100%;overflow:hidden}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .basic-empty-state,.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .applications-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background-color:#f8fafc;border:1px dashed #cbd5e1;border-radius:16px;box-sizing:border-box;padding:44px 24px;width:100%;min-height:180px}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .basic-empty-state .basic-empty-icon-wrap,.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .applications-empty-state .basic-empty-icon-wrap{width:44px;height:44px;border-radius:50%;background-color:#eff6ff;color:#3b82f6;display:flex;align-items:center;justify-content:center;margin-bottom:12px;flex-shrink:0}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .basic-empty-state .basic-empty-icon-wrap .basic-empty-icon,.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .applications-empty-state .basic-empty-icon-wrap .basic-empty-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .basic-empty-state .basic-empty-title,.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .applications-empty-state .basic-empty-title{font-size:15px;font-weight:700;color:#1e293b;margin:0 0 6px;font-family:Montserrat,sans-serif;line-height:1.35}.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .basic-empty-state .basic-empty-text,.careon-dashboard-container .dashboard-content .applications-per-vacancy-section .applications-empty-state .basic-empty-text{font-size:13.5px;font-weight:400;color:#64748b;margin:0;font-family:Montserrat,sans-serif;line-height:1.45;max-width:460px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInTooltip{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], currentPeriod: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], consultantPhone: [{
+                type: Input
+            }], consultantMessage: [{
+                type: Input
+            }], zeroStateMode: [{
+                type: Input
+            }], periodChange: [{
+                type: Output
+            }], itemSelected: [{
+                type: Output
+            }], publishDuty: [{
+                type: Output
+            }], dutySelected: [{
+                type: Output
+            }], consultantClick: [{
+                type: Output
+            }], attentionItemSelected: [{
+                type: Output
+            }] } });
+
+class CareonDashboardModule {
+}
+CareonDashboardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CareonDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CareonDashboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: CareonDashboardModule, declarations: [DashboardComponent,
+        PerformanceWaveComponent,
+        DashboardIconComponent,
+        DashboardSkeletonComponent], imports: [CommonModule,
+        CareonChartsModule], exports: [DashboardComponent,
+        PerformanceWaveComponent,
+        DashboardIconComponent,
+        DashboardSkeletonComponent] });
+CareonDashboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CareonDashboardModule, imports: [CommonModule,
+        CareonChartsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CareonDashboardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DashboardComponent,
+                        PerformanceWaveComponent,
+                        DashboardIconComponent,
+                        DashboardSkeletonComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        CareonChartsModule
+                    ],
+                    exports: [
+                        DashboardComponent,
+                        PerformanceWaveComponent,
+                        DashboardIconComponent,
+                        DashboardSkeletonComponent
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of @careonbrasil/dashboard
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CareonDashboardModule, DEFAULT_PERFORMANCE_TEXTS, DashboardComponent, DashboardIconComponent, DashboardPeriod, DashboardSkeletonComponent, DutySalaryStatus, PerformanceLevel, PerformanceWaveComponent, formatKpiBadge };
+//# sourceMappingURL=careonbrasil-dashboard.mjs.map