/**
 * Main Stylesheet for LLM Daily Dashboard
 * Contains documentation styles, custom utilities, and component-specific styles
 */

/* Documentation Content Styles */
.doc-content {
  @apply prose prose-slate dark:prose-invert max-w-none;
}

.doc-content h1 {
  @apply text-4xl font-bold mb-6 text-gray-900 dark:text-gray-100;
}

.doc-content h2 {
  @apply text-3xl font-semibold mt-12 mb-4 text-gray-900 dark:text-gray-100 border-b-2 border-gray-200 dark:border-gray-700 pb-2;
}

.doc-content h3 {
  @apply text-2xl font-semibold mt-8 mb-3 text-gray-900 dark:text-gray-100;
}

.doc-content p {
  @apply mb-4 text-gray-700 dark:text-gray-300 leading-relaxed;
}

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

.doc-content pre {
  @apply bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto mb-4;
}

.doc-content pre code {
  @apply bg-transparent p-0 text-gray-800 dark:text-gray-200;
}

.doc-content a {
  @apply text-purple hover:text-purple-light underline;
}

.doc-content ul,
.doc-content ol {
  @apply mb-4 ml-6;
}

.doc-content li {
  @apply mb-2 text-gray-700 dark:text-gray-300;
}

.doc-content blockquote {
  @apply border-l-4 border-purple pl-4 italic my-4 text-gray-600 dark:text-gray-400;
}

.doc-content table {
  @apply w-full mb-4 border-collapse;
}

.doc-content th {
  @apply bg-beige dark:bg-gray-700 border border-gray-300 dark:border-gray-600 px-4 py-2 text-left font-semibold;
}

.doc-content td {
  @apply border border-gray-300 dark:border-gray-600 px-4 py-2;
}

/* Sidebar Navigation Styles */
.sidebar-link {
  @apply block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 rounded-lg hover:bg-beige dark:hover:bg-gray-700 transition-colors;
}

.sidebar-link.active {
  @apply bg-purple text-white hover:bg-purple-light;
}

.sidebar-section {
  @apply mb-6;
}

.sidebar-heading {
  @apply text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2 px-4;
}