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

@import "tailwindcss";

@layer components {
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
    @apply cursor-pointer;
  }

  .documentation-content {
    @apply text-gray-800;
  }
  .documentation-content h1 {
    @apply text-2xl font-semibold text-gray-900 mt-8 mb-4;
  }
  .documentation-content h1:first-child {
    @apply mt-0;
  }
  .documentation-content h2 {
    @apply text-xl font-semibold text-gray-900 mt-8 mb-3 border-b border-gray-200 pb-1;
  }
  .documentation-content h3 {
    @apply text-lg font-semibold text-gray-900 mt-6 mb-2;
  }
  .documentation-content p {
    @apply my-3 leading-relaxed;
  }
  .documentation-content ul {
    @apply list-disc pl-6 my-3 space-y-1;
  }
  .documentation-content ol {
    @apply list-decimal pl-6 my-3 space-y-1;
  }
  .documentation-content li {
    @apply leading-relaxed;
  }
  .documentation-content a {
    @apply text-blue-600 underline hover:text-blue-800;
  }
  .documentation-content code {
    @apply bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded text-sm font-mono;
  }
  .documentation-content pre {
    @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 text-sm;
  }
  .documentation-content pre code {
    @apply bg-transparent p-0 text-inherit;
  }
  .documentation-content blockquote {
    @apply border-l-4 border-gray-300 pl-4 my-3 text-gray-600 italic;
  }
  .documentation-content table {
    @apply w-full border-collapse my-4 text-sm;
  }
  .documentation-content th,
  .documentation-content td {
    @apply border border-gray-200 px-3 py-2 text-left;
  }
  .documentation-content th {
    @apply bg-gray-50 font-semibold text-gray-900;
  }
  .documentation-content hr {
    @apply my-6 border-gray-200;
  }

  /* Post-meeting recipe LLM output (markdown from transcripts / notes) */
  .recipe-output-markdown {
    @apply text-gray-700 text-sm leading-relaxed break-words;
  }
  .recipe-output-markdown > :first-child {
    @apply mt-0;
  }
  .recipe-output-markdown p {
    @apply my-3 first:mt-0 last:mb-0;
  }
  .recipe-output-markdown h1 {
    @apply text-lg font-semibold text-gray-900 mt-6 mb-2 first:mt-0;
  }
  .recipe-output-markdown h2 {
    @apply text-base font-semibold text-gray-900 mt-6 mb-2 pb-1.5 border-b border-violet-100 first:mt-0;
  }
  .recipe-output-markdown h3 {
    @apply text-sm font-semibold text-gray-800 mt-5 mb-1.5;
  }
  .recipe-output-markdown h4 {
    @apply text-sm font-semibold text-gray-700 mt-4 mb-1;
  }
  .recipe-output-markdown ul {
    @apply list-disc pl-5 my-3 space-y-1.5;
  }
  .recipe-output-markdown ol {
    @apply list-decimal pl-5 my-3 space-y-1.5;
  }
  .recipe-output-markdown li {
    @apply leading-relaxed;
  }
  .recipe-output-markdown li > ul,
  .recipe-output-markdown li > ol {
    @apply my-1.5;
  }
  .recipe-output-markdown strong {
    @apply font-semibold text-gray-900;
  }
  .recipe-output-markdown em {
    @apply italic;
  }
  .recipe-output-markdown a {
    @apply text-violet-700 underline hover:text-violet-900;
  }
  .recipe-output-markdown code {
    @apply bg-gray-100 text-gray-800 px-1 py-0.5 rounded text-[0.8125rem] font-mono;
  }
  .recipe-output-markdown pre {
    @apply bg-gray-50 border border-gray-100 rounded-lg p-3 my-3 overflow-x-auto text-[0.8125rem];
  }
  .recipe-output-markdown pre code {
    @apply bg-transparent p-0 text-inherit;
  }
  .recipe-output-markdown blockquote {
    @apply border-l-4 border-violet-100 pl-3 my-3 text-gray-600 italic;
  }
  .recipe-output-markdown hr {
    @apply my-5 border-0 border-t border-gray-200;
  }
  .recipe-output-markdown table {
    @apply w-full border-collapse my-3 text-sm;
  }
  .recipe-output-markdown th,
  .recipe-output-markdown td {
    @apply border border-gray-200 px-2.5 py-1.5 text-left align-top;
  }
  .recipe-output-markdown th {
    @apply bg-gray-50 font-semibold text-gray-900;
  }
}