[{"data":1,"prerenderedAt":63},["Reactive",2],{"blog-post-markdown-table-responsive-design-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":37,"related":38},"markdown-table-responsive-design-complete-guide","Markdown Table Responsive Design: Complete Guide for Mobile-Friendly Documentation and Adaptive Table Layouts","Master responsive Markdown table design techniques for creating mobile-friendly documentation with adaptive layouts, CSS Grid integration, and cross-device compatibility. Learn advanced table styling, breakpoint management, and accessibility optimization.","Advanced responsive Markdown table design enables sophisticated documentation systems that adapt seamlessly across all device types, screen sizes, and user contexts while maintaining data…","2025-11-01","Tutorial","Matthew Rathbone","markdown table responsive design, mobile-friendly markdown tables, adaptive table layouts, responsive documentation tables, markdown table css grid, mobile table optimization, responsive web design markdown",29,"\u003Cp>Advanced responsive Markdown table design enables sophisticated documentation systems that adapt seamlessly across all device types, screen sizes, and user contexts while maintaining data accessibility and visual clarity. By implementing comprehensive responsive design strategies, CSS Grid integration, and adaptive layout techniques, technical writers can create table-based documentation that delivers optimal user experiences regardless of viewport constraints, ensuring that complex data remains comprehensible and actionable across desktop, tablet, and mobile environments.\u003C/p>\n\u003Ch2 id=\"why-master-responsive-markdown-table-design\">Why Master Responsive Markdown Table Design?\u003C/h2>\n\u003Cp>Professional responsive table design provides essential benefits for modern documentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Universal Accessibility\u003C/strong>: Ensure table data remains readable and functional across all devices and screen sizes\u003C/li>\n\u003Cli>\u003Cstrong>User Experience Optimization\u003C/strong>: Provide intuitive interaction patterns that adapt to touch and mouse interfaces\u003C/li>\n\u003Cli>\u003Cstrong>Data Integrity\u003C/strong>: Maintain information hierarchy and relationships even in constrained viewport environments\u003C/li>\n\u003Cli>\u003Cstrong>Performance Enhancement\u003C/strong>: Implement efficient rendering strategies that minimize load times and improve responsiveness\u003C/li>\n\u003Cli>\u003Cstrong>Future-Proof Design\u003C/strong>: Create table systems that adapt to emerging devices and interaction paradigms\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-responsive-table-architecture\">Foundation Responsive Table Architecture\u003C/h2>\n\u003Ch3 id=\"basic-responsive-table-patterns\">Basic Responsive Table Patterns\u003C/h3>\n\u003Cp>Understanding fundamental responsive design approaches for Markdown tables:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Basic Responsive Table Implementation\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Standard Markdown Table\u003C/span>\n\n| Product | Price | Category | Availability | Rating | Description |\n|---------|-------|----------|--------------|--------|-------------|\n| MacBook Pro | $2,399 | Laptop | In Stock | 4.5/5 | High-performance laptop with M2 chip |\n| iPad Air | $599 | Tablet | In Stock | 4.3/5 | Versatile tablet for productivity and creativity |\n| AirPods Pro | $249 | Audio | Limited Stock | 4.4/5 | Premium wireless earbuds with noise cancellation |\n| iPhone 14 | $799 | Phone | In Stock | 4.2/5 | Latest smartphone with advanced camera system |\n\n\u003Cspan class=\"hljs-section\">## Responsive Enhancement with CSS Classes\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"responsive-table-container"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"table-scroll-wrapper"\u003C/span>>\u003C/span>\u003C/span>\n\n| Product | Price | Category | Availability | Rating | Description |\n|---------|-------|----------|--------------|--------|-------------|\n| MacBook Pro | $2,399 | Laptop | In Stock | 4.5/5 | High-performance laptop with M2 chip |\n| iPad Air | $599 | Tablet | In Stock | 4.3/5 | Versatile tablet for productivity and creativity |\n| AirPods Pro | $249 | Audio | Limited Stock | 4.4/5 | Premium wireless earbuds with noise cancellation |\n| iPhone 14 | $799 | Phone | In Stock | 4.2/5 | Latest smartphone with advanced camera system |\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Mobile-Optimized Card Layout Alternative\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"table-cards-mobile"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"table-card"\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h3\u003C/span>>\u003C/span>\u003C/span>MacBook Pro\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h3\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003C/span>Price:\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003C/span> $2,399\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003C/span>Category:\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003C/span> Laptop\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003C/span>Availability:\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003C/span> In Stock\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003C/span>Rating:\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003C/span> 4.5/5\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003C/span>Description:\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003C/span> High-performance laptop with M2 chip\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"comprehensive-responsive-table-system\">Comprehensive Responsive Table System\u003C/h3>\n\u003Cp>Creating a complete responsive table management system:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* responsive-tables.css - Complete responsive table system */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Base table styles */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: separate;\n    \u003Cspan class=\"hljs-attribute\">border-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e5e5e5\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#2c3e50\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: sticky;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">10\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Horizontal scroll wrapper for wide tables */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-scroll-wrapper\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">overflow-y\u003C/span>: visible;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">scrollbar-width\u003C/span>: thin;\n    \u003Cspan class=\"hljs-attribute\">scrollbar-color\u003C/span>: \u003Cspan class=\"hljs-number\">#cbd5e0\u003C/span> \u003Cspan class=\"hljs-number\">#f7fafc\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-scroll-wrapper\u003C/span>::-webkit-scrollbar {\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-scroll-wrapper\u003C/span>::-webkit-scrollbar-track {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f7fafc\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-scroll-wrapper\u003C/span>::-webkit-scrollbar-thumb {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#cbd5e0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-scroll-wrapper\u003C/span>::-webkit-scrollbar-thumb:hover {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#a0aec0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive breakpoints */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">1200px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">13px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">/* Mobile-first responsive approach */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">table\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n        \u003Cspan class=\"hljs-attribute\">top\u003C/span>: -\u003Cspan class=\"hljs-number\">9999px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">9999px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">clip\u003C/span>: \u003Cspan class=\"hljs-built_in\">rect\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>);\n        \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e5e5e5\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.05\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">min-height\u003C/span>: \u003Cspan class=\"hljs-number\">24px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-built_in\">attr\u003C/span>(data-label);\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n        \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">45%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding-right\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#2c3e50\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n        \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.5px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: none;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Alternative card-based mobile layout */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-cards-mobile\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-cards\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-cards-mobile\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: grid;\n        \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>fr;\n        \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-card\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e5e5e5\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.08\u003C/span>);\n        \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: box-shadow \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-card\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.12\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-card\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">18px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#2c3e50\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-card\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-card\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> \u003Cspan class=\"hljs-selector-tag\">strong\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#555\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n        \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.5px\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Advanced responsive patterns */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Horizontal scroll indicator */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">""\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(to left, \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">255\u003C/span>,\u003Cspan class=\"hljs-number\">255\u003C/span>,\u003Cspan class=\"hljs-number\">255\u003C/span>,\u003Cspan class=\"hljs-number\">1\u003C/span>), \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">255\u003C/span>,\u003Cspan class=\"hljs-number\">255\u003C/span>,\u003Cspan class=\"hljs-number\">255\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>));\n    \u003Cspan class=\"hljs-attribute\">pointer-events\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: opacity \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.has-horizontal-scroll\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Column priority system */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.col-priority-1\u003C/span> { \u003Cspan class=\"hljs-attribute\">display\u003C/span>: table-cell; }\n\u003Cspan class=\"hljs-selector-class\">.col-priority-2\u003C/span> { \u003Cspan class=\"hljs-attribute\">display\u003C/span>: table-cell; }\n\u003Cspan class=\"hljs-selector-class\">.col-priority-3\u003C/span> { \u003Cspan class=\"hljs-attribute\">display\u003C/span>: table-cell; }\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">1200px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.col-priority-3\u003C/span> { \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none; }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.col-priority-2\u003C/span> { \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none; }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.col-priority-1\u003C/span> { \n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Grid-based responsive layout */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-grid\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: grid;\n    \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-built_in\">repeat\u003C/span>(auto-fit, \u003Cspan class=\"hljs-built_in\">minmax\u003C/span>(\u003Cspan class=\"hljs-number\">300px\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>fr));\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-grid\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>fr;\n        \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Accessible table enhancements */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[role=\u003Cspan class=\"hljs-string\">"table"\u003C/span>]\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    user-select: none;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.sortable\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"⇅"\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.3\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.sort-asc\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"↑"\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.sort-desc\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"↓"\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Loading and empty states */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.loading\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.loading\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">""\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">0.8\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-empty-state\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print styles */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-scroll-wrapper\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: visible;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        -webkit-print-\u003Cspan class=\"hljs-attribute\">color\u003C/span>-adjust: exact;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>-adjust: exact;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-cards-mobile\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">table\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: table;\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: table-header-group;\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: table-row-group;\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: table-cell;\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: table-row;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Dark theme support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-color-scheme\u003C/span>: dark) {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#1a1a1a\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#e0e0e0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#2d2d2d\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border-bottom-color\u003C/span>: \u003Cspan class=\"hljs-number\">#404040\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#2d2d2d\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-card\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#1a1a1a\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#404040\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#e0e0e0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-card\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"javascript-enhancement-system\">JavaScript Enhancement System\u003C/h3>\n\u003Cp>Advanced JavaScript functionality for responsive table behavior:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// responsive-table-manager.js - Comprehensive responsive table system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">ResponsiveTableManager\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">breakpoints\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">mobile\u003C/span>: \u003Cspan class=\"hljs-number\">768\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">tablet\u003C/span>: \u003Cspan class=\"hljs-number\">1024\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">desktop\u003C/span>: \u003Cspan class=\"hljs-number\">1200\u003C/span>\n            },\n            \u003Cspan class=\"hljs-attr\">enableSorting\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableFiltering\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableColumnToggle\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableExport\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">autoInitialize\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tables\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentBreakpoint\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentBreakpoint\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">autoInitialize\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initialize\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initialize\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Initializing responsive table manager...'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Find and enhance all tables\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">discoverTables\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Set up responsive monitoring\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupResponsiveMonitoring\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Set up event listeners\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupEventListeners\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Enhanced \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.tables.size}\u003C/span> tables`\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">discoverTables\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableContainers = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.responsive-table-container'\u003C/span>);\n        \n        tableContainers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">container, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (table) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableId = container.\u003Cspan class=\"hljs-property\">id\u003C/span> || \u003Cspan class=\"hljs-string\">`responsive-table-\u003Cspan class=\"hljs-subst\">${index}\u003C/span>`\u003C/span>;\n                container.\u003Cspan class=\"hljs-property\">id\u003C/span> = tableId;\n                \n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceTable\u003C/span>(tableId, container, table);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enhanceTable\u003C/span>(\u003Cspan class=\"hljs-params\">tableId, container, table\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Enhancing table: \u003Cspan class=\"hljs-subst\">${tableId}\u003C/span>`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableData = {\n            \u003Cspan class=\"hljs-attr\">id\u003C/span>: tableId,\n            container,\n            table,\n            \u003Cspan class=\"hljs-attr\">originalHTML\u003C/span>: table.\u003Cspan class=\"hljs-property\">outerHTML\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">headers\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extractHeaders\u003C/span>(table),\n            \u003Cspan class=\"hljs-attr\">rows\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extractRows\u003C/span>(table),\n            \u003Cspan class=\"hljs-attr\">currentLayout\u003C/span>: \u003Cspan class=\"hljs-string\">'desktop'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">sortState\u003C/span>: { \u003Cspan class=\"hljs-attr\">column\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-attr\">direction\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span> },\n            \u003Cspan class=\"hljs-attr\">filters\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">hiddenColumns\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>()\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Add data attributes for mobile layout\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addDataLabels\u003C/span>(table, tableData.\u003Cspan class=\"hljs-property\">headers\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Enhance table functionality\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableSorting\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addSortingCapability\u003C/span>(tableData);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableFiltering\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addFilteringCapability\u003C/span>(tableData);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableColumnToggle\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addColumnToggleCapability\u003C/span>(tableData);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableExport\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addExportCapability\u003C/span>(tableData);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Set up responsive behavior\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupResponsiveBehavior\u003C/span>(tableData);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tables\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(tableId, tableData);\n        \n        \u003Cspan class=\"hljs-comment\">// Trigger initial layout\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateTableLayout\u003C/span>(tableData);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">extractHeaders\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerRow = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'thead tr, tr:first-child'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!headerRow) \u003Cspan class=\"hljs-keyword\">return\u003C/span> [];\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(headerRow.\u003Cspan class=\"hljs-property\">children\u003C/span>).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, index\u003C/span>) =>\u003C/span> ({\n            index,\n            \u003Cspan class=\"hljs-attr\">text\u003C/span>: cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">element\u003C/span>: cell,\n            \u003Cspan class=\"hljs-attr\">sortable\u003C/span>: !cell.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'no-sort'\u003C/span>),\n            \u003Cspan class=\"hljs-attr\">priority\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getColumnPriority\u003C/span>(cell),\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">detectColumnType\u003C/span>(table, index)\n        }));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">extractRows\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>) || table;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = tbody.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Skip header row if no tbody\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> startIndex = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>) ? \u003Cspan class=\"hljs-number\">0\u003C/span> : \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(rows).\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(startIndex).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">row, index\u003C/span>) =>\u003C/span> ({\n            \u003Cspan class=\"hljs-attr\">index\u003C/span>: index + startIndex,\n            \u003Cspan class=\"hljs-attr\">element\u003C/span>: row,\n            \u003Cspan class=\"hljs-attr\">cells\u003C/span>: \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-property\">children\u003C/span>).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> ({\n                \u003Cspan class=\"hljs-attr\">element\u003C/span>: cell,\n                \u003Cspan class=\"hljs-attr\">value\u003C/span>: cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>(),\n                \u003Cspan class=\"hljs-attr\">html\u003C/span>: cell.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span>\n            }))\n        }));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addDataLabels\u003C/span>(\u003Cspan class=\"hljs-params\">table, headers\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr, tr:not(:first-child)'\u003C/span>);\n        \n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = row.\u003Cspan class=\"hljs-property\">children\u003C/span>;\n            \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(cells).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, index\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headers[index]) {\n                    cell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-label'\u003C/span>, headers[index].\u003Cspan class=\"hljs-property\">text\u003C/span>);\n                }\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getColumnPriority\u003C/span>(\u003Cspan class=\"hljs-params\">cell\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cell.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'col-priority-1'\u003C/span>)) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cell.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'col-priority-2'\u003C/span>)) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">2\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cell.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'col-priority-3'\u003C/span>)) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">3\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">2\u003C/span>; \u003Cspan class=\"hljs-comment\">// Default priority\u003C/span>\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">detectColumnType\u003C/span>(\u003Cspan class=\"hljs-params\">table, columnIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">`tbody td:nth-child(\u003Cspan class=\"hljs-subst\">${columnIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>), tr:not(:first-child) td:nth-child(\u003Cspan class=\"hljs-subst\">${columnIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>)`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cells.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'string'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> hasNumbers = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> hasDates = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(cells).\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">5\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-regexp\">/^\\d+(\\.\\d+)?$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(text) || \u003Cspan class=\"hljs-regexp\">/^\\$[\\d,]+(\\.\\d{2})?$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(text)) {\n                hasNumbers++;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(text) && \u003Cspan class=\"hljs-regexp\">/\\d{4}/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(text)) {\n                hasDates++;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (hasNumbers >= \u003Cspan class=\"hljs-number\">3\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'number'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (hasDates >= \u003Cspan class=\"hljs-number\">3\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'date'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'string'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupResponsiveMonitoring\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Monitor viewport changes\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'resize'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">debounce\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> newBreakpoint = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentBreakpoint\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (newBreakpoint !== \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentBreakpoint\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentBreakpoint\u003C/span> = newBreakpoint;\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleBreakpointChange\u003C/span>();\n            }\n        }, \u003Cspan class=\"hljs-number\">250\u003C/span>));\n        \n        \u003Cspan class=\"hljs-comment\">// Monitor table container size changes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-string\">'ResizeObserver'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">ResizeObserver\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entries\u003C/span> =>\u003C/span> {\n                entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = entry.\u003Cspan class=\"hljs-property\">target\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableId = container.\u003Cspan class=\"hljs-property\">id\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableData = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tables\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(tableId);\n                    \n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tableData) {\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateScrollIndicators\u003C/span>(tableData);\n                    }\n                });\n            });\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tables\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">tableData\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(tableData.\u003Cspan class=\"hljs-property\">container\u003C/span>);\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getCurrentBreakpoint\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> width = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">innerWidth\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (width <= \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">breakpoints\u003C/span>.\u003Cspan class=\"hljs-property\">mobile\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'mobile'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (width <= \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">breakpoints\u003C/span>.\u003Cspan class=\"hljs-property\">tablet\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'tablet'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'desktop'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleBreakpointChange\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Breakpoint changed to: \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.currentBreakpoint}\u003C/span>`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tables\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">tableData\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateTableLayout\u003C/span>(tableData);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateTableLayout\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { container, table } = tableData;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> breakpoint = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentBreakpoint\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Remove existing responsive classes\u003C/span>\n        container.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'mobile-stack'\u003C/span>, \u003Cspan class=\"hljs-string\">'mobile-cards'\u003C/span>, \u003Cspan class=\"hljs-string\">'tablet-optimized'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Apply appropriate layout based on breakpoint\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (breakpoint) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'mobile'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (container.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">mobileLayout\u003C/span> === \u003Cspan class=\"hljs-string\">'cards'\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">switchToCardLayout\u003C/span>(tableData);\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    container.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'mobile-stack'\u003C/span>);\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">switchToStackLayout\u003C/span>(tableData);\n                }\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'tablet'\u003C/span>:\n                container.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'tablet-optimized'\u003C/span>);\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyColumnPriorities\u003C/span>(tableData);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showAllColumns\u003C/span>(tableData);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Update scroll indicators\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateScrollIndicators\u003C/span>(tableData);\n        \n        \u003Cspan class=\"hljs-comment\">// Update toolbar if exists\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateToolbar\u003C/span>(tableData);\n        \n        tableData.\u003Cspan class=\"hljs-property\">currentLayout\u003C/span> = breakpoint;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">switchToStackLayout\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { table } = tableData;\n        \n        \u003Cspan class=\"hljs-comment\">// Ensure data labels are present\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addDataLabels\u003C/span>(table, tableData.\u003Cspan class=\"hljs-property\">headers\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Update table structure for stacking\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr, tr:not(:first-child)'\u003C/span>);\n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            row.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'stacked-row'\u003C/span>);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">switchToCardLayout\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { container, table } = tableData;\n        \n        \u003Cspan class=\"hljs-comment\">// Create card container if it doesn't exist\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> cardContainer = container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-cards-mobile'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!cardContainer) {\n            cardContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            cardContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-cards-mobile'\u003C/span>;\n            container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(cardContainer);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Clear existing cards\u003C/span>\n        cardContainer.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Generate cards from table data\u003C/span>\n        tableData.\u003Cspan class=\"hljs-property\">rows\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> card = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createCardFromRow\u003C/span>(row, tableData.\u003Cspan class=\"hljs-property\">headers\u003C/span>);\n            cardContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(card);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Hide original table\u003C/span>\n        table.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createCardFromRow\u003C/span>(\u003Cspan class=\"hljs-params\">row, headers\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> card = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        card.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-card'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Use first column as card title\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> titleCell = row.\u003Cspan class=\"hljs-property\">cells\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>];\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (titleCell) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> title = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'h3'\u003C/span>);\n            title.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = titleCell.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n            card.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(title);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add other columns as key-value pairs\u003C/span>\n        row.\u003Cspan class=\"hljs-property\">cells\u003C/span>.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerIndex = index + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> header = headers[headerIndex];\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (header && cell.\u003Cspan class=\"hljs-property\">value\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> field = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'p'\u003C/span>);\n                field.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`<strong>\u003Cspan class=\"hljs-subst\">${header.text}\u003C/span>:</strong> \u003Cspan class=\"hljs-subst\">${cell.html}\u003C/span>`\u003C/span>;\n                card.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(field);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> card;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applyColumnPriorities\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { table } = tableData;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> breakpoint = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentBreakpoint\u003C/span>;\n        \n        tableData.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">`td:nth-child(\u003Cspan class=\"hljs-subst\">${index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>), th:nth-child(\u003Cspan class=\"hljs-subst\">${index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>)`\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Hide low priority columns on smaller screens\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> shouldHide = (\n                (breakpoint === \u003Cspan class=\"hljs-string\">'tablet'\u003C/span> && header.\u003Cspan class=\"hljs-property\">priority\u003C/span> > \u003Cspan class=\"hljs-number\">2\u003C/span>) ||\n                (breakpoint === \u003Cspan class=\"hljs-string\">'mobile'\u003C/span> && header.\u003Cspan class=\"hljs-property\">priority\u003C/span> > \u003Cspan class=\"hljs-number\">1\u003C/span>)\n            );\n            \n            cells.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n                cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = shouldHide ? \u003Cspan class=\"hljs-string\">'none'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            });\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (shouldHide) {\n                tableData.\u003Cspan class=\"hljs-property\">hiddenColumns\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(index);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                tableData.\u003Cspan class=\"hljs-property\">hiddenColumns\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(index);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showAllColumns\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { table } = tableData;\n        \n        \u003Cspan class=\"hljs-comment\">// Show all columns\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allCells = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td, th'\u003C/span>);\n        allCells.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n            cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        });\n        \n        tableData.\u003Cspan class=\"hljs-property\">hiddenColumns\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateScrollIndicators\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { container } = tableData;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollWrapper = container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-scroll-wrapper'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!scrollWrapper) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasHorizontalScroll = scrollWrapper.\u003Cspan class=\"hljs-property\">scrollWidth\u003C/span> > scrollWrapper.\u003Cspan class=\"hljs-property\">clientWidth\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (hasHorizontalScroll) {\n            container.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'has-horizontal-scroll'\u003C/span>);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            container.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'has-horizontal-scroll'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addSortingCapability\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { table, headers } = tableData;\n        \n        headers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (header.\u003Cspan class=\"hljs-property\">sortable\u003C/span>) {\n                header.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'sortable'\u003C/span>);\n                header.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sortTable\u003C/span>(tableData, index);\n                });\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sortTable\u003C/span>(\u003Cspan class=\"hljs-params\">tableData, columnIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { table, headers, sortState } = tableData;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> header = headers[columnIndex];\n        \n        \u003Cspan class=\"hljs-comment\">// Determine sort direction\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> direction = \u003Cspan class=\"hljs-string\">'asc'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sortState.\u003Cspan class=\"hljs-property\">column\u003C/span> === columnIndex) {\n            direction = sortState.\u003Cspan class=\"hljs-property\">direction\u003C/span> === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? \u003Cspan class=\"hljs-string\">'desc'\u003C/span> : \u003Cspan class=\"hljs-string\">'asc'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Update sort state\u003C/span>\n        tableData.\u003Cspan class=\"hljs-property\">sortState\u003C/span> = { \u003Cspan class=\"hljs-attr\">column\u003C/span>: columnIndex, direction };\n        \n        \u003Cspan class=\"hljs-comment\">// Update header classes\u003C/span>\n        headers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">h, i\u003C/span>) =>\u003C/span> {\n            h.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'sort-asc'\u003C/span>, \u003Cspan class=\"hljs-string\">'sort-desc'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (i === columnIndex) {\n                h.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">`sort-\u003Cspan class=\"hljs-subst\">${direction}\u003C/span>`\u003C/span>);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Sort table rows\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>) || table;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(tbody.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>));\n        \n        \u003Cspan class=\"hljs-comment\">// Skip header row if no tbody\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> dataRows = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>) ? rows : rows.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n        \n        dataRows.\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> aCell = a.\u003Cspan class=\"hljs-property\">children\u003C/span>[columnIndex];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> bCell = b.\u003Cspan class=\"hljs-property\">children\u003C/span>[columnIndex];\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!aCell || !bCell) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> aValue = aCell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> bValue = bCell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \n            \u003Cspan class=\"hljs-comment\">// Type-specific comparison\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (header.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'number'\u003C/span>) {\n                aValue = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(aValue.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[^\\d.-]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>)) || \u003Cspan class=\"hljs-number\">0\u003C/span>;\n                bValue = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(bValue.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[^\\d.-]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>)) || \u003Cspan class=\"hljs-number\">0\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> direction === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? aValue - bValue : bValue - aValue;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (header.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'date'\u003C/span>) {\n                aValue = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(aValue).\u003Cspan class=\"hljs-title function_\">getTime\u003C/span>() || \u003Cspan class=\"hljs-number\">0\u003C/span>;\n                bValue = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(bValue).\u003Cspan class=\"hljs-title function_\">getTime\u003C/span>() || \u003Cspan class=\"hljs-number\">0\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> direction === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? aValue - bValue : bValue - aValue;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-comment\">// String comparison\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = aValue.\u003Cspan class=\"hljs-title function_\">localeCompare\u003C/span>(bValue);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> direction === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? result : -result;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Reorder rows in DOM\u003C/span>\n        dataRows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> tbody.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(row));\n        \n        \u003Cspan class=\"hljs-comment\">// Update row data\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateRowData\u003C/span>(tableData);\n        \n        \u003Cspan class=\"hljs-comment\">// Dispatch custom event\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">dispatchTableEvent\u003C/span>(tableData, \u003Cspan class=\"hljs-string\">'sort'\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">column\u003C/span>: columnIndex,\n            direction,\n            \u003Cspan class=\"hljs-attr\">header\u003C/span>: header.\u003Cspan class=\"hljs-property\">text\u003C/span>\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateRowData\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        tableData.\u003Cspan class=\"hljs-property\">rows\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extractRows\u003C/span>(tableData.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addFilteringCapability\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create filter toolbar\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> toolbar = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createFilterToolbar\u003C/span>(tableData);\n        tableData.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(toolbar, tableData.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createFilterToolbar\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> toolbar = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        toolbar.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-toolbar'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Search input\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        searchContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-search'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchInput = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>);\n        searchInput.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'search'\u003C/span>;\n        searchInput.\u003Cspan class=\"hljs-property\">placeholder\u003C/span> = \u003Cspan class=\"hljs-string\">'Search table...'\u003C/span>;\n        searchInput.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-search-input'\u003C/span>;\n        \n        searchInput.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">debounce\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">filterTable\u003C/span>(tableData, searchInput.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n        }, \u003Cspan class=\"hljs-number\">300\u003C/span>));\n        \n        searchContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(searchInput);\n        toolbar.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(searchContainer);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> toolbar;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">filterTable\u003C/span>(\u003Cspan class=\"hljs-params\">tableData, searchTerm\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { table } = tableData;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr, tr:not(:first-child)'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> term = searchTerm.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n        \n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!term) {\n                row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = row.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> matches = text.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(term);\n            \n            row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = matches ? \u003Cspan class=\"hljs-string\">''\u003C/span> : \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Dispatch filter event\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">dispatchTableEvent\u003C/span>(tableData, \u003Cspan class=\"hljs-string\">'filter'\u003C/span>, { searchTerm });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addColumnToggleCapability\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Add column toggle controls to toolbar\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> toolbar = tableData.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-toolbar'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!toolbar) {\n            toolbar = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            toolbar.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-toolbar'\u003C/span>;\n            tableData.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(toolbar, tableData.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnToggle = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createColumnToggle\u003C/span>(tableData);\n        toolbar.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(columnToggle);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createColumnToggle\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> toggle = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        toggle.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'column-toggle'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> button = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n        button.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Columns'\u003C/span>;\n        button.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'column-toggle-button'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> dropdown = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        dropdown.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'column-toggle-dropdown'\u003C/span>;\n        \n        tableData.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> label = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'label'\u003C/span>);\n            label.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'column-toggle-item'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> checkbox = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>);\n            checkbox.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'checkbox'\u003C/span>;\n            checkbox.\u003Cspan class=\"hljs-property\">checked\u003C/span> = !tableData.\u003Cspan class=\"hljs-property\">hiddenColumns\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(index);\n            checkbox.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'change'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggleColumn\u003C/span>(tableData, index, checkbox.\u003Cspan class=\"hljs-property\">checked\u003C/span>);\n            });\n            \n            label.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(checkbox);\n            label.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTextNode\u003C/span>(header.\u003Cspan class=\"hljs-property\">text\u003C/span>));\n            dropdown.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(label);\n        });\n        \n        button.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            dropdown.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggle\u003C/span>(\u003Cspan class=\"hljs-string\">'active'\u003C/span>);\n        });\n        \n        toggle.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(button);\n        toggle.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(dropdown);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> toggle;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">toggleColumn\u003C/span>(\u003Cspan class=\"hljs-params\">tableData, columnIndex, show\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { table } = tableData;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">`td:nth-child(\u003Cspan class=\"hljs-subst\">${columnIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>), th:nth-child(\u003Cspan class=\"hljs-subst\">${columnIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>)`\u003C/span>);\n        \n        cells.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n            cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = show ? \u003Cspan class=\"hljs-string\">''\u003C/span> : \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (show) {\n            tableData.\u003Cspan class=\"hljs-property\">hiddenColumns\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(columnIndex);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            tableData.\u003Cspan class=\"hljs-property\">hiddenColumns\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(columnIndex);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Update scroll indicators\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateScrollIndicators\u003C/span>(tableData);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addExportCapability\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> toolbar = tableData.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-toolbar'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!toolbar) {\n            toolbar = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            toolbar.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-toolbar'\u003C/span>;\n            tableData.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(toolbar, tableData.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> exportButton = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n        exportButton.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Export'\u003C/span>;\n        exportButton.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'export-button'\u003C/span>;\n        exportButton.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showExportOptions\u003C/span>(tableData);\n        });\n        \n        toolbar.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(exportButton);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showExportOptions\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> options = [\n            { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'CSV'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">exportCSV\u003C/span>(tableData) },\n            { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'JSON'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">exportJSON\u003C/span>(tableData) },\n            { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Print'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">printTable\u003C/span>(tableData) }\n        ];\n        \n        \u003Cspan class=\"hljs-comment\">// Simple modal for export options\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> modal = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createModal\u003C/span>(\u003Cspan class=\"hljs-string\">'Export Options'\u003C/span>, options);\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(modal);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">exportCSV\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { headers, rows } = tableData;\n        \n        \u003Cspan class=\"hljs-comment\">// Filter visible columns\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleHeaders = headers.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">_, index\u003C/span>) =>\u003C/span> !tableData.\u003Cspan class=\"hljs-property\">hiddenColumns\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(index));\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleColumnIndices = visibleHeaders.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">h\u003C/span> =>\u003C/span> h.\u003Cspan class=\"hljs-property\">index\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> csv = visibleHeaders.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">h\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-string\">`"\u003Cspan class=\"hljs-subst\">${h.text}\u003C/span>"`\u003C/span>).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">','\u003C/span>) + \u003Cspan class=\"hljs-string\">'\\n'\u003C/span>;\n        \n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> csvRow = visibleColumnIndices\n                .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">index\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-string\">`"\u003Cspan class=\"hljs-subst\">${row.cells[index]?.value || \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>"`\u003C/span>)\n                .\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">','\u003C/span>);\n            csv += csvRow + \u003Cspan class=\"hljs-string\">'\\n'\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">downloadFile\u003C/span>(csv, \u003Cspan class=\"hljs-string\">'table-export.csv'\u003C/span>, \u003Cspan class=\"hljs-string\">'text/csv'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">exportJSON\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { headers, rows } = tableData;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleHeaders = headers.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">_, index\u003C/span>) =>\u003C/span> !tableData.\u003Cspan class=\"hljs-property\">hiddenColumns\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(index));\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> jsonData = rows.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowData = {};\n            visibleHeaders.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">header\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> cell = row.\u003Cspan class=\"hljs-property\">cells\u003C/span>[header.\u003Cspan class=\"hljs-property\">index\u003C/span>];\n                rowData[header.\u003Cspan class=\"hljs-property\">text\u003C/span>] = cell ? cell.\u003Cspan class=\"hljs-property\">value\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            });\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> rowData;\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> json = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(jsonData, \u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-number\">2\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">downloadFile\u003C/span>(json, \u003Cspan class=\"hljs-string\">'table-export.json'\u003C/span>, \u003Cspan class=\"hljs-string\">'application/json'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">printTable\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> printWindow = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">open\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>, \u003Cspan class=\"hljs-string\">'_blank'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { table, headers } = tableData;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> printHTML = \u003Cspan class=\"hljs-string\">`\n            <!DOCTYPE html>\n            <html>\n            <head>\n                <title>Table Export</title>\n                <style>\n                    body { font-family: Arial, sans-serif; margin: 20px; }\n                    table { border-collapse: collapse; width: 100%; }\n                    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }\n                    th { background-color: #f2f2f2; font-weight: bold; }\n                </style>\n            </head>\n            <body>\n                <h1>Table Export</h1>\n                \u003Cspan class=\"hljs-subst\">${table.outerHTML}\u003C/span>\n            </body>\n            </html>\n        `\u003C/span>;\n        \n        printWindow.\u003Cspan class=\"hljs-property\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">write\u003C/span>(printHTML);\n        printWindow.\u003Cspan class=\"hljs-property\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">close\u003C/span>();\n        printWindow.\u003Cspan class=\"hljs-title function_\">print\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">downloadFile\u003C/span>(\u003Cspan class=\"hljs-params\">content, filename, mimeType\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> blob = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Blob\u003C/span>([content], { \u003Cspan class=\"hljs-attr\">type\u003C/span>: mimeType });\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> url = \u003Cspan class=\"hljs-variable constant_\">URL\u003C/span>.\u003Cspan class=\"hljs-title function_\">createObjectURL\u003C/span>(blob);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> link = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'a'\u003C/span>);\n        link.\u003Cspan class=\"hljs-property\">href\u003C/span> = url;\n        link.\u003Cspan class=\"hljs-property\">download\u003C/span> = filename;\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(link);\n        link.\u003Cspan class=\"hljs-title function_\">click\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(link);\n        \n        \u003Cspan class=\"hljs-variable constant_\">URL\u003C/span>.\u003Cspan class=\"hljs-title function_\">revokeObjectURL\u003C/span>(url);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupEventListeners\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Handle clicks outside dropdowns\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.column-toggle'\u003C/span>)) {\n                \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.column-toggle-dropdown.active'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">dropdown\u003C/span> =>\u003C/span> {\n                    dropdown.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'active'\u003C/span>);\n                });\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateToolbar\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> toolbar = tableData.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-toolbar'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!toolbar) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Update toolbar visibility based on layout\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> breakpoint = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentBreakpoint\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (breakpoint === \u003Cspan class=\"hljs-string\">'mobile'\u003C/span>) {\n            toolbar.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'mobile-layout'\u003C/span>);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            toolbar.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'mobile-layout'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createModal\u003C/span>(\u003Cspan class=\"hljs-params\">title, options\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> overlay = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        overlay.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'modal-overlay'\u003C/span>;\n        overlay.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n            background: rgba(0,0,0,0.5); display: flex; align-items: center;\n            justify-content: center; z-index: 10000;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> modal = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        modal.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'modal'\u003C/span>;\n        modal.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            background: white; padding: 20px; border-radius: 8px;\n            min-width: 200px; max-width: 400px;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> titleElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'h3'\u003C/span>);\n        titleElement.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = title;\n        titleElement.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">marginTop\u003C/span> = \u003Cspan class=\"hljs-string\">'0'\u003C/span>;\n        modal.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(titleElement);\n        \n        options.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">option\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> button = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n            button.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = option.\u003Cspan class=\"hljs-property\">label\u003C/span>;\n            button.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n                display: block; width: 100%; padding: 10px;\n                margin: 5px 0; border: 1px solid #ddd;\n                background: white; cursor: pointer;\n            `\u003C/span>;\n            button.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                option.\u003Cspan class=\"hljs-title function_\">action\u003C/span>();\n                \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(overlay);\n            });\n            modal.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(button);\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> closeButton = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n        closeButton.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Cancel'\u003C/span>;\n        closeButton.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            display: block; width: 100%; padding: 10px;\n            margin: 10px 0 0 0; border: 1px solid #ccc;\n            background: #f8f9fa; cursor: pointer;\n        `\u003C/span>;\n        closeButton.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(overlay);\n        });\n        modal.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(closeButton);\n        \n        overlay.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(modal);\n        \n        \u003Cspan class=\"hljs-comment\">// Close on overlay click\u003C/span>\n        overlay.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">target\u003C/span> === overlay) {\n                \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(overlay);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> overlay;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">dispatchTableEvent\u003C/span>(\u003Cspan class=\"hljs-params\">tableData, eventType, detail\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> event = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>(\u003Cspan class=\"hljs-string\">`table-\u003Cspan class=\"hljs-subst\">${eventType}\u003C/span>`\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">detail\u003C/span>: { \u003Cspan class=\"hljs-attr\">tableId\u003C/span>: tableData.\u003Cspan class=\"hljs-property\">id\u003C/span>, ...detail }\n        });\n        \n        tableData.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(event);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">debounce\u003C/span>(\u003Cspan class=\"hljs-params\">func, wait\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> timeout;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">executedFunction\u003C/span>(\u003Cspan class=\"hljs-params\">...args\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">later\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n                \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(timeout);\n                \u003Cspan class=\"hljs-title function_\">func\u003C/span>(...args);\n            };\n            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(timeout);\n            timeout = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(later, wait);\n        };\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Public API methods\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">getTable\u003C/span>(\u003Cspan class=\"hljs-params\">tableId\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tables\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(tableId);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">refreshTable\u003C/span>(\u003Cspan class=\"hljs-params\">tableId\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableData = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tables\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(tableId);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tableData) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateRowData\u003C/span>(tableData);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateTableLayout\u003C/span>(tableData);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">exportTable\u003C/span>(\u003Cspan class=\"hljs-params\">tableId, format = \u003Cspan class=\"hljs-string\">'csv'\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableData = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tables\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(tableId);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!tableData) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (format.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>()) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'csv'\u003C/span>:\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">exportCSV\u003C/span>(tableData);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'json'\u003C/span>:\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">exportJSON\u003C/span>(tableData);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">`Unsupported export format: \u003Cspan class=\"hljs-subst\">${format}\u003C/span>`\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">destroy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tables\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Responsive table manager destroyed'\u003C/span>);\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Auto-initialize on DOM ready\u003C/span>\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">responsiveTableManager\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">ResponsiveTableManager\u003C/span>();\n    });\n}\n\n\u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">ResponsiveTableManager\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-mobile-optimization-techniques\">Advanced Mobile Optimization Techniques\u003C/h2>\n\u003Ch3 id=\"touch-friendly-table-interactions\">Touch-Friendly Table Interactions\u003C/h3>\n\u003Cp>Optimizing table interactions for mobile and touch devices:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* touch-optimized-tables.css - Touch-friendly table enhancements */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Touch target sizing */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">min-height\u003C/span>: \u003Cspan class=\"hljs-number\">44px\u003C/span>; \u003Cspan class=\"hljs-comment\">/* iOS minimum touch target */\u003C/span>\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Touch-friendly sorting controls */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.sortable\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding-right\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    -webkit-tap-highlight-\u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n    tap-highlight-\u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.sortable\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateY\u003C/span>(-\u003Cspan class=\"hljs-number\">50%\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Swipe gesture support */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-row-swipeable\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-row-swipeable\u003C/span> \u003Cspan class=\"hljs-selector-class\">.swipe-actions\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#e74c3c\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateX\u003C/span>(\u003Cspan class=\"hljs-number\">100%\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: transform \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-row-swipeable\u003C/span>\u003Cspan class=\"hljs-selector-class\">.swiped\u003C/span> \u003Cspan class=\"hljs-selector-class\">.swipe-actions\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateX\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile-optimized table controls */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-controls-mobile\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: sticky;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">5\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e5e5e5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.table-controls-mobile\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n        \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: space-between;\n        \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n        \u003Cspan class=\"hljs-attribute\">flex-wrap\u003C/span>: wrap;\n        \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-controls-mobile\u003C/span> \u003Cspan class=\"hljs-selector-tag\">button\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ddd\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n        touch-action: manipulation;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-controls-mobile\u003C/span> \u003Cspan class=\"hljs-selector-tag\">button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:active\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">scale\u003C/span>(\u003Cspan class=\"hljs-number\">0.98\u003C/span>);\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Optimized mobile card interactions */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-card\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n    -webkit-tap-highlight-\u003Cspan class=\"hljs-attribute\">color\u003C/span>: transparent;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-card\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:active\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">scale\u003C/span>(\u003Cspan class=\"hljs-number\">0.98\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Pull-to-refresh indicator */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-refresh-indicator\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-refreshing\u003C/span> \u003Cspan class=\"hljs-selector-class\">.table-refresh-indicator\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Loading states optimized for mobile */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.loading\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:after\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"Loading..."\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">0.95\u003C/span>);\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n        \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n        \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: center;\n        \u003Cspan class=\"hljs-attribute\">flex-direction\u003C/span>: column;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.loading\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:after\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">""\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">30px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">30px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#f3f3f3\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-top\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#3498db\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: spin \u003Cspan class=\"hljs-number\">1s\u003C/span> linear infinite;\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@keyframes\u003C/span> spin {\n    \u003Cspan class=\"hljs-number\">0%\u003C/span> { \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">rotate\u003C/span>(\u003Cspan class=\"hljs-number\">0deg\u003C/span>); }\n    \u003Cspan class=\"hljs-number\">100%\u003C/span> { \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">rotate\u003C/span>(\u003Cspan class=\"hljs-number\">360deg\u003C/span>); }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Accessibility enhancements for touch */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#3498db\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#3498db\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: -\u003Cspan class=\"hljs-number\">2px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">52\u003C/span>, \u003Cspan class=\"hljs-number\">152\u003C/span>, \u003Cspan class=\"hljs-number\">219\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* High contrast mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reduced motion support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> * {\n        \u003Cspan class=\"hljs-attribute\">animation-duration\u003C/span>: \u003Cspan class=\"hljs-number\">0.01ms\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">animation-iteration-count\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">transition-duration\u003C/span>: \u003Cspan class=\"hljs-number\">0.01ms\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"progressive-enhancement-strategies\">Progressive Enhancement Strategies\u003C/h3>\n\u003Cp>Implementing progressive enhancement for optimal performance:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// progressive-table-enhancement.js - Progressive enhancement system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">ProgressiveTableEnhancement\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">features\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">intersectionObserver\u003C/span>: \u003Cspan class=\"hljs-string\">'IntersectionObserver'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">resizeObserver\u003C/span>: \u003Cspan class=\"hljs-string\">'ResizeObserver'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">customElements\u003C/span>: \u003Cspan class=\"hljs-string\">'customElements'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">cssGrid\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">supportsCSSGrid\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">touchEvents\u003C/span>: \u003Cspan class=\"hljs-string\">'ontouchstart'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">gestureEvents\u003C/span>: \u003Cspan class=\"hljs-string\">'GestureEvent'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadStrategies\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">initialized\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">supportsCSSGrid\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">document\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span> && \n               \u003Cspan class=\"hljs-variable constant_\">CSS\u003C/span> && \u003Cspan class=\"hljs-variable constant_\">CSS\u003C/span>.\u003Cspan class=\"hljs-property\">supports\u003C/span> && \n               \u003Cspan class=\"hljs-variable constant_\">CSS\u003C/span>.\u003Cspan class=\"hljs-title function_\">supports\u003C/span>(\u003Cspan class=\"hljs-string\">'display'\u003C/span>, \u003Cspan class=\"hljs-string\">'grid'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">initialize\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">initialized\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Initializing progressive table enhancement...'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Supported features:'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">features\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Load core functionality first\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadCoreFeatures\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Load enhanced features based on capability\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadEnhancedFeatures\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Set up lazy loading for advanced features\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupLazyLoading\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">initialized\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Progressive enhancement complete'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadCoreFeatures\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Always load basic responsive functionality\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceBasicTables\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Add touch optimization if supported\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">features\u003C/span>.\u003Cspan class=\"hljs-property\">touchEvents\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addTouchOptimizations\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadEnhancedFeatures\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Load sorting if JavaScript is fully supported\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">supportsAdvancedJS\u003C/span>()) {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadSortingModule\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Load virtual scrolling for large datasets\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">features\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">detectLargeTables\u003C/span>()) {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadVirtualScrolling\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Load advanced responsive features\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">features\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadAdvancedResponsive\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enhanceBasicTables\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'table:not(.enhanced)'\u003C/span>);\n        \n        tables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">table\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Wrap tables for responsive behavior\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">wrapTableForResponsive\u003C/span>(table);\n            \n            \u003Cspan class=\"hljs-comment\">// Add basic mobile optimizations\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addBasicMobileOptimizations\u003C/span>(table);\n            \n            \u003Cspan class=\"hljs-comment\">// Mark as enhanced\u003C/span>\n            table.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'enhanced'\u003C/span>);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">wrapTableForResponsive\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (table.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.responsive-table-container'\u003C/span>)) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        container.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'responsive-table-container'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollWrapper = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        scrollWrapper.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-scroll-wrapper'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Move table into wrapper structure\u003C/span>\n        table.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(container, table);\n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(scrollWrapper);\n        scrollWrapper.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-comment\">// Add basic scroll detection\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addScrollDetection\u003C/span>(container, scrollWrapper);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addScrollDetection\u003C/span>(\u003Cspan class=\"hljs-params\">container, scrollWrapper\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> scrollTimeout;\n        \n        scrollWrapper.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            container.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'scrolling'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(scrollTimeout);\n            scrollTimeout = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                container.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'scrolling'\u003C/span>);\n            }, \u003Cspan class=\"hljs-number\">150\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Update scroll indicators\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateBasicScrollIndicators\u003C/span>(container, scrollWrapper);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateBasicScrollIndicators\u003C/span>(\u003Cspan class=\"hljs-params\">container, scrollWrapper\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> isScrolledToStart = scrollWrapper.\u003Cspan class=\"hljs-property\">scrollLeft\u003C/span> <= \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> isScrolledToEnd = \n            scrollWrapper.\u003Cspan class=\"hljs-property\">scrollLeft\u003C/span> >= scrollWrapper.\u003Cspan class=\"hljs-property\">scrollWidth\u003C/span> - scrollWrapper.\u003Cspan class=\"hljs-property\">clientWidth\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \n        container.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggle\u003C/span>(\u003Cspan class=\"hljs-string\">'scrolled-to-start'\u003C/span>, isScrolledToStart);\n        container.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggle\u003C/span>(\u003Cspan class=\"hljs-string\">'scrolled-to-end'\u003C/span>, isScrolledToEnd);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addBasicMobileOptimizations\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Add data labels for mobile stacking\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>);\n        \n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n            cells.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, index\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> header = headers[index];\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (header) {\n                    cell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-label'\u003C/span>, header.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>());\n                }\n            });\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Add mobile class detection\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addMobileClassDetection\u003C/span>(table);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addMobileClassDetection\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">checkMobile\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> isMobile = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">innerWidth\u003C/span> <= \u003Cspan class=\"hljs-number\">768\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = table.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.responsive-table-container'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (container) {\n                container.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggle\u003C/span>(\u003Cspan class=\"hljs-string\">'mobile-layout'\u003C/span>, isMobile);\n            }\n        };\n        \n        \u003Cspan class=\"hljs-title function_\">checkMobile\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'resize'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">debounce\u003C/span>(checkMobile, \u003Cspan class=\"hljs-number\">250\u003C/span>));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addTouchOptimizations\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Add touch-specific CSS class\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'touch-enabled'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Optimize touch targets\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">optimizeTouchTargets\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Add touch gestures if supported\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">features\u003C/span>.\u003Cspan class=\"hljs-property\">gestureEvents\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addGestureSupport\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">optimizeTouchTargets\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> style = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'style'\u003C/span>);\n        style.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            .touch-enabled .responsive-table-container th,\n            .touch-enabled .responsive-table-container td {\n                min-height: 44px;\n                padding: 12px 16px;\n            }\n            \n            .touch-enabled .table-toolbar button {\n                min-height: 44px;\n                min-width: 44px;\n                padding: 8px 16px;\n            }\n        `\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(style);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addGestureSupport\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'gesturestart'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Add swipe detection for mobile tables\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addSwipeDetection\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addSwipeDetection\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> startX, startY, currentX, currentY;\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'touchstart'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> touch = e.\u003Cspan class=\"hljs-property\">touches\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>];\n            startX = touch.\u003Cspan class=\"hljs-property\">clientX\u003C/span>;\n            startY = touch.\u003Cspan class=\"hljs-property\">clientY\u003C/span>;\n        }, { \u003Cspan class=\"hljs-attr\">passive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'touchmove'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!startX || !startY) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> touch = e.\u003Cspan class=\"hljs-property\">touches\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>];\n            currentX = touch.\u003Cspan class=\"hljs-property\">clientX\u003C/span>;\n            currentY = touch.\u003Cspan class=\"hljs-property\">clientY\u003C/span>;\n        }, { \u003Cspan class=\"hljs-attr\">passive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'touchend'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!startX || !startY || !currentX || !currentY) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> diffX = startX - currentX;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> diffY = startY - currentY;\n            \n            \u003Cspan class=\"hljs-comment\">// Check if it's a horizontal swipe\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">abs\u003C/span>(diffX) > \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">abs\u003C/span>(diffY) && \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">abs\u003C/span>(diffX) > \u003Cspan class=\"hljs-number\">50\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> target = e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-card, tbody tr'\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (target) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleSwipeGesture\u003C/span>(target, diffX > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">'left'\u003C/span> : \u003Cspan class=\"hljs-string\">'right'\u003C/span>);\n                }\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Reset values\u003C/span>\n            startX = startY = currentX = currentY = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        }, { \u003Cspan class=\"hljs-attr\">passive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleSwipeGesture\u003C/span>(\u003Cspan class=\"hljs-params\">element, direction\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Dispatch custom swipe event\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> swipeEvent = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>(\u003Cspan class=\"hljs-string\">'tableSwipe'\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">detail\u003C/span>: { element, direction },\n            \u003Cspan class=\"hljs-attr\">bubbles\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n        });\n        element.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(swipeEvent);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">supportsAdvancedJS\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n                \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span> &&\n                \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span> &&\n                \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-title class_\">Promise\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span> &&\n                \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-property\">\u003Cspan class=\"hljs-keyword\">prototype\u003C/span>\u003C/span>.\u003Cspan class=\"hljs-property\">includes\u003C/span> &&\n                \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-property\">assign\u003C/span>\n            );\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (e) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">detectLargeTables\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(tables).\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">table\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> rows.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">100\u003C/span>;\n        });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadSortingModule\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Dynamically load sorting functionality\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">TableSorter\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-variable language_\">module\u003C/span> = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-keyword\">import\u003C/span>(\u003Cspan class=\"hljs-string\">'./table-sorter.js'\u003C/span>);\n                \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">TableSorter\u003C/span> = \u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">default\u003C/span>;\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Failed to load sorting module:'\u003C/span>, error);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Initialize sorting on enhanced tables\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.enhanced table'\u003C/span>);\n        tables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">table\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title class_\">TableSorter\u003C/span>(table);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadVirtualScrolling\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">VirtualTableScroller\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-variable language_\">module\u003C/span> = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-keyword\">import\u003C/span>(\u003Cspan class=\"hljs-string\">'./virtual-table-scroller.js'\u003C/span>);\n                \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">VirtualTableScroller\u003C/span> = \u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">default\u003C/span>;\n                \n                \u003Cspan class=\"hljs-comment\">// Apply to large tables\u003C/span>\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyVirtualScrolling\u003C/span>();\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Failed to load virtual scrolling:'\u003C/span>, error);\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applyVirtualScrolling\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> largeTables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n        \n        largeTables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">table\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (rows.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">100\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title class_\">VirtualTableScroller\u003C/span>(table, {\n                    \u003Cspan class=\"hljs-attr\">itemHeight\u003C/span>: \u003Cspan class=\"hljs-number\">44\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">bufferSize\u003C/span>: \u003Cspan class=\"hljs-number\">10\u003C/span>\n                });\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadAdvancedResponsive\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Initialize advanced responsive features\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupAdvancedBreakpointDetection\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupContainerQueries\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupAdvancedBreakpointDetection\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">features\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">ResizeObserver\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entries\u003C/span> =>\u003C/span> {\n            entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = entry.\u003Cspan class=\"hljs-property\">target\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> width = entry.\u003Cspan class=\"hljs-property\">contentRect\u003C/span>.\u003Cspan class=\"hljs-property\">width\u003C/span>;\n                \n                \u003Cspan class=\"hljs-comment\">// Apply size-based classes\u003C/span>\n                container.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggle\u003C/span>(\u003Cspan class=\"hljs-string\">'container-small'\u003C/span>, width < \u003Cspan class=\"hljs-number\">400\u003C/span>);\n                container.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggle\u003C/span>(\u003Cspan class=\"hljs-string\">'container-medium'\u003C/span>, width >= \u003Cspan class=\"hljs-number\">400\u003C/span> && width < \u003Cspan class=\"hljs-number\">800\u003C/span>);\n                container.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggle\u003C/span>(\u003Cspan class=\"hljs-string\">'container-large'\u003C/span>, width >= \u003Cspan class=\"hljs-number\">800\u003C/span>);\n                \n                \u003Cspan class=\"hljs-comment\">// Trigger custom resize event\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> resizeEvent = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>(\u003Cspan class=\"hljs-string\">'containerResize'\u003C/span>, {\n                    \u003Cspan class=\"hljs-attr\">detail\u003C/span>: { width, \u003Cspan class=\"hljs-attr\">height\u003C/span>: entry.\u003Cspan class=\"hljs-property\">contentRect\u003C/span>.\u003Cspan class=\"hljs-property\">height\u003C/span> }\n                });\n                container.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(resizeEvent);\n            });\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Observe all table containers\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.responsive-table-container'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">container\u003C/span> =>\u003C/span> {\n            observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(container);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupContainerQueries\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Polyfill container queries using ResizeObserver\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> style = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'style'\u003C/span>);\n        style.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            .container-small .responsive-table-container table {\n                font-size: 12px;\n            }\n            \n            .container-small .responsive-table-container th,\n            .container-small .responsive-table-container td {\n                padding: 6px 8px;\n            }\n            \n            .container-medium .responsive-table-container {\n                /* Medium container styles */\n            }\n            \n            .container-large .responsive-table-container {\n                /* Large container styles */\n            }\n        `\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(style);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupLazyLoading\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">features\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Set up lazy loading for tables that are not in viewport\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">entries\u003C/span>) =>\u003C/span> {\n            entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span>) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = entry.\u003Cspan class=\"hljs-property\">target\u003C/span>;\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadTableEnhancements\u003C/span>(container);\n                    observer.\u003Cspan class=\"hljs-title function_\">unobserve\u003C/span>(container);\n                }\n            });\n        }, {\n            \u003Cspan class=\"hljs-attr\">rootMargin\u003C/span>: \u003Cspan class=\"hljs-string\">'50px'\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Observe tables that haven't been enhanced yet\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.responsive-table-container:not(.fully-enhanced)'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">container\u003C/span> =>\u003C/span> {\n            observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(container);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">loadTableEnhancements\u003C/span>(\u003Cspan class=\"hljs-params\">container\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Load additional features for visible tables\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!table) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Add advanced sorting\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addAdvancedSorting\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-comment\">// Add filtering\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addFiltering\u003C/span>(container);\n        \n        \u003Cspan class=\"hljs-comment\">// Add export functionality\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addExport\u003C/span>(container);\n        \n        \u003Cspan class=\"hljs-comment\">// Mark as fully enhanced\u003C/span>\n        container.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'fully-enhanced'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addAdvancedSorting\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Implementation for advanced sorting features\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>);\n        headers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!header.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'no-sort'\u003C/span>)) {\n                header.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'sortable'\u003C/span>);\n                header.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'0'\u003C/span>);\n                header.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n                header.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">`Sort by \u003Cspan class=\"hljs-subst\">${header.textContent}\u003C/span>`\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addFiltering\u003C/span>(\u003Cspan class=\"hljs-params\">container\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Add search functionality\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        searchContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-search-container'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchInput = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>);\n        searchInput.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'search'\u003C/span>;\n        searchInput.\u003Cspan class=\"hljs-property\">placeholder\u003C/span> = \u003Cspan class=\"hljs-string\">'Search table...'\u003C/span>;\n        searchInput.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-search-input'\u003C/span>;\n        \n        searchContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(searchInput);\n        container.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(searchContainer, container.\u003Cspan class=\"hljs-property\">firstChild\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Add search functionality\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupTableSearch\u003C/span>(searchInput, container);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupTableSearch\u003C/span>(\u003Cspan class=\"hljs-params\">searchInput, container\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>));\n        \n        searchInput.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">debounce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> term = e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \n            rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = row.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> matches = !term || text.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(term);\n                row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = matches ? \u003Cspan class=\"hljs-string\">''\u003C/span> : \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n            });\n            \n            \u003Cspan class=\"hljs-comment\">// Update row count indicator\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateRowCount\u003C/span>(container, rows, term);\n        }, \u003Cspan class=\"hljs-number\">300\u003C/span>));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateRowCount\u003C/span>(\u003Cspan class=\"hljs-params\">container, rows, searchTerm\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> indicator = container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.row-count-indicator'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!indicator) {\n            indicator = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            indicator.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'row-count-indicator'\u003C/span>;\n            container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(indicator);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (searchTerm) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleRows = rows.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> !== \u003Cspan class=\"hljs-string\">'none'\u003C/span>);\n            indicator.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`Showing \u003Cspan class=\"hljs-subst\">${visibleRows.length}\u003C/span> of \u003Cspan class=\"hljs-subst\">${rows.length}\u003C/span> rows`\u003C/span>;\n            indicator.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'block'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            indicator.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addExport\u003C/span>(\u003Cspan class=\"hljs-params\">container\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Add export button\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> exportButton = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n        exportButton.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'↓ Export'\u003C/span>;\n        exportButton.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-export-button'\u003C/span>;\n        exportButton.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showExportModal\u003C/span>(container);\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> toolbar = container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-search-container'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!toolbar) {\n            toolbar = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            toolbar.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-toolbar'\u003C/span>;\n            container.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(toolbar, container.\u003Cspan class=\"hljs-property\">firstChild\u003C/span>);\n        }\n        \n        toolbar.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(exportButton);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showExportModal\u003C/span>(\u003Cspan class=\"hljs-params\">container\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Simple export functionality\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> csv = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">tableToCSV\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> blob = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Blob\u003C/span>([csv], { \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text/csv'\u003C/span> });\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> url = \u003Cspan class=\"hljs-variable constant_\">URL\u003C/span>.\u003Cspan class=\"hljs-title function_\">createObjectURL\u003C/span>(blob);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> link = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'a'\u003C/span>);\n        link.\u003Cspan class=\"hljs-property\">href\u003C/span> = url;\n        link.\u003Cspan class=\"hljs-property\">download\u003C/span> = \u003Cspan class=\"hljs-string\">'table-export.csv'\u003C/span>;\n        link.\u003Cspan class=\"hljs-title function_\">click\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable constant_\">URL\u003C/span>.\u003Cspan class=\"hljs-title function_\">revokeObjectURL\u003C/span>(url);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">tableToCSV\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>));\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> rows.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>));\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> cells.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n                \u003Cspan class=\"hljs-comment\">// Escape commas and quotes\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> text.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">','\u003C/span>) || text.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'"'\u003C/span>) \n                    ? \u003Cspan class=\"hljs-string\">`"\u003Cspan class=\"hljs-subst\">${text.replace(/\u003Cspan class=\"hljs-string\">"/g, '"\u003C/span>\u003Cspan class=\"hljs-string\">"')}"\u003C/span>\u003Cspan class=\"hljs-string\">` \n                    : text;\n            }).join(',');\n        }).join('\\n');\n    }\n    \n    debounce(func, wait) {\n        let timeout;\n        return function executedFunction(...args) {\n            const later = () => {\n                clearTimeout(timeout);\n                func(...args);\n            };\n            clearTimeout(timeout);\n            timeout = setTimeout(later, wait);\n        };\n    }\n    \n    // Public API\n    enhanceTable(table) {\n        if (table.classList.contains('enhanced')) return;\n        \n        this.wrapTableForResponsive(table);\n        this.addBasicMobileOptimizations(table);\n        table.classList.add('enhanced');\n        \n        // Load full enhancements if in viewport\n        const container = table.closest('.responsive-table-container');\n        if (this.isInViewport(container)) {\n            this.loadTableEnhancements(container);\n        }\n    }\n    \n    isInViewport(element) {\n        const rect = element.getBoundingClientRect();\n        return (\n            rect.top >= 0 &&\n            rect.left >= 0 &&\n            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n            rect.right <= (window.innerWidth || document.documentElement.clientWidth)\n        );\n    }\n}\n\n// Initialize progressive enhancement\nif (typeof window !== 'undefined') {\n    const progressiveEnhancement = new ProgressiveTableEnhancement();\n    \n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', () => {\n            progressiveEnhancement.initialize();\n        });\n    } else {\n        progressiveEnhancement.initialize();\n    }\n    \n    // Expose to global scope\n    window.progressiveTableEnhancement = progressiveEnhancement;\n}\u003C/span>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-systems\">Integration with Documentation Systems\u003C/h2>\n\u003Cp>Responsive table design integrates seamlessly with modern documentation workflows. When combined with \u003Ca href=\"/blog/markdown-version-control-git-integration-complete-guide\">automated content management systems and version control\u003C/a>, responsive tables maintain their adaptive behavior across different deployment environments while ensuring that data presentations remain consistent and accessible throughout content lifecycle management processes.\u003C/p>\n\u003Cp>For comprehensive table management, responsive design works effectively with \u003Ca href=\"/blog/markdown-table-borders-styling-complete-guide\">advanced table styling and formatting systems\u003C/a> to create cohesive data presentation architectures that adapt visual styling based on viewport constraints while preserving data hierarchy and maintaining professional appearance standards across all device categories and user contexts.\u003C/p>\n\u003Cp>When building sophisticated documentation platforms, responsive tables complement \u003Ca href=\"/blog/markdown-table-sorting-filtering-interactive-guide\">interactive table features and user engagement systems\u003C/a> by ensuring that sorting, filtering, and data manipulation capabilities remain functional and accessible across mobile and desktop environments, providing consistent user experiences regardless of device limitations or interaction paradigms.\u003C/p>\n\u003Ch2 id=\"performance-optimization-strategies\">Performance Optimization Strategies\u003C/h2>\n\u003Ch3 id=\"efficient-responsive-table-loading\">Efficient Responsive Table Loading\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// performance-optimized-tables.js - Performance optimization techniques\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">PerformanceOptimizedTables\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadStrategies\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">eager\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">lazy\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">deferred\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>()\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceObserver\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupPerformanceMonitoring\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupPerformanceMonitoring\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-string\">'PerformanceObserver'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceObserver\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">PerformanceObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">list\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> entries = list.\u003Cspan class=\"hljs-title function_\">getEntries\u003C/span>();\n                entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (entry.\u003Cspan class=\"hljs-property\">entryType\u003C/span> === \u003Cspan class=\"hljs-string\">'measure'\u003C/span> && entry.\u003Cspan class=\"hljs-property\">name\u003C/span>.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'table-'\u003C/span>)) {\n                        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Table performance: \u003Cspan class=\"hljs-subst\">${entry.name}\u003C/span> took \u003Cspan class=\"hljs-subst\">${entry.duration}\u003C/span>ms`\u003C/span>);\n                    }\n                });\n            });\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>({ \u003Cspan class=\"hljs-attr\">entryTypes\u003C/span>: [\u003Cspan class=\"hljs-string\">'measure'\u003C/span>] });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">optimizeTableLoading\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        performance.\u003Cspan class=\"hljs-title function_\">mark\u003C/span>(\u003Cspan class=\"hljs-string\">'table-optimization-start'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowCount = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> complexity = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">assessTableComplexity\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-comment\">// Determine loading strategy based on size and complexity\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (rowCount > \u003Cspan class=\"hljs-number\">100\u003C/span> || complexity.\u003Cspan class=\"hljs-property\">score\u003C/span> > \u003Cspan class=\"hljs-number\">0.7\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">implementVirtualScrolling\u003C/span>(table);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (rowCount > \u003Cspan class=\"hljs-number\">50\u003C/span> || complexity.\u003Cspan class=\"hljs-property\">score\u003C/span> > \u003Cspan class=\"hljs-number\">0.5\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">implementProgressiveLoading\u003C/span>(table);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">implementEagerLoading\u003C/span>(table);\n        }\n        \n        performance.\u003Cspan class=\"hljs-title function_\">mark\u003C/span>(\u003Cspan class=\"hljs-string\">'table-optimization-end'\u003C/span>);\n        performance.\u003Cspan class=\"hljs-title function_\">measure\u003C/span>(\u003Cspan class=\"hljs-string\">'table-optimization'\u003C/span>, \u003Cspan class=\"hljs-string\">'table-optimization-start'\u003C/span>, \u003Cspan class=\"hljs-string\">'table-optimization-end'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">assessTableComplexity\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> factors = {\n            \u003Cspan class=\"hljs-attr\">rowCount\u003C/span>: table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">columnCount\u003C/span>: table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">hasImages\u003C/span>: table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'img'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">hasComplexContent\u003C/span>: table.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">50000\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">hasInteractiveElements\u003C/span>: table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'button, input, select'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> score = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Weight different complexity factors\u003C/span>\n        score += \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(factors.\u003Cspan class=\"hljs-property\">rowCount\u003C/span> / \u003Cspan class=\"hljs-number\">100\u003C/span>, \u003Cspan class=\"hljs-number\">0.4\u003C/span>);  \u003Cspan class=\"hljs-comment\">// Up to 40% for row count\u003C/span>\n        score += \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(factors.\u003Cspan class=\"hljs-property\">columnCount\u003C/span> / \u003Cspan class=\"hljs-number\">10\u003C/span>, \u003Cspan class=\"hljs-number\">0.2\u003C/span>);  \u003Cspan class=\"hljs-comment\">// Up to 20% for column count\u003C/span>\n        score += factors.\u003Cspan class=\"hljs-property\">hasImages\u003C/span> ? \u003Cspan class=\"hljs-number\">0.15\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>;  \u003Cspan class=\"hljs-comment\">// 15% if has images\u003C/span>\n        score += factors.\u003Cspan class=\"hljs-property\">hasComplexContent\u003C/span> ? \u003Cspan class=\"hljs-number\">0.15\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>;  \u003Cspan class=\"hljs-comment\">// 15% if complex content\u003C/span>\n        score += factors.\u003Cspan class=\"hljs-property\">hasInteractiveElements\u003C/span> ? \u003Cspan class=\"hljs-number\">0.1\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>;  \u003Cspan class=\"hljs-comment\">// 10% if interactive\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> { score, factors };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">implementEagerLoading\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// For simple tables, load everything immediately with optimizations\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addCSSOptimizations\u003C/span>(table);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">optimizeDOM\u003C/span>(table);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">implementProgressiveLoading\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Load visible rows first, then remaining rows\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleRows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getVisibleRows\u003C/span>(table);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> remainingRows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>)).\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(visibleRows.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Hide non-visible rows initially\u003C/span>\n        remainingRows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n            row.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'deferred-row'\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Load remaining rows progressively\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadRowsProgressively\u003C/span>(remainingRows);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">implementVirtualScrolling\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Implement virtual scrolling for very large tables\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = table.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.responsive-table-container'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!container) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> virtualScroller = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">VirtualTableScroller\u003C/span>(table, {\n            \u003Cspan class=\"hljs-attr\">itemHeight\u003C/span>: \u003Cspan class=\"hljs-number\">44\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">bufferSize\u003C/span>: \u003Cspan class=\"hljs-number\">10\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">renderItem\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">row, index\u003C/span>) =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderTableRow\u003C/span>(row, index)\n        });\n        \n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(virtualScroller.\u003Cspan class=\"hljs-property\">element\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getVisibleRows\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> containerHeight = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">innerHeight\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowHeight = \u003Cspan class=\"hljs-number\">44\u003C/span>; \u003Cspan class=\"hljs-comment\">// Estimated row height\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleRowCount = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">ceil\u003C/span>(containerHeight / rowHeight) + \u003Cspan class=\"hljs-number\">5\u003C/span>; \u003Cspan class=\"hljs-comment\">// Buffer\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>)).\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, visibleRowCount);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">loadRowsProgressively\u003C/span>(\u003Cspan class=\"hljs-params\">rows\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> index = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> batchSize = \u003Cspan class=\"hljs-number\">10\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">loadBatch\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> batch = rows.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(index, index + batchSize);\n            \n            batch.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n                row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                row.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'deferred-row'\u003C/span>);\n            });\n            \n            index += batchSize;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (index < rows.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n                \u003Cspan class=\"hljs-comment\">// Use requestIdleCallback if available, otherwise setTimeout\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-string\">'requestIdleCallback'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>) {\n                    \u003Cspan class=\"hljs-title function_\">requestIdleCallback\u003C/span>(loadBatch, { \u003Cspan class=\"hljs-attr\">timeout\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span> });\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(loadBatch, \u003Cspan class=\"hljs-number\">16\u003C/span>);\n                }\n            }\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Start loading after a short delay\u003C/span>\n        \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(loadBatch, \u003Cspan class=\"hljs-number\">100\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addCSSOptimizations\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Add CSS optimizations for better performance\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> style = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'style'\u003C/span>);\n        style.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            /* Performance optimizations */\n            .optimized-table {\n                contain: layout style paint;\n                will-change: transform;\n            }\n            \n            .optimized-table tr {\n                contain: layout style;\n            }\n            \n            .optimized-table td,\n            .optimized-table th {\n                contain: layout;\n            }\n            \n            /* GPU acceleration for smooth scrolling */\n            .table-scroll-wrapper {\n                transform: translateZ(0);\n                -webkit-overflow-scrolling: touch;\n            }\n            \n            /* Optimize repaints */\n            .responsive-table-container.scrolling * {\n                pointer-events: none;\n            }\n        `\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(style);\n        \n        table.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'optimized-table'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">optimizeDOM\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Remove unnecessary whitespace and optimize DOM structure\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> walker = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTreeWalker\u003C/span>(\n            table,\n            \u003Cspan class=\"hljs-title class_\">NodeFilter\u003C/span>.\u003Cspan class=\"hljs-property\">SHOW_TEXT\u003C/span>,\n            {\n                \u003Cspan class=\"hljs-attr\">acceptNode\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node\u003C/span>) =>\u003C/span> {\n                    \u003Cspan class=\"hljs-comment\">// Remove empty text nodes\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> node.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() === \u003Cspan class=\"hljs-string\">''\u003C/span> \n                        ? \u003Cspan class=\"hljs-title class_\">NodeFilter\u003C/span>.\u003Cspan class=\"hljs-property\">FILTER_REJECT\u003C/span> \n                        : \u003Cspan class=\"hljs-title class_\">NodeFilter\u003C/span>.\u003Cspan class=\"hljs-property\">FILTER_ACCEPT\u003C/span>;\n                }\n            }\n        );\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> emptyTextNodes = [];\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> node;\n        \n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> (node = walker.\u003Cspan class=\"hljs-title function_\">nextNode\u003C/span>()) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (node.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() === \u003Cspan class=\"hljs-string\">''\u003C/span>) {\n                emptyTextNodes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(node);\n            }\n        }\n        \n        emptyTextNodes.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">node\u003C/span> =>\u003C/span> node.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>());\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Memory management for large tables\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">setupMemoryManagement\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">entries\u003C/span>) =>\u003C/span> {\n            entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = entry.\u003Cspan class=\"hljs-property\">target\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span>) {\n                    \u003Cspan class=\"hljs-comment\">// Row is out of view, can optimize\u003C/span>\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">dehydrateRow\u003C/span>(row);\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    \u003Cspan class=\"hljs-comment\">// Row is in view, ensure it's hydrated\u003C/span>\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hydrateRow\u003C/span>(row);\n                }\n            });\n        }, {\n            \u003Cspan class=\"hljs-attr\">rootMargin\u003C/span>: \u003Cspan class=\"hljs-string\">'100px'\u003C/span>  \u003Cspan class=\"hljs-comment\">// Start loading 100px before visible\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Observe all table rows\u003C/span>\n        table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(row);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">dehydrateRow\u003C/span>(\u003Cspan class=\"hljs-params\">row\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Store complex content and replace with placeholders\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (row.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">hydrated\u003C/span> === \u003Cspan class=\"hljs-string\">'true'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n            cells.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> images = cell.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'img'\u003C/span>);\n                images.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">img\u003C/span> =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!img.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">dehydrated\u003C/span>) {\n                        img.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">originalSrc\u003C/span> = img.\u003Cspan class=\"hljs-property\">src\u003C/span>;\n                        img.\u003Cspan class=\"hljs-property\">src\u003C/span> = \u003Cspan class=\"hljs-string\">'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjY2MiLz48L3N2Zz4='\u003C/span>;\n                        img.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">dehydrated\u003C/span> = \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n                    }\n                });\n            });\n            \n            row.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">hydrated\u003C/span> = \u003Cspan class=\"hljs-string\">'false'\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">hydrateRow\u003C/span>(\u003Cspan class=\"hljs-params\">row\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Restore complex content from placeholders\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (row.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">hydrated\u003C/span> !== \u003Cspan class=\"hljs-string\">'true'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n            cells.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> images = cell.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'img[data-dehydrated="true"]'\u003C/span>);\n                images.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">img\u003C/span> =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (img.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">originalSrc\u003C/span>) {\n                        img.\u003Cspan class=\"hljs-property\">src\u003C/span> = img.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">originalSrc\u003C/span>;\n                        img.\u003Cspan class=\"hljs-title function_\">removeAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-dehydrated'\u003C/span>);\n                        \u003Cspan class=\"hljs-keyword\">delete\u003C/span> img.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">originalSrc\u003C/span>;\n                    }\n                });\n            });\n            \n            row.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">hydrated\u003C/span> = \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n        }\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Virtual scrolling implementation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">VirtualTableScroller\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">table, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span> = table;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">itemHeight\u003C/span>: \u003Cspan class=\"hljs-number\">44\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">bufferSize\u003C/span>: \u003Cspan class=\"hljs-number\">10\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rows\u003C/span> = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleStart\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleEnd\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupVirtualScrolling\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupVirtualScrolling\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create virtual scroll container\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-table-scroller'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            height: 400px;\n            overflow-y: auto;\n            position: relative;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Create spacer elements\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">topSpacer\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">bottomSpacer\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-viewport'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Setup structure\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">topSpacer\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">bottomSpacer\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Move table into viewport\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Setup event listeners\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateVisibleRange\u003C/span>();\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Initial render\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateVisibleRange\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">element\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateVisibleRange\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollTop = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> containerHeight = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-property\">clientHeight\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Calculate visible range\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleStart\u003C/span> = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \n            \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>(scrollTop / \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">itemHeight\u003C/span>) - \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">bufferSize\u003C/span>\n        );\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleEnd\u003C/span> = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">ceil\u003C/span>((scrollTop + containerHeight) / \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">itemHeight\u003C/span>) + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">bufferSize\u003C/span>\n        );\n        \n        \u003Cspan class=\"hljs-comment\">// Update spacers\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">topSpacer\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">height\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.visibleStart * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.itemHeight}\u003C/span>px`\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">bottomSpacer\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">height\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.rows.length - \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.visibleEnd) * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.itemHeight}\u003C/span>px`\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Update visible rows\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Clear current rows\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> (tbody.\u003Cspan class=\"hljs-property\">firstChild\u003C/span>) {\n            tbody.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(tbody.\u003Cspan class=\"hljs-property\">firstChild\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Render visible rows\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleStart\u003C/span>; i < \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleEnd\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rows\u003C/span>[i]) {\n                tbody.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rows\u003C/span>[i].\u003Cspan class=\"hljs-title function_\">cloneNode\u003C/span>(\u003Cspan class=\"hljs-literal\">true\u003C/span>));\n            }\n        }\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize performance optimizations\u003C/span>\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> optimizer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">PerformanceOptimizedTables\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Optimize all existing tables\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">table\u003C/span> =>\u003C/span> {\n            optimizer.\u003Cspan class=\"hljs-title function_\">optimizeTableLoading\u003C/span>(table);\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">performanceOptimizedTables\u003C/span> = optimizer;\n    });\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"accessibility-and-responsive-design\">Accessibility and Responsive Design\u003C/h2>\n\u003Ch3 id=\"wcag-compliant-responsive-tables\">WCAG-Compliant Responsive Tables\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* accessible-responsive-tables.css - WCAG 2.1 AA compliant styles */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* High contrast support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid CanvasText;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: Canvas;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: CanvasText;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: ButtonFace;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid ButtonText;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid ButtonText;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: Highlight;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: HighlightText;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Forced colors mode (Windows High Contrast) */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">forced-colors\u003C/span>: active) {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> {\n        forced-\u003Cspan class=\"hljs-attribute\">color\u003C/span>-adjust: none;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Focus management */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">table\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid Highlight;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid Highlight;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: -\u003Cspan class=\"hljs-number\">2px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Screen reader improvements */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.sr-only\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: -\u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">clip\u003C/span>: \u003Cspan class=\"hljs-built_in\">rect\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile accessibility enhancements */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">caption-side\u003C/span>: top;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">caption\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.2em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#2c3e50\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Ensure touch targets meet minimum size requirements */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-card\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">min-height\u003C/span>: \u003Cspan class=\"hljs-number\">44px\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print accessibility */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">break-inside\u003C/span>: avoid;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">break-inside\u003C/span>: avoid;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Ensure data labels are visible in print */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-built_in\">attr\u003C/span>(data-label) \u003Cspan class=\"hljs-string\">": "\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Animation preferences */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> *,\n    \u003Cspan class=\"hljs-selector-class\">.table-card\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">animation-duration\u003C/span>: \u003Cspan class=\"hljs-number\">0.01ms\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">animation-iteration-count\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">transition-duration\u003C/span>: \u003Cspan class=\"hljs-number\">0.01ms\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        scroll-behavior: auto \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Large text scaling support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-resolution\u003C/span>: \u003Cspan class=\"hljs-number\">120dpi\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Color blindness considerations */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-class\">.status-positive\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e8f5e8\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#2d5a2d\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-class\">.status-negative\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffe8e8\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#5a2d2d\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-class\">.status-warning\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#fff8e8\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#5a4d2d\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Pattern indicators for color-blind users */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-class\">.status-positive\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"✓ "\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-class\">.status-negative\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"✗ "\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> \u003Cspan class=\"hljs-selector-class\">.status-warning\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"⚠ "\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced responsive Markdown table design represents a sophisticated approach to data presentation that ensures optimal user experiences across all device categories while maintaining accessibility standards and performance optimization. By implementing comprehensive responsive design strategies, progressive enhancement techniques, and accessibility compliance measures, technical documentation can deliver table-based content that adapts seamlessly to user needs and device capabilities without compromising data integrity or visual clarity.\u003C/p>\n\u003Cp>The key to successful responsive table implementation lies in understanding user interaction patterns across different devices, implementing performance-optimized loading strategies, and maintaining consistent accessibility standards throughout the responsive design process. Whether you're building technical documentation, data dashboards, or content management systems, the techniques covered in this guide provide the foundation for creating table systems that scale effectively while delivering exceptional user experiences.\u003C/p>\n\u003Cp>Remember to test your responsive table implementations across various devices and screen sizes, validate accessibility compliance using automated testing tools and manual verification processes, and continuously monitor performance metrics to ensure optimal loading times and smooth user interactions. With proper implementation of advanced responsive design techniques, your Markdown tables can provide professional-grade data presentation capabilities that meet modern web standards while remaining maintainable and scalable for long-term content management needs.\u003C/p>\n",[15,19,22,25,28,31,34],{"id":16,"text":17,"level":18},"why-master-responsive-markdown-table-design","Why Master Responsive Markdown Table Design?",2,{"id":20,"text":21,"level":18},"foundation-responsive-table-architecture","Foundation Responsive Table Architecture",{"id":23,"text":24,"level":18},"advanced-mobile-optimization-techniques","Advanced Mobile Optimization Techniques",{"id":26,"text":27,"level":18},"integration-with-documentation-systems","Integration with Documentation Systems",{"id":29,"text":30,"level":18},"performance-optimization-strategies","Performance Optimization Strategies",{"id":32,"text":33,"level":18},"accessibility-and-responsive-design","Accessibility and Responsive Design",{"id":35,"text":36,"level":18},"conclusion","Conclusion",[],[39,47,55],{"slug":40,"title":41,"description":42,"excerpt":43,"date":44,"category":9,"author":10,"keywords":45,"readingMinutes":46},"markdown-multi-column-layouts-complete-guide","Markdown Multi-Column Layouts: Complete Guide for Professional Documentation and Responsive Design","Master multi-column layouts in Markdown using CSS Grid, Flexbox, and HTML techniques. Learn responsive design, content organization, and platform-specific implementations for professional documentation.","Multi-column layouts in Markdown enable sophisticated content organization that transforms standard linear documentation into visually engaging, space-efficient presentations. While basic Markdown…","2025-08-26","markdown multi-column, markdown columns, markdown layout, css grid markdown, flexbox markdown, responsive markdown design, multi-column documentation",14,{"slug":48,"title":49,"description":50,"excerpt":51,"date":52,"category":9,"author":10,"keywords":53,"readingMinutes":54},"markdown-responsive-design-patterns-mobile-optimization-complete-guide","Markdown Responsive Design Patterns and Mobile Optimization: Complete Guide to Adaptive Content Layouts and Cross-Device Compatibility","Master responsive design patterns in Markdown documents. Learn to create mobile-optimized content, implement adaptive layouts, handle viewport considerations, and build cross-device compatible documentation that works seamlessly across all screen sizes.","Markdown responsive design patterns and mobile optimization enable sophisticated content adaptation through device-aware layout systems, adaptive typography strategies, and cross-platform…","2026-01-02","markdown responsive design, mobile optimization, adaptive layouts, cross-device compatibility, responsive tables, mobile markdown, viewport optimization, device-specific content, responsive typography",20,{"slug":56,"title":57,"description":58,"excerpt":59,"date":60,"category":9,"author":10,"keywords":61,"readingMinutes":62},"markdown-table-performance-optimization-complete-guide","Markdown Table Performance Optimization and Responsive Design: Complete Guide for High-Performance Documentation and Data Display","Master advanced Markdown table performance optimization techniques for large datasets, responsive design patterns, and mobile-friendly data presentation. Learn table virtualization, lazy loading, and adaptive design strategies for documentation systems.","Advanced Markdown table performance optimization and responsive design techniques enable sophisticated data presentation systems that maintain performance across large datasets while providing…","2026-01-03","markdown table performance, responsive markdown tables, table optimization, large dataset tables, mobile markdown tables, table virtualization, adaptive table design, data presentation",18,1792184944166]