menassit/client/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 0 0% 100%;
  --foreground: 222 84% 5%;
  --muted: 210 40% 98%;
  --muted-foreground: 215 16% 47%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 84% 5%;
  --card: 0 0% 100%;
  --card-foreground: 222 84% 5%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --primary: 207 90% 54%;
  --primary-foreground: 211 100% 99%;
  --secondary: 273 69% 66%;
  --secondary-foreground: 273 100% 99%;
  --accent: 142 76% 36%;
  --accent-foreground: 142 100% 99%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --ring: 222 84% 5%;
  --radius: 0.5rem;
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5% 26%;
  --sidebar-primary: 207 90% 54%;
  --sidebar-primary-foreground: 211 100% 99%;
  --sidebar-accent: 210 40% 98%;
  --sidebar-accent-foreground: 222 84% 5%;
  --sidebar-border: 214 32% 91%;
  --sidebar-ring: 222 84% 5%;
}

/* Arabic RTL Support */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .text-left {
  text-align: right;
}

[dir="rtl"] .text-right {
  text-align: left;
}

[dir="rtl"] .ml-auto {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .mr-auto {
  margin-right: 0;
  margin-left: auto;
}

[dir="rtl"] .pl-4 {
  padding-left: 0;
  padding-right: 1rem;
}

[dir="rtl"] .pr-4 {
  padding-right: 0;
  padding-left: 1rem;
}

/* Arabic font optimization */
.arabic-text {
  font-family: 'Noto Sans Arabic', 'Arial', sans-serif;
  font-feature-settings: "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}

/* Adaptive theme CSS variables for dynamic colors */
.adaptive-theme-vars {
  --adaptive-primary: var(--primary);
  --adaptive-secondary: var(--secondary);
  --adaptive-accent: var(--accent);
  --adaptive-background: var(--background);
  --adaptive-foreground: var(--foreground);
  --adaptive-muted: var(--muted);
  --adaptive-muted-foreground: var(--muted-foreground);
  --adaptive-border: var(--border);
  --adaptive-card: var(--card);
  --adaptive-card-foreground: var(--card-foreground);
}

/* Performance optimizations */
.scroll-smooth {
  scroll-behavior: smooth;
}

.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.dark {
  --background: 222 84% 5%;
  --foreground: 210 40% 98%;
  --muted: 217 32% 17%;
  --muted-foreground: 215 20% 65%;
  --popover: 222 84% 5%;
  --popover-foreground: 210 40% 98%;
  --card: 222 84% 5%;
  --card-foreground: 210 40% 98%;
  --border: 217 32% 17%;
  --input: 217 32% 17%;
  --primary: 207 90% 54%;
  --primary-foreground: 211 100% 99%;
  --secondary: 273 69% 66%;
  --secondary-foreground: 273 100% 99%;
  --accent: 142 76% 36%;
  --accent-foreground: 142 100% 99%;
  --destructive: 0 63% 31%;
  --destructive-foreground: 0 0% 98%;
  --ring: 215 20% 65%;
  --sidebar-background: 222 84% 5%;
  --sidebar-foreground: 210 40% 98%;
  --sidebar-primary: 207 90% 54%;
  --sidebar-primary-foreground: 211 100% 99%;
  --sidebar-accent: 217 32% 17%;
  --sidebar-accent-foreground: 210 40% 98%;
  --sidebar-border: 217 32% 17%;
  --sidebar-ring: 215 20% 65%;
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground;
  }

  /* Voice processing animations */
  .voice-pulse {
    animation: voice-pulse 1.5s ease-in-out infinite;
  }

  .voice-recording {
    animation: voice-recording 1.5s ease-in-out infinite;
  }

  @keyframes voice-pulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.05);
      opacity: 0.8;
    }
  }

  @keyframes voice-recording {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    50% {
      transform: scale(1.1);
      opacity: 0.8;
      box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
  }

  /* Onboarding Tour Styles */
  .tour-highlight {
    position: relative;
    z-index: 60;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
  }

  .tour-pulse {
    animation: tour-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes tour-pulse {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
    }
    50% {
      transform: scale(1.02);
      box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.3);
    }
  }

  /* Custom scrollbars */
  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-muted;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-border rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-ring;
  }

  /* Focus styles */
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
  }

  /* Voice visualizer gradient */
  .voice-gradient {
    background: linear-gradient(45deg, hsl(var(--primary)), hsl(var(--secondary)));
  }

  /* Task priority indicators */
  .priority-high {
    @apply border-l-4 border-red-500;
  }

  .priority-medium {
    @apply border-l-4 border-yellow-500;
  }

  .priority-low {
    @apply border-l-4 border-green-500;
  }
}

/* Component-specific styles */
.dashboard-grid {
  display: grid;
  grid-template-columns: 256px 1fr;
  min-height: calc(100vh - 73px);
}

@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* Voice status indicator */
.voice-status-indicator {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

.voice-status-indicator.visible {
  transform: translateY(0);
}

/* AI chat animations */
.ai-message {
  animation: slideInFromBottom 0.3s ease-out;
}

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading states */
.skeleton {
  @apply animate-pulse bg-muted rounded;
}

.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}