edr-platform/apps/edr-passenger-web/portal/src/app/globals.css

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

@layer base {
  body {
    @apply bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 antialiased;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 bg-[rgb(20_113_76)] text-white font-semibold rounded-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
  }
  
  .btn-primary:hover {
    @apply bg-[rgb(16_89_60)];
  }
  
  .btn-secondary {
    @apply bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 font-semibold py-3 px-6 rounded-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed border-2 border-gray-200 dark:border-gray-700 shadow-md hover:shadow-lg;
  }
  
  .btn-secondary:hover {
    @apply bg-gray-50 dark:bg-gray-700 border-[rgb(20_113_76)] dark:border-[rgb(20_113_76)];
  }
  
  .btn-ghost {
    @apply text-[rgb(20_113_76)] font-medium py-2 px-4 rounded-lg transition-colors;
  }
  
  .btn-ghost:hover {
    background-color: rgba(20, 113, 76, 0.1);
  }
  
  @media (prefers-color-scheme: dark) {
    .btn-ghost:hover {
      background-color: rgba(20, 113, 76, 0.2);
    }
  }
  
  .input-field {
    @apply w-full px-4 py-3 border-2 border-gray-200 dark:border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-[rgb(20_113_76)] focus:border-transparent disabled:bg-gray-50 dark:disabled:bg-gray-800 disabled:cursor-not-allowed transition-all duration-200 text-base bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100;
  }
  
  .card {
    @apply bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-6 border border-gray-100 dark:border-gray-700;
  }
  
  .card:hover {
    @apply shadow-md;
  }
  
  .card-interactive {
    @apply bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-6 border-2 border-gray-100 dark:border-gray-700 cursor-pointer transition-all duration-200;
  }
  
  .card-interactive:hover {
    @apply border-[rgb(20_113_76)] shadow-lg;
  }
  
  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
  }
  
  .badge-success {
    @apply bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300;
  }
  
  .badge-warning {
    @apply bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300;
  }
  
  .badge-info {
    @apply bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300;
  }
  
  .section-title {
    @apply text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2;
  }
  
  .section-subtitle {
    @apply text-base md:text-lg text-gray-600 dark:text-gray-400;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  @keyframes bounce-in {
    0% {
      opacity: 0;
      transform: translateY(20px) scale(0.9);
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-20px);
    }
  }
  
  @keyframes shimmer {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes progressBar {
    0% { width: 0%; }
    50% { width: 60%; }
    100% { width: 90%; }
  }
  
  @keyframes slide-in-left {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slide-in-right {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slide-up {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  .animate-bounce-in {
    animation: bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  
  .animate-shimmer {
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
  }
  
  .animate-slide-in-left {
    animation: slide-in-left 0.5s ease-out;
  }
  
  .animate-slide-in-right {
    animation: slide-in-right 0.5s ease-out;
  }

  .animate-slide-up {
    animation: slide-up 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}