@import "actiontext.css";

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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
@layer base {
  ul {
    @apply list-disc list-inside
  }
  ol {
    @apply list-decimal list-inside
  }
}

@layer components {
  .tab-active {
    @apply border-indigo-500 text-indigo-600;
  }

  .step-active {
    @apply bg-indigo-600;
  }

  .step-complete {
    @apply bg-green-500;
  }

  .template-preview {
    @apply transition-all duration-300 ease-in-out;
  }

  .template-preview:hover {
    @apply transform scale-105 shadow-lg;
  }

  .selected-badge {
    @apply absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded-full font-medium;
  }

  /* Dashboard specific styles */
  .dashboard-card {
    @apply bg-white rounded-lg shadow hover:shadow-md transition-shadow duration-200;
  }

  .dashboard-card:hover {
    @apply transform translate-y-[-1px];
  }

  .stat-card {
    @apply bg-white rounded-lg shadow p-6 transition-all duration-200;
  }

  .stat-card:hover {
    @apply shadow-lg transform translate-y-[-2px];
  }

  .event-card {
    @apply bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer;
  }

  .event-card:hover {
    @apply transform translate-y-[-2px] shadow-xl;
  }

  .notification-dot {
    @apply absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full;
  }

  .rsvp-progress-bar {
    @apply w-16 bg-gray-200 rounded-full h-2;
  }

  .rsvp-progress-fill {
    @apply bg-green-500 h-2 rounded-full transition-all duration-300;
  }
}