SEction 2 part 2

frontend/src/components/ui/button-group/ButtonGroup.tsx

@@ -41,7 +41,7 @@ export const ButtonGroupItem: React.FC<ButtonGroupItemProps> = ({
       disabled={disabled}
       className={`inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white disabled:opacity-50 disabled:cursor-not-allowed ${
         isActive
-          ? "bg-gray-100 text-gray-900 dark:bg-white/10 dark:text-white"
+          ? "bg-brand-100 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300"
           : ""
       } ${className}`}
       type="button"

frontend/src/components/ui/tooltip/CalendarItemTooltip.tsx

@@ -0,0 +1,81 @@
+/**
+ * CalendarItemTooltip - Tooltip for calendar items with rich content
+ * Used in Content Calendar page to show content details on hover
+ */
+import React, { ReactNode } from 'react';
+import { EnhancedTooltip } from './EnhancedTooltip';
+
+interface CalendarItemTooltipProps {
+  children: ReactNode;
+  title: string;
+  status: 'scheduled' | 'published' | 'publishing' | 'failed';
+  contentType?: string;
+  date?: string | null;
+  dateLabel?: string;
+  wordCount?: number;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+const statusConfig = {
+  scheduled: {
+    icon: '⏰',
+    label: 'Scheduled',
+    color: 'text-warning-300',
+  },
+  published: {
+    icon: '✓',
+    label: 'Published',
+    color: 'text-success-300',
+  },
+  publishing: {
+    icon: '⚡',
+    label: 'Publishing',
+    color: 'text-brand-300',
+  },
+  failed: {
+    icon: '✗',
+    label: 'Failed',
+    color: 'text-error-300',
+  },
+};
+
+export const CalendarItemTooltip: React.FC<CalendarItemTooltipProps> = ({
+  children,
+  title,
+  status,
+  contentType,
+  date,
+  dateLabel = 'Date',
+  wordCount,
+  placement = 'top',
+}) => {
+  const config = statusConfig[status];
+
+  const tooltipContent = (
+    <div className="min-w-[200px] max-w-[280px]">
+      <div className={`font-semibold mb-1 ${config.color}`}>
+        {config.icon} {config.label}
+      </div>
+      <div className="font-medium mb-2 whitespace-normal text-white">
+        {title}
+      </div>
+      <div className="text-gray-400 text-[10px] space-y-0.5">
+        {contentType && <div>Type: {contentType}</div>}
+        {date && (
+          <div>
+            {dateLabel}: {new Date(date).toLocaleString()}
+          </div>
+        )}
+        {wordCount !== undefined && <div>Words: {wordCount}</div>}
+      </div>
+    </div>
+  );
+
+  return (
+    <EnhancedTooltip content={tooltipContent} placement={placement} delay={100}>
+      {children}
+    </EnhancedTooltip>
+  );
+};
+
+export default CalendarItemTooltip;

frontend/src/components/ui/tooltip/index.ts

@@ -1,2 +1,3 @@
 export { Tooltip } from "./Tooltip";
-
+export { EnhancedTooltip } from "./EnhancedTooltip";
+export { CalendarItemTooltip } from "./CalendarItemTooltip";