/* ============================
   Shared Styles
   ============================ */

/* Tab styles */
.tab-btn {
  @apply pb-3 text-sm font-medium text-dark-400 border-b-2 border-transparent transition;
}
.tab-btn:hover {
  @apply text-dark-600 border-dark-300;
}
.active-tab {
  @apply text-primary-600 border-primary-600 !important;
}

/* Docs sidebar */
.sidebar-link {
  @apply block px-3 py-1.5 text-dark-500 rounded-md hover:bg-dark-100 hover:text-dark-800 transition text-sm;
}
.sidebar-link.active {
  @apply bg-primary-50 text-primary-700 font-medium;
}

/* Doc sections */
.doc-section {
  @apply mb-12 scroll-mt-20;
}
.doc-title {
  @apply text-xl font-bold text-dark-900 mb-3 pb-2 border-b border-dark-200;
}

/* Code blocks */
.code-block {
  @apply bg-dark-50 border border-dark-200 rounded-lg overflow-x-auto mb-4;
}
.code-block code {
  @apply block p-4 text-sm leading-relaxed;
}

/* Endpoint badge */
.endpoint-badge {
  @apply inline-block px-2.5 py-0.5 rounded text-xs font-bold uppercase tracking-wider mr-2;
}
.endpoint-badge.get {
  @apply bg-green-100 text-green-700;
}
.endpoint-badge.post {
  @apply bg-blue-100 text-blue-700;
}
.endpoint-badge.delete {
  @apply bg-red-100 text-red-700;
}

/* Parameter table */
.param-table {
  @apply bg-white border border-dark-200 rounded-lg overflow-hidden mb-4;
}
.param-table table {
  @apply w-full;
}
.param-table th {
  @apply text-left px-4 py-2 bg-dark-50 text-dark-500 font-medium text-xs uppercase tracking-wider border-b border-dark-200;
}
.param-table td {
  @apply px-4 py-2.5 border-b border-dark-100 text-dark-600;
}
.param-table code {
  @apply bg-dark-100 px-1.5 py-0.5 rounded text-xs font-mono text-dark-700;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}