/* ModernDocs Theme - Main Styles */

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Remove focus outlines globally */
*:focus,
*:focus-visible,
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove tap highlight on mobile */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Root Variables */
:root {
    /* Mintlify-inspired Colors */
    --primary-50: #f0f9ff;
    --primary-100: #e0f2fe;
    --primary-200: #bae6fd;
    --primary-300: #7dd3fc;
    --primary-400: #38bdf8;
    --primary-500: #0ea5e9;
    --primary-600: #0284c7;
    --primary-700: #0369a1;
    --primary-800: #075985;
    --primary-900: #0c4a6e;
    
    /* Mintlify Accent Colors */
    --accent-50: #fdf4ff;
    --accent-100: #fae8ff;
    --accent-200: #f5d0fe;
    --accent-300: #f0abfc;
    --accent-400: #e879f9;
    --accent-500: #d946ef;
    --accent-600: #c026d3;
    --accent-700: #a21caf;
    --accent-800: #86198f;
    --accent-900: #701a75;
    
    /* Icon colors */
    --icon-blue: #0ea5e9;
    --icon-blue-hover: #0284c7;
    --icon-green: #22c55e;
    --icon-green-hover: #16a34a;
    --icon-purple: #d946ef;
    --icon-purple-hover: #c026d3;
    
    --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;
    
    --white: #ffffff;
    --black: #000000;
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Fira Code', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    
    /* Sidebar colors */
    --sidebar-bg: #ffffff;
    --sidebar-border: #e5e7eb;
    --sidebar-text: #374151;
    --sidebar-text-muted: #6b7280;
    --sidebar-hover: #f3f4f6;
    --sidebar-active: #0ea5e9;
    --sidebar-active-bg: #f0f9ff;
    --sidebar-scrollbar-track: #f1f5f9;
    --sidebar-scrollbar-thumb: #cbd5e1;
    --sidebar-scrollbar-thumb-hover: #94a3b8;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-xs: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* Transitions */
    --transition: all 0.2s ease;
    
    /* Component-specific variables for light theme */
    --btn-primary-bg: rgba(255, 255, 255, 0.1);
    --btn-primary-border: rgba(255, 255, 255, 0.2);
    --btn-primary-color: #374151;
    --btn-primary-hover-bg: rgba(255, 255, 255, 0.15);
    --btn-primary-hover-border: rgba(255, 255, 255, 0.3);
    --btn-primary-hover-color: #111827;
    
    --app-card-bg: linear-gradient(135deg, var(--white) 0%, var(--gray-50) 100%);
    --app-card-border: var(--gray-200);
    --app-card-title-color: var(--gray-900);
    --app-card-subtitle-color: var(--gray-500);
    --app-card-description-color: var(--gray-600);
    
    --language-dropdown-bg: rgba(255, 255, 255, 0.1);
    --language-dropdown-border: rgba(255, 255, 255, 0.2);
    --language-dropdown-color: #374151;
    --language-dropdown-hover-bg: rgba(255, 255, 255, 0.15);
    --language-dropdown-hover-border: rgba(255, 255, 255, 0.3);
    --language-dropdown-hover-color: #111827;
    --language-dropdown-menu-bg: #ffffff;
    --language-dropdown-menu-border: #e5e7eb;
    --language-dropdown-item-color: #374151;
    --language-dropdown-item-border: #f3f4f6;
    --language-dropdown-item-hover-bg: #f9fafb;
    --language-dropdown-item-hover-color: #1f2937;
    
    --theme-toggle-bg: rgba(255, 255, 255, 0.1);
    --theme-toggle-border: rgba(255, 255, 255, 0.2);
    --theme-toggle-color: #374151;
    --theme-toggle-hover-bg: rgba(255, 255, 255, 0.15);
    --theme-toggle-hover-border: rgba(255, 255, 255, 0.3);
    --theme-toggle-hover-color: #111827;
    
    --search-input-bg: var(--white);
    --search-input-border: var(--gray-300);
    --search-input-color: var(--gray-900);
    --search-input-focus-border: var(--primary-500);
    
    --type-selector-bg: var(--white);
    --type-selector-border: var(--gray-300);
    --type-selector-color: var(--gray-900);
    --type-selector-hover-bg: var(--gray-50);
    --type-selector-hover-border: var(--gray-400);
    --type-selector-menu-bg: var(--white);
    --type-selector-menu-border: var(--gray-300);
    --type-selector-item-color: var(--gray-900);
    --type-selector-item-border: var(--gray-100);
    --type-selector-item-hover-bg: var(--gray-50);
    --type-selector-item-selected-bg: var(--primary-50);
    --type-selector-item-selected-color: var(--primary-700);
    
    --nav-section-title-color: var(--gray-500);
    --nav-section-header-hover-bg: var(--gray-50);
    --nav-link-color: var(--gray-600);
    --nav-link-hover-color: var(--gray-900);
    --nav-link-hover-bg: var(--gray-50);
    --nav-link-active-color: var(--primary-600);
    --nav-link-active-bg: var(--primary-50);
    --nav-link-main-bg: var(--gray-50);
    --nav-link-main-color: var(--gray-900);
    --nav-link-main-border: var(--gray-200);
    
    --feature-grid-bg: var(--white);
    --feature-grid-border: var(--gray-200);
    --feature-grid-hover-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --feature-grid-title-color: var(--gray-900);
    --feature-grid-text-color: var(--gray-600);
    
    --cta-bg: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 50%, var(--accent-600) 100%);
    --cta-title-color: var(--white);
    --cta-subtitle-color: rgba(255, 255, 255, 0.9);
    
    --footer-bg: linear-gradient(135deg, var(--primary-50) 0%, var(--accent-50) 50%, var(--gray-50) 100%);
    --footer-border: var(--gray-200);
    --footer-link-color: var(--gray-600);
    --footer-link-hover-color: var(--primary-600);
    --footer-link-focus-color: var(--primary-400);
    
    --toc-bg: transparent;
    --toc-link-color: var(--gray-600);
    --toc-link-hover-color: var(--primary-600);
    --toc-link-hover-border: var(--primary-300);
    --toc-link-active-color: var(--primary-700);
    --toc-link-active-border: var(--primary-500);
    
    --main-bg: #ffffff;
    --prose-bg: #ffffff;
    
    --mobile-sidebar-bg: var(--white);
    --mobile-sidebar-header-border: var(--gray-200);
    --mobile-close-color: var(--gray-500);
    --mobile-close-hover-bg: var(--gray-100);
    --mobile-close-hover-color: var(--gray-700);
    
    --get-started-bg: rgba(255, 255, 255, 0.95);
    --get-started-border: rgba(229, 231, 235, 0.5);
    --get-started-title-color: #1f2937;
    --get-started-text-color: #6b7280;
    --get-started-button-bg: #1f2937;
    --get-started-button-hover-bg: #374151;
    
    /* Body and layout variables for light theme */
    --body-bg: #ffffff;
    --body-before-bg: none;
    --main-bg: #ffffff;
    --prose-bg: #ffffff;
    
    /* TOC scrollbar variables for light theme */
    --toc-scrollbar-color: transparent transparent;
    --toc-scrollbar-scrolling-color: rgba(156, 163, 175, 0.4) transparent;
    --toc-scrollbar-thumb-bg: transparent;
    --toc-scrollbar-thumb-scrolling-bg: rgba(156, 163, 175, 0.4);
    --toc-scrollbar-thumb-hover-bg: rgba(156, 163, 175, 0.6);
    
    /* Sidebar component variables for light theme */
    --sidebar-mintlify-bg: #ffffff;
    --sidebar-mintlify-border: rgba(229, 231, 235, 0.3);
    --sidebar-logo-text-color: var(--app-card-title-color);
    --sidebar-logo-text-hover-color: var(--primary-600);
    --sidebar-search-input-bg: var(--white);
    --sidebar-search-input-border: var(--gray-300);
    --sidebar-search-input-color: var(--gray-900);
    --sidebar-type-selector-bg: var(--white);
    --sidebar-type-selector-border: var(--gray-300);
    --sidebar-type-selector-color: var(--gray-900);
    --sidebar-nav-section-title-color: var(--app-card-subtitle-color);
    --sidebar-nav-section-header-hover-bg: var(--gray-50);
    --sidebar-nav-item-color: var(--app-card-description-color);
    --sidebar-nav-item-hover-color: var(--app-card-title-color);
    --sidebar-nav-item-hover-bg: var(--gray-50);
    --sidebar-nav-item-active-color: var(--primary-600);
    --sidebar-nav-item-active-bg: var(--primary-50);
    --sidebar-mobile-bg: var(--white);
    --sidebar-mobile-header-border: var(--gray-200);
    --sidebar-mobile-close-color: var(--gray-500);
    --sidebar-mobile-close-hover-bg: var(--gray-100);
    --sidebar-mobile-close-hover-color: var(--gray-700);
    
    /* Feature component variables for light theme */
    --feature-icon-blue-bg: linear-gradient(135deg, var(--primary-100), var(--primary-200));
    --feature-icon-blue-shadow: 0 4px 14px 0 rgba(14, 165, 233, 0.2);
    --feature-icon-green-bg: linear-gradient(135deg, #dcfce7, #bbf7d0);
    --feature-icon-green-shadow: 0 4px 14px 0 rgba(34, 197, 94, 0.2);
    --feature-icon-purple-bg: linear-gradient(135deg, var(--accent-100), var(--accent-200));
    --feature-icon-purple-shadow: 0 4px 14px 0 rgba(217, 70, 239, 0.2);
    --feature-grid-item-bg: var(--white);
    --feature-grid-item-border: var(--app-card-border);
    --feature-grid-item-hover-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --feature-grid-title-color: var(--gray-900);
    --feature-grid-text-color: var(--gray-600);
    
    /* CTA component variables for light theme */
    --cta-bg: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 50%, var(--accent-600) 100%);
    --cta-title-color: var(--white);
    --cta-subtitle-color: rgba(255, 255, 255, 0.9);
    
    /* Footer component variables for light theme */
    --footer-bg: linear-gradient(135deg, var(--primary-50) 0%, var(--accent-50) 50%, var(--gray-50) 100%);
    --footer-border: var(--gray-200);
    --footer-link-color: var(--app-card-description-color);
    --footer-link-hover-color: var(--primary-600);
    --footer-link-focus-color: var(--primary-400);
    
    /* TOC component variables for light theme */
    --toc-bg: transparent;
    --toc-link-color: var(--app-card-description-color);
    --toc-link-hover-color: var(--primary-600);
    --toc-link-hover-border: var(--primary-300);
    --toc-link-active-color: var(--primary-700);
    --toc-link-active-border: var(--primary-500);
    
    /* Main content variables for light theme */
    --main-bg: #ffffff;
    --prose-bg: #ffffff;
}

/* Dark mode variables */
[data-theme="dark"],
.dark-theme {
    /* Background colors */
    --gray-50: #111827;
    --gray-100: #1f2937;
    --gray-200: #374151;
    --gray-300: #4b5563;
    --gray-400: #6b7280;
    --gray-500: #9ca3af;
    --gray-600: #d1d5db;
    --gray-700: #e5e7eb;
    --gray-800: #f3f4f6;
    --gray-900: #f9fafb;
    
    /* Sidebar colors for dark theme */
    --sidebar-bg: #1f2937;
    --sidebar-border: #374151;
    --sidebar-text: #d1d5db;
    --sidebar-text-muted: #9ca3af;
    --sidebar-hover: #374151;
    --sidebar-active: #0ea5e9;
    --sidebar-active-bg: #1e3a8a;
    --sidebar-scrollbar-track: #374151;
    --sidebar-scrollbar-thumb: #6b7280;
    --sidebar-scrollbar-thumb-hover: #9ca3af;
    
    /* Primary colors for dark theme */
    --primary-50: #0c4a6e;
    --primary-100: #075985;
    --primary-200: #0369a1;
    --primary-300: #0284c7;
    --primary-400: #0ea5e9;
    --primary-500: #38bdf8;
    --primary-600: #7dd3fc;
    --primary-700: #bae6fd;
    --primary-800: #e0f2fe;
    --primary-900: #f0f9ff;
    
    /* Accent colors for dark theme */
    --accent-50: #701a75;
    --accent-100: #86198f;
    --accent-200: #a21caf;
    --accent-300: #c026d3;
    --accent-400: #d946ef;
    --accent-500: #e879f9;
    --accent-600: #f0abfc;
    --accent-700: #f5d0fe;
    --accent-800: #fae8ff;
    --accent-900: #fdf4ff;
    
    /* Icon colors for dark theme */
    --icon-blue: #38bdf8;
    --icon-blue-hover: #0ea5e9;
    --icon-green: #4ade80;
    --icon-green-hover: #22c55e;
    --icon-purple: #e879f9;
    --icon-purple-hover: #d946ef;
    
    /* Text colors */
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --text-500: #A5C5E9;
    
    /* Background colors */
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    
    /* Border colors */
    --border-primary: #374151;
    --border-secondary: #4b5563;
    
    /* Component-specific variables */
    --btn-primary-bg: rgba(31, 41, 55, 0.8);
    --btn-primary-border: rgba(75, 85, 99, 0.3);
    --btn-primary-color: #d1d5db;
    --btn-primary-hover-bg: rgba(31, 41, 55, 0.9);
    --btn-primary-hover-border: rgba(75, 85, 99, 0.5);
    --btn-primary-hover-color: #f9fafb;
    
    --app-card-bg: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
    --app-card-border: var(--gray-300);
    --app-card-title-color: var(--gray-800);
    --app-card-subtitle-color: var(--gray-600);
    --app-card-description-color: var(--gray-700);
    
    --language-dropdown-bg: rgba(31, 41, 55, 0.8);
    --language-dropdown-border: rgba(75, 85, 99, 0.3);
    --language-dropdown-color: #d1d5db;
    --language-dropdown-hover-bg: rgba(31, 41, 55, 0.9);
    --language-dropdown-hover-border: rgba(75, 85, 99, 0.5);
    --language-dropdown-hover-color: #f9fafb;
    --language-dropdown-menu-bg: #1f2937;
    --language-dropdown-menu-border: #374151;
    --language-dropdown-item-color: #d1d5db;
    --language-dropdown-item-border: #374151;
    --language-dropdown-item-hover-bg: #374151;
    --language-dropdown-item-hover-color: #f9fafb;
    
    --theme-toggle-bg: rgba(31, 41, 55, 0.8);
    --theme-toggle-border: rgba(75, 85, 99, 0.3);
    --theme-toggle-color: #d1d5db;
    --theme-toggle-hover-bg: rgba(31, 41, 55, 0.9);
    --theme-toggle-hover-border: rgba(75, 85, 99, 0.5);
    --theme-toggle-hover-color: #f9fafb;
    
    --search-input-bg: var(--gray-800);
    --search-input-border: var(--gray-600);
    --search-input-color: var(--gray-100);
    --search-input-focus-border: var(--primary-400);
    
    --type-selector-bg: #1f2937;
    --type-selector-border: #4b5563;
    --type-selector-color: #f9fafb;
    --type-selector-hover-bg: #374151;
    --type-selector-hover-border: #6b7280;
    --type-selector-menu-bg: #1f2937;
    --type-selector-menu-border: #4b5563;
    --type-selector-item-color: #d1d5db;
    --type-selector-item-border: #374151;
    --type-selector-item-hover-bg: #374151;
    --type-selector-item-selected-bg: rgba(59, 130, 246, 0.1);
    --type-selector-item-selected-color: var(--primary-400);
    
    --nav-section-title-color: #f9fafb;
    --nav-section-header-hover-bg: #1f2937;
    --nav-link-color: #d1d5db;
    --nav-link-hover-color: #f9fafb;
    --nav-link-hover-bg: #1f2937;
    --nav-link-active-color: #60a5fa;
    --nav-link-active-bg: #1e3a8a;
    --nav-link-main-bg: #1f2937;
    --nav-link-main-color: #f9fafb;
    --nav-link-main-border: #374151;
    
    --feature-grid-bg: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
    --feature-grid-border: var(--gray-300);
    --feature-grid-hover-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.25), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    --feature-grid-title-color: var(--gray-800);
    --feature-grid-text-color: var(--gray-700);
    
    --cta-bg: linear-gradient(135deg, #1f2937 0%, #111827 50%, #374151 100%);
    --cta-title-color: var(--white);
    --cta-subtitle-color: rgba(255, 255, 255, 0.9);
    
    --footer-bg: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-300) 100%);
    --footer-border: var(--gray-400);
    --footer-link-color: var(--gray-700);
    --footer-link-hover-color: var(--primary-700);
    --footer-link-focus-color: var(--primary-600);
    
    --toc-bg: transparent;
    --toc-link-color: var(--text-secondary);
    --toc-link-hover-color: var(--primary-400);
    --toc-link-hover-border: var(--primary-400);
    --toc-link-active-color: var(--primary-400);
    --toc-link-active-border: var(--primary-400);
    
    --main-bg: var(--gray-800);
    --prose-bg: var(--gray-800);
    
    --mobile-sidebar-bg: var(--gray-900);
    --mobile-sidebar-header-border: var(--gray-700);
    --mobile-close-color: var(--gray-400);
    --mobile-close-hover-bg: var(--gray-800);
    --mobile-close-hover-color: var(--gray-200);
    
    --get-started-bg: rgba(17, 24, 39, 0.8);
    --get-started-border: rgba(55, 65, 81, 0.5);
    --get-started-title-color: #f9fafb;
    --get-started-text-color: #d1d5db;
    --get-started-button-bg: #3b82f6;
    --get-started-button-hover-bg: #2563eb;
    
    /* Body and layout variables for dark theme */
    --body-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    --body-before-bg: radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
                      radial-gradient(circle at 80% 20%, rgba(217, 70, 239, 0.1) 0%, transparent 50%);
    --main-bg: var(--gray-800);
    --prose-bg: var(--gray-800);
    
    /* TOC scrollbar variables for dark theme */
    --toc-scrollbar-color: transparent transparent;
    --toc-scrollbar-scrolling-color: rgba(156, 163, 175, 0.3) transparent;
    --toc-scrollbar-thumb-bg: transparent;
    --toc-scrollbar-thumb-scrolling-bg: rgba(156, 163, 175, 0.3);
    --toc-scrollbar-thumb-hover-bg: rgba(156, 163, 175, 0.5);
    
    /* Sidebar component variables for dark theme */
    --sidebar-mintlify-bg: transparent;
    --sidebar-mintlify-border: rgba(75, 85, 99, 0.3);
    --sidebar-logo-text-color: #f9fafb;
    --sidebar-logo-text-hover-color: #60a5fa;
    --sidebar-search-input-bg: #1f2937;
    --sidebar-search-input-border: #4b5563;
    --sidebar-search-input-color: #f9fafb;
    --sidebar-type-selector-bg: #1f2937;
    --sidebar-type-selector-border: #4b5563;
    --sidebar-type-selector-color: #f9fafb;
    --sidebar-nav-section-title-color: #f9fafb;
    --sidebar-nav-section-header-hover-bg: #1f2937;
    --sidebar-nav-item-color: #d1d5db;
    --sidebar-nav-item-hover-color: #f9fafb;
    --sidebar-nav-item-hover-bg: #1f2937;
    --sidebar-nav-item-active-color: #60a5fa;
    --sidebar-nav-item-active-bg: #1e3a8a;
    --sidebar-mobile-bg: #111827;
    --sidebar-mobile-header-border: #374151;
    --sidebar-mobile-close-color: #9ca3af;
    --sidebar-mobile-close-hover-bg: #1f2937;
    --sidebar-mobile-close-hover-color: #e5e7eb;
    
    /* Feature component variables for dark theme */
    --feature-icon-blue-bg: linear-gradient(135deg, var(--primary-200), var(--primary-300));
    --feature-icon-blue-shadow: 0 4px 14px 0 rgba(14, 165, 233, 0.3);
    --feature-icon-green-bg: linear-gradient(135deg, #bbf7d0, #86efac);
    --feature-icon-green-shadow: 0 4px 14px 0 rgba(34, 197, 94, 0.3);
    --feature-icon-purple-bg: linear-gradient(135deg, var(--accent-200), var(--accent-300));
    --feature-icon-purple-shadow: 0 4px 14px 0 rgba(217, 70, 239, 0.3);
    --feature-grid-item-bg: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
    --feature-grid-item-border: var(--gray-300);
    --feature-grid-item-hover-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.25), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    --feature-grid-title-color: var(--gray-800);
    --feature-grid-text-color: var(--gray-700);
    
    /* CTA component variables for dark theme */
    --cta-bg: linear-gradient(135deg, #1f2937 0%, #111827 50%, #374151 100%);
    --cta-title-color: var(--white);
    --cta-subtitle-color: rgba(255, 255, 255, 0.9);
    
    /* Footer component variables for dark theme */
    --footer-bg: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-300) 100%);
    --footer-border: var(--gray-400);
    --footer-link-color: var(--gray-700);
    --footer-link-hover-color: var(--primary-700);
    --footer-link-focus-color: var(--primary-600);
    
    /* TOC component variables for dark theme */
    --toc-bg: transparent;
    --toc-link-color: var(--text-secondary);
    --toc-link-hover-color: var(--primary-400);
    --toc-link-hover-border: var(--primary-400);
    --toc-link-active-color: var(--primary-400);
    --toc-link-active-border: var(--primary-400);
    
    /* Main content variables for dark theme */
    --main-bg: transparent;
    --prose-bg: transparent;
}


/* Base styles */
html {
    font-family: var(--font-family);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
}

body {
    background: var(--body-bg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--gray-900);
    transition: var(--transition);
    position: relative;
    min-height: 100vh;
    height: 100%;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--body-before-bg);
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
}


/* Prevent vertical scroll bounce but allow horizontal swipe navigation */
html, body {
    overscroll-behavior-y: contain;
    overscroll-behavior-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Auto-hide scrollbar for TOC */
#toc-container {
    scrollbar-width: thin;
    scrollbar-color: var(--toc-scrollbar-color);
    transition: scrollbar-color 0.3s ease;
}

#toc-container.scrolling {
    scrollbar-color: var(--toc-scrollbar-scrolling-color);
}

#toc-container::-webkit-scrollbar {
    width: 6px;
}

#toc-container::-webkit-scrollbar-track {
    background: transparent;
}

#toc-container::-webkit-scrollbar-thumb {
    background: var(--toc-scrollbar-thumb-bg);
    border-radius: 3px;
    transition: background 0.3s ease;
}

#toc-container.scrolling::-webkit-scrollbar-thumb {
    background: var(--toc-scrollbar-thumb-scrolling-bg);
}

#toc-container::-webkit-scrollbar-thumb:hover {
    background: var(--toc-scrollbar-thumb-hover-bg);
}


/* Ensure content doesn't extend beyond viewport */
.min-h-full {
    min-height: 100vh;
    max-height: 100vh;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: var(--space-4);
    color: var(--gray-900);
    scroll-margin-top: 65px; /* Account for fixed top navigation */
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p {
    margin-bottom: var(--space-4);
    color: var(--gray-600);
}

a {
    color: var(--primary-600);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--primary-700);
    text-decoration: underline;
}

/* Override for buttons */
button:hover {
    text-decoration: none !important;
}

.language-dropdown-button:hover {
    text-decoration: none !important;
}

/* Dodatni override za underline */
.language-dropdown-button,
.language-dropdown-button *,
.language-dropdown-button span,
.language-dropdown-button .flag,
.language-dropdown-button .language-text {
    text-decoration: none !important;
}

.language-dropdown-button:hover,
.language-dropdown-button:hover *,
.language-dropdown-button:hover span,
.language-dropdown-button:hover .flag,
.language-dropdown-button:hover .language-text {
    text-decoration: none !important;
}

/* Override za language dropdown iteme */
.language-dropdown-item,
.language-dropdown-item:hover,
.language-dropdown-item:active,
.language-dropdown-item:focus {
    text-decoration: none !important;
}

.language-dropdown-item *,
.language-dropdown-item:hover *,
.language-dropdown-item:active *,
.language-dropdown-item:focus * {
    text-decoration: none !important;
}

/* Code */
code {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    background-color: var(--gray-100);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--gray-900);
}

/* Global Code Block Styling - Match API Playground */
pre {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
    background: white !important;
    border: 1px solid #e5e7eb;
    border-radius: 0 0 8px 8px;
    padding: 16px;
    margin: 0 0 16px 0;
    overflow-x: auto;
    box-shadow: none;
    color: #333;
    position: relative;
}


/* Inline code styling */
code:not(pre code) {
    background: #f8f9fa;
    color: #d73a49;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.875em;
    border: 1px solid #e5e7eb;
}

/* Syntax highlighting colors - OneSignal style for all code blocks */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #6a737d;
}

.token.punctuation {
    color: #24292e;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
    color: #005cc5;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #032f62;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: #d73a49;
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: #d73a49;
}

.token.function,
.token.class-name {
    color: #6f42c1;
}

.token.regex,
.token.important,
.token.variable {
    color: #e36209;
}

.token.method {
    color: #d73a49;
    font-weight: 600;
}

.token.json-key {
    color: #005cc5;
}

.token.url {
    color: #0366d6;
    text-decoration: underline;
}

/* Dark theme support for code blocks */
[data-theme="dark"] pre {
    background: #1a202c !important;
    border-color: #2d3748;
    color: #e2e8f0;
}

[data-theme="dark"] pre code {
    background: transparent !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] pre[class*="language-"] {
    background: #1a202c !important;
    border: none;
    color: #e2e8f0;
}

[data-theme="dark"] pre[class*="language-"] code {
    background: transparent !important;
    color: #e2e8f0 !important;
}


[data-theme="dark"] code:not(pre code) {
    background: #2d3748;
    color: #f56565;
    border-color: #4a5568;
}

/* Dark theme syntax highlighting */
[data-theme="dark"] .token.comment,
[data-theme="dark"] .token.prolog,
[data-theme="dark"] .token.doctype,
[data-theme="dark"] .token.cdata {
    color: #a0aec0;
}

[data-theme="dark"] .token.punctuation {
    color: #e2e8f0;
}

[data-theme="dark"] .token.property,
[data-theme="dark"] .token.tag,
[data-theme="dark"] .token.boolean,
[data-theme="dark"] .token.number,
[data-theme="dark"] .token.constant,
[data-theme="dark"] .token.symbol,
[data-theme="dark"] .token.deleted {
    color: #63b3ed;
}

[data-theme="dark"] .token.selector,
[data-theme="dark"] .token.attr-name,
[data-theme="dark"] .token.string,
[data-theme="dark"] .token.char,
[data-theme="dark"] .token.builtin,
[data-theme="dark"] .token.inserted {
    color: #68d391;
}

[data-theme="dark"] .token.operator,
[data-theme="dark"] .token.entity,
[data-theme="dark"] .token.url,
[data-theme="dark"] .language-css .token.string,
[data-theme="dark"] .style .token.string {
    color: #f56565;
}

[data-theme="dark"] .token.atrule,
[data-theme="dark"] .token.attr-value,
[data-theme="dark"] .token.keyword {
    color: #f56565;
}

[data-theme="dark"] .token.function,
[data-theme="dark"] .token.class-name {
    color: #b794f6;
}

[data-theme="dark"] .token.regex,
[data-theme="dark"] .token.important,
[data-theme="dark"] .token.variable {
    color: #f6ad55;
}

[data-theme="dark"] .token.method {
    color: #f56565;
    font-weight: 600;
}

[data-theme="dark"] .token.json-key {
    color: #63b3ed;
}

[data-theme="dark"] .token.url {
    color: #63b3ed;
    text-decoration: underline;
}

/* Scrollbar styling for code blocks - match API playground */
pre {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
}

pre::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

pre::-webkit-scrollbar-track {
    background: #f7fafc;
    border-radius: 4px;
}

pre::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Dark theme scrollbars */
[data-theme="dark"] pre {
    scrollbar-color: #4a5568 #2d3748;
}

[data-theme="dark"] pre::-webkit-scrollbar-track {
    background: #2d3748;
}

[data-theme="dark"] pre::-webkit-scrollbar-thumb {
    background: #4a5568;
}

[data-theme="dark"] pre::-webkit-scrollbar-thumb:hover {
    background: #718096;
}

/* Override any existing code block styles to ensure consistency */
.prose pre,
.content pre,
main pre,
article pre {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin: 16px 0 !important;
    box-shadow: none !important;
    color: #333 !important;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.prose pre code,
.content pre code,
main pre code,
article pre code {
    background: transparent !important;
    color: #333 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Dark theme overrides */
[data-theme="dark"] .prose pre,
[data-theme="dark"] .content pre,
[data-theme="dark"] main pre,
[data-theme="dark"] article pre {
    background: #1a202c !important;
    border-color: #2d3748 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .prose pre code,
[data-theme="dark"] .content pre code,
[data-theme="dark"] main pre code,
[data-theme="dark"] article pre code {
    background: transparent !important;
    color: #e2e8f0 !important;
}


/* Lists */
ul, ol {
    margin-bottom: var(--space-4);
    padding-left: var(--space-6);
}

li {
    margin: var(--space-1) 0;
    color: var(--gray-600);
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-4) 0;
}

th, td {
    padding: var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

th {
    font-weight: 600;
    background-color: var(--gray-100);
    color: var(--gray-900);
}

/* Blockquotes */
blockquote {
    margin: var(--space-4) 0;
    padding: var(--space-4);
    border-left: 4px solid var(--primary-500);
    background-color: var(--gray-100);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* Documentation content images - constrained width for readability */
.prose img,
.prose p img,
.markdown img,
main article img,
main img,
.prose-lg img {
    max-width: 600px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 1.5rem auto !important;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    cursor: zoom-in;
}

/* Dark mode image styling */
[data-theme="dark"] .prose img,
[data-theme="dark"] .prose p img,
[data-theme="dark"] .markdown img,
[data-theme="dark"] main article img,
[data-theme="dark"] main img,
[data-theme="dark"] .prose-lg img {
    border-color: var(--gray-700);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Responsive - allow full width on smaller screens */
@media (max-width: 768px) {
    .prose img,
    .prose p img,
    .markdown img,
    main article img,
    main img,
    .prose-lg img {
        max-width: 100% !important;
        margin: 1rem auto !important;
    }
}

/* Subtle prerequisites box used in guides */
.prereq-inline {
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin: var(--space-4) 0;
}
.prereq-inline .prereq-title {
    display: block;
    font-size: 0.875rem; /* smaller title */
    color: var(--gray-600);
    margin-bottom: 6px;
}
.prereq-inline ul { margin: 0; padding-left: 1.125rem; color: var(--gray-700); }
.prereq-inline li { margin: 4px 0; }

/* Focus styles */
:focus {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* Selection */
::selection {
    background-color: var(--primary-500);
    color: var(--white);
}

/* Utility classes */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Layout Classes */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Display Classes */
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.hidden { display: none; }

/* Flexbox Classes */
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-shrink-0 { flex-shrink: 0; }

/* Position Classes */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-y-0 { top: 0; bottom: 0; }
.left-0 { left: 0; }

/* Z-index Classes */
.z-50 { z-index: 50; }

/* Width Classes */
.w-auto { width: auto; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-64 { width: 16rem; }
.min-w-0 { min-width: 0; }

/* Height Classes */
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-20 { height: 5rem; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.min-h-0 { min-height: 0; }

/* Spacing Classes */
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.pl-4 { padding-left: 1rem; }

.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.ml-2 { margin-left: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.-mt-1 { margin-top: -0.25rem; }

/* Space Between Classes */
.space-x-3 > * + * { margin-left: 0.75rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-x-6 > * + * { margin-left: 1.5rem; }
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-8 > * + * { margin-top: 2rem; }

/* Gap Classes */
.gap-8 { gap: 2rem; }

/* Text Classes */
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-center { text-align: center; }
.font-bold { font-weight: 700; }

/* Color Classes */
.text-white { color: var(--white); }
.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }
.text-gray-900 { color: var(--gray-900); }
.text-blue-400 { color: var(--primary-400); }
.text-blue-600 { color: var(--primary-600); }

.bg-white { background-color: var(--white); }
.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-gray-800 { background-color: var(--gray-800); }
.bg-blue-100 { background-color: var(--primary-100); }
.bg-blue-600 { background-color: var(--primary-600); }

/* Border Classes */
.border { border: 1px solid var(--gray-200); }
.border-b { border-bottom-width: 1px; }
.border-gray-200 { border-color: var(--gray-200); }
.border-gray-300 { border-color: var(--gray-300); }

/* Border Radius Classes */
.rounded { border-radius: var(--radius-md); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: 9999px; }

/* Shadow Classes */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Transition Classes */
.transition { transition: var(--transition); }
.transition-all { transition: all 0.2s ease; }
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease; }
.transition-transform { 
    transition-property: transform; 
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
    transition-duration: 150ms; 
}
.transition-opacity { 
    transition-property: opacity; 
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
    transition-duration: 150ms; 
}
.duration-300 { transition-duration: 300ms; }

/* Transform Classes */
.transform { transform: translateZ(0); }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }

/* Hover Effects */
.hover\:shadow-xl:hover { box-shadow: var(--shadow-xl); }
.hover\:text-blue-700:hover { color: var(--primary-700); }
.hover\:bg-gray-50:hover { background-color: var(--gray-50); }

/* Group Hover Effects */
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
.group:hover .group-hover\:opacity-20 { opacity: 0.2; }
.group:hover .group-hover\:text-blue-600 { color: var(--primary-600); }

/* Opacity Classes */
.opacity-0 { opacity: 0; }

/* Background Gradient Classes */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.from-blue-500 { --tw-gradient-from: #3b82f6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0)); }
.to-purple-500 { --tw-gradient-to: #8b5cf6; }

/* Pointer Events Classes */
.pointer-events-none { pointer-events: none; }

/* Overflow Classes */
.overflow-y-auto { overflow-y: auto; }

/* Responsive Grid */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Homepage apps grid - 3 boxes in one horizontal line */
.apps-grid-single-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
}

@media (max-width: 768px) {
    .apps-grid-single-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Homepage apps grid - horizontal single row */
.apps-grid-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    width: 100%;
    max-width: 100%;
    justify-content: center;
}

.apps-grid-horizontal > * {
    flex: 1 1 300px;
    max-width: 400px;
    min-width: 300px;
}

@media (min-width: 1400px) {
    .apps-grid-horizontal {
        gap: 2.5rem;
    }
    
    .apps-grid-horizontal > * {
        flex: 1 1 350px;
        max-width: 450px;
    }
}

@media (min-width: 1024px) and (max-width: 1399px) {
    .apps-grid-horizontal {
        gap: 2rem;
    }
    
    .apps-grid-horizontal > * {
        flex: 1 1 320px;
        max-width: 420px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .apps-grid-horizontal {
        gap: 1.5rem;
    }
    
    .apps-grid-horizontal > * {
        flex: 1 1 calc(50% - 0.75rem);
        max-width: none;
    }
}

@media (max-width: 767px) {
    .apps-grid-horizontal > * {
        flex: 1 1 100%;
        max-width: none;
    }
}

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

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

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

.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

/* Responsive design */
@media (max-width: 768px) {
    .container {
        padding: 0 var(--space-4);
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.125rem; }
}

@media (min-width: 768px) {
    .md\:text-5xl { font-size: 3rem; line-height: 1; }
    .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
    .md\:flex-row { flex-direction: row; }
    .md\:items-center { align-items: center; }
    .md\:mb-0 { margin-bottom: 0; }
}

/* Print styles */
@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a, a:visited {
        text-decoration: underline;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
    
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    
    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    
    thead {
        display: table-header-group;
    }
    
    tr, img {
        page-break-inside: avoid;
    }
    
    img {
        max-width: 100% !important;
    }
    
    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }
    
    h2, h3 {
        page-break-after: avoid;
    }
}

/* RTL Support for Hebrew */
[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] .container {
    direction: rtl;
}

[dir="rtl"] .hero-title,
[dir="rtl"] .hero-subtitle,
[dir="rtl"] .text-center {
    text-align: center;
}

[dir="rtl"] .app-card-modern {
    text-align: right;
}

[dir="rtl"] .app-card-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .app-card-icon-modern {
    margin-left: 1rem;
    margin-right: 0;
}

[dir="rtl"] .app-card-links {
    justify-content: flex-start;
}

[dir="rtl"] .app-card-link {
    flex-direction: row-reverse;
}

[dir="rtl"] .app-card-link svg {
    margin-left: 0.5rem;
    margin-right: 0;
}

[dir="rtl"] .features-grid > div {
    text-align: right;
}

[dir="rtl"] .feature-icon {
    margin-left: 1rem;
    margin-right: 0;
}

[dir="rtl"] .cta-section {
    text-align: center;
}

[dir="rtl"] .btn {
    flex-direction: row-reverse;
}

[dir="rtl"] .btn svg {
    margin-left: 0;
    margin-right: 0.5rem;
}

[dir="rtl"] .search-input {
    text-align: right;
}

[dir="rtl"] .search-input::placeholder {
    text-align: right;
}

[dir="rtl"] .responsive-grid {
    direction: rtl;
}

[dir="rtl"] .responsive-grid > * {
    direction: ltr;
}

/* Body background for list layouts - single gradient for entire page */
body:has(.header-list) {
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--accent-50) 50%, var(--gray-50) 100%) !important;
}

/* Remove individual backgrounds to let body gradient show through */
.header-list {
    background: transparent !important;
}

.header-list header {
    background: transparent !important;
}

.header-list + main {
    background: transparent !important;
}

.header-list + main > div {
    background: transparent !important;
}

.header-list + main + footer {
    background: transparent !important;
}

/* App cards background for list layouts - transparent to show gradient */
.header-list .app-card-modern {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
}

/* Sidebar border for list layouts */
.sidebar.sidebar-list {
    border-right: 1px solid var(--gray-200) !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Navigation section subtitles */
.nav-section-subtitle {
    color: var(--gray-400);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0;
    cursor: default;
    pointer-events: none;
}