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


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

  .sidebar-link-active {
    @apply bg-gray-200;
  }

  /* Exercise Content Styles */
  .exercise-content {
    @apply text-gray-800 leading-relaxed;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  .exercise-content h1 {
    @apply text-3xl font-bold text-gray-900 mb-6 mt-8 first:mt-0;
    line-height: 1.2;
  }

  .exercise-content h2 {
    @apply text-2xl font-semibold text-gray-900 mb-4 mt-8 first:mt-0;
    line-height: 1.3;
  }

  .exercise-content h3 {
    @apply text-xl font-semibold text-gray-900 mb-3 mt-6 first:mt-0;
    line-height: 1.4;
  }

  .exercise-content h4 {
    @apply text-lg font-medium text-gray-900 mb-2 mt-4 first:mt-0;
    line-height: 1.4;
  }

  .exercise-content p {
    @apply mb-4 text-base leading-7;
    color: #374151;
  }

  .exercise-content ul {
    @apply mb-6 space-y-2;
  }

  .exercise-content ol {
    @apply mb-6 space-y-2;
  }

  .exercise-content li {
    @apply text-base leading-7;
    color: #374151;
  }

  .exercise-content ul li {
    @apply relative pl-6;
  }

  .exercise-content ul li::before {
    content: '';
    @apply absolute left-0 top-3 w-2 h-2 bg-blue-500 rounded-full;
  }

  .exercise-content ol {
    @apply list-none;
    counter-reset: list-counter;
  }

  .exercise-content ol li {
    @apply relative pl-6;
    counter-increment: list-counter;
  }

  .exercise-content ol li::before {
    content: counter(list-counter) ".";
    @apply absolute left-0 top-0 font-medium text-gray-900;
  }

  /* Nested list styling */
  .exercise-content ul ul,
  .exercise-content ol ol,
  .exercise-content ul ol,
  .exercise-content ol ul {
    @apply mt-2 mb-2;
  }

  .exercise-content ul ul li::before {
    @apply bg-blue-400 w-1.5 h-1.5;
  }

  .exercise-content ul ul li {
    @apply pl-4;
  }

  .exercise-content ol ol {
    @apply list-none;
    counter-reset: nested-counter;
  }

  .exercise-content ol ol li {
    @apply relative pl-8;
    counter-increment: nested-counter;
  }

  .exercise-content ol ol li::before {
    content: counter(nested-counter) ".";
    @apply absolute left-0 top-0 font-medium text-gray-900;
  }

  /* Table styling */
  .exercise-content table {
    @apply w-full border-collapse border border-gray-300 my-6;
  }

  .exercise-content th {
    @apply bg-gray-50 border border-gray-300 px-4 py-2 text-left font-semibold text-gray-900;
  }

  .exercise-content td {
    @apply border border-gray-300 px-4 py-2 text-gray-700;
  }

  .exercise-content tr:nth-child(even) {
    @apply bg-gray-50;
  }

  /* Definition lists */
  .exercise-content dl {
    @apply my-6;
  }

  .exercise-content dt {
    @apply font-semibold text-gray-900 mb-1;
  }

  .exercise-content dd {
    @apply text-gray-700 mb-4 ml-4;
  }

  /* Highlight boxes for important information */
  .exercise-content .highlight-box {
    @apply bg-yellow-50 border-l-4 border-yellow-400 p-4 my-6 rounded-r-lg;
  }

  .exercise-content .highlight-box p {
    @apply mb-0 text-yellow-800;
  }

  /* Warning boxes */
  .exercise-content .warning-box {
    @apply bg-red-50 border-l-4 border-red-400 p-4 my-6 rounded-r-lg;
  }

  .exercise-content .warning-box p {
    @apply mb-0 text-red-800;
  }

  /* Success boxes */
  .exercise-content .success-box {
    @apply bg-green-50 border-l-4 border-green-400 p-4 my-6 rounded-r-lg;
  }

  .exercise-content .success-box p {
    @apply mb-0 text-green-800;
  }

  .exercise-content blockquote {
    @apply border-l-4 border-blue-200 bg-blue-50 pl-6 py-4 my-6 rounded-r-lg;
  }

  .exercise-content blockquote p {
    @apply mb-0 text-gray-700 italic;
  }

  .exercise-content strong {
    @apply font-semibold text-gray-900;
  }

  .exercise-content em {
    @apply italic text-gray-700;
  }

  .exercise-content code {
    @apply bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono;
  }

  .exercise-content pre {
    @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-6;
  }

  .exercise-content pre code {
    @apply bg-transparent text-gray-100 p-0;
  }

  .exercise-content a {
    @apply text-blue-600 hover:text-blue-800 underline transition-colors duration-200;
  }

  .exercise-content img {
    @apply rounded-lg shadow-md my-6 max-w-full h-auto;
  }

  .exercise-content hr {
    @apply border-gray-200 my-8;
  }

  /* Special styling for exercise-specific content */
  .exercise-content .trix-content {
    @apply text-gray-800;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .exercise-content h1 {
      @apply text-2xl mb-4;
    }
    
    .exercise-content h2 {
      @apply text-xl mb-3;
    }
    
    .exercise-content h3 {
      @apply text-lg mb-2;
    }
    
    .exercise-content p {
      @apply text-sm leading-6;
    }
    
    .exercise-content li {
      @apply text-sm leading-6;
    }
  }
}

@layer utilities {
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  .delay-1000 {
    animation-delay: 1s;
  }
  
  .delay-2000 {
    animation-delay: 2s;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}