fix: improve select components styling and readability

- Fix selected option colors in MultiSelectAutocomplete and TagInput
- Use gray colors for better contrast and readability
- Add proper dark mode support for selected items
- Fix unreadable text in selected options

src/components/ui/MultiSelectAutocomplete.tsx

@@ -83,6 +83,7 @@ export const MultiSelectAutocomplete: React.FC<MultiSelectAutocompleteProps> = (
             {/* Selected Items Display */}
             <div
                 className={`
+        
           w-full min-h-[42px] px-3 py-2 border rounded-md 
           focus-within:outline-none focus-within:ring-1 focus-within:ring-primary-500 
           cursor-pointer
@@ -118,6 +119,7 @@ export const MultiSelectAutocomplete: React.FC<MultiSelectAutocompleteProps> = (
                     )}
 
                     <div className="flex-1 min-w-[60px]">
+
                         {isOpen && !disabled && (
                             <input
                                 ref={inputRef}
@@ -149,7 +151,7 @@ export const MultiSelectAutocomplete: React.FC<MultiSelectAutocompleteProps> = (
                                 key={option.id}
                                 className={`
                   px-3 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700
-                  ${selectedValues.includes(option.id) ? 'bg-primary-50 dark:bg-primary-900/20' : ''}
+                  ${selectedValues.includes(option.id) ? 'bg-primary-50 dark:bg-primary-900/80' : ''}
                 `}
                                 onClick={() => handleToggleOption(option.id)}
                             >

src/components/ui/Typography.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+
+interface TypographyProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+interface LabelProps extends TypographyProps {
+    htmlFor?: string;
+}
+
+// Page Headers
+export const PageTitle = ({ children, className = '' }: TypographyProps) => (
+    <h1 className={`text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 dark:text-gray-100 ${className}`}>
+        {children}
+    </h1>
+);
+
+export const PageSubtitle = ({ children, className = '' }: TypographyProps) => (
+    <p className={`text-sm sm:text-base text-gray-600 dark:text-gray-400 mt-1 ${className}`}>
+        {children}
+    </p>
+);
+
+// Section Headers
+export const SectionTitle = ({ children, className = '' }: TypographyProps) => (
+    <h2 className={`text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 ${className}`}>
+        {children}
+    </h2>
+);
+
+export const SectionSubtitle = ({ children, className = '' }: TypographyProps) => (
+    <h3 className={`text-base sm:text-lg font-medium text-gray-900 dark:text-gray-100 ${className}`}>
+        {children}
+    </h3>
+);
+
+// Card Headers
+export const CardTitle = ({ children, className = '' }: TypographyProps) => (
+    <h3 className={`text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100 ${className}`}>
+        {children}
+    </h3>
+);
+
+export const CardSubtitle = ({ children, className = '' }: TypographyProps) => (
+    <p className={`text-sm text-gray-600 dark:text-gray-400 ${className}`}>
+        {children}
+    </p>
+);
+
+// Stats and Values
+export const StatValue = ({ children, className = '' }: TypographyProps) => (
+    <div className={`text-lg sm:text-xl lg:text-2xl font-semibold text-gray-900 dark:text-gray-100 ${className}`}>
+        {children}
+    </div>
+);
+
+export const StatLabel = ({ children, className = '' }: TypographyProps) => (
+    <dt className={`text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400 truncate ${className}`}>
+        {children}
+    </dt>
+);
+
+// Body Text
+export const BodyText = ({ children, className = '' }: TypographyProps) => (
+    <p className={`text-sm sm:text-base text-gray-700 dark:text-gray-300 ${className}`}>
+        {children}
+    </p>
+);
+
+export const SmallText = ({ children, className = '' }: TypographyProps) => (
+    <p className={`text-xs sm:text-sm text-gray-600 dark:text-gray-400 ${className}`}>
+        {children}
+    </p>
+);
+
+// Labels
+export const Label = ({ children, htmlFor, className = '' }: LabelProps) => (
+    <label htmlFor={htmlFor} className={`block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 ${className}`}>
+        {children}
+    </label>
+);
+
+// Form Headers with Mobile Support
+interface FormHeaderProps {
+    title: string;
+    subtitle?: string;
+    backButton?: React.ReactNode;
+    className?: string;
+}
+
+export const FormHeader = ({ title, subtitle, backButton, className = '' }: FormHeaderProps) => (
+    <div className={`space-y-3 sm:space-y-4 ${className}`}>
+        {/* Mobile: Stack vertically, Desktop: Side by side */}
+        <div className="flex flex-col space-y-3 sm:flex-row sm:items-center sm:gap-4 sm:space-y-0">
+            {backButton && (
+                <div className="flex-shrink-0">
+                    {backButton}
+                </div>
+            )}
+            <div className="min-w-0 flex-1">
+                <PageTitle className="break-words">{title}</PageTitle>
+                {subtitle && <PageSubtitle className="break-words">{subtitle}</PageSubtitle>}
+            </div>
+        </div>
+    </div>
+);
+
+// Page Container with consistent mobile spacing
+export const PageContainer = ({ children, className = '' }: TypographyProps) => (
+    <div className={`p-4 sm:p-6 lg:p-8 space-y-4 sm:space-y-6 max-w-none ${className}`}>
+        {children}
+    </div>
+);
+
+// Mobile-friendly card container
+export const MobileCard = ({ children, className = '' }: TypographyProps) => (
+    <div className={`card p-3 sm:p-4 lg:p-6 ${className}`}>
+        {children}
+    </div>
+);