/* ChapterWise Documentation Styles */

/* =============================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================================================= */

:root {
  /* Emerald color palette */
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;
  --emerald-900: #064e3b;
  
  /* Gray color palette */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  
  /* Additional color palette */
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-600: #4f46e5;
  --indigo-800: #3730a3;
  --purple-400: #c084fc;
  --purple-600: #9333ea;
  --yellow-400: #facc15;
  --yellow-600: #ca8a04;
  --orange-400: #fb923c;
  --orange-600: #ea580c;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --cyan-400: #22d3ee;
  --cyan-600: #0891b2;
  
  /* RGBA variants for transparency effects */
  --emerald-500-5: rgba(16, 185, 129, 0.05);
  --emerald-500-10: rgba(16, 185, 129, 0.1);
  --emerald-500-20: rgba(16, 185, 129, 0.2);
  --emerald-500-30: rgba(16, 185, 129, 0.3);
  --emerald-500-50: rgba(16, 185, 129, 0.5);
  --emerald-500-70: rgba(16, 185, 129, 0.7);
  
  /* Semantic colors */
  --primary-color: var(--emerald-500);
  --primary-hover: var(--emerald-600);
  --primary-dark: var(--emerald-700);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-muted: var(--gray-400);
  --border-color: var(--gray-200);
  --bg-primary: #ffffff;
  --bg-secondary: var(--gray-50);
  --bg-tertiary: var(--gray-800);
}

.dark {
  /* Dark mode overrides */
  --text-primary: #ffffff;
  --text-secondary: var(--gray-300);
  --text-muted: var(--gray-400);
  --border-color: var(--gray-700);
  --bg-primary: var(--gray-800);
  --bg-secondary: var(--gray-900);
  --bg-tertiary: var(--gray-800);
}

/* =============================================================================
   CARD STYLING PATTERNS
   ============================================================================= */

/* Standard card pattern used throughout the documentation:
   bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm
   
   For interactive cards add:
   hover:shadow-md transition-all duration-200
*/

/* Base text color inheritance */
.docs-content {
    color: var(--text-primary);
}

/* Ensure all text elements inherit properly */
.docs-content * {
    transition: color 0.2s ease;
}

/* =============================================================================
   TRANSITIONS & ANIMATIONS
   ============================================================================= */

.transition-all-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-enter {
    opacity: 0;
    transform: translateX(-100%);
}

.mobile-menu-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.3s ease-in-out;
}

/* =============================================================================
   BADGES AND LABELS
   ============================================================================= */

.docs-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* =============================================================================
   ICON STYLING
   ============================================================================= */

/* Generic icon class that maintains emerald color even inside links */
.icon {
    color: var(--emerald-500) !important;
    margin-right: 0.5rem;
}

.dark .icon {
    color: var(--emerald-400) !important;
}

/* Ensure icon color is preserved in links */
a .icon {
    color: var(--emerald-500) !important;
}

.dark a .icon {
    color: var(--emerald-400) !important;
}

.docs-badge-primary {
    background-color: var(--emerald-100);
    color: var(--emerald-800);
}

.dark .docs-badge-primary {
    background-color: rgba(6, 95, 70, 0.2);
    color: var(--emerald-300);
}

.docs-badge-secondary {
    background-color: var(--gray-100);
    color: var(--gray-800);
}

.dark .docs-badge-secondary {
    background-color: var(--gray-800);
    color: var(--gray-300);
}

.docs-badge-emerald {
    background-color: var(--emerald-200);
    color: var(--emerald-900);
    font-weight: 600;
}

.dark .docs-badge-emerald {
    background-color: rgba(16, 185, 129, 0.3);
    color: var(--emerald-200);
    font-weight: 600;
}

/* =============================================================================
   SEARCH FUNCTIONALITY
   ============================================================================= */

/* Search input enhancements */
.search-input-container {
    position: relative;
}

/* Live search dropdown */
#liveSearchDropdown {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
}

/* Search highlighting */
mark {
    background-color: #fef08a !important;
    color: #1f2937 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Dark mode search highlighting */
.dark mark {
    background-color: #fbbf24 !important;
    color: #1f2937 !important;
}

/* Search result cards */
.search-result-card {
    transition: all 0.2s ease;
}

.search-result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Live search dropdown items */
#liveSearchDropdown a {
    transition: background-color 0.15s ease;
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
}

#liveSearchDropdown a:hover {
    background-color: var(--emerald-500-5);
    border-left: 3px solid var(--emerald-500);
    padding-left: 12px;
}

#liveSearchDropdown a:last-child {
    border-bottom: none;
}

/* Search input focus states */
.search-input-focused {
    box-shadow: 0 0 0 3px var(--emerald-500-10);
    border-color: var(--emerald-500);
}

/* Search category badges */
.search-category-badge {
    background: linear-gradient(135deg, var(--emerald-500), var(--emerald-600));
    color: white;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Search no results state */
.search-no-results {
    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
    border: 2px dashed var(--gray-300);
}

.dark .search-no-results {
    background: linear-gradient(135deg, var(--gray-800), var(--gray-900));
    border-color: var(--gray-700);
}

/* Search suggestion buttons */
.search-suggestion-btn {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: var(--emerald-700);
    border: 1px solid #a7f3d0;
    transition: all 0.2s ease;
}

.search-suggestion-btn:hover {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--emerald-500-20);
}

.dark .search-suggestion-btn {
    background: linear-gradient(135deg, #064e3b, #065f46);
    color: #a7f3d0;
    border-color: var(--emerald-700);
}

.dark .search-suggestion-btn:hover {
    background: linear-gradient(135deg, #065f46, var(--emerald-700));
}

/* =============================================================================
   SCROLLBAR STYLING
   ============================================================================= */

.scrollbar-thin::-webkit-scrollbar {
    width: 4px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.5);
    border-radius: 2px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.7);
}

/* Dark mode scrollbar */
.dark .scrollbar-thin::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.5);
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.7);
}

/* =============================================================================
   DOCUMENTATION CONTENT STYLING
   ============================================================================= */

.docs-content {
    line-height: 1.6 !important;
    max-width: none !important;
    min-width: 0 !important; /* Allows flex shrinking */
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
    padding: 2.5rem !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    margin: 1rem 0 !important;
}

.dark .docs-content {
    background: #1f2937 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Add better spacing between different content types */
.docs-content > * + * {
    margin-top: 1.5rem;
}

.docs-content > h1 + *,
.docs-content > h2 + *,
.docs-content > h3 + *,
.docs-content > h4 + *,
.docs-content > h5 + *,
.docs-content > h6 + * {
    margin-top: 0.75rem;
}

/* Elegant Light Heading Styles - Matching index.html */
.docs-content h1 {
    font-size: 3rem !important;
    font-weight: 300 !important;
    line-height: 1.1 !important;
    margin-top: 0 !important;
    margin-bottom: 2rem !important;

    letter-spacing: -0.025em !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    position: relative !important;
}



.docs-content h2 {
    font-size: 2rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin-top: 4rem !important;
    margin-bottom: 2rem !important;
    background: linear-gradient(135deg, var(--emerald-500), var(--emerald-600), var(--emerald-700)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.dark .docs-content h2 {
    background: linear-gradient(135deg, var(--emerald-400), var(--emerald-100)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 300 !important;
}

.docs-content h3 {
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1.25rem !important;
    color: var(--gray-900) !important;
    border-left: none !important;
}

.dark .docs-content h3 {
    color: var(--gray-50) !important;
}

.docs-content h4 {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    color: var(--gray-900) !important;
}

.dark .docs-content h4 {
    color: var(--gray-50) !important;
}

.docs-content h5 {
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
    color: var(--gray-900) !important;
}

.dark .docs-content h5 {
    color: #f9fafb !important;
}

.docs-content h6 {
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
    color: var(--gray-500) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.dark .docs-content h6 {
    color: var(--gray-400) !important;
}

.docs-content p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
    color: var(--gray-500) !important;
    font-weight: 400 !important;
}

.dark .docs-content p {
    color: var(--gray-300) !important;
}

.docs-content ul, 
.docs-content ol {
    margin-bottom: 1.5rem !important;
    margin-left: 0 !important;
}

.docs-content ul {
    padding-left: 0 !important;
}

.docs-content ol {
    padding-left: 1.5rem !important;
}

.docs-content li {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 0.5rem !important;
    color: var(--gray-500) !important;
    font-weight: 400 !important;
}

.dark .docs-content li {
    color: #d1d5db !important;
}

.docs-content ul {
    list-style: none !important;
}

.docs-content ul li {
    position: relative !important;
    padding-left: 1.5rem !important;
}

.docs-content ul li::before {
    content: "•" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.1em !important;
    color: var(--emerald-500) !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
}

.docs-content ol {
    list-style-type: decimal !important;
    list-style-position: outside !important;
}

.docs-content ol li {
    position: relative;
    padding-left: 0.5rem;
    display: list-item !important;
}

.docs-content ol li::marker {
    color: var(--emerald-500) !important;
    font-weight: bold !important;
}

/* Nested lists */
.docs-content ul ul,
.docs-content ol ol,
.docs-content ul ol,
.docs-content ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 1rem;
}

.docs-content ul ul li::before {
    content: "◦";
    color: var(--text-secondary);
}

.docs-content a {
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.docs-content a:hover {
    color: var(--emerald-700);
}



.dark .docs-content a:hover {
    color: var(--emerald-300);
}

/* Enhanced inline code styling */
.docs-content code {
    color: var(--emerald-500);
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.025em;
}

.docs-content pre {
    margin-bottom: 1.5rem;
    position: relative;
    
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-x: auto;
    max-width: 100%;
    white-space: pre;
    word-wrap: normal;
    
    /* Responsive padding */
    @media (max-width: 640px) {
        padding: 0.75rem;
        font-size: 0.8rem;
    }
}

.docs-content pre code {
    background: transparent;
    padding: 0;
    color: #ffffff;
    border: none;
    font-size: inherit;
    font-weight: normal;
    white-space: pre;
    word-wrap: normal;
    overflow-wrap: normal;
}


.docs-content .codehilite code:hover,
.docs-content .highlight code:hover,
.docs-content pre code:hover {
    background: transparent !important;
    transform: none;
    box-shadow: none;
}

/* Table styles moved to overflow fixes section below */

.docs-content blockquote {
    border-left: 4px solid var(--gray-500);
    padding-left: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    background-color: var(--gray-50);
    font-family: 'Georgia', 'Times New Roman', serif;
    color: var(--gray-700);
    border-radius: 0 0.5rem 0.5rem 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Dark mode blockquote */
@media (prefers-color-scheme: dark) {
    .docs-content blockquote {
        background-color: var(--gray-800);
        color: var(--gray-200);
        border-left-color: var(--gray-400);
    }
}

.docs-content blockquote p {
    margin-bottom: 0;
}

.docs-content h2:first-child,
.docs-content h3:first-child {
    margin-top: 0;
}

.docs-content img {
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    height: auto;
    border: 1px solid rgba(229, 231, 235, 0.5);
}

.dark .docs-content img {
    border-color: rgba(55, 65, 81, 0.5);
}

.docs-content hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, var(--emerald-500), var(--emerald-600));
    margin: 4rem 0 4rem 0;
    border-radius: 2px;
}

.dark .docs-content hr {
    background: linear-gradient(90deg, var(--emerald-400), var(--emerald-500));
}

.docs-content .highlight {
    background-color: var(--emerald-500-10);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
}

.dark .docs-content .highlight {
    background-color: rgba(16, 185, 129, 0.2);
}

/* Strong and emphasis styling */
.docs-content strong {
    font-weight: 600 !important;
    color: #111827 !important;
}

.dark .docs-content strong {
    color: #f9fafb !important;
}

.docs-content em {
    font-style: italic !important;
    color: #6b7280 !important;
}

.dark .docs-content em {
    color: #d1d5db !important;
}

/* =============================================================================
   CODE BLOCK ENHANCEMENTS
   ============================================================================= */

/* Copy button */
.copy-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.75rem;
    background-color: rgba(55, 65, 81, 0.8);
    color: white;
    border-radius: 0.375rem;
    border: 1px solid rgba(75, 85, 99, 0.5);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.copy-button:hover {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.dark .copy-button {
    background-color: rgba(75, 85, 99, 0.8);
}

.dark .copy-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.copy-button.copied {
    background-color: rgba(16, 185, 129, 0.8);
    border-color: rgba(110, 231, 183, 0.5);
    animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Language indicator */
.language-indicator {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.25rem 0.75rem;
    background-color: rgba(55, 65, 81, 0.8);
    color: white;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(4px);
}

.dark .language-indicator {
    background-color: rgba(75, 85, 99, 0.8);
}

/* =============================================================================
   MODULE CARDS AND SPECIAL ELEMENTS
   ============================================================================= */

.module-card {
    background-color: var(--bg-primary);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.module-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.module-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--emerald-500), var(--emerald-600));
}

.module-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.module-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.625;
}

/* Credit cost indicator */
.credit-cost {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: #e0e7ff;
    color: var(--indigo-800);
}

.dark .credit-cost {
    background-color: rgba(58, 45, 163, 0.3);
    color: var(--indigo-300);
}

/* =============================================================================
   ALERTS AND CALLOUTS
   ============================================================================= */

.alert {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    border-left: 4px solid;
}

.alert-info {
    background-color: #dbeafe;
    border-color: var(--blue-500);
    color: #1e3a8a;
}

.dark .alert-info {
    background-color: rgba(30, 58, 138, 0.2);
    color: #93c5fd;
}

.alert-warning {
    background-color: #fefce8;
    border-color: var(--yellow-600);
    color: #92400e;
}

.dark .alert-warning {
    background-color: rgba(146, 64, 14, 0.2);
    color: #fcd34d;
}

.alert-error {
    background-color: #fef2f2;
    border-color: var(--red-500);
    color: #991b1b;
}

.dark .alert-error {
    background-color: rgba(153, 27, 27, 0.2);
    color: #fca5a5;
}

.alert-success {
    background-color: #f0fdf4;
    border-color: var(--emerald-500);
    color: #14532d;
}

.dark .alert-success {
    background-color: rgba(21, 83, 45, 0.2);
    color: #86efac;
}

/* =============================================================================
   RESPONSIVE IMPROVEMENTS
   ============================================================================= */

@media (max-width: 768px) {
    .docs-content {
        font-size: 0.875rem;
        line-height: 1.6;
    }
    
    .docs-content h1 {
        font-size: 1.5rem;
    }
    
    .docs-content h2 {
        font-size: 1.25rem;
    }
    
    .docs-content h3 {
        font-size: 1.125rem;
    }
    
    .docs-content pre {
        font-size: 0.75rem;
    }
}

/* =============================================================================
   SYNTAX HIGHLIGHTING - CODEHILITE & PRISM
   ============================================================================= */

/* Enhanced code block styling */
.docs-content .codehilite,
.docs-content .highlight,
.docs-content pre[class*="language-"] {
    position: relative;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-200);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background: #1e293b;
    overflow: hidden;
    
    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        border-color: #374151;
    }
    margin: 1.5rem 0;
    transition: all 0.2s ease;
    position: relative;
}



.dark .docs-content .codehilite,
.dark .docs-content .highlight,
.dark .docs-content pre[class*="language-"] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    border-color: rgba(55, 65, 81, 0.5);
}

/* Code block header styling - REMOVED GREEN BAR */

/* Code content */
.docs-content .codehilite pre,
.docs-content .highlight pre,
.docs-content pre,
.docs-content code[class*="language-"],
.docs-content pre[class*="language-"] {
    margin: 0;
    background: transparent;
    color: var(--gray-800);
    
    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        color: var(--gray-200);
    }
    overflow-x: auto;
    
    /* Responsive padding for mobile */
    @media (max-width: 640px) {
        padding: 0.75rem;
        font-size: 0.8rem;
    }
    border: none;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.375rem;
    box-shadow: none;
    white-space: pre;
    tab-size: 4;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    /* Enhanced scrollbar for code blocks */
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 185, 129, 0.3) transparent;
}

.docs-content .codehilite pre::-webkit-scrollbar,
.docs-content .highlight pre::-webkit-scrollbar {
    height: 8px;
}

.docs-content .codehilite pre::-webkit-scrollbar-track,
.docs-content .highlight pre::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.docs-content .codehilite pre::-webkit-scrollbar-thumb,
.docs-content .highlight pre::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.5);
    border-radius: 4px;
}

.docs-content .codehilite pre::-webkit-scrollbar-thumb:hover,
.docs-content .highlight pre::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7);
}

/* =============================================================================
   CODEHILITE SYNTAX HIGHLIGHTING THEME
   ============================================================================= */

/* Comments */
.highlight .c,    /* Comment */
.highlight .cm,   /* Comment.Multiline */
.highlight .cp,   /* Comment.Preproc */
.highlight .c1,   /* Comment.Single */
.highlight .cs {  /* Comment.Special */
    color: var(--gray-500);
    font-style: italic;
}

.dark .highlight .c,
.dark .highlight .cm,
.dark .highlight .cp,
.dark .highlight .c1,
.dark .highlight .cs {
    color: var(--gray-400);
}

/* Keywords */
.highlight .k,    /* Keyword */
.highlight .kc,   /* Keyword.Constant */
.highlight .kd,   /* Keyword.Declaration */
.highlight .kn,   /* Keyword.Namespace */
.highlight .kp,   /* Keyword.Pseudo */
.highlight .kr,   /* Keyword.Reserved */
.highlight .kt {  /* Keyword.Type */
    color: var(--purple-600);
    font-weight: 600;
}

.dark .highlight .k,
.dark .highlight .kc,
.dark .highlight .kd,
.dark .highlight .kn,
.dark .highlight .kp,
.dark .highlight .kr,
.dark .highlight .kt {
    color: var(--purple-400);
}

/* Strings */
.highlight .s,    /* Literal.String */
.highlight .sa,   /* Literal.String.Affix */
.highlight .sb,   /* Literal.String.Backtick */
.highlight .sc,   /* Literal.String.Char */
.highlight .dl,   /* Literal.String.Delimiter */
.highlight .sd,   /* Literal.String.Doc */
.highlight .s2,   /* Literal.String.Double */
.highlight .se,   /* Literal.String.Escape */
.highlight .sh,   /* Literal.String.Heredoc */
.highlight .si,   /* Literal.String.Interpol */
.highlight .sx,   /* Literal.String.Other */
.highlight .sr,   /* Literal.String.Regex */
.highlight .s1,   /* Literal.String.Single */
.highlight .ss {  /* Literal.String.Symbol */
    color: var(--emerald-600);
}

.dark .highlight .s,
.dark .highlight .sa,
.dark .highlight .sb,
.dark .highlight .sc,
.dark .highlight .dl,
.dark .highlight .sd,
.dark .highlight .s2,
.dark .highlight .se,
.dark .highlight .sh,
.dark .highlight .si,
.dark .highlight .sx,
.dark .highlight .sr,
.dark .highlight .s1,
.dark .highlight .ss {
    color: var(--emerald-400);
}

/* Numbers */
.highlight .m,    /* Literal.Number */
.highlight .mb,   /* Literal.Number.Bin */
.highlight .mf,   /* Literal.Number.Float */
.highlight .mh,   /* Literal.Number.Hex */
.highlight .mi,   /* Literal.Number.Integer */
.highlight .ml,   /* Literal.Number.Integer.Long */
.highlight .mo {  /* Literal.Number.Oct */
    color: var(--orange-600);
    font-weight: 500;
}

.dark .highlight .m,
.dark .highlight .mb,
.dark .highlight .mf,
.dark .highlight .mh,
.dark .highlight .mi,
.dark .highlight .ml,
.dark .highlight .mo {
    color: var(--orange-400);
}

/* Names and identifiers */
.highlight .n,    /* Name */
.highlight .na,   /* Name.Attribute */
.highlight .nb,   /* Name.Builtin */
.highlight .bp,   /* Name.Builtin.Pseudo */
.highlight .nc,   /* Name.Class */
.highlight .no,   /* Name.Constant */
.highlight .nd,   /* Name.Decorator */
.highlight .ni,   /* Name.Entity */
.highlight .ne,   /* Name.Exception */
.highlight .nf,   /* Name.Function */
.highlight .nl,   /* Name.Label */
.highlight .nn,   /* Name.Namespace */
.highlight .nx,   /* Name.Other */
.highlight .py,   /* Name.Property */
.highlight .nt,   /* Name.Tag */
.highlight .nv,   /* Name.Variable */
.highlight .vc,   /* Name.Variable.Class */
.highlight .vg,   /* Name.Variable.Global */
.highlight .vi {  /* Name.Variable.Instance */
    color: var(--blue-600);
}

.dark .highlight .n,
.dark .highlight .na,
.dark .highlight .nb,
.dark .highlight .bp,
.dark .highlight .nc,
.dark .highlight .no,
.dark .highlight .nd,
.dark .highlight .ni,
.dark .highlight .ne,
.dark .highlight .nf,
.dark .highlight .nl,
.dark .highlight .nn,
.dark .highlight .nx,
.dark .highlight .py,
.dark .highlight .nt,
.dark .highlight .nv,
.dark .highlight .vc,
.dark .highlight .vg,
.dark .highlight .vi {
    color: var(--blue-400);
}

/* Functions and classes - special highlighting */
.highlight .nf {  /* Name.Function */
    color: var(--cyan-600);
    font-weight: 500;
}

.dark .highlight .nf {
    color: var(--cyan-400);
}

.highlight .nc {  /* Name.Class */
    color: var(--yellow-600);
    font-weight: 500;
}

.dark .highlight .nc {
    color: var(--yellow-400);
}

/* Operators */
.highlight .o,    /* Operator */
.highlight .ow {  /* Operator.Word */
    color: var(--gray-700);
    font-weight: 500;
}

.dark .highlight .o,
.dark .highlight .ow {
    color: var(--gray-300);
}

/* Punctuation */
.highlight .p {   /* Punctuation */
    color: var(--gray-600);
}

.dark .highlight .p {
    color: var(--gray-400);
}

/* JSON-specific highlighting */
.highlight .nt {  /* JSON keys */
    color: var(--blue-600);
    font-weight: 500;
}

.dark .highlight .nt {
    color: var(--blue-400);
}

/* Error highlighting */
.highlight .err { /* Error */
    color: var(--red-600);
    background-color: #fef2f2;
    border-radius: 0.25rem;
    padding: 0 0.25rem;
}

.dark .highlight .err {
    color: var(--red-400);
    background-color: rgba(185, 28, 28, 0.2);
}

/* Generic highlighting */
.highlight .g,    /* Generic */
.highlight .gd,   /* Generic.Deleted */
.highlight .ge,   /* Generic.Emph */
.highlight .gr,   /* Generic.Error */
.highlight .gh,   /* Generic.Heading */
.highlight .gi,   /* Generic.Inserted */
.highlight .gl,   /* Generic.Lineno */
.highlight .gp,   /* Generic.Prompt */
.highlight .gs,   /* Generic.Strong */
.highlight .gu,   /* Generic.Subheading */
.highlight .gt {  /* Generic.Traceback */
    color: var(--gray-600);
}

.dark .highlight .g,
.dark .highlight .gd,
.dark .highlight .ge,
.dark .highlight .gr,
.dark .highlight .gh,
.dark .highlight .gi,
.dark .highlight .gl,
.dark .highlight .gp,
.dark .highlight .gs,
.dark .highlight .gu,
.dark .highlight .gt {
    color: var(--gray-400);
}

/* Line numbers */
.highlight .linenos {
    color: var(--gray-400);
    text-align: right;
    padding-right: 1rem;
    border-right: 1px solid var(--gray-300);
    margin-right: 1rem;
    user-select: none;
    font-size: 0.8rem;
}

.dark .highlight .linenos {
    color: var(--gray-500);
    border-right-color: var(--gray-600);
}

/* Legacy token support for other highlighting libraries */
.token.property,
.token.class-name,
.token.constant,
.token.symbol {
    color: var(--emerald-500);
    font-weight: 500;
}

.token.string { 
    color: var(--emerald-300);
}

.token.number {
    color: var(--emerald-500);
}

.token.boolean {
    color: var(--emerald-600);
}

.token.null {
    color: var(--emerald-700);
}

.token.comment {
    color: var(--emerald-400);
    font-style: italic;
}

.token.keyword {
    color: var(--emerald-600);
    font-weight: 600;
}

.token.function {
    color: var(--emerald-500);
    font-weight: 500;
}

.token.operator {
    color: var(--emerald-700);
}

/* Dark mode for tokens */
@media (prefers-color-scheme: dark) {
    .token.property,
    .token.class-name,
    .token.constant,
    .token.symbol {
        color: var(--emerald-200);
    }
    
    .token.string {
        color: var(--emerald-500);
    }
    
    .token.number {
        color: var(--emerald-400);
    }
    
    .token.boolean {
        color: var(--emerald-400);
    }
    
    .token.null {
        color: var(--emerald-500);
    }
    
    .token.comment {
        color: var(--emerald-500);
    }
    
    .token.keyword {
        color: var(--emerald-400);
    }
    
    .token.function {
        color: var(--emerald-400);
    }
    
    .token.operator {
        color: var(--emerald-500);
    }
}

/* =============================================================================
   ADDITIONAL LANGUAGE-SPECIFIC ENHANCEMENTS
   ============================================================================= */

/* Python-specific highlighting */
.highlight .k.kn {  /* import, from */
    color: var(--indigo-600);
}

.dark .highlight .k.kn {
    color: var(--indigo-400);
}

.highlight .k.kc {  /* True, False, None */
    color: var(--red-600);
    font-weight: 600;
}

.dark .highlight .k.kc {
    color: var(--red-400);
}

/* JavaScript/TypeScript specific */
.highlight .k.kd {  /* const, let, var */
    color: var(--blue-600);
}

.dark .highlight .k.kd {
    color: var(--blue-400);
}

/* JSON specific improvements */
.highlight .p.indicator {  /* JSON brackets and braces */
    color: var(--gray-500);
    font-weight: bold;
}

.dark .highlight .p.indicator {
    color: var(--gray-400);
}

/* Shell/Bash specific */
.highlight .gp {  /* Shell prompt */
    color: var(--emerald-600);
    font-weight: bold;
}

.dark .highlight .gp {
    color: var(--emerald-400);
}

/* CSS specific */
.highlight .nc {  /* CSS class names */
    color: var(--yellow-600);
}

.dark .highlight .nc {
    color: var(--yellow-400);
}

.highlight .nd {  /* CSS pseudo-elements */
    color: var(--purple-600);
}

.dark .highlight .nd {
    color: var(--purple-400);
}

/* HTML/XML specific */
.highlight .nt {  /* HTML tags */
    color: var(--red-600);
    font-weight: 500;
}

.dark .highlight .nt {
    color: var(--red-400);
}

.highlight .na {  /* HTML attributes */
    color: var(--blue-600);
}

.dark .highlight .na {
    color: var(--blue-400);
}

/* SQL specific */
.highlight .k {  /* SQL keywords */
    color: var(--purple-600);
    font-weight: bold;
    text-transform: uppercase;
}

.dark .highlight .k {
    color: var(--purple-400);
}

/* Enhanced readability for multi-line code */
.docs-content .codehilite pre code,
.docs-content .highlight pre code {
    line-height: 1.5;
    tab-size: 4;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    white-space: pre;
    word-wrap: normal;
}

/* Beautiful selection colors in code blocks */
.docs-content .codehilite pre ::selection,
.docs-content .highlight pre ::selection {
    background: rgba(16, 185, 129, 0.2);
    color: inherit;
}

.docs-content .codehilite pre ::-moz-selection,
.docs-content .highlight pre ::-moz-selection {
    background: rgba(16, 185, 129, 0.2);
    color: inherit;
}



/* =============================================================================
   OVERFLOW AND LAYOUT FIXES
   ============================================================================= */

/* Ensure tables don't overflow */
.docs-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    background-color: white;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid var(--gray-200);
    max-width: 100%;
    overflow-x: auto;
    display: block;
    white-space: nowrap;
}

.dark .docs-content table {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
}

.docs-content table thead,
.docs-content table tbody,
.docs-content table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.docs-content table th, 
.docs-content table td {
    border: 1px solid var(--gray-200);
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top;
    white-space: normal;
    word-wrap: break-word;
}

.dark .docs-content table th,
.dark .docs-content table td {
    border-color: var(--gray-700);
}

.docs-content table th {
    background-color: var(--gray-50);
    font-weight: 600;
    color: var(--gray-900);
    font-size: 0.95rem;
}

.dark .docs-content table th {
    background-color: var(--gray-900);
    color: white;
}

.docs-content table td {
    color: var(--gray-700);
    font-size: 1rem;
    line-height: 1.6;
}

.dark .docs-content table td {
    color: var(--gray-100);
}

/* Container fixes for overflow */
.docs-content > * {
    max-width: 100%;
    overflow-wrap: break-word;
}

/* Ensure long URLs don't break layout */
.docs-content a {
    word-break: break-all;
    overflow-wrap: break-word;
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
    .docs-content {
        color: black !important;
        background: white !important;
    }
    
    .docs-content a {
        color: #0d7377 !important;
        text-decoration: underline !important;
    }
    
    .docs-content pre {
        background: var(--gray-50) !important;
        color: var(--gray-800) !important;
        border: 1px solid var(--gray-200) !important;
    }
} 



/* Documentation button links */
.docs-btn,
.docs-btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0.5rem 0;
    border: 2px solid transparent;
}

.docs-btn {
    background: linear-gradient(135deg, #10b981, var(--emerald-600));
    color: white;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.docs-btn:hover {
    background: linear-gradient(135deg, var(--emerald-600), var(--emerald-700));
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
    color: white;
    text-decoration: none;
}

.docs-btn-secondary {
    background: transparent;
    color: var(--emerald-500);
    border-color: var(--emerald-500);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.1);
}

.docs-btn-secondary:hover {
    background: var(--emerald-500);
    color: white !important;
    border-color: var(--emerald-500);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
    text-decoration: none;
}

.dark .docs-btn-secondary {
    background: transparent;
    color: var(--emerald-400);
    border-color: var(--emerald-400);
}

.dark .docs-btn-secondary:hover {
    background: var(--emerald-400);
    color: white;
    border-color: var(--emerald-400);
    text-decoration: none;
}

/* Arrow icons for buttons */
.docs-btn .arrow,
.docs-btn-secondary .arrow {
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}

.docs-btn:hover .arrow,
.docs-btn-secondary:hover .arrow {
    transform: translateX(2px);
}

/* =============================================================================
   SCROLLSPY (TABLE OF CONTENTS) STYLES
   ============================================================================= */

/* Scrollspy container */
.scrollspy-container {
    transition: all 0.3s ease;
}

.scrollspy-container:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Scrollspy navigation items */
.scrollspy-item {
    will-change: transform;
    transform: translateZ(0);
    overflow: hidden;
}

.scrollspy-item:hover {
    transform: translateX(2px);
}

/* Line clamp for long headings */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Custom scrollbar for scrollspy nav */
.scrollspy-nav {
    overflow-x: hidden !important;
}

.scrollspy-nav::-webkit-scrollbar {
    width: 4px;
}

.scrollspy-nav::-webkit-scrollbar-track {
    background: transparent;
}

.scrollspy-nav::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.3);
    border-radius: 2px;
}

.scrollspy-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.5);
}

/* Highlight effect when scrolling to heading */
.scrollspy-highlight {
    animation: scrollspy-pulse 1s ease-out;
}

@keyframes scrollspy-pulse {
    0% {
        background-color: rgba(16, 185, 129, 0.2);
    }
    100% {
        background-color: transparent;
    }
}

.dark .scrollspy-highlight {
    animation: scrollspy-pulse-dark 1s ease-out;
}

@keyframes scrollspy-pulse-dark {
    0% {
        background-color: rgba(16, 185, 129, 0.3);
    }
    100% {
        background-color: transparent;
    }
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Ensure headings have scroll margin for fixed header */
.docs-content h2,
.docs-content h3,
.docs-content h4 {
    scroll-margin-top: 6rem;
}