@inspirer-dev/crm-dashboard 1.0.46 → 1.0.47

package/admin/src/hooks/useInjectStyles.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+export const useInjectStyles = (id: string, css: string) => {
+  useEffect(() => {
+    let style = document.getElementById(id) as HTMLStyleElement | null;
+    if (!style) {
+      style = document.createElement('style');
+      style.id = id;
+      style.textContent = css;
+      document.head.appendChild(style);
+    }
+    return () => {
+      // Don't remove on unmount to avoid flickering on re-renders
+    };
+  }, [id, css]);
+};

package/admin/src/pages/HomePage/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useState, useMemo } from 'react';
+import React, { memo, useState, useMemo, useEffect } from 'react';
 import { Main, Box } from '@strapi/design-system';
 import { GridFour, Clock, Cross } from '@strapi/icons';
 import { useTheme } from 'styled-components';
@@ -7,7 +7,10 @@ import { useDashboardStats } from '../../hooks/api';
 import LogsTable from './components/LogsTable';
 import AntiSpamLogsTable from './components/AntiSpamLogsTable';
 import StatsView from './components/StatsView';
-import './HomePage.css';
+// @ts-expect-error - Vite raw import
+import homePageStyles from './HomePage.css?inline';
+// @ts-expect-error - Vite raw import
+import filterBarStyles from '../../components/Filters/FilterBar.css?inline';
 
 interface StrapiTheme {
   colors?: {
@@ -130,7 +133,20 @@ const DashboardContent: React.FC = () => {
   );
 };
 
+const useInjectStyles = (id: string, css: string) => {
+  useEffect(() => {
+    if (document.getElementById(id)) return;
+    const style = document.createElement('style');
+    style.id = id;
+    style.textContent = css;
+    document.head.appendChild(style);
+  }, [id, css]);
+};
+
 const HomePage: React.FC = () => {
+  useInjectStyles('crm-dashboard-styles', homePageStyles);
+  useInjectStyles('crm-filterbar-styles', filterBarStyles);
+
   return (
     <QueryProvider>
       <Main>

package/dist/_chunks/{index-B1_Gswul.js → index-CTVmzNXn.js}

@@ -3036,6 +3036,8 @@ const StatsView = () => {
   ] });
 };
 const StatsView$1 = React.memo(StatsView);
+const homePageStyles = ".dashboard-container {\n  --crm-bg-primary: #ffffff;\n  --crm-bg-secondary: #f6f6f9;\n  --crm-bg-tertiary: #eaeaef;\n  --crm-text-primary: #32324d;\n  --crm-text-secondary: #666687;\n  --crm-text-muted: #8e8ea9;\n  --crm-border: #dcdce4;\n  --crm-border-light: #eaeaef;\n  --crm-shadow: rgba(0, 0, 0, 0.08);\n  --crm-shadow-strong: rgba(0, 0, 0, 0.12);\n  --crm-accent: #4945ff;\n  --crm-accent-light: #d9d8ff;\n  --crm-success: #059669;\n  --crm-success-light: #d1fae5;\n  --crm-warning: #d97706;\n  --crm-warning-light: #fef3c7;\n  --crm-danger: #dc2626;\n  --crm-danger-light: #fee2e2;\n  --crm-header-gradient: linear-gradient(135deg, #4945ff 0%, #7b79ff 100%);\n  --crm-chart-grid: #e0e0e0;\n  --crm-chart-text: #666687;\n  --crm-table-header-bg: #f6f6f9;\n  --crm-table-row-hover: #f0f0ff;\n  --crm-table-row-stripe: #fafafc;\n  --tab-icon-stats-gradient: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);\n  --tab-icon-logs-gradient: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);\n  --tab-icon-antispam-gradient: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n\n  min-height: 100vh;\n  background: var(--crm-bg-secondary);\n}\n\n.dashboard-container.theme-dark {\n  --crm-bg-primary: #212134;\n  --crm-bg-secondary: #181826;\n  --crm-bg-tertiary: #2a2a42;\n  --crm-text-primary: #ffffff;\n  --crm-text-secondary: #a5a5ba;\n  --crm-text-muted: #7b7b98;\n  --crm-border: #3d3d5c;\n  --crm-border-light: #2a2a42;\n  --crm-shadow: rgba(0, 0, 0, 0.3);\n  --crm-shadow-strong: rgba(0, 0, 0, 0.4);\n  --crm-accent: #a5a3ff;\n  --crm-accent-light: rgba(123, 121, 255, 0.2);\n  --crm-success: #34d399;\n  --crm-success-light: rgba(16, 185, 129, 0.2);\n  --crm-warning: #fbbf24;\n  --crm-warning-light: rgba(245, 158, 11, 0.2);\n  --crm-danger: #f87171;\n  --crm-danger-light: rgba(239, 68, 68, 0.2);\n  --crm-header-gradient: linear-gradient(135deg, #2a2a5c 0%, #3d3d80 100%);\n  --crm-chart-grid: #3d3d5c;\n  --crm-chart-text: #a5a5ba;\n  --crm-table-header-bg: #2a2a42;\n  --crm-table-row-hover: #2a2a50;\n  --crm-table-row-stripe: #1e1e32;\n  --tab-icon-stats-gradient: linear-gradient(135deg, rgba(123, 121, 255, 0.2) 0%, rgba(99, 102, 241, 0.3) 100%);\n  --tab-icon-logs-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.3) 100%);\n  --tab-icon-antispam-gradient: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.3) 100%);\n}\n\n.dashboard-header {\n  background: var(--crm-header-gradient);\n  padding: 24px 32px;\n  border-radius: 0 0 16px 16px;\n  margin-bottom: 24px;\n  box-shadow: 0 4px 24px var(--crm-shadow-strong);\n}\n\n.dashboard-header h1 {\n  color: white;\n  font-size: 28px;\n  font-weight: 700;\n  margin: 0 0 4px 0;\n}\n\n.dashboard-header p {\n  color: rgba(255, 255, 255, 0.85);\n  font-size: 14px;\n  margin: 0;\n}\n\n.tab-navigation {\n  display: flex;\n  gap: 12px;\n  padding: 0 24px;\n  margin-bottom: 16px;\n}\n\n.tab-card {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 18px 20px;\n  background: var(--crm-bg-primary);\n  border: 2px solid transparent;\n  border-radius: 12px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: 0 2px 8px var(--crm-shadow);\n  position: relative;\n  overflow: hidden;\n}\n\n.tab-card::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 4px;\n  background: transparent;\n  transition: background 0.2s ease;\n}\n\n.tab-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 24px var(--crm-shadow-strong);\n}\n\n.tab-card.active {\n  border-color: var(--tab-color, var(--crm-accent));\n  box-shadow: 0 4px 16px var(--crm-shadow-strong);\n}\n\n.tab-card.active::before {\n  background: var(--tab-color, var(--crm-accent));\n}\n\n.tab-icon {\n  width: 44px;\n  height: 44px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: transform 0.2s ease;\n}\n\n.tab-card:hover .tab-icon {\n  transform: scale(1.05);\n}\n\n.tab-icon.stats {\n  background: var(--tab-icon-stats-gradient);\n  color: var(--crm-accent);\n}\n\n.tab-icon.logs {\n  background: var(--tab-icon-logs-gradient);\n  color: var(--crm-success);\n}\n\n.tab-icon.antispam {\n  background: var(--tab-icon-antispam-gradient);\n  color: var(--crm-warning);\n}\n\n.tab-content-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  flex: 1;\n  min-width: 0;\n}\n\n.tab-label {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--crm-text-primary);\n  margin: 0;\n}\n\n.tab-description {\n  font-size: 12px;\n  color: var(--crm-text-muted);\n  margin: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tab-badge {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 28px;\n  height: 28px;\n  padding: 0 10px;\n  border-radius: 14px;\n  font-size: 13px;\n  font-weight: 600;\n  flex-shrink: 0;\n  transition: all 0.2s ease;\n}\n\n.tab-badge.stats {\n  background: var(--crm-accent-light);\n  color: var(--crm-accent);\n}\n\n.tab-badge.logs {\n  background: var(--crm-success-light);\n  color: var(--crm-success);\n}\n\n.tab-badge.antispam {\n  background: var(--crm-warning-light);\n  color: var(--crm-warning);\n}\n\n.tab-card.active .tab-badge.stats {\n  background: var(--crm-accent);\n  color: white;\n}\n\n.tab-card.active .tab-badge.logs {\n  background: var(--crm-success);\n  color: white;\n}\n\n.tab-card.active .tab-badge.antispam {\n  background: var(--crm-warning);\n  color: white;\n}\n\n.tab-content {\n  margin: 0 24px;\n  padding: 24px;\n  background: var(--crm-bg-primary);\n  border-radius: 16px;\n  box-shadow: 0 4px 16px var(--crm-shadow);\n}\n\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 64px;\n  gap: 16px;\n  color: var(--crm-text-muted);\n}\n\n.loading-spinner {\n  width: 40px;\n  height: 40px;\n  border: 3px solid var(--crm-border);\n  border-top-color: var(--crm-accent);\n  border-radius: 50%;\n  animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Stats Cards */\n.stats-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 16px;\n  margin-bottom: 24px;\n}\n\n.stat-card {\n  background: var(--crm-bg-primary);\n  border-radius: 12px;\n  padding: 20px;\n  border: 1px solid var(--crm-border-light);\n  box-shadow: 0 2px 8px var(--crm-shadow);\n  transition: all 0.2s ease;\n}\n\n.stat-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px var(--crm-shadow-strong);\n}\n\n.stat-card-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 12px;\n}\n\n.stat-card-icon {\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.stat-card-icon.primary {\n  background: var(--crm-accent-light);\n  color: var(--crm-accent);\n}\n\n.stat-card-icon.success {\n  background: var(--crm-success-light);\n  color: var(--crm-success);\n}\n\n.stat-card-icon.warning {\n  background: var(--crm-warning-light);\n  color: var(--crm-warning);\n}\n\n.stat-card-icon.danger {\n  background: var(--crm-danger-light);\n  color: var(--crm-danger);\n}\n\n.stat-card-value {\n  font-size: 28px;\n  font-weight: 700;\n  color: var(--crm-text-primary);\n  line-height: 1.2;\n}\n\n.stat-card-label {\n  font-size: 13px;\n  color: var(--crm-text-muted);\n  margin-top: 4px;\n}\n\n.stat-card-trend {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 12px;\n  margin-top: 8px;\n}\n\n.stat-card-trend.up {\n  background: var(--crm-success-light);\n  color: var(--crm-success);\n}\n\n.stat-card-trend.down {\n  background: var(--crm-danger-light);\n  color: var(--crm-danger);\n}\n\n.stat-card-trend.neutral {\n  background: var(--crm-bg-tertiary);\n  color: var(--crm-text-muted);\n}\n\n.export-dropdown {\n  position: relative;\n  display: inline-block;\n}\n\n.export-dropdown-menu {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n  background: var(--crm-bg-primary);\n  border: 1px solid var(--crm-border);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px var(--crm-shadow-strong);\n  min-width: 140px;\n  z-index: 100;\n  overflow: hidden;\n}\n\n.export-dropdown-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  padding: 10px 14px;\n  border: none;\n  background: none;\n  font-size: 13px;\n  color: var(--crm-text-primary);\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.export-dropdown-item:hover {\n  background: var(--crm-bg-tertiary);\n}\n\n.export-dropdown-item svg {\n  width: 16px;\n  height: 16px;\n  color: var(--crm-text-muted);\n}\n\n.granularity-select {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.granularity-select label {\n  font-size: 12px;\n  color: var(--crm-text-muted);\n  white-space: nowrap;\n}\n\n.granularity-pills {\n  display: flex;\n  gap: 2px;\n  background: var(--crm-bg-tertiary);\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.granularity-pill {\n  padding: 4px 10px;\n  font-size: 11px;\n  font-weight: 600;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  background: transparent;\n  color: var(--crm-text-muted);\n}\n\n.granularity-pill.active {\n  background: var(--crm-accent);\n  color: white;\n}\n\n.granularity-pill:hover:not(.active) {\n  background: var(--crm-bg-secondary);\n  color: var(--crm-text-primary);\n}\n\n.compare-toggle {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: var(--crm-text-secondary);\n  cursor: pointer;\n}\n\n.compare-toggle input {\n  width: 16px;\n  height: 16px;\n  accent-color: var(--crm-accent);\n}\n\n.compare-toggle:hover {\n  color: var(--crm-text-primary);\n}\n\n.metrics-toggle {\n  display: flex;\n  gap: 12px;\n  margin-top: 12px;\n  padding-top: 12px;\n  border-top: 1px solid var(--crm-border-light);\n}\n\n.metrics-toggle label {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--crm-text-secondary);\n  cursor: pointer;\n}\n\n.metrics-toggle input {\n  width: 14px;\n  height: 14px;\n}\n\n.metrics-toggle label:hover {\n  color: var(--crm-text-primary);\n}\n\n/* Chart Container */\n.chart-container {\n  background: var(--crm-bg-primary);\n  border-radius: 12px;\n  padding: 24px;\n  border: 1px solid var(--crm-border-light);\n  box-shadow: 0 2px 8px var(--crm-shadow);\n}\n\n.chart-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 20px;\n}\n\n.chart-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--crm-text-primary);\n}\n\n.chart-subtitle {\n  font-size: 13px;\n  color: var(--crm-text-muted);\n  margin-top: 2px;\n}\n\n/* Table Styles */\n.crm-table-wrapper {\n  background: var(--crm-bg-primary);\n  border-radius: 12px;\n  border: 1px solid var(--crm-border-light);\n  box-shadow: 0 2px 8px var(--crm-shadow);\n  overflow: hidden;\n}\n\n.crm-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.crm-table thead {\n  background: var(--crm-table-header-bg);\n}\n\n.crm-table th {\n  padding: 14px 16px;\n  text-align: left;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--crm-text-secondary);\n  border-bottom: 1px solid var(--crm-border);\n}\n\n.crm-table td {\n  padding: 14px 16px;\n  font-size: 14px;\n  color: var(--crm-text-primary);\n  border-bottom: 1px solid var(--crm-border-light);\n}\n\n.crm-table tbody tr {\n  transition: background-color 0.15s ease;\n}\n\n.crm-table tbody tr:hover {\n  background: var(--crm-table-row-hover);\n}\n\n.crm-table tbody tr:nth-child(even) {\n  background: var(--crm-table-row-stripe);\n}\n\n.crm-table tbody tr:nth-child(even):hover {\n  background: var(--crm-table-row-hover);\n}\n\n.crm-table tbody tr:last-child td {\n  border-bottom: none;\n}\n\n/* Status Badge */\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.status-badge::before {\n  content: '';\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n}\n\n.status-badge.sent {\n  background: var(--crm-success-light);\n  color: var(--crm-success);\n}\n\n.status-badge.sent::before {\n  background: var(--crm-success);\n}\n\n.status-badge.planned {\n  background: var(--crm-warning-light);\n  color: var(--crm-warning);\n}\n\n.status-badge.planned::before {\n  background: var(--crm-warning);\n}\n\n.status-badge.failed {\n  background: var(--crm-danger-light);\n  color: var(--crm-danger);\n}\n\n.status-badge.failed::before {\n  background: var(--crm-danger);\n}\n\n.status-badge.cancelled {\n  background: var(--crm-bg-tertiary);\n  color: var(--crm-text-muted);\n}\n\n.status-badge.cancelled::before {\n  background: var(--crm-text-muted);\n}\n\n.status-badge.warning {\n  background: var(--crm-warning-light);\n  color: var(--crm-warning);\n}\n\n.status-badge.warning::before {\n  background: var(--crm-warning);\n}\n\n/* Pagination */\n.pagination {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 0;\n}\n\n.pagination-info {\n  font-size: 13px;\n  color: var(--crm-text-muted);\n}\n\n.pagination-controls {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.pagination-btn {\n  padding: 8px 16px;\n  border-radius: 8px;\n  font-size: 13px;\n  font-weight: 500;\n  background: var(--crm-bg-primary);\n  border: 1px solid var(--crm-border);\n  color: var(--crm-text-primary);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.pagination-btn:hover:not(:disabled) {\n  background: var(--crm-accent-light);\n  border-color: var(--crm-accent);\n  color: var(--crm-accent);\n}\n\n.pagination-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.pagination-current {\n  padding: 8px 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--crm-text-primary);\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 48px 24px;\n  text-align: center;\n}\n\n.empty-state-icon {\n  width: 64px;\n  height: 64px;\n  border-radius: 16px;\n  background: var(--crm-bg-tertiary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 16px;\n  color: var(--crm-text-muted);\n}\n\n.empty-state-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--crm-text-primary);\n  margin-bottom: 4px;\n}\n\n.empty-state-description {\n  font-size: 14px;\n  color: var(--crm-text-muted);\n}\n\n/* Section Header in table wrapper */\n.crm-table-wrapper .section-header,\n.crm-table-wrapper > div:first-child {\n  padding: 16px 20px;\n}\n\n/* Funnel grid responsive */\n.funnel-grid {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 12px;\n}\n\n@media (max-width: 1200px) {\n  .stats-grid {\n    grid-template-columns: repeat(3, 1fr) !important;\n  }\n\n  .funnel-grid {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\n@media (max-width: 1024px) {\n  .tab-navigation {\n    flex-direction: column;\n    gap: 8px;\n    padding: 0 16px;\n  }\n\n  .tab-card {\n    padding: 14px 16px;\n  }\n\n  .tab-description {\n    display: none;\n  }\n\n  .tab-content {\n    margin: 0 16px;\n    border-radius: 12px;\n  }\n\n  .stats-grid {\n    grid-template-columns: repeat(2, 1fr) !important;\n  }\n\n  .funnel-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .chart-container {\n    padding: 16px;\n  }\n}\n\n@media (max-width: 768px) {\n  .stats-grid {\n    grid-template-columns: repeat(2, 1fr) !important;\n  }\n\n  .crm-table th,\n  .crm-table td {\n    padding: 10px 12px;\n    font-size: 13px;\n  }\n}\n\n@media (max-width: 640px) {\n  .dashboard-header {\n    padding: 20px;\n    border-radius: 0 0 12px 12px;\n  }\n\n  .dashboard-header h1 {\n    font-size: 22px;\n  }\n\n  .tab-icon {\n    width: 36px;\n    height: 36px;\n  }\n\n  .tab-label {\n    font-size: 14px;\n  }\n\n  .stats-grid {\n    grid-template-columns: 1fr !important;\n  }\n\n  .funnel-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .stat-card-value {\n    font-size: 24px;\n  }\n\n  .chart-container {\n    padding: 12px;\n  }\n}\n\n/* Today Widget */\n.today-widget {\n  background: var(--crm-bg-primary);\n  border-radius: 12px;\n  padding: 20px;\n  border: 1px solid var(--crm-border-light);\n  box-shadow: 0 4px 16px var(--crm-shadow);\n}\n\n.today-widget.loading {\n  min-height: 160px;\n  display: flex;\n  flex-direction: column;\n}\n\n.today-widget-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n}\n\n.today-widget-title {\n  font-size: 13px;\n  font-weight: 700;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n  color: var(--crm-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.live-dot {\n  width: 8px;\n  height: 8px;\n  background: var(--crm-success);\n  border-radius: 50%;\n  animation: pulse 2s ease-in-out infinite;\n  box-shadow: 0 0 8px var(--crm-success);\n}\n\n@keyframes pulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.7; transform: scale(1.2); }\n}\n\n.today-widget-comparison {\n  font-size: 11px;\n  color: var(--crm-text-muted);\n  background: var(--crm-bg-tertiary);\n  padding: 4px 10px;\n  border-radius: 12px;\n}\n\n.today-widget-metrics {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 10px;\n  margin-bottom: 16px;\n}\n\n.today-metric {\n  text-align: center;\n  padding: 12px 8px;\n  background: var(--crm-bg-secondary);\n  border-radius: 10px;\n  border: 1px solid var(--crm-border-light);\n  transition: border-color 0.2s ease, background-color 0.2s ease;\n}\n\n.today-metric:hover {\n  border-color: var(--crm-border);\n  background: var(--crm-bg-tertiary);\n}\n\n.today-metric-value {\n  font-size: 22px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: var(--crm-text-primary);\n}\n\n.today-metric-label {\n  font-size: 11px;\n  color: var(--crm-text-muted);\n  margin-top: 4px;\n  font-weight: 500;\n}\n\n.trend-indicator {\n  display: inline-flex;\n  align-items: center;\n  font-size: 11px;\n  font-weight: 600;\n  margin-top: 6px;\n  padding: 3px 8px;\n  border-radius: 10px;\n}\n\n.trend-indicator.up {\n  background: var(--crm-success-light);\n  color: var(--crm-success);\n}\n\n.trend-indicator.down {\n  background: var(--crm-danger-light);\n  color: var(--crm-danger);\n}\n\n.trend-neutral {\n  display: inline-flex;\n  font-size: 11px;\n  font-weight: 600;\n  margin-top: 6px;\n  padding: 3px 8px;\n  border-radius: 10px;\n  background: var(--crm-bg-tertiary);\n  color: var(--crm-text-muted);\n}\n\n.today-widget-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 12px;\n  border-top: 1px solid var(--crm-border-light);\n  font-size: 12px;\n}\n\n.today-rates {\n  display: flex;\n  gap: 16px;\n}\n\n.today-rates span {\n  color: var(--crm-text-muted);\n  font-weight: 500;\n}\n\n.today-rates span strong {\n  color: var(--crm-text-primary);\n  font-weight: 700;\n}\n\n.today-updated {\n  color: var(--crm-text-muted);\n  font-size: 11px;\n}\n\n.today-widget-loading {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  color: var(--crm-text-muted);\n}\n\n/* Cohort Heat Map */\n.cohort-heatmap {\n  background: var(--crm-bg-primary);\n  border-radius: 12px;\n  padding: 24px;\n  border: 1px solid var(--crm-border-light);\n}\n\n.cohort-table-wrapper {\n  overflow-x: auto;\n  margin: 16px 0;\n}\n\n.cohort-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 12px;\n}\n\n.cohort-header-cell {\n  padding: 10px 8px;\n  text-align: center;\n  font-weight: 600;\n  color: var(--crm-text-secondary);\n  background: var(--crm-bg-secondary);\n  border-bottom: 1px solid var(--crm-border);\n}\n\n.cohort-period-header {\n  min-width: 60px;\n}\n\n.cohort-date-cell {\n  padding: 10px 12px;\n  font-weight: 600;\n  color: var(--crm-text-primary);\n  background: var(--crm-bg-secondary);\n  white-space: nowrap;\n}\n\n.cohort-users-cell {\n  padding: 10px 12px;\n  text-align: right;\n  color: var(--crm-text-secondary);\n  background: var(--crm-bg-secondary);\n}\n\n.cohort-cell {\n  padding: 10px 8px;\n  text-align: center;\n  font-weight: 600;\n  font-size: 11px;\n  transition: all 0.15s ease;\n  cursor: default;\n}\n\n.cohort-cell:hover {\n  filter: brightness(1.1);\n  z-index: 1;\n  position: relative;\n}\n\n.cohort-legend {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  font-size: 11px;\n  color: var(--crm-text-muted);\n  margin-top: 12px;\n}\n\n.cohort-legend-gradient {\n  width: 120px;\n  height: 8px;\n  border-radius: 4px;\n  background: linear-gradient(90deg, rgba(239, 68, 68, 0.6) 0%, rgba(245, 158, 11, 0.6) 50%, rgba(16, 185, 129, 0.8) 100%);\n}\n\n.cohort-loading {\n  text-align: center;\n  padding: 32px;\n  color: var(--crm-text-muted);\n}\n\n/* A/B Tests */\n.ab-tests-section {\n  background: var(--crm-bg-primary);\n  border-radius: 12px;\n  padding: 24px;\n  border: 1px solid var(--crm-border-light);\n}\n\n.ab-tests-list {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.ab-test-card {\n  background: var(--crm-bg-secondary);\n  border-radius: 10px;\n  padding: 20px;\n  border: 1px solid var(--crm-border-light);\n}\n\n.ab-test-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n}\n\n.ab-test-name {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--crm-text-primary);\n}\n\n.ab-test-status {\n  font-size: 12px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.ab-test-variants {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  gap: 16px;\n  align-items: center;\n}\n\n.ab-variant {\n  background: var(--crm-bg-primary);\n  border-radius: 8px;\n  padding: 16px;\n  border: 2px solid transparent;\n  transition: all 0.2s ease;\n}\n\n.ab-variant.winner {\n  border-color: var(--crm-success);\n  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);\n}\n\n.ab-variant-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.ab-variant-name {\n  font-weight: 600;\n  color: var(--crm-text-primary);\n}\n\n.ab-variant-tag {\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n  text-transform: uppercase;\n}\n\n.ab-variant-tag.control {\n  background: var(--crm-bg-tertiary);\n  color: var(--crm-text-muted);\n}\n\n.ab-variant-tag.treatment {\n  background: var(--crm-accent-light);\n  color: var(--crm-accent);\n}\n\n.ab-variant-stats {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 12px;\n}\n\n.ab-stat {\n  text-align: center;\n}\n\n.ab-stat-value {\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--crm-text-primary);\n}\n\n.ab-stat-label {\n  font-size: 10px;\n  color: var(--crm-text-muted);\n  margin-top: 2px;\n}\n\n.ab-vs {\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--crm-text-muted);\n  text-align: center;\n}\n\n.ab-test-analysis {\n  display: flex;\n  gap: 24px;\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid var(--crm-border-light);\n}\n\n.ab-analysis-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n}\n\n.ab-analysis-label {\n  color: var(--crm-text-muted);\n}\n\n.ab-analysis-value {\n  font-weight: 600;\n  color: var(--crm-text-primary);\n}\n\n.ab-analysis-value.positive {\n  color: var(--crm-success);\n}\n\n.ab-analysis-value.negative {\n  color: var(--crm-danger);\n}\n\n.ab-analysis-value.confidence-high {\n  color: var(--crm-success);\n}\n\n.ab-analysis-value.confidence-medium {\n  color: var(--crm-success);\n}\n\n.ab-analysis-value.confidence-low {\n  color: var(--crm-warning);\n}\n\n.ab-tests-loading {\n  text-align: center;\n  padding: 32px;\n  color: var(--crm-text-muted);\n}\n\n/* Send Time Heat Map */\n.sendtime-heatmap {\n  background: var(--crm-bg-primary);\n  border-radius: 12px;\n  padding: 24px;\n  border: 1px solid var(--crm-border-light);\n}\n\n.sendtime-best {\n  text-align: right;\n}\n\n.sendtime-best-label {\n  font-size: 11px;\n  color: var(--crm-text-muted);\n}\n\n.sendtime-best-value {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--crm-success);\n}\n\n.sendtime-best-rate {\n  font-size: 12px;\n  color: var(--crm-success);\n}\n\n.sendtime-grid-wrapper {\n  overflow-x: auto;\n  margin: 16px 0;\n}\n\n.sendtime-grid {\n  display: grid;\n  grid-template-columns: 60px repeat(7, 1fr);\n  gap: 2px;\n  min-width: 400px;\n}\n\n.sendtime-corner {\n  background: transparent;\n}\n\n.sendtime-day-header {\n  text-align: center;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--crm-text-secondary);\n  padding: 8px 4px;\n}\n\n.sendtime-hour-label {\n  font-size: 10px;\n  color: var(--crm-text-muted);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding-right: 8px;\n}\n\n.sendtime-cell {\n  aspect-ratio: 1;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: default;\n  transition: all 0.15s ease;\n  min-height: 32px;\n}\n\n.sendtime-cell:hover {\n  filter: brightness(1.15);\n  z-index: 1;\n}\n\n.sendtime-cell.best {\n  box-shadow: 0 0 0 2px var(--crm-success);\n}\n\n.sendtime-cell-value {\n  font-size: 9px;\n  font-weight: 600;\n  color: inherit;\n}\n\n.sendtime-legend {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  font-size: 11px;\n  color: var(--crm-text-muted);\n  margin-top: 12px;\n}\n\n.sendtime-legend-gradient {\n  width: 120px;\n  height: 8px;\n  border-radius: 4px;\n  background: linear-gradient(90deg, rgba(239, 68, 68, 0.6) 0%, rgba(245, 158, 11, 0.6) 50%, rgba(16, 185, 129, 0.8) 100%);\n}\n\n.sendtime-loading {\n  text-align: center;\n  padding: 32px;\n  color: var(--crm-text-muted);\n}\n\n/* Segment Table */\n.segment-table-section {\n  background: var(--crm-bg-primary);\n  border-radius: 12px;\n  padding: 24px;\n  border: 1px solid var(--crm-border-light);\n}\n\n.segment-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 16px;\n}\n\n.segment-card {\n  background: var(--crm-bg-secondary);\n  border-radius: 10px;\n  padding: 16px;\n  border-left: 4px solid var(--crm-text-muted);\n  transition: all 0.2s ease;\n}\n\n.segment-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px var(--crm-shadow);\n}\n\n.segment-card-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.segment-icon {\n  font-size: 18px;\n}\n\n.segment-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--crm-text-primary);\n  flex: 1;\n}\n\n.segment-users {\n  font-size: 12px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.segment-metrics {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.segment-metric {\n  text-align: center;\n}\n\n.segment-metric-value {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--crm-text-primary);\n}\n\n.segment-metric-label {\n  font-size: 10px;\n  color: var(--crm-text-muted);\n}\n\n.segment-bar-wrapper {\n  height: 4px;\n  background: var(--crm-bg-tertiary);\n  border-radius: 2px;\n  overflow: hidden;\n}\n\n.segment-bar {\n  height: 100%;\n  border-radius: 2px;\n  transition: width 0.3s ease;\n}\n\n.segment-loading {\n  text-align: center;\n  padding: 32px;\n  color: var(--crm-text-muted);\n}\n\n/* Goal Tracker */\n.goal-tracker {\n  background: var(--crm-bg-primary);\n  border-radius: 12px;\n  padding: 20px;\n  border: 1px solid var(--crm-border-light);\n}\n\n.goal-tracker-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n}\n\n.goal-edit-btn {\n  background: transparent;\n  border: none;\n  font-size: 16px;\n  cursor: pointer;\n  padding: 4px 8px;\n  border-radius: 6px;\n  transition: background 0.15s ease;\n}\n\n.goal-edit-btn:hover {\n  background: var(--crm-bg-tertiary);\n}\n\n.goal-items {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.goal-item {\n  padding: 12px;\n  background: var(--crm-bg-secondary);\n  border-radius: 8px;\n}\n\n.goal-item-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n\n.goal-icon {\n  font-size: 16px;\n}\n\n.goal-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--crm-text-primary);\n  flex: 1;\n}\n\n.goal-progress-badge {\n  font-size: 11px;\n  font-weight: 700;\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.goal-bar-wrapper {\n  height: 6px;\n  background: var(--crm-bg-tertiary);\n  border-radius: 3px;\n  overflow: hidden;\n  margin-bottom: 8px;\n}\n\n.goal-bar {\n  height: 100%;\n  border-radius: 3px;\n  transition: width 0.3s ease;\n}\n\n.goal-values {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n}\n\n.goal-current {\n  font-weight: 600;\n  color: var(--crm-text-primary);\n}\n\n.goal-separator {\n  color: var(--crm-text-muted);\n}\n\n.goal-target {\n  color: var(--crm-text-secondary);\n}\n\n.goal-target-input {\n  width: 80px;\n  padding: 2px 6px;\n  border: 1px solid var(--crm-border);\n  border-radius: 4px;\n  font-size: 12px;\n  background: var(--crm-bg-primary);\n  color: var(--crm-text-primary);\n}\n\n.goal-target-input:focus {\n  outline: none;\n  border-color: var(--crm-accent);\n}\n\n/* Enhanced Stats Layout */\n.stats-header-row {\n  display: grid;\n  grid-template-columns: 320px 1fr;\n  gap: 16px;\n  margin-bottom: 24px;\n}\n\n@media (max-width: 1024px) {\n  .stats-header-row {\n    grid-template-columns: 1fr;\n  }\n\n  .ab-test-variants {\n    grid-template-columns: 1fr;\n  }\n\n  .ab-vs {\n    padding: 8px 0;\n  }\n\n  .ab-test-analysis {\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n}\n\n@media (max-width: 768px) {\n  .segment-metrics {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n";
+const filterBarStyles = "/* Filter Bar Container */\n.filter-bar {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  transition: box-shadow 0.2s ease, transform 0.2s ease;\n  border-radius: 12px;\n}\n\n.filter-bar.scrolled {\n  box-shadow: 0 4px 20px var(--crm-shadow-strong, rgba(0, 0, 0, 0.12));\n}\n\n/* Date Presets Button Group */\n.date-presets-group {\n  display: inline-flex;\n  gap: 0;\n  background: var(--crm-bg-tertiary, #eaeaef);\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.date-preset-btn {\n  padding: 6px 10px;\n  font-size: 12px;\n  font-weight: 500;\n  border-radius: 6px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  color: var(--crm-text-secondary, #666687);\n  white-space: nowrap;\n}\n\n.date-preset-btn:hover {\n  background: var(--crm-bg-primary, #ffffff);\n  color: var(--crm-text-primary, #32324d);\n}\n\n.date-preset-btn.active {\n  background: var(--crm-accent, #4945ff);\n  color: white;\n  box-shadow: 0 2px 4px rgba(73, 69, 255, 0.25);\n}\n\n/* Active Filters */\n.active-filters {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.active-filters-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--crm-text-muted, #8e8ea9);\n}\n\n.active-filters-chips {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n/* Filter Chips */\n.filter-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 10px;\n  background: var(--crm-accent-light, #d9d8ff);\n  border: 1px solid transparent;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  font-family: inherit;\n}\n\n.filter-chip:hover {\n  background: var(--crm-accent, #4945ff);\n  transform: translateY(-1px);\n}\n\n.filter-chip:hover .filter-chip-label,\n.filter-chip:hover .filter-chip-value {\n  color: white;\n}\n\n.filter-chip:hover .filter-chip-remove {\n  opacity: 1;\n  color: white;\n}\n\n.filter-chip-label {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  color: var(--crm-accent, #4945ff);\n  transition: color 0.15s ease;\n}\n\n.filter-chip-value {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--crm-text-primary, #32324d);\n  max-width: 150px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  transition: color 0.15s ease;\n}\n\n.filter-chip-remove {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.1);\n  opacity: 0.6;\n  transition: all 0.15s ease;\n  color: var(--crm-text-primary, #32324d);\n}\n\n.filter-chip:hover .filter-chip-remove {\n  background: rgba(255, 255, 255, 0.2);\n}\n\n/* Clear All Button */\n.filter-chip.filter-chip-clear {\n  background: var(--crm-bg-tertiary, #eaeaef);\n  color: var(--crm-text-secondary, #666687);\n  font-size: 12px;\n  font-weight: 500;\n  padding: 6px 12px;\n}\n\n.filter-chip.filter-chip-clear:hover {\n  background: var(--crm-danger, #dc2626);\n  color: white;\n}\n\n/* Filter Section Styling */\n.filter-section {\n  display: flex;\n  align-items: flex-end;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.filter-section-divider {\n  width: 1px;\n  height: 32px;\n  background: var(--crm-border-light, #eaeaef);\n  margin: 0 4px;\n}\n\n/* Filter Actions */\n.filter-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-left: auto;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .date-presets-group {\n    width: 100%;\n    justify-content: center;\n  }\n\n  .date-preset-btn {\n    flex: 1;\n    text-align: center;\n    padding: 8px 6px;\n  }\n\n  .active-filters {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .active-filters-chips {\n    width: 100%;\n  }\n\n  .filter-chip {\n    flex: 1;\n    justify-content: center;\n    min-width: 0;\n  }\n\n  .filter-chip-value {\n    max-width: 100px;\n  }\n}\n\n/* Animation for chip removal */\n@keyframes chipFadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0.9) translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n.filter-chip {\n  animation: chipFadeIn 0.2s ease;\n}\n\n/* Advanced Filters Toggle */\n.advanced-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 12px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--crm-text-secondary, #666687);\n  background: transparent;\n  border: 1px dashed var(--crm-border, #dcdce4);\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.advanced-toggle:hover {\n  border-color: var(--crm-accent, #4945ff);\n  color: var(--crm-accent, #4945ff);\n  background: var(--crm-accent-light, #d9d8ff);\n}\n\n.advanced-toggle.active {\n  border-style: solid;\n  border-color: var(--crm-accent, #4945ff);\n  color: var(--crm-accent, #4945ff);\n  background: var(--crm-accent-light, #d9d8ff);\n}\n\n.advanced-toggle-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  font-size: 11px;\n  font-weight: 600;\n  background: var(--crm-accent, #4945ff);\n  color: white;\n  border-radius: 9px;\n}\n\n/* Advanced Section */\n.advanced-section {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid var(--crm-border-light, #eaeaef);\n  animation: slideDown 0.2s ease;\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Apply Button Indicator */\n.apply-indicator {\n  display: inline-block;\n  width: 8px;\n  height: 8px;\n  background: var(--crm-warning, #d97706);\n  border-radius: 50%;\n  margin-left: 6px;\n  animation: pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n  50% {\n    opacity: 0.6;\n    transform: scale(0.85);\n  }\n}\n";
 const useIsDarkTheme = () => {
   const theme = styledComponents.useTheme();
   return theme?.colors?.neutral0 === "#212134";
@@ -3126,7 +3128,18 @@ const DashboardContent = () => {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tab-content", children: renderTabContent() })
   ] });
 };
+const useInjectStyles = (id, css) => {
+  React.useEffect(() => {
+    if (document.getElementById(id)) return;
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = css;
+    document.head.appendChild(style);
+  }, [id, css]);
+};
 const HomePage = () => {
+  useInjectStyles("crm-dashboard-styles", homePageStyles);
+  useInjectStyles("crm-filterbar-styles", filterBarStyles);
   return /* @__PURE__ */ jsxRuntime.jsx(QueryProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Main, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 0, children: /* @__PURE__ */ jsxRuntime.jsx(DashboardContent, {}) }) }) });
 };
 const index = React.memo(HomePage);

package/dist/_chunks/{index-IjfLN6kZ.mjs → index-GbiXgewq.mjs}

@@ -3032,6 +3032,8 @@ const StatsView = () => {
   ] });
 };
 const StatsView$1 = memo(StatsView);
+const homePageStyles = ".dashboard-container {\n  --crm-bg-primary: #ffffff;\n  --crm-bg-secondary: #f6f6f9;\n  --crm-bg-tertiary: #eaeaef;\n  --crm-text-primary: #32324d;\n  --crm-text-secondary: #666687;\n  --crm-text-muted: #8e8ea9;\n  --crm-border: #dcdce4;\n  --crm-border-light: #eaeaef;\n  --crm-shadow: rgba(0, 0, 0, 0.08);\n  --crm-shadow-strong: rgba(0, 0, 0, 0.12);\n  --crm-accent: #4945ff;\n  --crm-accent-light: #d9d8ff;\n  --crm-success: #059669;\n  --crm-success-light: #d1fae5;\n  --crm-warning: #d97706;\n  --crm-warning-light: #fef3c7;\n  --crm-danger: #dc2626;\n  --crm-danger-light: #fee2e2;\n  --crm-header-gradient: linear-gradient(135deg, #4945ff 0%, #7b79ff 100%);\n  --crm-chart-grid: #e0e0e0;\n  --crm-chart-text: #666687;\n  --crm-table-header-bg: #f6f6f9;\n  --crm-table-row-hover: #f0f0ff;\n  --crm-table-row-stripe: #fafafc;\n  --tab-icon-stats-gradient: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);\n  --tab-icon-logs-gradient: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);\n  --tab-icon-antispam-gradient: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n\n  min-height: 100vh;\n  background: var(--crm-bg-secondary);\n}\n\n.dashboard-container.theme-dark {\n  --crm-bg-primary: #212134;\n  --crm-bg-secondary: #181826;\n  --crm-bg-tertiary: #2a2a42;\n  --crm-text-primary: #ffffff;\n  --crm-text-secondary: #a5a5ba;\n  --crm-text-muted: #7b7b98;\n  --crm-border: #3d3d5c;\n  --crm-border-light: #2a2a42;\n  --crm-shadow: rgba(0, 0, 0, 0.3);\n  --crm-shadow-strong: rgba(0, 0, 0, 0.4);\n  --crm-accent: #a5a3ff;\n  --crm-accent-light: rgba(123, 121, 255, 0.2);\n  --crm-success: #34d399;\n  --crm-success-light: rgba(16, 185, 129, 0.2);\n  --crm-warning: #fbbf24;\n  --crm-warning-light: rgba(245, 158, 11, 0.2);\n  --crm-danger: #f87171;\n  --crm-danger-light: rgba(239, 68, 68, 0.2);\n  --crm-header-gradient: linear-gradient(135deg, #2a2a5c 0%, #3d3d80 100%);\n  --crm-chart-grid: #3d3d5c;\n  --crm-chart-text: #a5a5ba;\n  --crm-table-header-bg: #2a2a42;\n  --crm-table-row-hover: #2a2a50;\n  --crm-table-row-stripe: #1e1e32;\n  --tab-icon-stats-gradient: linear-gradient(135deg, rgba(123, 121, 255, 0.2) 0%, rgba(99, 102, 241, 0.3) 100%);\n  --tab-icon-logs-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.3) 100%);\n  --tab-icon-antispam-gradient: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.3) 100%);\n}\n\n.dashboard-header {\n  background: var(--crm-header-gradient);\n  padding: 24px 32px;\n  border-radius: 0 0 16px 16px;\n  margin-bottom: 24px;\n  box-shadow: 0 4px 24px var(--crm-shadow-strong);\n}\n\n.dashboard-header h1 {\n  color: white;\n  font-size: 28px;\n  font-weight: 700;\n  margin: 0 0 4px 0;\n}\n\n.dashboard-header p {\n  color: rgba(255, 255, 255, 0.85);\n  font-size: 14px;\n  margin: 0;\n}\n\n.tab-navigation {\n  display: flex;\n  gap: 12px;\n  padding: 0 24px;\n  margin-bottom: 16px;\n}\n\n.tab-card {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 18px 20px;\n  background: var(--crm-bg-primary);\n  border: 2px solid transparent;\n  border-radius: 12px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: 0 2px 8px var(--crm-shadow);\n  position: relative;\n  overflow: hidden;\n}\n\n.tab-card::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 4px;\n  background: transparent;\n  transition: background 0.2s ease;\n}\n\n.tab-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 24px var(--crm-shadow-strong);\n}\n\n.tab-card.active {\n  border-color: var(--tab-color, var(--crm-accent));\n  box-shadow: 0 4px 16px var(--crm-shadow-strong);\n}\n\n.tab-card.active::before {\n  background: var(--tab-color, var(--crm-accent));\n}\n\n.tab-icon {\n  width: 44px;\n  height: 44px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: transform 0.2s ease;\n}\n\n.tab-card:hover .tab-icon {\n  transform: scale(1.05);\n}\n\n.tab-icon.stats {\n  background: var(--tab-icon-stats-gradient);\n  color: var(--crm-accent);\n}\n\n.tab-icon.logs {\n  background: var(--tab-icon-logs-gradient);\n  color: var(--crm-success);\n}\n\n.tab-icon.antispam {\n  background: var(--tab-icon-antispam-gradient);\n  color: var(--crm-warning);\n}\n\n.tab-content-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  flex: 1;\n  min-width: 0;\n}\n\n.tab-label {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--crm-text-primary);\n  margin: 0;\n}\n\n.tab-description {\n  font-size: 12px;\n  color: var(--crm-text-muted);\n  margin: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tab-badge {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 28px;\n  height: 28px;\n  padding: 0 10px;\n  border-radius: 14px;\n  font-size: 13px;\n  font-weight: 600;\n  flex-shrink: 0;\n  transition: all 0.2s ease;\n}\n\n.tab-badge.stats {\n  background: var(--crm-accent-light);\n  color: var(--crm-accent);\n}\n\n.tab-badge.logs {\n  background: var(--crm-success-light);\n  color: var(--crm-success);\n}\n\n.tab-badge.antispam {\n  background: var(--crm-warning-light);\n  color: var(--crm-warning);\n}\n\n.tab-card.active .tab-badge.stats {\n  background: var(--crm-accent);\n  color: white;\n}\n\n.tab-card.active .tab-badge.logs {\n  background: var(--crm-success);\n  color: white;\n}\n\n.tab-card.active .tab-badge.antispam {\n  background: var(--crm-warning);\n  color: white;\n}\n\n.tab-content {\n  margin: 0 24px;\n  padding: 24px;\n  background: var(--crm-bg-primary);\n  border-radius: 16px;\n  box-shadow: 0 4px 16px var(--crm-shadow);\n}\n\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 64px;\n  gap: 16px;\n  color: var(--crm-text-muted);\n}\n\n.loading-spinner {\n  width: 40px;\n  height: 40px;\n  border: 3px solid var(--crm-border);\n  border-top-color: var(--crm-accent);\n  border-radius: 50%;\n  animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Stats Cards */\n.stats-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 16px;\n  margin-bottom: 24px;\n}\n\n.stat-card {\n  background: var(--crm-bg-primary);\n  border-radius: 12px;\n  padding: 20px;\n  border: 1px solid var(--crm-border-light);\n  box-shadow: 0 2px 8px var(--crm-shadow);\n  transition: all 0.2s ease;\n}\n\n.stat-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px var(--crm-shadow-strong);\n}\n\n.stat-card-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 12px;\n}\n\n.stat-card-icon {\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.stat-card-icon.primary {\n  background: var(--crm-accent-light);\n  color: var(--crm-accent);\n}\n\n.stat-card-icon.success {\n  background: var(--crm-success-light);\n  color: var(--crm-success);\n}\n\n.stat-card-icon.warning {\n  background: var(--crm-warning-light);\n  color: var(--crm-warning);\n}\n\n.stat-card-icon.danger {\n  background: var(--crm-danger-light);\n  color: var(--crm-danger);\n}\n\n.stat-card-value {\n  font-size: 28px;\n  font-weight: 700;\n  color: var(--crm-text-primary);\n  line-height: 1.2;\n}\n\n.stat-card-label {\n  font-size: 13px;\n  color: var(--crm-text-muted);\n  margin-top: 4px;\n}\n\n.stat-card-trend {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 12px;\n  margin-top: 8px;\n}\n\n.stat-card-trend.up {\n  background: var(--crm-success-light);\n  color: var(--crm-success);\n}\n\n.stat-card-trend.down {\n  background: var(--crm-danger-light);\n  color: var(--crm-danger);\n}\n\n.stat-card-trend.neutral {\n  background: var(--crm-bg-tertiary);\n  color: var(--crm-text-muted);\n}\n\n.export-dropdown {\n  position: relative;\n  display: inline-block;\n}\n\n.export-dropdown-menu {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n  background: var(--crm-bg-primary);\n  border: 1px solid var(--crm-border);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px var(--crm-shadow-strong);\n  min-width: 140px;\n  z-index: 100;\n  overflow: hidden;\n}\n\n.export-dropdown-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  padding: 10px 14px;\n  border: none;\n  background: none;\n  font-size: 13px;\n  color: var(--crm-text-primary);\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.export-dropdown-item:hover {\n  background: var(--crm-bg-tertiary);\n}\n\n.export-dropdown-item svg {\n  width: 16px;\n  height: 16px;\n  color: var(--crm-text-muted);\n}\n\n.granularity-select {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.granularity-select label {\n  font-size: 12px;\n  color: var(--crm-text-muted);\n  white-space: nowrap;\n}\n\n.granularity-pills {\n  display: flex;\n  gap: 2px;\n  background: var(--crm-bg-tertiary);\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.granularity-pill {\n  padding: 4px 10px;\n  font-size: 11px;\n  font-weight: 600;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  background: transparent;\n  color: var(--crm-text-muted);\n}\n\n.granularity-pill.active {\n  background: var(--crm-accent);\n  color: white;\n}\n\n.granularity-pill:hover:not(.active) {\n  background: var(--crm-bg-secondary);\n  color: var(--crm-text-primary);\n}\n\n.compare-toggle {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: var(--crm-text-secondary);\n  cursor: pointer;\n}\n\n.compare-toggle input {\n  width: 16px;\n  height: 16px;\n  accent-color: var(--crm-accent);\n}\n\n.compare-toggle:hover {\n  color: var(--crm-text-primary);\n}\n\n.metrics-toggle {\n  display: flex;\n  gap: 12px;\n  margin-top: 12px;\n  padding-top: 12px;\n  border-top: 1px solid var(--crm-border-light);\n}\n\n.metrics-toggle label {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--crm-text-secondary);\n  cursor: pointer;\n}\n\n.metrics-toggle input {\n  width: 14px;\n  height: 14px;\n}\n\n.metrics-toggle label:hover {\n  color: var(--crm-text-primary);\n}\n\n/* Chart Container */\n.chart-container {\n  background: var(--crm-bg-primary);\n  border-radius: 12px;\n  padding: 24px;\n  border: 1px solid var(--crm-border-light);\n  box-shadow: 0 2px 8px var(--crm-shadow);\n}\n\n.chart-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 20px;\n}\n\n.chart-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--crm-text-primary);\n}\n\n.chart-subtitle {\n  font-size: 13px;\n  color: var(--crm-text-muted);\n  margin-top: 2px;\n}\n\n/* Table Styles */\n.crm-table-wrapper {\n  background: var(--crm-bg-primary);\n  border-radius: 12px;\n  border: 1px solid var(--crm-border-light);\n  box-shadow: 0 2px 8px var(--crm-shadow);\n  overflow: hidden;\n}\n\n.crm-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.crm-table thead {\n  background: var(--crm-table-header-bg);\n}\n\n.crm-table th {\n  padding: 14px 16px;\n  text-align: left;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--crm-text-secondary);\n  border-bottom: 1px solid var(--crm-border);\n}\n\n.crm-table td {\n  padding: 14px 16px;\n  font-size: 14px;\n  color: var(--crm-text-primary);\n  border-bottom: 1px solid var(--crm-border-light);\n}\n\n.crm-table tbody tr {\n  transition: background-color 0.15s ease;\n}\n\n.crm-table tbody tr:hover {\n  background: var(--crm-table-row-hover);\n}\n\n.crm-table tbody tr:nth-child(even) {\n  background: var(--crm-table-row-stripe);\n}\n\n.crm-table tbody tr:nth-child(even):hover {\n  background: var(--crm-table-row-hover);\n}\n\n.crm-table tbody tr:last-child td {\n  border-bottom: none;\n}\n\n/* Status Badge */\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.status-badge::before {\n  content: '';\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n}\n\n.status-badge.sent {\n  background: var(--crm-success-light);\n  color: var(--crm-success);\n}\n\n.status-badge.sent::before {\n  background: var(--crm-success);\n}\n\n.status-badge.planned {\n  background: var(--crm-warning-light);\n  color: var(--crm-warning);\n}\n\n.status-badge.planned::before {\n  background: var(--crm-warning);\n}\n\n.status-badge.failed {\n  background: var(--crm-danger-light);\n  color: var(--crm-danger);\n}\n\n.status-badge.failed::before {\n  background: var(--crm-danger);\n}\n\n.status-badge.cancelled {\n  background: var(--crm-bg-tertiary);\n  color: var(--crm-text-muted);\n}\n\n.status-badge.cancelled::before {\n  background: var(--crm-text-muted);\n}\n\n.status-badge.warning {\n  background: var(--crm-warning-light);\n  color: var(--crm-warning);\n}\n\n.status-badge.warning::before {\n  background: var(--crm-warning);\n}\n\n/* Pagination */\n.pagination {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 0;\n}\n\n.pagination-info {\n  font-size: 13px;\n  color: var(--crm-text-muted);\n}\n\n.pagination-controls {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.pagination-btn {\n  padding: 8px 16px;\n  border-radius: 8px;\n  font-size: 13px;\n  font-weight: 500;\n  background: var(--crm-bg-primary);\n  border: 1px solid var(--crm-border);\n  color: var(--crm-text-primary);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.pagination-btn:hover:not(:disabled) {\n  background: var(--crm-accent-light);\n  border-color: var(--crm-accent);\n  color: var(--crm-accent);\n}\n\n.pagination-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.pagination-current {\n  padding: 8px 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--crm-text-primary);\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 48px 24px;\n  text-align: center;\n}\n\n.empty-state-icon {\n  width: 64px;\n  height: 64px;\n  border-radius: 16px;\n  background: var(--crm-bg-tertiary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 16px;\n  color: var(--crm-text-muted);\n}\n\n.empty-state-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--crm-text-primary);\n  margin-bottom: 4px;\n}\n\n.empty-state-description {\n  font-size: 14px;\n  color: var(--crm-text-muted);\n}\n\n/* Section Header in table wrapper */\n.crm-table-wrapper .section-header,\n.crm-table-wrapper > div:first-child {\n  padding: 16px 20px;\n}\n\n/* Funnel grid responsive */\n.funnel-grid {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 12px;\n}\n\n@media (max-width: 1200px) {\n  .stats-grid {\n    grid-template-columns: repeat(3, 1fr) !important;\n  }\n\n  .funnel-grid {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\n@media (max-width: 1024px) {\n  .tab-navigation {\n    flex-direction: column;\n    gap: 8px;\n    padding: 0 16px;\n  }\n\n  .tab-card {\n    padding: 14px 16px;\n  }\n\n  .tab-description {\n    display: none;\n  }\n\n  .tab-content {\n    margin: 0 16px;\n    border-radius: 12px;\n  }\n\n  .stats-grid {\n    grid-template-columns: repeat(2, 1fr) !important;\n  }\n\n  .funnel-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .chart-container {\n    padding: 16px;\n  }\n}\n\n@media (max-width: 768px) {\n  .stats-grid {\n    grid-template-columns: repeat(2, 1fr) !important;\n  }\n\n  .crm-table th,\n  .crm-table td {\n    padding: 10px 12px;\n    font-size: 13px;\n  }\n}\n\n@media (max-width: 640px) {\n  .dashboard-header {\n    padding: 20px;\n    border-radius: 0 0 12px 12px;\n  }\n\n  .dashboard-header h1 {\n    font-size: 22px;\n  }\n\n  .tab-icon {\n    width: 36px;\n    height: 36px;\n  }\n\n  .tab-label {\n    font-size: 14px;\n  }\n\n  .stats-grid {\n    grid-template-columns: 1fr !important;\n  }\n\n  .funnel-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .stat-card-value {\n    font-size: 24px;\n  }\n\n  .chart-container {\n    padding: 12px;\n  }\n}\n\n/* Today Widget */\n.today-widget {\n  background: var(--crm-bg-primary);\n  border-radius: 12px;\n  padding: 20px;\n  border: 1px solid var(--crm-border-light);\n  box-shadow: 0 4px 16px var(--crm-shadow);\n}\n\n.today-widget.loading {\n  min-height: 160px;\n  display: flex;\n  flex-direction: column;\n}\n\n.today-widget-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n}\n\n.today-widget-title {\n  font-size: 13px;\n  font-weight: 700;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n  color: var(--crm-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.live-dot {\n  width: 8px;\n  height: 8px;\n  background: var(--crm-success);\n  border-radius: 50%;\n  animation: pulse 2s ease-in-out infinite;\n  box-shadow: 0 0 8px var(--crm-success);\n}\n\n@keyframes pulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.7; transform: scale(1.2); }\n}\n\n.today-widget-comparison {\n  font-size: 11px;\n  color: var(--crm-text-muted);\n  background: var(--crm-bg-tertiary);\n  padding: 4px 10px;\n  border-radius: 12px;\n}\n\n.today-widget-metrics {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 10px;\n  margin-bottom: 16px;\n}\n\n.today-metric {\n  text-align: center;\n  padding: 12px 8px;\n  background: var(--crm-bg-secondary);\n  border-radius: 10px;\n  border: 1px solid var(--crm-border-light);\n  transition: border-color 0.2s ease, background-color 0.2s ease;\n}\n\n.today-metric:hover {\n  border-color: var(--crm-border);\n  background: var(--crm-bg-tertiary);\n}\n\n.today-metric-value {\n  font-size: 22px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: var(--crm-text-primary);\n}\n\n.today-metric-label {\n  font-size: 11px;\n  color: var(--crm-text-muted);\n  margin-top: 4px;\n  font-weight: 500;\n}\n\n.trend-indicator {\n  display: inline-flex;\n  align-items: center;\n  font-size: 11px;\n  font-weight: 600;\n  margin-top: 6px;\n  padding: 3px 8px;\n  border-radius: 10px;\n}\n\n.trend-indicator.up {\n  background: var(--crm-success-light);\n  color: var(--crm-success);\n}\n\n.trend-indicator.down {\n  background: var(--crm-danger-light);\n  color: var(--crm-danger);\n}\n\n.trend-neutral {\n  display: inline-flex;\n  font-size: 11px;\n  font-weight: 600;\n  margin-top: 6px;\n  padding: 3px 8px;\n  border-radius: 10px;\n  background: var(--crm-bg-tertiary);\n  color: var(--crm-text-muted);\n}\n\n.today-widget-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 12px;\n  border-top: 1px solid var(--crm-border-light);\n  font-size: 12px;\n}\n\n.today-rates {\n  display: flex;\n  gap: 16px;\n}\n\n.today-rates span {\n  color: var(--crm-text-muted);\n  font-weight: 500;\n}\n\n.today-rates span strong {\n  color: var(--crm-text-primary);\n  font-weight: 700;\n}\n\n.today-updated {\n  color: var(--crm-text-muted);\n  font-size: 11px;\n}\n\n.today-widget-loading {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  color: var(--crm-text-muted);\n}\n\n/* Cohort Heat Map */\n.cohort-heatmap {\n  background: var(--crm-bg-primary);\n  border-radius: 12px;\n  padding: 24px;\n  border: 1px solid var(--crm-border-light);\n}\n\n.cohort-table-wrapper {\n  overflow-x: auto;\n  margin: 16px 0;\n}\n\n.cohort-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 12px;\n}\n\n.cohort-header-cell {\n  padding: 10px 8px;\n  text-align: center;\n  font-weight: 600;\n  color: var(--crm-text-secondary);\n  background: var(--crm-bg-secondary);\n  border-bottom: 1px solid var(--crm-border);\n}\n\n.cohort-period-header {\n  min-width: 60px;\n}\n\n.cohort-date-cell {\n  padding: 10px 12px;\n  font-weight: 600;\n  color: var(--crm-text-primary);\n  background: var(--crm-bg-secondary);\n  white-space: nowrap;\n}\n\n.cohort-users-cell {\n  padding: 10px 12px;\n  text-align: right;\n  color: var(--crm-text-secondary);\n  background: var(--crm-bg-secondary);\n}\n\n.cohort-cell {\n  padding: 10px 8px;\n  text-align: center;\n  font-weight: 600;\n  font-size: 11px;\n  transition: all 0.15s ease;\n  cursor: default;\n}\n\n.cohort-cell:hover {\n  filter: brightness(1.1);\n  z-index: 1;\n  position: relative;\n}\n\n.cohort-legend {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  font-size: 11px;\n  color: var(--crm-text-muted);\n  margin-top: 12px;\n}\n\n.cohort-legend-gradient {\n  width: 120px;\n  height: 8px;\n  border-radius: 4px;\n  background: linear-gradient(90deg, rgba(239, 68, 68, 0.6) 0%, rgba(245, 158, 11, 0.6) 50%, rgba(16, 185, 129, 0.8) 100%);\n}\n\n.cohort-loading {\n  text-align: center;\n  padding: 32px;\n  color: var(--crm-text-muted);\n}\n\n/* A/B Tests */\n.ab-tests-section {\n  background: var(--crm-bg-primary);\n  border-radius: 12px;\n  padding: 24px;\n  border: 1px solid var(--crm-border-light);\n}\n\n.ab-tests-list {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.ab-test-card {\n  background: var(--crm-bg-secondary);\n  border-radius: 10px;\n  padding: 20px;\n  border: 1px solid var(--crm-border-light);\n}\n\n.ab-test-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n}\n\n.ab-test-name {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--crm-text-primary);\n}\n\n.ab-test-status {\n  font-size: 12px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.ab-test-variants {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  gap: 16px;\n  align-items: center;\n}\n\n.ab-variant {\n  background: var(--crm-bg-primary);\n  border-radius: 8px;\n  padding: 16px;\n  border: 2px solid transparent;\n  transition: all 0.2s ease;\n}\n\n.ab-variant.winner {\n  border-color: var(--crm-success);\n  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);\n}\n\n.ab-variant-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.ab-variant-name {\n  font-weight: 600;\n  color: var(--crm-text-primary);\n}\n\n.ab-variant-tag {\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n  text-transform: uppercase;\n}\n\n.ab-variant-tag.control {\n  background: var(--crm-bg-tertiary);\n  color: var(--crm-text-muted);\n}\n\n.ab-variant-tag.treatment {\n  background: var(--crm-accent-light);\n  color: var(--crm-accent);\n}\n\n.ab-variant-stats {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 12px;\n}\n\n.ab-stat {\n  text-align: center;\n}\n\n.ab-stat-value {\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--crm-text-primary);\n}\n\n.ab-stat-label {\n  font-size: 10px;\n  color: var(--crm-text-muted);\n  margin-top: 2px;\n}\n\n.ab-vs {\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--crm-text-muted);\n  text-align: center;\n}\n\n.ab-test-analysis {\n  display: flex;\n  gap: 24px;\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid var(--crm-border-light);\n}\n\n.ab-analysis-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n}\n\n.ab-analysis-label {\n  color: var(--crm-text-muted);\n}\n\n.ab-analysis-value {\n  font-weight: 600;\n  color: var(--crm-text-primary);\n}\n\n.ab-analysis-value.positive {\n  color: var(--crm-success);\n}\n\n.ab-analysis-value.negative {\n  color: var(--crm-danger);\n}\n\n.ab-analysis-value.confidence-high {\n  color: var(--crm-success);\n}\n\n.ab-analysis-value.confidence-medium {\n  color: var(--crm-success);\n}\n\n.ab-analysis-value.confidence-low {\n  color: var(--crm-warning);\n}\n\n.ab-tests-loading {\n  text-align: center;\n  padding: 32px;\n  color: var(--crm-text-muted);\n}\n\n/* Send Time Heat Map */\n.sendtime-heatmap {\n  background: var(--crm-bg-primary);\n  border-radius: 12px;\n  padding: 24px;\n  border: 1px solid var(--crm-border-light);\n}\n\n.sendtime-best {\n  text-align: right;\n}\n\n.sendtime-best-label {\n  font-size: 11px;\n  color: var(--crm-text-muted);\n}\n\n.sendtime-best-value {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--crm-success);\n}\n\n.sendtime-best-rate {\n  font-size: 12px;\n  color: var(--crm-success);\n}\n\n.sendtime-grid-wrapper {\n  overflow-x: auto;\n  margin: 16px 0;\n}\n\n.sendtime-grid {\n  display: grid;\n  grid-template-columns: 60px repeat(7, 1fr);\n  gap: 2px;\n  min-width: 400px;\n}\n\n.sendtime-corner {\n  background: transparent;\n}\n\n.sendtime-day-header {\n  text-align: center;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--crm-text-secondary);\n  padding: 8px 4px;\n}\n\n.sendtime-hour-label {\n  font-size: 10px;\n  color: var(--crm-text-muted);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding-right: 8px;\n}\n\n.sendtime-cell {\n  aspect-ratio: 1;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: default;\n  transition: all 0.15s ease;\n  min-height: 32px;\n}\n\n.sendtime-cell:hover {\n  filter: brightness(1.15);\n  z-index: 1;\n}\n\n.sendtime-cell.best {\n  box-shadow: 0 0 0 2px var(--crm-success);\n}\n\n.sendtime-cell-value {\n  font-size: 9px;\n  font-weight: 600;\n  color: inherit;\n}\n\n.sendtime-legend {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  font-size: 11px;\n  color: var(--crm-text-muted);\n  margin-top: 12px;\n}\n\n.sendtime-legend-gradient {\n  width: 120px;\n  height: 8px;\n  border-radius: 4px;\n  background: linear-gradient(90deg, rgba(239, 68, 68, 0.6) 0%, rgba(245, 158, 11, 0.6) 50%, rgba(16, 185, 129, 0.8) 100%);\n}\n\n.sendtime-loading {\n  text-align: center;\n  padding: 32px;\n  color: var(--crm-text-muted);\n}\n\n/* Segment Table */\n.segment-table-section {\n  background: var(--crm-bg-primary);\n  border-radius: 12px;\n  padding: 24px;\n  border: 1px solid var(--crm-border-light);\n}\n\n.segment-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 16px;\n}\n\n.segment-card {\n  background: var(--crm-bg-secondary);\n  border-radius: 10px;\n  padding: 16px;\n  border-left: 4px solid var(--crm-text-muted);\n  transition: all 0.2s ease;\n}\n\n.segment-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px var(--crm-shadow);\n}\n\n.segment-card-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.segment-icon {\n  font-size: 18px;\n}\n\n.segment-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--crm-text-primary);\n  flex: 1;\n}\n\n.segment-users {\n  font-size: 12px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.segment-metrics {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.segment-metric {\n  text-align: center;\n}\n\n.segment-metric-value {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--crm-text-primary);\n}\n\n.segment-metric-label {\n  font-size: 10px;\n  color: var(--crm-text-muted);\n}\n\n.segment-bar-wrapper {\n  height: 4px;\n  background: var(--crm-bg-tertiary);\n  border-radius: 2px;\n  overflow: hidden;\n}\n\n.segment-bar {\n  height: 100%;\n  border-radius: 2px;\n  transition: width 0.3s ease;\n}\n\n.segment-loading {\n  text-align: center;\n  padding: 32px;\n  color: var(--crm-text-muted);\n}\n\n/* Goal Tracker */\n.goal-tracker {\n  background: var(--crm-bg-primary);\n  border-radius: 12px;\n  padding: 20px;\n  border: 1px solid var(--crm-border-light);\n}\n\n.goal-tracker-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n}\n\n.goal-edit-btn {\n  background: transparent;\n  border: none;\n  font-size: 16px;\n  cursor: pointer;\n  padding: 4px 8px;\n  border-radius: 6px;\n  transition: background 0.15s ease;\n}\n\n.goal-edit-btn:hover {\n  background: var(--crm-bg-tertiary);\n}\n\n.goal-items {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.goal-item {\n  padding: 12px;\n  background: var(--crm-bg-secondary);\n  border-radius: 8px;\n}\n\n.goal-item-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n\n.goal-icon {\n  font-size: 16px;\n}\n\n.goal-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--crm-text-primary);\n  flex: 1;\n}\n\n.goal-progress-badge {\n  font-size: 11px;\n  font-weight: 700;\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.goal-bar-wrapper {\n  height: 6px;\n  background: var(--crm-bg-tertiary);\n  border-radius: 3px;\n  overflow: hidden;\n  margin-bottom: 8px;\n}\n\n.goal-bar {\n  height: 100%;\n  border-radius: 3px;\n  transition: width 0.3s ease;\n}\n\n.goal-values {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n}\n\n.goal-current {\n  font-weight: 600;\n  color: var(--crm-text-primary);\n}\n\n.goal-separator {\n  color: var(--crm-text-muted);\n}\n\n.goal-target {\n  color: var(--crm-text-secondary);\n}\n\n.goal-target-input {\n  width: 80px;\n  padding: 2px 6px;\n  border: 1px solid var(--crm-border);\n  border-radius: 4px;\n  font-size: 12px;\n  background: var(--crm-bg-primary);\n  color: var(--crm-text-primary);\n}\n\n.goal-target-input:focus {\n  outline: none;\n  border-color: var(--crm-accent);\n}\n\n/* Enhanced Stats Layout */\n.stats-header-row {\n  display: grid;\n  grid-template-columns: 320px 1fr;\n  gap: 16px;\n  margin-bottom: 24px;\n}\n\n@media (max-width: 1024px) {\n  .stats-header-row {\n    grid-template-columns: 1fr;\n  }\n\n  .ab-test-variants {\n    grid-template-columns: 1fr;\n  }\n\n  .ab-vs {\n    padding: 8px 0;\n  }\n\n  .ab-test-analysis {\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n}\n\n@media (max-width: 768px) {\n  .segment-metrics {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n";
+const filterBarStyles = "/* Filter Bar Container */\n.filter-bar {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  transition: box-shadow 0.2s ease, transform 0.2s ease;\n  border-radius: 12px;\n}\n\n.filter-bar.scrolled {\n  box-shadow: 0 4px 20px var(--crm-shadow-strong, rgba(0, 0, 0, 0.12));\n}\n\n/* Date Presets Button Group */\n.date-presets-group {\n  display: inline-flex;\n  gap: 0;\n  background: var(--crm-bg-tertiary, #eaeaef);\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.date-preset-btn {\n  padding: 6px 10px;\n  font-size: 12px;\n  font-weight: 500;\n  border-radius: 6px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  color: var(--crm-text-secondary, #666687);\n  white-space: nowrap;\n}\n\n.date-preset-btn:hover {\n  background: var(--crm-bg-primary, #ffffff);\n  color: var(--crm-text-primary, #32324d);\n}\n\n.date-preset-btn.active {\n  background: var(--crm-accent, #4945ff);\n  color: white;\n  box-shadow: 0 2px 4px rgba(73, 69, 255, 0.25);\n}\n\n/* Active Filters */\n.active-filters {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.active-filters-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--crm-text-muted, #8e8ea9);\n}\n\n.active-filters-chips {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n/* Filter Chips */\n.filter-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 10px;\n  background: var(--crm-accent-light, #d9d8ff);\n  border: 1px solid transparent;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  font-family: inherit;\n}\n\n.filter-chip:hover {\n  background: var(--crm-accent, #4945ff);\n  transform: translateY(-1px);\n}\n\n.filter-chip:hover .filter-chip-label,\n.filter-chip:hover .filter-chip-value {\n  color: white;\n}\n\n.filter-chip:hover .filter-chip-remove {\n  opacity: 1;\n  color: white;\n}\n\n.filter-chip-label {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  color: var(--crm-accent, #4945ff);\n  transition: color 0.15s ease;\n}\n\n.filter-chip-value {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--crm-text-primary, #32324d);\n  max-width: 150px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  transition: color 0.15s ease;\n}\n\n.filter-chip-remove {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.1);\n  opacity: 0.6;\n  transition: all 0.15s ease;\n  color: var(--crm-text-primary, #32324d);\n}\n\n.filter-chip:hover .filter-chip-remove {\n  background: rgba(255, 255, 255, 0.2);\n}\n\n/* Clear All Button */\n.filter-chip.filter-chip-clear {\n  background: var(--crm-bg-tertiary, #eaeaef);\n  color: var(--crm-text-secondary, #666687);\n  font-size: 12px;\n  font-weight: 500;\n  padding: 6px 12px;\n}\n\n.filter-chip.filter-chip-clear:hover {\n  background: var(--crm-danger, #dc2626);\n  color: white;\n}\n\n/* Filter Section Styling */\n.filter-section {\n  display: flex;\n  align-items: flex-end;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.filter-section-divider {\n  width: 1px;\n  height: 32px;\n  background: var(--crm-border-light, #eaeaef);\n  margin: 0 4px;\n}\n\n/* Filter Actions */\n.filter-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-left: auto;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .date-presets-group {\n    width: 100%;\n    justify-content: center;\n  }\n\n  .date-preset-btn {\n    flex: 1;\n    text-align: center;\n    padding: 8px 6px;\n  }\n\n  .active-filters {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .active-filters-chips {\n    width: 100%;\n  }\n\n  .filter-chip {\n    flex: 1;\n    justify-content: center;\n    min-width: 0;\n  }\n\n  .filter-chip-value {\n    max-width: 100px;\n  }\n}\n\n/* Animation for chip removal */\n@keyframes chipFadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0.9) translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n.filter-chip {\n  animation: chipFadeIn 0.2s ease;\n}\n\n/* Advanced Filters Toggle */\n.advanced-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 12px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--crm-text-secondary, #666687);\n  background: transparent;\n  border: 1px dashed var(--crm-border, #dcdce4);\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.advanced-toggle:hover {\n  border-color: var(--crm-accent, #4945ff);\n  color: var(--crm-accent, #4945ff);\n  background: var(--crm-accent-light, #d9d8ff);\n}\n\n.advanced-toggle.active {\n  border-style: solid;\n  border-color: var(--crm-accent, #4945ff);\n  color: var(--crm-accent, #4945ff);\n  background: var(--crm-accent-light, #d9d8ff);\n}\n\n.advanced-toggle-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  font-size: 11px;\n  font-weight: 600;\n  background: var(--crm-accent, #4945ff);\n  color: white;\n  border-radius: 9px;\n}\n\n/* Advanced Section */\n.advanced-section {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid var(--crm-border-light, #eaeaef);\n  animation: slideDown 0.2s ease;\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Apply Button Indicator */\n.apply-indicator {\n  display: inline-block;\n  width: 8px;\n  height: 8px;\n  background: var(--crm-warning, #d97706);\n  border-radius: 50%;\n  margin-left: 6px;\n  animation: pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n  50% {\n    opacity: 0.6;\n    transform: scale(0.85);\n  }\n}\n";
 const useIsDarkTheme = () => {
   const theme = useTheme();
   return theme?.colors?.neutral0 === "#212134";
@@ -3122,7 +3124,18 @@ const DashboardContent = () => {
     /* @__PURE__ */ jsx("div", { className: "tab-content", children: renderTabContent() })
   ] });
 };
+const useInjectStyles = (id, css) => {
+  useEffect(() => {
+    if (document.getElementById(id)) return;
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = css;
+    document.head.appendChild(style);
+  }, [id, css]);
+};
 const HomePage = () => {
+  useInjectStyles("crm-dashboard-styles", homePageStyles);
+  useInjectStyles("crm-filterbar-styles", filterBarStyles);
   return /* @__PURE__ */ jsx(QueryProvider, { children: /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsx(Box, { padding: 0, children: /* @__PURE__ */ jsx(DashboardContent, {}) }) }) });
 };
 const index = memo(HomePage);

package/dist/admin/index.js

@@ -149,7 +149,7 @@ const index = {
       Component: async () => {
         const component = await Promise.resolve().then(() => require(
           /* webpackChunkName: "crm-dashboard-page" */
-          "../_chunks/index-B1_Gswul.js"
+          "../_chunks/index-CTVmzNXn.js"
         ));
         return component;
       },

package/dist/admin/index.mjs

@@ -148,7 +148,7 @@ const index = {
       Component: async () => {
         const component = await import(
           /* webpackChunkName: "crm-dashboard-page" */
-          "../_chunks/index-IjfLN6kZ.mjs"
+          "../_chunks/index-GbiXgewq.mjs"
         );
         return component;
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inspirer-dev/crm-dashboard",
-  "version": "1.0.46",
+  "version": "1.0.47",
   "description": "CRM Dashboard and Tools",
   "strapi": {
     "name": "crm-dashboard",