/* Custom Tailwind CSS and React component styles */

:root {
  --primary-color: #6366f1;
  --accent-color: #ec4899;
  --gradient-from: #6366f1;
  --gradient-to: #ec4899;
}

/* React component containers */
.react-component {
  @apply mb-6;
}

/* Custom card styles using Tailwind */
.api-card {
  @apply bg-white dark:bg-slate-800 rounded-lg shadow-lg p-6 mb-4 border border-gray-200 dark:border-gray-700 transition-all hover:shadow-xl;
}

.api-card-header {
  @apply text-xl font-bold mb-3 text-indigo-600 dark:text-indigo-400;
}

.api-card-body {
  @apply text-gray-700 dark:text-gray-300 space-y-2;
}

/* Status badges */
.status-badge {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold;
}

.status-completed {
  @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
}

.status-pending {
  @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
}

.status-in-progress {
  @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
}

/* Gradient backgrounds */
.gradient-header {
  background: linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-to) 100%);
  @apply text-white p-8 rounded-lg mb-6;
}

/* API endpoint cards */
.endpoint-card {
  @apply border-l-4 border-indigo-500 bg-gray-50 dark:bg-slate-800 p-4 mb-3 rounded-r-lg;
}

.endpoint-method {
  @apply inline-block px-3 py-1 rounded text-white font-bold text-sm mr-3;
}

.method-get {
  @apply bg-green-600;
}

.method-post {
  @apply bg-blue-600;
}

.method-put {
  @apply bg-yellow-600;
}

.method-delete {
  @apply bg-red-600;
}

.method-patch {
  @apply bg-purple-600;
}

/* Stats grid */
.stats-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6;
}

.stat-card {
  @apply bg-gradient-to-br from-indigo-500 to-purple-600 text-white rounded-lg p-6 shadow-lg;
}

.stat-value {
  @apply text-3xl font-bold mb-2;
}

.stat-label {
  @apply text-sm opacity-90;
}

/* Feature list */
.feature-list {
  @apply space-y-3;
}

.feature-item {
  @apply flex items-start space-x-3;
}

.feature-icon {
  @apply flex-shrink-0 w-6 h-6 text-green-500;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  @apply bg-gray-100 dark:bg-slate-800;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-gray-400 dark:bg-gray-600 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500 dark:bg-gray-500;
}

/* Responsive tables */
.responsive-table {
  @apply w-full overflow-x-auto custom-scrollbar;
}

.responsive-table table {
  @apply min-w-full divide-y divide-gray-200 dark:divide-gray-700;
}

.responsive-table th {
  @apply px-6 py-3 bg-gray-50 dark:bg-slate-800 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider;
}

.responsive-table td {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-out;
}

/* Code blocks */
.md-typeset pre > code {
  @apply custom-scrollbar;
}

/* Navigation enhancements */
.md-tabs {
  @apply shadow-sm;
}

/* Hero section */
.hero-section {
  @apply gradient-header text-center;
}

.hero-title {
  @apply text-4xl md:text-5xl font-extrabold mb-4;
}

.hero-subtitle {
  @apply text-lg md:text-xl opacity-90 max-w-3xl mx-auto;
}

/* Quick links */
.quick-links {
  @apply grid grid-cols-1 md:grid-cols-3 gap-4 mb-8;
}

.quick-link-card {
  @apply bg-white dark:bg-slate-800 rounded-lg shadow-md p-6 text-center transition-all hover:shadow-xl hover:-translate-y-1 cursor-pointer border-2 border-transparent hover:border-indigo-500;
}

.quick-link-icon {
  @apply text-4xl mb-3;
}

.quick-link-title {
  @apply text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2;
}

.quick-link-description {
  @apply text-sm text-gray-600 dark:text-gray-400;
}

/* Remove footer completely */
.md-footer {
  display: none !important;
}

/* Fix sidebar cropping - ensure full height */
.md-sidebar {
  height: auto !important;
  max-height: none !important;
  padding-bottom: 2rem !important;
}

.md-sidebar__scrollwrap {
  max-height: none !important;
  overflow-y: visible !important;
}

.md-sidebar__inner {
  padding-bottom: 2rem !important;
}

/* Fix for left sidebar (navigation) */
.md-sidebar--primary {
  height: auto !important;
}

.md-sidebar--primary .md-sidebar__scrollwrap {
  max-height: none !important;
  overflow-y: auto !important;
}

/* Fix for right sidebar (table of contents) */
.md-sidebar--secondary {
  height: auto !important;
}

.md-sidebar--secondary .md-sidebar__scrollwrap {
  max-height: none !important;
  overflow-y: auto !important;
}

/* Ensure main container doesn't restrict sidebar height */
.md-main {
  min-height: 100vh;
}

.md-main__inner {
  margin-bottom: 2rem;
}