[
  {
    "path": ".babelrc",
    "content": "{\n  \"presets\": [\n    [\n      \"@babel/preset-env\",\n      {\n        \"useBuiltIns\": false,\n        \"modules\": false\n      }\n    ]\n  ],\n  \"plugins\": [\"@babel/plugin-transform-runtime\"]\n}"
  },
  {
    "path": ".claude/settings.local 2.json",
    "content": "{\n  \"permissions\": {\n    \"allow\": [\n      \"Bash(npm run build:*)\",\n      \"Bash(npm install)\",\n      \"Bash(npm run lint)\",\n      \"Bash(rm:*)\",\n      \"Bash(ls:*)\",\n      \"Bash(pkill:*)\",\n      \"Bash(true)\",\n      \"Bash(npm start)\",\n      \"Bash(grep:*)\",\n      \"Bash(sudo rm:*)\",\n      \"Bash(npx eslint:*)\",\n      \"Bash(npm run lint:*)\",\n      \"Bash(gh release create:*)\",\n      \"Bash(npm search:*)\",\n      \"Bash(npm pack:*)\",\n      \"Bash(npm:*)\",\n      \"WebFetch(domain:keenthemes.com)\"\n    ],\n    \"deny\": []\n  }\n}"
  },
  {
    "path": ".editorconfig",
    "content": "# -----------------------------\n# General\n# -----------------------------\n\n# EditorConfig helps developers define and maintain consistent\n# coding styles between different editors and IDEs\n# editorconfig.org\n\n# top-most EditorConfig file\nroot = true\n\n\n\n# -----------------------------\n# All Files\n# -----------------------------\n\n[*]\nend_of_line = lf\ncharset = utf-8\ninsert_final_newline = true\ntrim_trailing_whitespace = true\nindent_style = space\nindent_size = 2\n\n\n\n# -----------------------------\n# Markdown Files\n# -----------------------------\n\n[*.md]\ntrim_trailing_whitespace = false\n"
  },
  {
    "path": ".gitattributes",
    "content": "# -----------------------------\n# General\n# -----------------------------\n\n# AUTO-DETECT - Handle line endings automatically for files detected\n# as text and leave all files detected as binary untouched.\n# This will handle all files NOT defined below.\n\n* text=auto\n\n\n\n# -----------------------------\n# Source Code\n# -----------------------------\n\n*.css    text\n*.html   text\n*.js     text\n*.json   text\n*.scss   text\n\n\n\n# -----------------------------\n# Documentation\n# -----------------------------\n\n*.md         text\nCHANGELOG    text\nLICENSE      text\n\n\n\n# -----------------------------\n# Configs\n# -----------------------------\n\n.editorconfig  text\n.gitattributes text\n.gitconfig     text\n.gitignore     text\n.babelrc       text\n.stylelintrc   text\n.eslintrc      text\n.yarnclean     text\n*.yml          text\nbrowserlist    text\nyarn.lock      text\n\n\n\n# -----------------------------\n# Graphics\n# -----------------------------\n\n*.gif  binary\n*.ico  binary\n*.jpg  binary\n*.jpeg binary\n*.png  binary\n*.svg  text\n\n\n\n# -----------------------------\n# Fonts\n# -----------------------------\n\n*.ttf   binary\n*.eot   binary\n*.otf   binary\n*.woff  binary\n*.woff2 binary\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE.md",
    "content": "<!--\nPLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.\nISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.\n\nPLEASE SEARCH GITHUB FOR A SIMILAR ISSUE OR PR BEFORE SUBMITTING \n-->\n\n<!-- DON'T FORGET REMOVE UNNECESSARY -->\n<h1>Bug report</h1>\n<h1>Feature request</h1>\n<h1>Support request</h1>\n<h1>Documentation issue</h1>\n\n<!-- Optionally describe the motivation or the concrete use case -->\n\n# Current behavior\n<!-- Describe how the issue manifests -->\n\n# Expected behavior \n<!-- Describe what the desired behavior would be. -->\n<!-- For bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem -->\n\n# Environment\nPlatform: \nBrowser: \n\nFor building issues:\nNode:           \nNPM:          \n<!-- run `node --version` -->\n<!-- run `npm --version` -->\n"
  },
  {
    "path": ".github/workflows/merge.yml",
    "content": "name: Merge checks\n\non:\n  pull_request:\n    branches:\n      - master\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n\n    strategy:\n      matrix:\n        node-version: [22.x]\n\n    steps:\n      - name: Checkout repository\n        uses: actions/checkout@v4\n\n      - name: Use Node.js ${{ matrix.node-version }}\n        uses: actions/setup-node@v4\n        with:\n          node-version: ${{ matrix.node-version }}\n          cache: 'npm'\n\n      - name: Install dependencies\n        run: npm ci\n\n      - name: Run linting\n        run: npm run lint\n\n      - name: Build\n        run: npm run build\n\n      - name: Get version\n        id: version\n        run: echo \"version=v$(./ci/getVersion.sh)\" >> $GITHUB_OUTPUT\n\n      - name: Verify version\n        run: ./ci/verifyVersion.sh ${{ steps.version.outputs.version }}\n"
  },
  {
    "path": ".github/workflows/release.yml",
    "content": "name: Build and Release\n\non:\n  push:\n    branches:\n      - master\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n\n    strategy:\n      matrix:\n        node-version: [22.x]\n\n    steps:\n      - name: Checkout repository\n        uses: actions/checkout@v4\n\n      - name: Use Node.js ${{ matrix.node-version }}\n        uses: actions/setup-node@v4\n        with:\n          node-version: ${{ matrix.node-version }}\n          cache: 'npm'\n\n      - name: Install dependencies\n        run: npm ci\n\n      - name: Run linting\n        run: npm run lint\n\n      - name: Build minified release\n        run: |\n          npm run release:minified\n          zip -r -j static_minified.zip dist/*\n\n      - name: Build unminified release\n        run: |\n          npm run release:unminified\n          zip -r -j static_unminified.zip dist/*\n\n      - name: Get version\n        id: version\n        run: echo \"version=v$(./ci/getVersion.sh)\" >> $GITHUB_OUTPUT\n\n      - name: Verify version\n        run: ./ci/verifyVersion.sh ${{ steps.version.outputs.version }}\n\n      - name: Create GitHub Release\n        uses: softprops/action-gh-release@v2\n        with:\n          name: ${{ steps.version.outputs.version }}\n          tag_name: ${{ steps.version.outputs.version }}\n          files: |\n            static_minified.zip\n            static_unminified.zip\n          fail_on_unmatched_files: true\n          prerelease: false\n          draft: false\n          generate_release_notes: true\n"
  },
  {
    "path": ".gitignore",
    "content": "# ----------------------------\n# Generated Files & Folders\n# ----------------------------\n\n# [1] : Windows thumbnail cache files.\n# [2] : Folder config file.\n# [3] : Recycle Bin used on file shares.\n\n.idea\n.DS_Store\n.sass-cache\nThumbs.db     # [1]\nehthumbs.db   # [1]\nDesktop.ini   # [2]\n$RECYCLE.BIN  # [3]\n\n# ----------------------------\n# Packaging\n# ----------------------------\n\nlogs\n*.log\nnpm-debug.log*\nnode_modules\nyarn.lock\nyarn-error.log*\npnpm-lock.yaml\npackage-lock.json\n\n# ----------------------------\n# Project Folders\n# ----------------------------\n\nbuild/\ndist/\n\n# ----------------------------\n# Development Files\n# ----------------------------\n\n*.map\n*.ts\ntsconfig.json\n.env\n.env.local\n.env.development\n.env.test\n.env.production\n\n# ----------------------------\n# Editor Directories\n# ----------------------------\n\n.vscode/\n.idea/\n*.swp\n*.swo\n*~\n\n# ----------------------------\n# OS Files\n# ----------------------------\n\n.DS_Store\n.DS_Store?\n._*\n.Spotlight-V100\n.Trashes\nCLAUDE.md\nrelease.md\n"
  },
  {
    "path": ".npmignore",
    "content": "# Development files\nnode_modules/\n.git/\n.gitignore\n.eslintrc.js\n.stylelintrc.json\n\n# Build artifacts that aren't needed\nwebpack.config.js\nbabel.config.js\n\n# Documentation that's not essential for npm users\n.github/\ndocs/\n\n# IDE files\n.vscode/\n.idea/\n*.swp\n*.swo\n*~\n\n# OS files\n.DS_Store\nThumbs.db\n\n# Logs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Coverage directory used by tools like istanbul\ncoverage/\n\n# Temporary folders\ntmp/\ntemp/"
  },
  {
    "path": ".nvmrc",
    "content": "20\n"
  },
  {
    "path": ".stylelintrc.json",
    "content": "{\n  \"extends\": \"stylelint-config-standard-scss\",\n  \"rules\": {\n    \"at-rule-no-unknown\": null,\n    \"scss/at-rule-no-unknown\": true,\n    \"at-rule-empty-line-before\": null,\n    \"no-descending-specificity\": null,\n    \"selector-class-pattern\": null,\n    \"scss/double-slash-comment-empty-line-before\": null,\n    \"scss/no-global-function-names\": null,\n    \"declaration-property-value-no-unknown\": null,\n    \"scss/dollar-variable-empty-line-before\": null,\n    \"scss/operator-no-newline-after\": null,\n    \"scss/load-partial-extension\": null,\n    \"media-feature-range-notation\": null,\n    \"color-function-notation\": null,\n    \"color-function-alias-notation\": null,\n    \"alpha-value-notation\": null,\n    \"color-hex-length\": null,\n    \"no-duplicate-selectors\": null,\n    \"shorthand-property-no-redundant-values\": null,\n    \"scss/at-extend-no-missing-placeholder\": null,\n    \"declaration-block-no-redundant-longhand-properties\": null,\n    \"scss/at-mixin-argumentless-call-parentheses\": null,\n    \"scss/at-rule-conditional-no-parentheses\": null,\n    \"scss/dollar-variable-pattern\": null,\n    \"scss/at-mixin-pattern\": null,\n    \"scss/dollar-variable-colon-space-before\": null,\n    \"length-zero-no-unit\": null,\n    \"property-no-deprecated\": null,\n    \"selector-not-notation\": null,\n    \"import-notation\": null,\n    \"scss/comment-no-empty\": null,\n    \"value-keyword-case\": null,\n    \"function-name-case\": null,\n    \"declaration-property-value-keyword-no-deprecated\": null,\n    \"property-no-vendor-prefix\": null,\n    \"font-family-name-quotes\": null,\n    \"font-family-no-missing-generic-family-keyword\": null,\n    \"at-rule-no-vendor-prefix\": null,\n    \"rule-empty-line-before\": null,\n    \"declaration-empty-line-before\": null,\n    \"no-empty-source\": null,\n    \"scss/dollar-variable-colon-space-after\": null,\n    \"scss/double-slash-comment-whitespace-inside\": null,\n    \"selector-no-vendor-prefix\": null,\n    \"declaration-block-single-line-max-declarations\": null\n  }\n}\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Changelog\n\n## [3.0.0] - 2026-01-13\n\n### Major Architecture & Developer Experience Release\n\nThis release represents a comprehensive overhaul of the template's architecture, adding professional-grade utilities, testing infrastructure, security hardening, and optimized build configuration. This is the most developer-friendly release yet.\n\n### Key Improvements\n\n#### New Utility Modules\n- **Events** (`src/assets/scripts/utils/events.js`) - Event delegation, debounce, throttle utilities\n- **Performance** (`src/assets/scripts/utils/performance.js`) - ResizeObserver, IntersectionObserver, lazy loading\n- **Storage** (`src/assets/scripts/utils/storage.js`) - Safe localStorage wrapper with in-memory fallback\n- **Sanitize** (`src/assets/scripts/utils/sanitize.js`) - HTML/input sanitization for XSS prevention\n- **Logger** (`src/assets/scripts/utils/logger.js`) - Development-only logging utility\n\n#### Testing Infrastructure\n- **Vitest** - Modern testing framework with fast execution\n- **Coverage Reports** - V8-based code coverage via `npm run test:coverage`\n- **JSDOM** - Browser environment simulation for DOM testing\n- **Test Files** - Initial test suites for theme, DOM, and logger utilities\n\n#### Build & Bundle Optimization\n- **Code Splitting** - Separate chunks for Chart.js, FullCalendar, Bootstrap\n- **Bundle Analyzer** - New `npm run build:analyze` command for visual bundle inspection\n- **TerserPlugin** - Console/debugger removal in production builds\n- **Runtime Chunk** - Extracted webpack runtime for better caching\n- **Lodash Removed** - Replaced with custom Events utility (~70KB saved)\n\n#### Documentation\n- **API Reference** (`docs/API.md`) - Complete API documentation for all utilities\n- **Component Guide** (`docs/COMPONENT_GUIDE.md`) - Development patterns and examples\n- **Updated CLAUDE.md** - Enhanced project documentation\n\n#### Code Quality\n- **Removed Dead Code** - Deleted `app 2.js` and unused `sidebar/index.js`\n- **HTML Accessibility** - Added `lang=\"en\"` to all 18 HTML files\n- **TypeScript Declarations** - Added `types/adminator.d.ts` for IDE support\n- **JSConfig** - Enhanced IDE autocomplete via `jsconfig.json`\n- **VSCode Settings** - Project-specific editor configuration\n\n### Technical Details\n\n**Removed Dependencies:**\n- `lodash` (4.17.21) - Replaced with custom Events.debounce/throttle\n\n**New Dev Dependencies:**\n- `vitest` (4.0.17) - Testing framework\n- `@vitest/coverage-v8` (4.0.17) - Coverage reporting\n- `jsdom` (27.4.0) - DOM testing environment\n- `webpack-bundle-analyzer` (5.1.1) - Bundle visualization\n\n**Updated Dependencies:**\n- All dependencies updated to latest versions\n- Webpack 5.104.1 with code splitting configuration\n- Full security audit with zero vulnerabilities\n\n**Build Output (Code Splitting):**\n| Chunk | Size |\n|-------|------|\n| runtime.js | 49.6 KB |\n| vendor-fullcalendar.js | 654 KB |\n| vendor-chartjs.js | 529 KB |\n| vendors.js | 384 KB |\n| main.js | 2.81 MB |\n\n### New Scripts\n\n```bash\nnpm run test              # Run tests in watch mode\nnpm run test:run          # Run tests once\nnpm run test:coverage     # Run tests with coverage\nnpm run build:analyze     # Build with bundle analyzer\n```\n\n### Files Added\n\n**Utilities:**\n- `src/assets/scripts/utils/events.js`\n- `src/assets/scripts/utils/performance.js`\n- `src/assets/scripts/utils/storage.js`\n- `src/assets/scripts/utils/sanitize.js`\n- `src/assets/scripts/utils/logger.js`\n\n**Testing:**\n- `vitest.config.js`\n- `tests/setup.js`\n- `tests/utils/theme.test.js`\n- `tests/utils/dom.test.js`\n- `tests/utils/logger.test.js`\n\n**Documentation:**\n- `docs/API.md`\n- `docs/COMPONENT_GUIDE.md`\n\n**IDE Support:**\n- `types/adminator.d.ts`\n- `jsconfig.json`\n- `.vscode/settings.json`\n- `.vscode/extensions.json`\n\n### Files Removed\n- `src/assets/scripts/app 2.js` (dead code)\n- `src/assets/scripts/sidebar/index.js` (unused)\n\n### Build Status\n- Zero build errors\n- Zero build warnings\n- Zero security vulnerabilities\n- JavaScript linting: 0 errors, 0 warnings\n- SCSS linting: 0 errors, 0 warnings\n- All tests passing\n\n### Compatibility\n- Node.js 14+ (tested with latest versions)\n- All modern browsers supported\n- Mobile-responsive functionality maintained\n- Dark mode functionality preserved\n- Full backward compatibility with v2.x\n\n---\n\n## [2.9.0] - 2025-12-02\n\n### Comprehensive Dependency Updates & Linting Modernization\n\nThis release brings all dependencies to their absolute latest versions with enhanced SCSS linting support and zero security vulnerabilities.\n\n### Key Improvements\n\n#### All Dependencies Updated to Latest\n- **Webpack 5.103.0** - Latest Webpack with performance improvements\n- **ESLint 9.39.1** - Latest ESLint with modern flat configuration\n- **Sass 1.94.2** - Latest Sass compiler with improved features\n- **TypeScript 5.9.3** - Latest TypeScript compiler\n- **Stylelint 16.26.1** - Latest SCSS/CSS linting\n- **Chart.js 4.5.1** - Latest charting library with bug fixes\n- **Day.js 1.11.19** - Latest date manipulation library\n\n#### Enhanced SCSS Linting\n- **Added stylelint-config-standard-scss** - Proper SCSS-specific linting support\n- **Updated .stylelintrc.json** - Configured for SCSS syntax compatibility\n- **Zero Linting Errors** - Both JavaScript and SCSS pass all checks\n\n#### Security & Quality\n- **Zero Security Vulnerabilities** - All dependencies audited and secure\n- **Fixed node-forge vulnerabilities** - Updated to v1.3.2 (ASN.1 fixes)\n- **Fixed js-yaml vulnerabilities** - Updated to v4.1.1/v3.14.2 (prototype pollution fixes)\n- **Clean Build Output** - No errors or warnings in production build\n\n### Technical Details\n\n**Major Dependencies Updated:**\n- @babel/core: 7.28.3 → 7.28.5\n- @babel/eslint-parser: 7.28.0 → 7.28.5\n- @babel/preset-env: 7.28.3 → 7.28.5\n- @babel/runtime: 7.28.3 → 7.28.4\n- @eslint/js: 9.34.0 → 9.39.1\n- @typescript-eslint/eslint-plugin: 8.42.0 → 8.48.1\n- @typescript-eslint/parser: 8.42.0 → 8.48.1\n- chart.js: 4.5.0 → 4.5.1\n- cross-env: 10.0.0 → 10.1.0\n- dayjs: 1.11.18 → 1.11.19\n- eslint: 9.34.0 → 9.39.1\n- globals: 16.3.0 → 16.5.0\n- html-webpack-plugin: 5.6.4 → 5.6.5\n- jsvectormap: 1.6.0 → 1.7.0\n- postcss-preset-env: 10.3.1 → 10.4.0\n- sass: 1.92.0 → 1.94.2\n- sass-loader: 16.0.5 → 16.0.6\n- stylelint: 16.23.1 → 16.26.1\n- stylelint-config-standard: 38.0.0 → 39.0.1\n- typescript: 5.9.2 → 5.9.3\n- webpack: 5.101.3 → 5.103.0\n\n**New Dependencies:**\n- stylelint-config-standard-scss: 16.0.0 - SCSS-specific linting rules\n\n**Build Tools Updated:**\n- copy-webpack-plugin: 13.0.0 → 13.0.1\n- mini-css-extract-plugin: 2.9.3 → 2.9.4\n- postcss-loader: 8.1.1 → 8.2.0\n\n### Build Status\n- Zero build errors\n- Zero build warnings\n- Zero security vulnerabilities\n- JavaScript linting: 0 errors, 0 warnings\n- SCSS linting: 0 errors, 0 warnings\n- Production build: Compiled successfully\n\n### Compatibility\n- Node.js 14+ (tested with latest versions)\n- All modern browsers supported\n- Mobile-responsive functionality maintained\n- Dark mode functionality preserved\n\n---\n\n## [2.8.1] - 2025-09-03\n\n### Latest Dependency Updates & Security Enhancements\n\nThis release brings all dependencies up to their latest stable versions, focusing on Bootstrap 5.3.8 upgrade, enhanced security, and improved development tooling for optimal performance and maintainability.\n\n### Key Improvements\n\n#### Framework & Core Updates\n- **Bootstrap 5.3.8** - Updated from 5.3.7 with latest bug fixes and improvements\n- **Webpack 5.101.3** - Latest Webpack with enhanced performance optimizations\n- **ESLint 9.34.0** - Updated to latest ESLint with modern flat configuration support\n- **Sass 1.92.0** - Latest Sass compiler with improved performance and features\n- **Day.js 1.11.18** - Updated lightweight date manipulation library\n\n#### Development & Build Tools\n- **TypeScript ESLint Support** - Added TypeScript 5.9.2 and @typescript-eslint packages for enhanced code quality\n- **Modern ESLint Configuration** - Created comprehensive tsconfig.json for TypeScript ESLint integration\n- **Zero JavaScript Linting Errors** - Fixed all ESLint issues in webpack configuration files\n- **Enhanced Development Experience** - Improved hot module replacement and build performance\n\n#### Security & Quality\n- **Zero Security Vulnerabilities** - All dependencies updated with comprehensive security audit\n- **jsvectormap 1.7.0** - Updated vector map library with latest features and improvements\n- **Build System Optimization** - Improved webpack configuration with proper trailing commas and code style\n- **Development Server Enhancements** - Stable development server with hot reload functionality\n\n### Technical Details\n\n**Major Dependencies Updated:**\n- bootstrap: 5.3.7 → 5.3.8\n- webpack: 5.101.0 → 5.101.3\n- eslint: 9.33.0 → 9.34.0\n- sass: 1.90.0 → 1.92.0\n- dayjs: 1.11.13 → 1.11.18\n- jsvectormap: 1.6.0 → 1.7.0\n- @eslint/js: 9.33.0 → 9.34.0\n\n**Build Tools Updated:**\n- @babel/core: 7.28.0 → 7.28.3\n- @babel/runtime: 7.28.2 → 7.28.3\n- copy-webpack-plugin: 13.0.0 → 13.0.1\n- html-webpack-plugin: 5.6.3 → 5.6.4\n- mini-css-extract-plugin: 2.9.3 → 2.9.4\n- postcss-loader: 8.1.1 → 8.2.0\n- postcss-preset-env: 10.2.4 → 10.3.1\n\n**New Additions:**\n- @typescript-eslint/parser: 8.42.0 - TypeScript ESLint parser support\n- @typescript-eslint/eslint-plugin: 8.42.0 - TypeScript ESLint rules\n- typescript: 5.9.2 - TypeScript compiler for enhanced development\n\n### Build Status\n- Zero build errors\n- Zero build warnings\n- Zero security vulnerabilities\n- JavaScript linting: 0 errors, 0 warnings\n- Development server: Running successfully\n- Hot module replacement: Functional\n\n### Compatibility\n- Node.js 14+ (tested with latest versions)\n- All modern browsers supported\n- Mobile-responsive functionality maintained\n- Dark mode functionality preserved\n\n## [2.8.0] - 2025-08-11\n\n### Dependency Modernization & Security Updates\n\nThis release focuses on modernizing the build system, updating dependencies to their latest stable versions, and removing deprecated packages to ensure better security and performance.\n\n### Key Improvements\n\n#### Build System Enhancements\n- **Replaced deprecated file-loader with Webpack 5 native asset modules** - Modernized asset handling using Webpack 5's built-in capabilities\n- **Moved @babel/runtime to production dependencies** - Properly configured runtime dependencies for production builds\n- **Fixed all import/export warnings** - Resolved module resolution issues for cleaner builds\n\n#### Major Dependency Updates\n- **Upgraded cross-env from v7 to v10** - Latest version with ESM support and TypeScript improvements\n- **Updated all Babel packages to v7.28.0** - Latest stable Babel 7 release\n- **Updated TypeScript to v5.9.2** - Latest TypeScript with improved type checking\n- **Updated Webpack to v5.101.0** - Latest Webpack 5 with performance improvements\n- **Updated ESLint to v9.33.0** - Latest ESLint with new rules and fixes\n\n#### Security & Maintenance\n- Updated all FullCalendar components to v6.1.19\n- Updated all development dependencies to latest stable versions\n- Removed non-existent test.html reference from build configuration\n- Fixed stylelint configuration compatibility issues\n\n### Technical Details\n\n**Removed Deprecated Packages:**\n- `file-loader` - Replaced with Webpack 5 asset/resource modules\n\n**Updated Dependencies:**\n- @babel/core: 7.27.4 → 7.28.0\n- @babel/runtime: 7.27.6 → 7.28.2 (moved to production dependencies)\n- @eslint/js: 9.29.0 → 9.33.0\n- @typescript-eslint/eslint-plugin: 8.36.0 → 8.39.0\n- @typescript-eslint/parser: 8.36.0 → 8.39.0\n- @fullcalendar/*: 6.1.17 → 6.1.19 (all packages)\n- cross-env: 7.0.3 → 10.0.0\n- eslint: 9.29.0 → 9.33.0\n- typescript: 5.8.3 → 5.9.2\n- webpack: 5.99.9 → 5.101.0\n- And various other minor updates\n\n### Build Status\n- Zero build errors\n- Zero build warnings\n- All linting rules pass successfully\n- Production build size remains optimized\n\n## [2.7.1] - 2025-07-10\n\n### Bug Fixes & Improvements\n- Minor version bump with maintenance updates\n- Enhanced code quality and stability improvements\n- Updated documentation and changelog formatting\n\n## [2.7.0] - 2025-07-09\n\n### jQuery-Free Release + NPM Package Publication\n\nThis release represents a **major performance milestone** - complete removal of jQuery dependency and all jQuery-based plugins, resulting in a modern, lightweight, and significantly faster admin template.\n\n### NPM Package Available\n\n**Adminator is now available as an npm package!**\n\n```bash\n# Install via npm\nnpm install adminator-admin-dashboard\n\n# Or install via yarn  \nyarn add adminator-admin-dashboard\n```\n\n**Package Information:**\n- **Package Name**: `adminator-admin-dashboard`\n- **Registry**: https://www.npmjs.com/package/adminator-admin-dashboard\n- **Size**: 5.7 MB (includes complete source + built assets)\n- **Contents**: Source code, production builds, documentation, and all dependencies\n\n**What's included:**\n- Complete source code (`src/` directory)\n- Pre-built production assets (`dist/` directory)  \n- All dependencies and development tools\n- Comprehensive documentation (CLAUDE.md, CHANGELOG.md)\n- Ready-to-use HTML templates\n\n**Usage:**\n```bash\n# After installation, navigate to package directory\ncd node_modules/adminator-admin-dashboard\n\n# Install dev dependencies for customization\nnpm install\n\n# Start development server\nnpm start\n```\n\nThis release represents a **major performance milestone** - complete removal of jQuery dependency and all jQuery-based plugins, resulting in a modern, lightweight, and significantly faster admin template.\n\n### Performance Improvements\n\n**Bundle Size Reduction:**\n- **~600KB Reduction**: Complete elimination of jQuery and jQuery-dependent plugins\n- **Faster Load Times**: Native DOM manipulation for optimal performance\n- **Modern Architecture**: ES6+ class-based components with zero legacy overhead\n\n**Removed jQuery Dependencies:**\n- `jquery` (3.7.1) - Replaced with vanilla JS DOM manipulation\n- `jquery-sparkline` (2.4.0) - Replaced with Chart.js mini charts\n- `bootstrap-datepicker` (1.10.0) - Replaced with HTML5 date inputs + vanilla JS\n- `datatables` (1.10.18) - Replaced with vanilla JS table component\n- `easy-pie-chart` (2.1.7) - Replaced with vanilla JS SVG pie charts\n- `jvectormap` (2.0.4) - Replaced with vanilla JS SVG world map\n\n### Modern JavaScript Implementations\n\n**100% Vanilla JavaScript Architecture:**\n- **Component System**: Modern class-based components (Sidebar, Charts, etc.)\n- **DOM Utilities**: jQuery-like functionality using native JavaScript (`src/assets/scripts/utils/dom.js`)\n- **Event Management**: Native event handling with modern delegation patterns\n- **Mobile Optimization**: Touch-friendly interactions without jQuery overhead\n\n**Feature-Complete Replacements:**\n\n**Charts & Visualizations:**\n- **Chart.js Sparklines**: Mini charts with full theme support and better performance\n- **SVG Pie Charts**: Custom circular progress indicators with animations\n- **Enhanced Line Charts**: Interactive charts with tooltip support and responsive design\n\n**Interactive Components:**\n- **Vanilla DataTables**: Full-featured table with sorting, pagination, and search\n- **HTML5 Date Pickers**: Enhanced native date inputs with Day.js integration\n- **Vector Maps**: JavaScript-based world map with markers and theme support\n- **Sidebar Navigation**: Smooth animations and touch-friendly mobile interactions\n\n**UI Enhancements:**\n- **Mobile Search**: Full-width search overlay with enhanced touch experience\n- **Dropdown Management**: Improved mobile dropdown behavior with overlay handling\n- **Responsive Design**: Better mobile viewport handling and gesture support\n\n### Technical Achievements\n\n**Architecture Modernization:**\n- **ES6+ Classes**: Modern component architecture replacing jQuery plugins\n- **Module System**: ES6 import/export for better code organization\n- **Type Safety**: Enhanced error handling and parameter validation\n- **Performance**: Eliminated jQuery overhead and improved runtime efficiency\n\n**Theme Integration:**\n- **Dark Mode Support**: All new components fully support light/dark theme switching\n- **CSS Variables**: Component styling integrated with existing theme system\n- **Consistent Design**: Maintained visual consistency while improving performance\n\n**Developer Experience:**\n- **Clean Console**: Removed all development console notices and debugging output\n- **ESLint Compliance**: All code follows modern ESLint 9.x flat config standards\n- **Maintainable Code**: Well-documented, modular architecture for future enhancements\n\n### Zero Breaking Changes\n\n**Seamless Migration:**\n- **Visual Consistency**: All components maintain identical visual appearance\n- **API Compatibility**: Existing functionality preserved with better performance\n- **Theme Support**: Full compatibility with existing dark/light mode system\n- **Mobile Experience**: Enhanced mobile interactions with no breaking changes\n\n### Component Improvements\n\n**Enhanced Functionality:**\n- **Charts**: Better responsiveness and theme integration\n- **Tables**: Improved sorting and pagination performance\n- **Date Pickers**: Enhanced mobile experience with native HTML5 inputs\n- **Maps**: Better rendering performance and theme consistency\n- **Navigation**: Smoother animations and better touch handling\n\n### Code Quality\n\n**Production Ready:**\n- **Clean Output**: No console debugging statements in production code\n- **Linting**: All JavaScript files pass ESLint 9.x with modern standards\n- **Performance**: Optimized for speed with minimal DOM manipulation\n- **Accessibility**: Maintained accessibility features without jQuery dependencies\n\n### Files Modified\n\n**Core Application:**\n- `src/assets/scripts/app.js` - Complete jQuery removal and modern component integration\n- `src/assets/scripts/components/Sidebar.js` - Vanilla JS sidebar with animations\n- `src/assets/scripts/components/Chart.js` - Chart.js implementation replacing jQuery Sparkline\n- `src/assets/scripts/utils/dom.js` - jQuery-like utilities using vanilla JavaScript\n\n**New Implementations:**\n- Enhanced mobile search functionality\n- Vanilla JavaScript data table component  \n- HTML5 date picker enhancements\n- SVG-based vector maps\n- Modern dropdown and popover handling\n\n### Migration Notes\n\n**Automatic Migration:**\n- No code changes required for existing projects\n- All functionality automatically upgraded to vanilla JavaScript\n- Theme system remains fully compatible\n- Mobile experience enhanced without breaking changes\n\n**Performance Benefits:**\n- Immediate ~600KB bundle size reduction\n- Faster initial page load\n- Improved runtime performance\n- Better mobile experience\n\n## [2.6.1] - 2025-07-26\n\n### Dependency Updates\n- Updated `bootstrap` 5.3.6 → 5.3.7\n- Updated `postcss` 8.5.5 → 8.5.6\n- Updated `stylelint` 16.20.0 → 16.21.0\n\n## [2.6.0] - 2025-06-21\n\n### Dark Mode Release\n\nThis release introduces a comprehensive dark mode system with seamless theme switching and component integration.\n\n### New Features\n\n**Complete Dark Mode System:**\n- **Smart Theme Toggle**: Bootstrap-based switch with sun/moon icons and \"Light/Dark\" labels\n- **OS Preference Detection**: Automatically detects and applies user's preferred color scheme\n- **Persistent Theme Storage**: Remembers user's theme choice across sessions\n- **Instant Theme Switching**: Real-time theme updates without page reload\n\n**Theme-Aware Components:**\n- **Chart.js Integration**: Dynamic color schemes for all chart types with proper contrast\n- **FullCalendar Support**: Dark-mode aware calendar with proper border and text colors\n- **Vector Maps**: Custom color palettes for both light and dark themes\n- **Google Maps**: Theme-specific styling for landscapes, highways, and POI markers\n- **Sparkline Charts**: Optimized color sets for dark mode visibility\n- **Skycons Weather Icons**: Adaptive colors for better dark mode contrast\n\n**CSS Architecture:**\n- **CSS Custom Properties**: Comprehensive variable system for consistent theming\n- **Semantic Color Naming**: Intuitive color variables (--c-text-base, --c-bkg-card, etc.)\n- **Component Isolation**: Each component respects global theme variables\n- **Responsive Design**: Theme switching works seamlessly across all screen sizes\n\n**Visual Enhancements:**\n- **Adaptive Logo**: SVG logo automatically adjusts colors based on theme\n- **Smart Contrast**: Proper text/background contrast ratios in both themes\n- **Border Consistency**: Unified border colors throughout the interface\n- **Loading States**: Theme-aware loaders and progress indicators\n\n### Technical Improvements\n\n**Architecture Updates:**\n- **Theme Utility Module**: New `src/assets/scripts/utils/theme.js` with comprehensive theme management\n- **CSS Variables File**: New `src/assets/styles/utils/theme.css` with light/dark color schemes\n- **Component Integration**: Updated all major components to support theme switching\n- **Event System**: Custom events for theme change notifications\n\n**Performance Optimizations:**\n- **Efficient Switching**: Minimal DOM manipulation for theme changes\n- **CSS Variable Updates**: Leverages browser-native CSS custom properties\n- **Memory Management**: Proper cleanup of theme-related event listeners\n- **Build Integration**: Theme assets are properly bundled and optimized\n\n### User Experience\n\n**Intuitive Controls:**\n- **Accessible Toggle**: Proper ARIA labels and keyboard navigation support\n- **Visual Feedback**: Clear indication of current theme state\n- **Smooth Transitions**: CSS transitions for theme switching (where appropriate)\n- **Consistent Placement**: Theme toggle integrated into header navigation\n\n**Smart Behavior:**\n- **First-Time Detection**: Respects OS dark mode preference on first visit\n- **Cross-Session Persistence**: Theme choice remembered across browser sessions\n- **Fallback Handling**: Graceful degradation when localStorage is unavailable\n- **Dynamic Updates**: All components update immediately when theme changes\n\n### Development Experience\n\n**Documentation:**\n- **Theme API**: Comprehensive methods for theme management\n- **Color Guidelines**: Standardized color usage across components\n- **Component Examples**: Updated examples showing theme-aware components\n- **Migration Guide**: Instructions for theme integration in custom components\n\n### Enhanced Components\n\n**Charts & Data Visualization:**\n- Chart.js with dynamic color schemes\n- Sparkline charts with theme-optimized colors\n- Easy Pie Charts with adaptive styling\n- Vector maps with custom dark mode palettes\n\n**Interactive Elements:**\n- FullCalendar with proper dark mode borders\n- DataTables with theme-consistent styling  \n- Date pickers with adaptive colors\n- Form elements with dark mode support\n\n**Maps & Location:**\n- Google Maps with custom dark mode styling\n- Vector maps with region-specific color schemes\n- Marker and overlay theme integration\n\n### Breaking Changes\n\nNone. This release is fully backward compatible.\n\n### Migration Guide\n\nExisting projects will automatically inherit dark mode capabilities. No code changes required.\n\n**Optional Enhancements:**\n- Add `data-theme` attribute handling for custom components\n- Use CSS variables from `theme.css` for consistent coloring\n- Listen for `adminator:themeChanged` events for custom theme handling\n\n### Files Added/Modified\n\n**New Files:**\n- `src/assets/scripts/utils/theme.js` - Theme management utility\n- `src/assets/styles/utils/theme.css` - CSS variables and color schemes\n\n**Enhanced Files:**\n- All HTML pages updated with theme-aware components\n- Component JavaScript files updated for theme integration\n- SCSS files enhanced with CSS variable usage\n- Logo SVG updated for theme compatibility\n\n## [2.5.0] - 2025-06-16\n\n### Major Modernization Release\n\nThis release represents a comprehensive modernization of the entire build toolchain and development stack.\n\n### Dependency Updates\n\n**Phase 1 - Safe Updates:**\n- Updated `chart.js` 4.4.2 → 4.5.0\n- Updated `shx` 0.3.3 → 0.4.0  \n- Added `eslint-formatter-table` for better linting output\n\n**Phase 2 - Moderate Updates:**\n- Updated `sass-loader` 14.2.1 → 16.0.5\n- Updated `postcss-preset-env` 9.6.0 → 10.2.3\n- Updated `stylelint-config-standard` 36.0.1 → 38.0.0\n- Fixed `stylelint` command syntax for latest version\n\n**Phase 3 - Major Breaking Changes:**\n- Updated `copy-webpack-plugin` 12.0.2 → 13.0.0\n- Updated `babel-loader` 9.2.1 → 10.0.0\n- Updated `webpack-cli` 5.1.4 → 6.0.1\n- Updated `eslint` 8.57.1 → 9.29.0\n\n**Latest Dependencies Update:**\n- Updated all Babel packages to v7.27.x\n- Updated FullCalendar packages to v6.1.17\n- Updated Bootstrap to v5.3.6\n- Updated webpack ecosystem (webpack 5.99.9, webpack-dev-server 5.2.2)\n- Updated PostCSS to v8.5.5\n- Updated Sass to v1.89.2\n- Updated Stylelint to v16.20.0\n- Plus 22 total dependency updates\n\n### Configuration Changes\n\n**ESLint 9.x Migration:**\n- Migrated from `.eslintrc.json` to `eslint.config.mjs` (flat config)\n- Removed incompatible `eslint-config-airbnb-base` and `eslint-plugin-import`\n- Created modern ESLint configuration with equivalent rules\n- Updated line endings for cross-platform compatibility\n\n**Build System Improvements:**\n- Enhanced webpack configuration compatibility\n- Improved CSS processing pipeline\n- Better development server performance\n\n**Package Management:**\n- Fixed `package.json` to reflect exact installed dependency versions\n- Removed incompatible ESLint packages from dependencies\n- Ensured version alignment between installed and declared packages\n\n**Phase 5.1 - Date Library Migration:**\n- **REMOVED** `moment` 2.30.1 (67KB) - unused legacy dependency\n- **ADDED** `dayjs` 1.11.13 (2KB) - modern 97% smaller alternative\n- Created comprehensive `DateUtils` module with modern date handling\n- Updated FullCalendar to use Day.js for dynamic date generation\n- Enhanced date picker functionality with Day.js validation\n- Bundle size reduction: ~65KB saved\n- Zero breaking changes - Day.js provides same API coverage\n\n### Development Experience\n\n- **Node.js Support**: Now requires Node.js 18.12.0+ (compatible with v23.11.0)\n- **Modern tooling**: All dependencies updated to latest stable versions\n- **Zero security vulnerabilities**: Complete security audit clean\n- **Improved performance**: Faster builds and development server\n- **Better linting**: Modern ESLint 9.x with flat config\n- **Enhanced CSS**: Latest PostCSS and Sass versions\n\n### Security & Quality\n\n- All dependencies audited and updated to latest secure versions\n- Zero known security vulnerabilities\n- Modern linting rules for better code quality\n- Updated copyright notices to 2025\n\n### Documentation\n\n- Updated README with modern setup instructions\n- Enhanced development workflow documentation\n- Added comprehensive changelog entries\n\n### Breaking Changes\n\n- **Node.js**: Minimum version now 18.12.0\n- **ESLint**: Configuration format changed from eslintrc to flat config\n- **Development**: Some webpack-cli commands removed (init, loader, plugin)\n\n### Migration Guide\n\nFor projects upgrading from v2.1.0:\n1. Ensure Node.js version is 18.12.0 or higher\n2. Run `npm install` to get updated dependencies\n3. ESLint configuration is automatically updated\n4. No code changes required for existing projects\n\n## [2.1.0]\n- Upgraded all dependencies\n\n## [2.0.0]\n\n### Changed\n- Upgrade to Bootstrap 5\n\n## [1.1.0]\n\n### Changed\n- Upgrade to webpack 5\n\n## [1.0.0]\n\n### Added\n- Intial release\n"
  },
  {
    "path": "CODE_OF_CONDUCT.md",
    "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment include:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or advances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or electronic address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at support at colorlib.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]\n\n[homepage]: http://contributor-covenant.org\n[version]: http://contributor-covenant.org/version/1/4/\n"
  },
  {
    "path": "IMPROVEMENT_PLAN.md",
    "content": "# Adminator Admin Dashboard - Improvement Plan\n\n## Executive Summary\n\nAfter a comprehensive senior-level review of the Adminator admin dashboard (v2.9.0), this document outlines inconsistencies, areas for improvement, and actionable recommendations to make this template exceptional for freelance developers.\n\n**Overall Assessment**: The template is well-structured with a successful jQuery-free modernization. Key areas needing attention: dead code cleanup, accessibility compliance, error handling, and documentation.\n\n---\n\n## Implementation Status\n\n| Phase | Description | Status |\n|-------|-------------|--------|\n| Phase 1 | Critical Cleanup | COMPLETED |\n| Phase 2 | Accessibility Improvements | COMPLETED |\n| Phase 3 | Error Handling & Logging | COMPLETED |\n| Phase 5 | JSDoc Documentation | COMPLETED |\n| Phase 6 | Testing Infrastructure | COMPLETED |\n| Phase 8 | VS Code Settings & Types | COMPLETED |\n| Phase 4 | Performance Optimizations | Pending |\n| Phase 7 | Documentation | Pending |\n| Phase 9 | Security Hardening | Pending |\n| Phase 10 | Build Optimization | Pending |\n\n---\n\n## Quality Scorecard (Updated)\n\n| Category | Before | After | Target |\n|----------|--------|-------|--------|\n| Code Organization | 8/10 | 9/10 | 9/10 |\n| JavaScript Quality | 7/10 | 8/10 | 9/10 |\n| CSS/SCSS Quality | 8/10 | 8/10 | 9/10 |\n| Error Handling | 5/10 | 7/10 | 8/10 |\n| Accessibility | 4/10 | 6/10 | 8/10 |\n| Performance | 7/10 | 7/10 | 9/10 |\n| Documentation | 6/10 | 8/10 | 9/10 |\n| Type Safety | 2/10 | 5/10 | 7/10 |\n| Test Coverage | 0/10 | 4/10 | 6/10 |\n\n---\n\n## Phase 1: Critical Cleanup (Immediate) - COMPLETED\n\n### 1.1 Remove Dead Code\n\n**Files Deleted:**\n- [x] `src/assets/scripts/app 2.js` - Backup file, 19KB of unused code\n- [x] `src/assets/scripts/sidebar/index.js` - Replaced by `components/Sidebar.js`\n\n**Unused Dependencies Removed from package.json:**\n- [x] `@typescript-eslint/eslint-plugin` - Not using TypeScript\n- [x] `@typescript-eslint/parser` - Not using TypeScript\n- [x] `typescript` - Not using TypeScript\n- [x] `ts-api-utils` - Not using TypeScript\n\n### 1.2 Fix HTML `<html>` Tag - COMPLETED\n\nAll 18 HTML files now have the `lang=\"en\"` attribute:\n\n```html\n<html lang=\"en\">\n```\n\n**Files updated:**\n- [x] All 18 HTML files in src/\n\n---\n\n## Phase 2: Accessibility (High Priority)\n\n### 2.1 Theme Toggle Accessibility\n\n**Current issue:** Theme toggle lacks proper ARIA attributes\n\n```html\n<!-- Add these attributes -->\n<div class=\"theme-toggle\" role=\"switch\" aria-checked=\"false\" aria-label=\"Toggle dark mode\">\n```\n\n### 2.2 Navigation Accessibility\n\n**Missing ARIA attributes on dropdowns:**\n```html\n<a href=\"#\"\n   class=\"dropdown-toggle\"\n   aria-expanded=\"false\"\n   aria-haspopup=\"true\">\n```\n\n### 2.3 DataTable Accessibility\n\n**Missing semantic markup:**\n```html\n<table role=\"table\" aria-label=\"Data table\">\n  <thead>\n    <tr>\n      <th scope=\"col\" aria-sort=\"none\">Column Name</th>\n    </tr>\n  </thead>\n</table>\n```\n\n### 2.4 Chart Accessibility\n\n**Canvas elements need descriptive labels:**\n```html\n<canvas\n  id=\"line-chart\"\n  role=\"img\"\n  aria-label=\"Line chart showing monthly revenue trends\">\n</canvas>\n```\n\n### 2.5 Mobile Search Overlay\n\n**Keyboard accessibility needed:**\n- Trap focus within overlay when open\n- Close on Escape key press\n- Return focus to trigger when closed\n\n---\n\n## Phase 3: Error Handling & Robustness\n\n### 3.1 Add Development Logging\n\nCreate a logging utility that only logs in development:\n\n```javascript\n// src/assets/scripts/utils/logger.js\nconst Logger = {\n  isDev: process.env.NODE_ENV === 'development',\n\n  warn(message, context) {\n    if (this.isDev) console.warn(`[Adminator] ${message}`, context);\n  },\n\n  error(message, context) {\n    if (this.isDev) console.error(`[Adminator] ${message}`, context);\n  }\n};\n```\n\n### 3.2 Replace Silent Failures\n\n**Current pattern (problematic):**\n```javascript\n} catch {\n  // Silent failure\n}\n```\n\n**Improved pattern:**\n```javascript\n} catch (error) {\n  Logger.warn('Feature X failed to initialize', { error });\n}\n```\n\n### 3.3 Add Input Validation\n\nValidate inputs in public API methods:\n- Theme.apply() - validate theme name\n- Chart initialization - validate canvas elements\n- DateUtils - validate date formats\n\n---\n\n## Phase 4: Performance Optimizations\n\n### 4.1 Replace Clone-and-Replace Pattern\n\n**Current (inefficient):**\n```javascript\n// Clones entire DOM node to remove listeners\nconst newItem = item.cloneNode(true);\nitem.parentNode.replaceChild(newItem, item);\n```\n\n**Improved (use AbortController):**\n```javascript\nconst controller = new AbortController();\nelement.addEventListener('click', handler, { signal: controller.signal });\n// Later: controller.abort() to remove listener\n```\n\n### 4.2 Use Event Delegation\n\n**Instead of:**\n```javascript\ndocument.querySelectorAll('.dropdown').forEach(el => {\n  el.addEventListener('click', handler);\n});\n```\n\n**Use:**\n```javascript\ndocument.addEventListener('click', (e) => {\n  const dropdown = e.target.closest('.dropdown');\n  if (dropdown) handler(e);\n});\n```\n\n### 4.3 Lazy Load Charts\n\nOnly initialize charts when they're visible:\n```javascript\nconst observer = new IntersectionObserver((entries) => {\n  entries.forEach(entry => {\n    if (entry.isIntersecting) {\n      initChart(entry.target);\n      observer.unobserve(entry.target);\n    }\n  });\n});\n```\n\n### 4.4 Use ResizeObserver Instead of Window Resize\n\n```javascript\nconst resizeObserver = new ResizeObserver(entries => {\n  entries.forEach(entry => {\n    // Handle resize\n  });\n});\nresizeObserver.observe(chartContainer);\n```\n\n---\n\n## Phase 5: Code Quality & Consistency\n\n### 5.1 Consistent Export Pattern\n\nStandardize all modules to use named exports:\n\n```javascript\n// Consistent pattern\nexport { Theme };\nexport { DOM };\nexport { DateUtils };\n```\n\n### 5.2 Add JSDoc Documentation\n\n```javascript\n/**\n * Toggles the application theme between light and dark mode\n * @fires adminator:themeChanged\n * @returns {string} The new theme ('light' or 'dark')\n */\nfunction toggle() {\n  // ...\n}\n```\n\n### 5.3 Consolidate Dark Mode SCSS\n\nMove dark mode overrides from `index.scss` (800+ lines) to dedicated partial:\n\n```\nsrc/assets/styles/spec/utils/\n  ├── _theme.scss      (CSS variables)\n  └── _darkmode.scss   (dark mode overrides)\n```\n\n### 5.4 Reduce !important Usage\n\nCurrent: 16 instances of `!important` in index.scss\n\nFix specificity issues at the source rather than using `!important`:\n- Review selector specificity\n- Use CSS custom properties for overridable values\n- Consider CSS layers for proper cascade\n\n---\n\n## Phase 6: Testing Infrastructure\n\n### 6.1 Set Up Testing Framework\n\n```bash\nnpm install -D vitest @testing-library/dom jsdom\n```\n\n### 6.2 Priority Test Files\n\n1. **Utils testing:**\n   - `tests/utils/dom.test.js` - DOM utilities\n   - `tests/utils/theme.test.js` - Theme switching\n   - `tests/utils/date.test.js` - Date formatting\n\n2. **Component testing:**\n   - `tests/components/Sidebar.test.js`\n   - `tests/components/Chart.test.js`\n\n3. **Integration testing:**\n   - `tests/integration/theme-persistence.test.js`\n   - `tests/integration/mobile-menu.test.js`\n\n### 6.3 Add Test Script\n\n```json\n{\n  \"scripts\": {\n    \"test\": \"vitest\",\n    \"test:coverage\": \"vitest --coverage\"\n  }\n}\n```\n\n---\n\n## Phase 7: Documentation Improvements\n\n### 7.1 Add Component Development Guide\n\nCreate `docs/COMPONENT_GUIDE.md`:\n- How to add new components\n- Theme integration requirements\n- Event patterns to follow\n- Mobile considerations\n\n### 7.2 Add API Documentation\n\nDocument all public APIs with examples:\n- Theme API (toggle, apply, current)\n- DOM utilities (select, addClass, etc.)\n- Custom events (adminator:ready, adminator:themeChanged)\n\n### 7.3 Add Migration Guide\n\nFor users upgrading from jQuery version:\n- Breaking changes\n- API differences\n- Migration steps\n\n### 7.4 Inline Code Documentation\n\nAdd JSDoc to all exported functions and classes.\n\n---\n\n## Phase 8: Developer Experience\n\n### 8.1 Add TypeScript Declarations\n\nCreate `types/adminator.d.ts` for IDE support without full TypeScript migration:\n\n```typescript\ndeclare namespace Adminator {\n  interface Theme {\n    current(): 'light' | 'dark';\n    toggle(): void;\n    apply(theme: 'light' | 'dark'): void;\n  }\n}\n```\n\n### 8.2 Add VS Code Settings\n\nCreate `.vscode/settings.json`:\n```json\n{\n  \"editor.formatOnSave\": true,\n  \"css.lint.unknownAtRules\": \"ignore\",\n  \"scss.lint.unknownAtRules\": \"ignore\"\n}\n```\n\n### 8.3 Add Recommended Extensions\n\nCreate `.vscode/extensions.json`:\n```json\n{\n  \"recommendations\": [\n    \"dbaeumer.vscode-eslint\",\n    \"stylelint.vscode-stylelint\",\n    \"editorconfig.editorconfig\"\n  ]\n}\n```\n\n---\n\n## Phase 9: Security Hardening\n\n### 9.1 Wrap localStorage Operations\n\n```javascript\nconst Storage = {\n  get(key) {\n    try {\n      return localStorage.getItem(key);\n    } catch {\n      return null; // Private browsing or quota exceeded\n    }\n  },\n  set(key, value) {\n    try {\n      localStorage.setItem(key, value);\n      return true;\n    } catch {\n      return false;\n    }\n  }\n};\n```\n\n### 9.2 Add Content Security Policy Headers\n\nDocument recommended CSP headers for production deployment.\n\n### 9.3 Google Maps API Key Handling\n\nAdd documentation for proper API key restrictions.\n\n---\n\n## Phase 10: Build & Bundle Optimization\n\n### 10.1 Analyze Bundle Size\n\nAdd bundle analysis:\n```json\n{\n  \"scripts\": {\n    \"analyze\": \"webpack --profile --json > stats.json && webpack-bundle-analyzer stats.json\"\n  }\n}\n```\n\n### 10.2 Code Splitting\n\nConsider splitting large chunks:\n- Charts (Chart.js) - lazy load\n- FullCalendar - lazy load on calendar page\n- Vector Maps - lazy load on maps page\n\n### 10.3 Remove Unused Lodash Imports\n\nReplace full lodash with specific imports:\n```javascript\n// Instead of\nimport _ from 'lodash';\n\n// Use\nimport debounce from 'lodash/debounce';\n```\n\n---\n\n## Implementation Priority Order\n\n### Week 1: Critical (Must Have)\n1. Remove dead code (Phase 1.1)\n2. Fix HTML lang attributes (Phase 1.2)\n3. Remove unused dependencies (Phase 1.1)\n\n### Week 2: High Priority\n4. Theme toggle accessibility (Phase 2.1)\n5. Add development logging (Phase 3.1)\n6. Replace silent failures (Phase 3.2)\n\n### Week 3: Medium Priority\n7. DataTable accessibility (Phase 2.3)\n8. Event delegation refactor (Phase 4.2)\n9. JSDoc documentation (Phase 5.2)\n\n### Week 4: Enhancement\n10. Testing infrastructure (Phase 6)\n11. Component development guide (Phase 7.1)\n12. TypeScript declarations (Phase 8.1)\n\n---\n\n## Files Changed Summary\n\n### Delete (3 files)\n- `src/assets/scripts/app 2.js`\n- `src/assets/scripts/sidebar/index.js`\n- `tsconfig.json` (optional, or commit to TS)\n\n### Create (8+ files)\n- `src/assets/scripts/utils/logger.js`\n- `src/assets/styles/spec/utils/_darkmode.scss`\n- `docs/COMPONENT_GUIDE.md`\n- `docs/API.md`\n- `docs/MIGRATION.md`\n- `types/adminator.d.ts`\n- `.vscode/settings.json`\n- `.vscode/extensions.json`\n\n### Modify (25+ files)\n- All 18 HTML files (add `lang=\"en\"`)\n- `package.json` (remove unused deps, add test script)\n- `src/assets/scripts/app.js` (error handling, cleanup)\n- `src/assets/scripts/utils/theme.js` (accessibility)\n- `src/assets/styles/spec/index.scss` (refactor dark mode)\n- Component files (JSDoc, accessibility)\n\n---\n\n## Success Metrics\n\nAfter implementing these improvements:\n\n1. **Lighthouse Accessibility Score**: Target 90+\n2. **Bundle Size**: Reduce by 10-15% (remove lodash full, unused deps)\n3. **Test Coverage**: Achieve 60%+ on utilities\n4. **Documentation**: Complete API reference\n5. **Zero Dead Code**: All files actively used\n6. **Developer Experience**: Full IDE support with types\n\n---\n\n## Notes for Freelance Developers\n\nThis template will be excellent for freelance developers after these improvements because:\n\n1. **Clean, Maintainable Code**: No dead code, consistent patterns\n2. **Accessible by Default**: WCAG compliance out of the box\n3. **Well-Documented**: Easy to understand and extend\n4. **Type-Safe Development**: IDE autocomplete and error detection\n5. **Tested Foundation**: Confidence when making changes\n6. **Modern Stack**: No legacy jQuery baggage\n7. **Performance Optimized**: Fast load times, efficient updates\n\n---\n\n*Document created: January 2026*\n*Template version: 2.9.0*\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2018 Aigars Silkalns\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# Adminator Bootstrap 5 Admin Template v3.0.0\n\n**Adminator** is a responsive Bootstrap 5 Admin Template built with modern development tools. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications and some useful widgets.\n\n**Latest Update (v3.0.0)**: Major architecture release with new utility modules (Events, Performance, Storage, Sanitize, Logger), testing infrastructure (Vitest), code splitting, bundle analyzer, and comprehensive documentation. Zero jQuery, zero lodash - pure vanilla JavaScript.\n\n**Looking for more premium admin templates?** Visit **[DashboardPack.com](https://dashboardpack.com/)** for a curated collection of high-quality admin dashboard templates for various frameworks and technologies.\n\n**Performance Benefits**: Faster load times, optimized code splitting, modern ES6+ utilities, and zero external library overhead.\n\n**[Complete Documentation](https://puikinsh.github.io/Adminator-admin-dashboard/)** - Detailed setup guides, API reference, and examples\n\nPreview of this awesome admin template available here: https://colorlib.com/polygon/adminator/index.html\n\n# Preview\n\n### Screenshots\n\n**Light Mode:**\n![Adminator Bootstrap 5 Light Mode](https://colorlib.com/wp/wp-content/uploads/sites/2/adminator-bootstrap-5-light.png.avif)\n\n**Dark Mode:**\n![Adminator Bootstrap 5 Dark Mode](https://colorlib.com/wp/wp-content/uploads/sites/2/adminator-bootstrap-5-dark.png.avif)\n\n### Demo Site: [Here](https://colorlib.com/polygon/adminator/index.html)\n\n## Upgrade to a Premium Dashboard\n\nNeed advanced features, dedicated support, and production-ready code? Explore our handpicked collection of professional admin templates on [DashboardPack](https://dashboardpack.com/?utm_source=github&utm_medium=readme&utm_campaign=adminator).\n\n<table>\n  <tr>\n    <td align=\"center\" width=\"50%\">\n      <a href=\"https://dashboardpack.com/theme-details/tailpanel/?utm_source=github&utm_medium=readme&utm_campaign=adminator\">\n        <img src=\"screenshots/tailpanel.png\" alt=\"TailPanel — modern React and Tailwind CSS admin panel\" width=\"100%\">\n      </a>\n      <br>\n      <a href=\"https://dashboardpack.com/theme-details/tailpanel/?utm_source=github&utm_medium=readme&utm_campaign=adminator\"><strong>TailPanel</strong></a>\n      <br>\n      <sub>React + TypeScript + Tailwind CSS + Vite. 9 dashboard designs, dark and light themes.</sub>\n    </td>\n    <td align=\"center\" width=\"50%\">\n      <a href=\"https://dashboardpack.com/theme-details/admindek-html/?utm_source=github&utm_medium=readme&utm_campaign=adminator\">\n        <img src=\"screenshots/admindek.png\" alt=\"Admindek — feature-rich Bootstrap 5 dashboard with dark mode\" width=\"100%\">\n      </a>\n      <br>\n      <a href=\"https://dashboardpack.com/theme-details/admindek-html/?utm_source=github&utm_medium=readme&utm_campaign=adminator\"><strong>Admindek</strong></a>\n      <br>\n      <sub>Bootstrap 5 + vanilla JS. 100+ components, dark/light modes, RTL support, 10 color presets.</sub>\n    </td>\n  </tr>\n  <tr>\n    <td align=\"center\" width=\"50%\">\n      <a href=\"https://dashboardpack.com/theme-details/adminty-html-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=adminator\">\n        <img src=\"screenshots/adminty.png\" alt=\"Adminty — Bootstrap 5 admin template with 160+ pages\" width=\"100%\">\n      </a>\n      <br>\n      <a href=\"https://dashboardpack.com/theme-details/adminty-html-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=adminator\"><strong>Adminty</strong></a>\n      <br>\n      <sub>Bootstrap 5. 160+ ready-made pages, full UI component library for rapid development.</sub>\n    </td>\n    <td align=\"center\" width=\"50%\">\n      <a href=\"https://dashboardpack.com/theme-details/architectui-dashboard-html-pro/?utm_source=github&utm_medium=readme&utm_campaign=adminator\">\n        <img src=\"screenshots/architectui.png\" alt=\"ArchitectUI — modular Bootstrap admin with 250+ widgets\" width=\"100%\">\n      </a>\n      <br>\n      <a href=\"https://dashboardpack.com/theme-details/architectui-dashboard-html-pro/?utm_source=github&utm_medium=readme&utm_campaign=adminator\"><strong>ArchitectUI</strong></a>\n      <br>\n      <sub>Bootstrap 5. 250+ components, modular architecture, 9 unique dashboard layouts.</sub>\n    </td>\n  </tr>\n  <tr>\n    <td align=\"center\" width=\"50%\">\n      <a href=\"https://dashboardpack.com/theme-details/kero-jquery-html-dashboard-pro/?utm_source=github&utm_medium=readme&utm_campaign=adminator\">\n        <img src=\"screenshots/kero.png\" alt=\"Kero — Bootstrap 5 dashboard with horizontal and sidebar layouts\" width=\"100%\">\n      </a>\n      <br>\n      <a href=\"https://dashboardpack.com/theme-details/kero-jquery-html-dashboard-pro/?utm_source=github&utm_medium=readme&utm_campaign=adminator\"><strong>Kero</strong></a>\n      <br>\n      <sub>Bootstrap 5 + Webpack. Dual layout system (horizontal + sidebar), SASS theming.</sub>\n    </td>\n    <td align=\"center\" width=\"50%\">\n      <a href=\"https://dashboardpack.com/theme-details/cryptocurrency-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=adminator\">\n        <img src=\"screenshots/cryptocurrency.png\" alt=\"Cryptocurrency Dashboard — ICO and Bitcoin admin panel\" width=\"100%\">\n      </a>\n      <br>\n      <a href=\"https://dashboardpack.com/theme-details/cryptocurrency-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=adminator\"><strong>Cryptocurrency Dashboard</strong></a>\n      <br>\n      <sub>Bootstrap. Built specifically for ICO platforms, Bitcoin tracking, and crypto portfolios.</sub>\n    </td>\n  </tr>\n</table>\n\n<p align=\"center\">\n  <a href=\"https://dashboardpack.com/?utm_source=github&utm_medium=readme&utm_campaign=adminator\"><strong>View All Premium Templates</strong></a>\n</p>\n\n## TOC\n- [What's New in v3.0.0](#whats-new-in-v300)\n- [Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Installing & Local Development](#installing--local-development)\n- [Adminator for other platforms and frameworks](#adminator-for-other-platforms-and-frameworks)\n- [Files/Folder Structure](#filesfolders-structure)\n- [Deployment](#deployment)\n- [Built With](#built-with)\n- [Changelog](#changelog)\n- [Authors](#authors)\n- [License](#license)\n\n## What's New in v3.0.0\n\n### Major Architecture & Developer Experience Release\n\nThis release represents a comprehensive overhaul adding professional-grade utilities, testing, security, and optimized builds.\n\n### New Utility Modules\n- **Events** - Event delegation, debounce, throttle (replaces lodash)\n- **Performance** - ResizeObserver, IntersectionObserver, lazy loading utilities\n- **Storage** - Safe localStorage wrapper with in-memory fallback\n- **Sanitize** - HTML/input sanitization for XSS prevention\n- **Logger** - Development-only logging utility\n\n### Testing Infrastructure\n- **Vitest** - Modern, fast testing framework\n- **Coverage Reports** - V8-based code coverage via `npm run test:coverage`\n- **Test Suites** - Initial tests for theme, DOM, and logger utilities\n\n### Build & Bundle Optimization\n- **Code Splitting** - Separate chunks for Chart.js (529KB), FullCalendar (654KB), Bootstrap\n- **Bundle Analyzer** - New `npm run build:analyze` for visual inspection\n- **Console Removal** - TerserPlugin drops console/debugger in production\n- **Lodash Removed** - Custom Events utility saves ~70KB\n\n### Documentation & DX\n- **API Reference** - Complete docs in `docs/API.md`\n- **Component Guide** - Development patterns in `docs/COMPONENT_GUIDE.md`\n- **TypeScript Declarations** - IDE support via `types/adminator.d.ts`\n- **VSCode Settings** - Project-specific editor configuration\n\n### Code Quality\n- **Dead Code Removed** - Cleaned up unused files\n- **HTML Accessibility** - Added `lang=\"en\"` to all 18 HTML pages\n- **Zero Vulnerabilities** - Full security audit passed\n\n### Previous Updates (v2.9.x)\n- Comprehensive dependency updates to latest versions\n- Enhanced SCSS linting with stylelint-config-standard-scss\n- Security vulnerability fixes (node-forge, js-yaml)\n\n## What's New in v2.7.1\n\n**jQuery-Free Release** - Complete removal of jQuery dependency with modern vanilla JavaScript:\n\n### Major Performance Improvements\n- **~600KB Bundle Reduction**: Eliminated jQuery and all jQuery-dependent plugins\n- **Faster Load Times**: Native DOM manipulation for optimal performance\n- **Smaller Bundle Size**: Significantly reduced JavaScript payload\n- **Modern ES6+ Code**: Class-based architecture with modern JavaScript features\n\n### jQuery Replacements (Zero Breaking Changes)\n- **Chart.js**: Replaced jQuery Sparkline with Chart.js mini charts\n- **HTML5 Date Pickers**: Enhanced native date inputs with Day.js support\n- **Vanilla DataTables**: Custom table component with sorting and pagination\n- **SVG Pie Charts**: Pure JavaScript circular progress indicators\n- **Vector Maps**: JavaScript-based world map with markers and interactions\n- **Vanilla Popovers**: Lightweight alternatives to Bootstrap JS components\n\n### Technical Achievements\n- **100% Vanilla JavaScript**: No jQuery dependency anywhere in the codebase\n- **Component Architecture**: Modern class-based components (Sidebar, Charts, etc.)\n- **Enhanced DOM Utilities**: jQuery-like functionality using native JavaScript\n- **Mobile Optimized**: Touch-friendly interactions and responsive behavior\n- **Theme Integration**: All new components fully support dark/light mode switching\n\n### Previous Updates (v2.6.0 - Dark Mode System)\n\n### Dark Mode Features\n- **Smart Theme Toggle**: Bootstrap-based switch with sun/moon icons and intuitive labels\n- **OS Preference Detection**: Automatically detects and applies your preferred color scheme  \n- **Persistent Storage**: Remembers your theme choice across browser sessions\n- **Instant Switching**: Real-time theme updates without page reload\n- **Component Integration**: All charts, calendars, maps, and UI elements are theme-aware\n\n### Technical Implementation\n- **CSS Variables Architecture**: Comprehensive color system with semantic naming\n- **Chart.js Integration**: Dynamic color schemes for all chart types\n- **FullCalendar Support**: Dark-mode aware calendar with proper contrast\n- **Vector Maps**: Custom color palettes for both light and dark themes\n- **Component Compatibility**: Theme support across all interactive elements\n\n### Previous Updates (v2.5.0)\n- **Latest Dependencies**: All 22+ dependencies updated to latest versions  \n- **Modern Build Tools**: webpack 5.99.9, webpack-dev-server 5.2.2\n- **ESLint 9.x**: Migrated to modern flat config format\n- **Enhanced CSS**: Latest Sass (1.89.2), PostCSS (8.5.6), Bootstrap (5.3.7)\n- **Updated Components**: Chart.js 4.5.0, FullCalendar 6.1.17\n- **Zero Vulnerabilities**: Complete security audit with all packages secure\n\n## Getting Started\n\nYou can use **Adminator** in several ways:\n\n### NPM Package Installation (Recommended)\n\nInstall the complete template as an npm package:\n\n```bash\n# Install via npm\nnpm install adminator-admin-dashboard\n\n# Or install via yarn\nyarn add adminator-admin-dashboard\n```\n\n**Package Information:**\n- **Package Name**: `adminator-admin-dashboard`\n- **Version**: 3.0.0 (Architecture release)\n- **Size**: 5.7 MB (includes source + built assets)\n- **Registry**: https://www.npmjs.com/package/adminator-admin-dashboard\n\n**Usage after npm install:**\n```bash\n# Navigate to the package directory\ncd node_modules/adminator-admin-dashboard\n\n# Install development dependencies (if you want to customize)\nnpm install\n\n# Start development server\nnpm start\n```\n\n**What's included in the npm package:**\n- Complete source code (`src/` directory)\n- Pre-built production assets (`dist/` directory)\n- All dependencies and development tools\n- Documentation (CLAUDE.md, CHANGELOG.md)\n- Ready-to-use HTML templates\n\n### Local Development Setup\n\nFor development and customization, clone the repository:\n\n#### Prerequisites\n  - **Node.js 18.12.0 or higher** (tested with Node.js 23.11.0)\n  - **npm** (included with Node.js) or **Yarn**\n  - **Git**\n\n#### Installing & Local Development\n\n```bash\n# Clone the repository\ngit clone https://github.com/puikinsh/Adminator-admin-dashboard.git adminator\n\n# Navigate to the project directory\ncd adminator\n\n# Install dependencies\nnpm install\n\n# Start development server (available at http://localhost:4000)\nnpm start\n\n# Alternative: Start with webpack dashboard\nnpm run dev\n```\n\n### Quick Start Options\n\n1. **Fastest**: Use prebuilt static assets from [releases](https://github.com/puikinsh/Adminator-admin-dashboard/releases)\n2. **Recommended**: Install via npm package for easy updates\n3. **Development**: Clone repository for full customization\n\n#### Development Commands\n\n```bash\n# Development server with hot reload\nnpm start\n\n# Development server with dashboard\nnpm run dev\n\n# Build for production (optimized)\nnpm run build\n\n# Build for production (unminified)\nnpm run release:unminified\n\n# Build for production (minified)\nnpm run release:minified\n\n# Preview production build\nnpm run preview\n\n# Lint JavaScript files\nnpm run lint:js\n\n# Lint SCSS files\nnpm run lint:scss\n\n# Run all linters\nnpm run lint\n\n# Run tests\nnpm run test\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Analyze bundle size\nnpm run build:analyze\n```\n\n## Dark Mode Usage\n\nAdminator now includes a comprehensive dark mode system that works out of the box:\n\n### Automatic Setup\n- Dark mode is automatically initialized on page load\n- Detects your OS preference (light/dark) on first visit\n- Remembers your choice across browser sessions\n\n### Theme Toggle\n- Look for the **Light/Dark** toggle switch in the header navigation\n- Click to instantly switch between light and dark themes\n- Visual feedback with sun and moon icons\n\n### For Developers\n\n**[Complete Theme API Documentation →](https://puikinsh.github.io/Adminator-admin-dashboard/api/theme-api)**\n\n**Using the Theme API:**\n```javascript\n// Get current theme\nconst currentTheme = Theme.current(); // 'light' or 'dark'\n\n// Switch themes programmatically\nTheme.toggle();\n\n// Set specific theme\nTheme.apply('dark');\n\n// Listen for theme changes\nwindow.addEventListener('adminator:themeChanged', (event) => {\n  console.log('Theme changed to:', event.detail.theme);\n});\n```\n\n**CSS Variables for Custom Styling:**\n```css\n.my-component {\n  background: var(--c-bkg-card);\n  color: var(--c-text-base);\n  border: 1px solid var(--c-border);\n}\n```\n\n**Available CSS Variables:**\n- `--c-bkg-body` - Main background\n- `--c-bkg-card` - Card backgrounds  \n- `--c-text-base` - Primary text color\n- `--c-text-muted` - Secondary text color\n- `--c-border` - Border colors\n- `--c-primary` - Primary brand color\n\n**[View Complete CSS Variables Reference →](https://puikinsh.github.io/Adminator-admin-dashboard/customization/theme-system)**\n\n## Documentation\n\n**[Complete Documentation Site](https://puikinsh.github.io/Adminator-admin-dashboard/)** - Comprehensive guides and API reference\n\n### Quick Links:\n- **[Installation Guide](https://puikinsh.github.io/Adminator-admin-dashboard/getting-started/installation)** - Complete setup instructions\n- **[Theme System](https://puikinsh.github.io/Adminator-admin-dashboard/customization/theme-system)** - Dark mode and theming\n- **[API Reference](https://puikinsh.github.io/Adminator-admin-dashboard/api/theme-api)** - JavaScript API documentation\n- **[Examples](https://puikinsh.github.io/Adminator-admin-dashboard/examples/theme-integration)** - Integration examples\n\n## Adminator for other platforms and frameworks\n* [Adminator right to left](https://github.com/mortezakarimi/Adminator-admin-dashboard-rtl) - Adminator modified to work with right to left languages like Persian and Arabic\n\n## Files/Folders Structure\n\nHere is a brief explanation of the template folder structure and some of its main files usage:\n\n```\n└── src                         # Contains all template source files.\n│   └── assets                  # Contains JS, CSS, images and icon fonts.\n│   │   └── scripts             # Contains all JavaScript files.\n│   │   │   └── charts          # Chart.js, Sparkline & Pie Chart plugins init.\n│   │   │   └── chat            # All chat app JS code.\n│   │   │   └── constants       # Template constant values like color values.\n│   │   │   └── datatable       # Date table plugin init.\n│   │   │   └── datepicker      # Bootstrap datepicker init.\n│   │   │   └── email           # All email app code.\n│   │   │   └── fullcalendar    # Fullcalendar plugin init.\n│   │   │   └── googleMaps      # Google maps API integration code.\n│   │   │   └── masonry         # Masonry layout code.\n│   │   │   └── popover         # Bootstrap popover plugin init.\n│   │   │   └── scrollbar       # Perfect scrollbar plugin init.\n│   │   │   └── search          # Topbar toggle search init.\n│   │   │   └── sidebar         # Sidebar JS code.\n│   │   │   └── skycons         # Animated icons plugin init.\n│   │   │   └── utils           # Basic utils used for proper rendering.\n│   │   │   └── vectorMaps      # Vector maps plugin init.\n│   │   │   └── app.js          # Main application entry point.\n│   │   │\n│   │   └── static              # Contains the non-code files.\n│   │   │   └── fonts           # Contains icon fonts.\n│   │   │   └── images          # Contains all template images/svg.\n│   │   │\n│   │   └── styles              # Contains all SCSS files.\n│   │       └── spec            # Contains custom SCSS files.\n│   │       │   └── components  # Contains all template components.\n│   │       │   └── generic     # Contains basic scaffolding styles.\n│   │       │   └── screens     # Contains views specific styles.\n│   │       │   └── settings    # Contains all template variables.\n│   │       │   └── tools       # Contains all mixins.\n│   │       │   └── utils       # Contains helper classes.\n│   │       │   └── index.scss  # Indicator file.\n│   │       │\n│   │       └── vendor          # Contains all plugin files & custom styles.\n│   │       └── index.scss      # Main style entry point.\n│   │\n│   └── *.html                  # All HTML template pages.\n└── webpack                     # Contains Webpack configuration.\n│   └── plugins                 # Contains all Webpack plugins config.\n│   └── rules                   # Contains Webpack loaders config.\n│   └── config.js               # Main Webpack configuration.\n│   └── devServer.js            # Development server configuration.\n│   └── manifest.js             # Build system constants.\n│\n└── .babelrc                    # Babel ES6 transpiler configuration.\n└── .editorconfig               # Code editor consistency settings.\n└── eslint.config.mjs           # ESLint 9.x flat configuration.\n└── .gitattributes              # Git attributes configuration.\n└── .gitignore                  # Git ignore patterns.\n└── .stylelintrc.json           # SCSS/CSS linting configuration.\n└── browserslist                # Supported browsers configuration.\n└── CHANGELOG.md                # Version history and updates.\n└── package.json                # Node.js package configuration.\n└── README.md                   # This documentation file.\n└── webpack.config.js           # Webpack entry configuration.\n```\n\n## Deployment\n\nIn deployment process, you have several commands:\n\n1. **Production Build** - Generate optimized assets for production:\n```bash\nnpm run build\n```\n\n2. **Production Preview** - Preview the production build locally:\n```bash\nnpm run preview\n```\n\n3. **Custom Builds**:\n```bash\n# Unminified production build (for debugging)\nnpm run release:unminified\n\n# Minified production build (smallest size)\nnpm run release:minified\n```\n\nThe built files will be available in the `dist/` directory.\n\n## Built With\n\n### Core Framework & Build Tools\n- [Bootstrap 5.3.8](http://getbootstrap.com/) - Modern CSS framework\n- [Webpack 5.103.0](https://webpack.js.org/) - Module bundler and build tool\n- [Babel 7.28.x](https://babeljs.io/) - JavaScript transpiler\n- [Sass 1.94.2](http://sass-lang.com/) - CSS preprocessor\n- [PostCSS 8.5.6](http://postcss.org/) - CSS transformations\n- [ESLint 9.39.1](https://eslint.org/) - JavaScript linting (flat config)\n- [Stylelint 16.26.1](https://stylelint.io/) - CSS/SCSS linting\n\n### UI Components & Charts\n- [Chart.js 4.5.1](http://www.chartjs.org/) - Modern charting library\n- [FullCalendar 6.1.19](https://fullcalendar.io/) - Interactive calendar\n- [DataTables](https://datatables.net/) - Advanced table functionality\n- [Easy Pie Chart](http://rendro.github.io/easy-pie-chart/) - Animated pie charts\n- [Perfect Scrollbar 1.5.6](https://github.com/utatti/perfect-scrollbar) - Custom scrollbars\n\n### JavaScript Libraries\n- **[Chart.js 4.5.1](http://www.chartjs.org/)** - Modern charting library (replaces jQuery Sparkline)\n- **[jsvectormap 1.7.0](https://github.com/themustafaomar/jsvectormap)** - Interactive vector maps (replaces jVectorMap)\n- [Day.js 1.11.19](https://day.js.org/) - Modern 2KB date library (replaces Moment.js)\n- [Masonry 4.2.2](https://masonry.desandro.com/) - Grid layouts\n- **100% Vanilla JavaScript** - No jQuery or lodash dependencies\n\n### Icons & Fonts\n- [Font Awesome](http://fontawesome.io/) - Icon library\n- [Themify Icons](https://themify.me/themify-icons) - Additional icons\n- [Roboto Font](https://fonts.google.com/specimen/Roboto) - Google Fonts\n\n### Additional Plugins\n- **HTML5 Date Inputs** - Enhanced native date pickers (replaces Bootstrap Datepicker)\n- [Skycons](https://darkskyapp.github.io/skycons/) - Animated weather icons\n- [Load Google Maps API](https://github.com/yuanqing/load-google-maps-api) - Maps integration\n\n## Changelog\n\nSee [CHANGELOG.md](CHANGELOG.md) for detailed version history.\n\n📚 **[Online Documentation](https://puikinsh.github.io/Adminator-admin-dashboard/)** includes comprehensive guides for all features.\n\n#### Latest Release: V 3.0.0 (2026-01-13)\n- **New Utility Modules** - Events, Performance, Storage, Sanitize, Logger\n- **Testing Infrastructure** - Vitest with coverage reporting\n- **Code Splitting** - Separate chunks for Chart.js, FullCalendar, Bootstrap\n- **Bundle Analyzer** - Visual bundle inspection via `npm run build:analyze`\n- **Lodash Removed** - Custom Events utility replaces lodash (~70KB saved)\n- **Documentation** - API reference and component development guide\n- **TypeScript Declarations** - IDE support with type definitions\n\n#### Previous Releases\n- **V 2.9.0**: Comprehensive dependency updates, SCSS linting improvements\n- **V 2.8.1**: Bootstrap 5.3.8, security updates, and enhanced tooling\n- **V 2.8.0**: Webpack 5 asset modules and dependency modernization\n- **V 2.7.1**: 100% jQuery-Free with modern vanilla JavaScript\n- **V 2.6.0**: Complete Dark Mode System with theme switching\n- **V 2.5.0**: Updated all dependencies, ESLint 9.x, zero vulnerabilities\n- **V 2.1.0**: Upgraded all dependencies\n- **V 2.0.0**: Upgrade to Bootstrap 5\n- **V 1.1.0**: Upgrade to webpack 5\n- **V 1.0.0**: Initial Release\n\n## Authors\n[Colorlib](https://colorlib.com)\n\n## More Resources from Colorlib\n- [Bootstrap Dashboards](https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/)\n- [Bootstrap Templates](https://colorlib.com/wp/free-bootstrap-templates/)\n- [HTML Templates](https://colorlib.com/wp/free-html-website-templates/)\n- [Free Admin Dashboards](https://colorlib.com/wp/free-html5-admin-dashboard-templates/)\n- [Website Templates](https://colorlib.com/wp/templates/)\n- [Free CSS Templates](https://colorlib.com/wp/free-css-website-templates/)\n- [WordPress Themes](https://colorlib.com/wp/free-wordpress-themes/)\n\n## License\n\nAdminator is licensed under The MIT License (MIT). Which means that you can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the final products. But you always need to state that Colorlib is the original author of this template.\n"
  },
  {
    "path": "browserslist",
    "content": "# https://github.com/browserslist/browserslist#readme\n\n>= 0.5%\nlast 2 major versions\nnot dead\nChrome >= 90\nFirefox >= 90\nFirefox ESR\niOS >= 15\nSafari >= 15\nnot op_mini all"
  },
  {
    "path": "ci/getVersion.sh",
    "content": "echo $(sed 's/.*\"version\": \"\\(.*\\)\".*/\\1/;t;d' ./package.json)"
  },
  {
    "path": "ci/verifyVersion.sh",
    "content": "VERSION=$1\nTAG_EXISTS=$(git ls-remote --tags origin $VERSION | wc -l)\n\nif [ $TAG_EXISTS -eq \"1\" ]; then\n   echo \"The tag '$VERSION' already exists. Please update version in package.json.\";\n   exit 1;\nfi\n\necho \"The tag '$VERSION' does not exist - success.\";"
  },
  {
    "path": "docs/COMPONENT_GUIDE.md",
    "content": "# Component Development Guide\n\nThis guide explains how to create new components for the Adminator admin dashboard, following the established patterns and best practices.\n\n## Table of Contents\n\n- [Architecture Overview](#architecture-overview)\n- [Creating a New Component](#creating-a-new-component)\n- [Component Lifecycle](#component-lifecycle)\n- [Theme Integration](#theme-integration)\n- [Event Handling](#event-handling)\n- [Mobile Considerations](#mobile-considerations)\n- [Testing Components](#testing-components)\n\n---\n\n## Architecture Overview\n\nAdminator uses a class-based component architecture with the following structure:\n\n```\nsrc/assets/scripts/\n├── app.js                 # Main application controller\n├── components/            # Reusable UI components\n│   ├── Sidebar.js\n│   └── Chart.js\n├── utils/                 # Utility modules\n│   ├── dom.js            # DOM manipulation\n│   ├── theme.js          # Theme management\n│   ├── events.js         # Event handling\n│   ├── performance.js    # Performance utilities\n│   ├── logger.js         # Development logging\n│   └── date.js           # Date utilities\n└── [feature modules]      # Feature-specific code\n```\n\n### Key Principles\n\n1. **No jQuery** - Use vanilla JS and the `DOM` utility\n2. **Event Delegation** - Use `Events.delegate()` for performance\n3. **Theme Awareness** - Support light/dark modes via CSS variables\n4. **Cleanup** - Always provide a `destroy()` method\n5. **Mobile First** - Consider touch interactions\n\n---\n\n## Creating a New Component\n\n### Step 1: Create the Component File\n\nCreate a new file in `src/assets/scripts/components/`:\n\n```javascript\n/**\n * MyComponent - Description of what it does\n *\n * @module components/MyComponent\n */\n\nimport { DOM } from '../utils/dom';\nimport Events from '../utils/events';\nimport Logger from '../utils/logger';\n\nclass MyComponent {\n  /**\n   * Create a MyComponent instance\n   * @param {Object} [options={}] - Configuration options\n   * @param {string} [options.selector='.my-component'] - Root element selector\n   */\n  constructor(options = {}) {\n    this.options = {\n      selector: '.my-component',\n      ...options,\n    };\n\n    this.element = DOM.select(this.options.selector);\n    this.cleanupFunctions = [];\n\n    if (this.element) {\n      this.init();\n    }\n  }\n\n  /**\n   * Initialize the component\n   */\n  init() {\n    Logger.debug('MyComponent initializing');\n\n    this.bindEvents();\n    this.render();\n\n    Logger.info('MyComponent initialized');\n  }\n\n  /**\n   * Bind event listeners\n   */\n  bindEvents() {\n    // Use event delegation for child elements\n    const cleanup = Events.delegate(\n      this.element,\n      'click',\n      '.action-button',\n      (e, button) => this.handleAction(e, button)\n    );\n    this.cleanupFunctions.push(cleanup);\n\n    // Listen for theme changes\n    const themeCleanup = Events.on(window, 'adminator:themeChanged', () => {\n      this.onThemeChange();\n    });\n    this.cleanupFunctions.push(themeCleanup);\n  }\n\n  /**\n   * Handle action button clicks\n   * @param {Event} e - Click event\n   * @param {Element} button - Clicked button\n   */\n  handleAction(e, button) {\n    e.preventDefault();\n    // Handle the action\n  }\n\n  /**\n   * Called when theme changes\n   */\n  onThemeChange() {\n    // Update component for new theme\n  }\n\n  /**\n   * Render/update the component\n   */\n  render() {\n    // Update DOM as needed\n  }\n\n  /**\n   * Destroy the component and clean up\n   */\n  destroy() {\n    // Run all cleanup functions\n    this.cleanupFunctions.forEach(fn => fn());\n    this.cleanupFunctions = [];\n\n    Logger.debug('MyComponent destroyed');\n  }\n}\n\nexport default MyComponent;\n```\n\n### Step 2: Register with the App\n\nAdd your component to `app.js`:\n\n```javascript\nimport MyComponent from './components/MyComponent';\n\nclass AdminatorApp {\n  init() {\n    // ... existing init code ...\n    this.initMyComponent();\n  }\n\n  initMyComponent() {\n    if (DOM.exists('.my-component')) {\n      const myComponent = new MyComponent();\n      this.components.set('myComponent', myComponent);\n    }\n  }\n}\n```\n\n### Step 3: Add Styles\n\nCreate styles in `src/assets/styles/spec/components/`:\n\n```scss\n// _my-component.scss\n\n.my-component {\n  // Use CSS variables for theme support\n  background: var(--c-bkg-card);\n  color: var(--c-text-base);\n  border: 1px solid var(--c-border);\n\n  // Mobile-first responsive styles\n  padding: 1rem;\n\n  @media (min-width: 768px) {\n    padding: 1.5rem;\n  }\n}\n```\n\nImport in `index.scss`:\n\n```scss\n@import 'components/my-component';\n```\n\n---\n\n## Component Lifecycle\n\n```\n┌─────────────────┐\n│   constructor   │  - Store options\n│                 │  - Find root element\n└────────┬────────┘\n         │\n         ▼\n┌─────────────────┐\n│      init()     │  - Bind events\n│                 │  - Initial render\n└────────┬────────┘\n         │\n         ▼\n┌─────────────────┐\n│  Active State   │  - Handle events\n│                 │  - Respond to theme changes\n└────────┬────────┘\n         │\n         ▼\n┌─────────────────┐\n│    destroy()    │  - Remove event listeners\n│                 │  - Clean up resources\n└─────────────────┘\n```\n\n---\n\n## Theme Integration\n\n### Using CSS Variables\n\nAlways use CSS variables for colors:\n\n```scss\n.my-component {\n  // Good - supports theme switching\n  background: var(--c-bkg-card);\n  color: var(--c-text-base);\n  border-color: var(--c-border);\n\n  // Bad - hardcoded colors\n  // background: #ffffff;\n  // color: #212529;\n}\n```\n\n### Available CSS Variables\n\n| Variable | Description |\n|----------|-------------|\n| `--c-bkg-body` | Body background |\n| `--c-bkg-card` | Card/panel background |\n| `--c-text-base` | Primary text color |\n| `--c-text-muted` | Secondary text color |\n| `--c-border` | Border color |\n| `--c-primary` | Primary accent color |\n| `--c-success` | Success state color |\n| `--c-danger` | Error/danger color |\n| `--c-warning` | Warning color |\n| `--c-info` | Info color |\n\n### Responding to Theme Changes\n\n```javascript\nimport Theme from '../utils/theme';\nimport Events from '../utils/events';\n\nclass MyComponent {\n  bindEvents() {\n    Events.on(window, 'adminator:themeChanged', (e) => {\n      const { theme } = e.detail; // 'light' or 'dark'\n      this.updateForTheme(theme);\n    });\n  }\n\n  updateForTheme(theme) {\n    // Get theme-specific colors\n    const colors = Theme.getChartColors();\n\n    // Update canvas, SVG, or other non-CSS elements\n    this.canvas.style.backgroundColor = colors.tooltipBg;\n  }\n}\n```\n\n---\n\n## Event Handling\n\n### Event Delegation (Preferred)\n\nUse event delegation for better performance:\n\n```javascript\nimport Events from '../utils/events';\n\n// Instead of adding to each button:\n// buttons.forEach(btn => btn.addEventListener('click', ...))\n\n// Use delegation (single listener):\nEvents.delegate(container, 'click', '.btn', (e, btn) => {\n  console.log('Button clicked:', btn.dataset.action);\n});\n```\n\n### Cleanup Pattern\n\nAlways store cleanup functions and call them in `destroy()`:\n\n```javascript\nclass MyComponent {\n  constructor() {\n    this.cleanupFunctions = [];\n  }\n\n  bindEvents() {\n    // Events.on returns a cleanup function\n    const cleanup1 = Events.on(this.element, 'click', this.handleClick);\n    this.cleanupFunctions.push(cleanup1);\n\n    const cleanup2 = Events.delegate(this.element, 'click', '.item', this.handleItem);\n    this.cleanupFunctions.push(cleanup2);\n  }\n\n  destroy() {\n    this.cleanupFunctions.forEach(fn => fn());\n    this.cleanupFunctions = [];\n  }\n}\n```\n\n### Custom Events\n\nEmit events for cross-component communication:\n\n```javascript\nimport Events from '../utils/events';\n\n// Emit an event\nEvents.emit(window, 'myComponent:action', {\n  type: 'update',\n  data: { id: 123 },\n});\n\n// Listen for events\nEvents.on(window, 'myComponent:action', (e) => {\n  console.log(e.detail.type, e.detail.data);\n});\n```\n\n---\n\n## Mobile Considerations\n\n### Check for Mobile\n\n```javascript\nisMobile() {\n  return window.innerWidth <= 768;\n}\n```\n\n### Touch-Friendly Interactions\n\n- Minimum tap target: 44x44px\n- Add hover states only on non-touch devices\n- Consider swipe gestures for mobile\n\n```scss\n.my-button {\n  min-width: 44px;\n  min-height: 44px;\n  padding: 12px;\n\n  // Hover only on devices that support it\n  @media (hover: hover) {\n    &:hover {\n      background: var(--c-primary-hover);\n    }\n  }\n\n  // Active state for touch\n  &:active {\n    background: var(--c-primary-active);\n  }\n}\n```\n\n### Responsive Events\n\nUse `ResizeObserver` for responsive behavior:\n\n```javascript\nimport Performance from '../utils/performance';\n\nclass MyComponent {\n  init() {\n    // React to element resize (more efficient than window.resize)\n    this.resizeCleanup = Performance.onResize(this.element, ({ width }) => {\n      this.updateLayout(width);\n    });\n  }\n\n  destroy() {\n    this.resizeCleanup?.();\n  }\n}\n```\n\n---\n\n## Testing Components\n\n### Create a Test File\n\nCreate `tests/components/MyComponent.test.js`:\n\n```javascript\nimport { describe, it, expect, beforeEach, vi } from 'vitest';\nimport MyComponent from '../../src/assets/scripts/components/MyComponent';\n\ndescribe('MyComponent', () => {\n  beforeEach(() => {\n    document.body.innerHTML = `\n      <div class=\"my-component\">\n        <button class=\"action-button\">Click</button>\n      </div>\n    `;\n  });\n\n  it('initializes when element exists', () => {\n    const component = new MyComponent();\n    expect(component.element).not.toBeNull();\n  });\n\n  it('handles action button clicks', () => {\n    const component = new MyComponent();\n    const handler = vi.spyOn(component, 'handleAction');\n\n    document.querySelector('.action-button').click();\n\n    expect(handler).toHaveBeenCalled();\n  });\n\n  it('cleans up on destroy', () => {\n    const component = new MyComponent();\n    component.destroy();\n\n    expect(component.cleanupFunctions).toHaveLength(0);\n  });\n});\n```\n\n### Run Tests\n\n```bash\nnpm test                    # Watch mode\nnpm run test:run           # Single run\nnpm run test:coverage      # With coverage\n```\n\n---\n\n## Example: Complete Component\n\nHere's a complete example of a notification component:\n\n```javascript\n/**\n * NotificationComponent - Toast notifications\n */\n\nimport { DOM } from '../utils/dom';\nimport Events from '../utils/events';\nimport Logger from '../utils/logger';\n\nclass NotificationComponent {\n  constructor(options = {}) {\n    this.options = {\n      container: '.notification-container',\n      duration: 5000,\n      position: 'top-right',\n      ...options,\n    };\n\n    this.container = DOM.select(this.options.container);\n    this.notifications = new Map();\n    this.cleanupFunctions = [];\n\n    this.init();\n  }\n\n  init() {\n    // Create container if missing\n    if (!this.container) {\n      this.container = DOM.create('div', {\n        class: `notification-container notification-${this.options.position}`,\n      });\n      document.body.appendChild(this.container);\n    }\n\n    this.bindEvents();\n    Logger.info('NotificationComponent initialized');\n  }\n\n  bindEvents() {\n    // Delegate click events for close buttons\n    const cleanup = Events.delegate(\n      this.container,\n      'click',\n      '.notification-close',\n      (e, btn) => {\n        const notification = btn.closest('.notification');\n        if (notification) {\n          this.dismiss(notification.dataset.id);\n        }\n      }\n    );\n    this.cleanupFunctions.push(cleanup);\n  }\n\n  show(message, type = 'info') {\n    const id = `notification-${Date.now()}`;\n\n    const notification = DOM.create('div', {\n      class: `notification notification-${type}`,\n      'data-id': id,\n    }, [\n      DOM.create('span', { class: 'notification-message' }, [message]),\n      DOM.create('button', {\n        class: 'notification-close',\n        'aria-label': 'Close notification',\n      }, ['×']),\n    ]);\n\n    this.container.appendChild(notification);\n    this.notifications.set(id, notification);\n\n    // Auto-dismiss\n    if (this.options.duration > 0) {\n      setTimeout(() => this.dismiss(id), this.options.duration);\n    }\n\n    // Animate in\n    requestAnimationFrame(() => {\n      notification.classList.add('notification-visible');\n    });\n\n    return id;\n  }\n\n  dismiss(id) {\n    const notification = this.notifications.get(id);\n    if (!notification) return;\n\n    notification.classList.remove('notification-visible');\n    notification.classList.add('notification-hiding');\n\n    setTimeout(() => {\n      notification.remove();\n      this.notifications.delete(id);\n    }, 300);\n  }\n\n  success(message) {\n    return this.show(message, 'success');\n  }\n\n  error(message) {\n    return this.show(message, 'error');\n  }\n\n  warning(message) {\n    return this.show(message, 'warning');\n  }\n\n  destroy() {\n    this.cleanupFunctions.forEach(fn => fn());\n    this.notifications.clear();\n    this.container?.remove();\n    Logger.debug('NotificationComponent destroyed');\n  }\n}\n\nexport default NotificationComponent;\n```\n\n---\n\n## Summary\n\nWhen creating components:\n\n1. **Follow the pattern** - Use the class structure with constructor, init, bindEvents, render, destroy\n2. **Use utilities** - DOM, Events, Logger, Performance, Theme\n3. **Support themes** - Use CSS variables, listen for theme changes\n4. **Clean up** - Store and call cleanup functions in destroy()\n5. **Test** - Write unit tests for your component\n6. **Document** - Add JSDoc comments to all public methods\n\nFor questions or issues, see the main [README.md](../README.md) or open an issue on GitHub.\n"
  },
  {
    "path": "docs/README.md",
    "content": "# Adminator Documentation\n\nThis directory contains the complete documentation for Adminator Bootstrap 5 Admin Template.\n\n## 📁 Documentation Structure\n\n```\ndocs/\n├── index.md                 # Homepage\n├── _config.yml              # GitHub Pages configuration\n├── getting-started/         # Installation and setup guides\n│   ├── installation.md\n│   ├── project-structure.md\n│   ├── development.md\n│   └── build-deployment.md\n├── components/              # Component documentation\n│   ├── charts.md\n│   ├── forms.md\n│   ├── tables.md\n│   ├── navigation.md\n│   └── modals.md\n├── customization/           # Theme and styling guides\n│   ├── theme-system.md\n│   ├── css-variables.md\n│   ├── custom-themes.md\n│   └── component-theming.md\n├── api/                     # API reference\n│   ├── theme-api.md\n│   ├── component-apis.md\n│   ├── utilities.md\n│   └── events.md\n├── examples/                # Practical examples\n│   ├── basic-setup.md\n│   ├── custom-components.md\n│   ├── theme-integration.md\n│   └── advanced-patterns.md\n├── deployment/              # Production deployment\n│   ├── production-build.md\n│   ├── static-hosting.md\n│   ├── cdn-integration.md\n│   └── performance.md\n└── contributing/            # Contribution guidelines\n    ├── development-setup.md\n    ├── code-standards.md\n    ├── pull-requests.md\n    └── issues.md\n```\n\n## 🚀 Hosting Strategy\n\n### **GitHub Pages Setup**\n\n1. **Main Branch Integration**: Documentation lives in the `docs/` folder of the main branch\n2. **Automatic Deployment**: GitHub Pages automatically builds and deploys on every commit\n3. **Custom Domain Support**: Can be configured with custom domains\n4. **Jekyll Integration**: Uses Jekyll static site generator with the Minima theme\n\n### **Benefits of This Approach**\n\n✅ **Version Control**: Docs stay in sync with code releases  \n✅ **Free Hosting**: GitHub Pages provides free, reliable hosting  \n✅ **Easy Discovery**: Users find docs directly in the repository  \n✅ **SEO Friendly**: Searchable and indexable documentation  \n✅ **Collaboration**: Easy for contributors to update docs  \n✅ **Professional URLs**: Clean URLs like `username.github.io/repo/`\n\n## 📖 Documentation Sections\n\n### **🏁 Getting Started**\nComplete setup and installation guides for new users.\n\n### **🎨 Components** \nDetailed documentation for all UI components and their usage.\n\n### **🌙 Dark Mode & Theming**\nComprehensive guide to the theme system and customization options.\n\n### **🔧 API Reference**\nComplete API documentation for all JavaScript utilities and components.\n\n### **💡 Examples**\nPractical, copy-paste examples for common use cases.\n\n### **🚀 Deployment**\nProduction deployment guides and performance optimization tips.\n\n### **🤝 Contributing**\nGuidelines for contributing to the project.\n\n## 🔧 Local Development\n\nTo view the documentation locally:\n\n```bash\n# Install Jekyll (if not already installed)\ngem install bundler jekyll\n\n# Navigate to docs directory\ncd docs\n\n# Install dependencies\nbundle install\n\n# Serve locally\nbundle exec jekyll serve\n\n# Visit http://localhost:4000\n```\n\n## 📝 Writing Documentation\n\n### **Markdown Guidelines**\n\n- Use clear, descriptive headings\n- Include code examples for all features\n- Add cross-references between related sections\n- Use emoji for visual appeal (sparingly)\n- Include \"Next Steps\" sections to guide readers\n\n### **Code Examples**\n\n```markdown\n\\```javascript\n// Always include working code examples\nconst example = Theme.current();\nconsole.log(example);\n\\```\n```\n\n### **File Naming**\n\n- Use lowercase with hyphens: `theme-system.md`\n- Be descriptive but concise\n- Group related files in subdirectories\n\n## 🔗 Quick Links\n\n- **[Live Documentation](https://puikinsh.github.io/Adminator-admin-dashboard/)** (Coming Soon)\n- **[GitHub Repository](https://github.com/puikinsh/Adminator-admin-dashboard)**\n- **[Live Demo](https://colorlib.com/polygon/adminator/index.html)**\n\n## 📞 Support\n\nFor documentation issues:\n- Open an issue with the `documentation` label\n- Suggest improvements via pull requests\n- Join discussions for larger documentation changes\n\n---\n\n**Happy documenting!** 📚 "
  },
  {
    "path": "docs/_config.yml",
    "content": "# GitHub Pages Configuration for Adminator Documentation\n\n# Site settings\ntitle: \"Adminator Documentation\"\ndescription: \"Complete guide for the Adminator Bootstrap 5 Admin Dashboard Template with Dark Mode\"\nurl: \"https://puikinsh.github.io\"\nbaseurl: \"/Adminator-admin-dashboard\"\n\n# Build settings\nmarkdown: kramdown\nhighlighter: rouge\nremote_theme: just-the-docs/just-the-docs\n\n# Plugin settings\nplugins:\n  - jekyll-feed\n  - jekyll-sitemap\n  - jekyll-seo-tag\n\n# Just the Docs theme configuration\ncolor_scheme: nil\nsearch_enabled: true\nsearch:\n  heading_level: 2\n  previews: 2\n  preview_words_before: 3\n  preview_words_after: 3\n  tokenizer_separator: /[\\s/]+/\n  rel_url: true\n  button: false\n\n# Enable custom CSS\nsass:\n  sass_dir: _sass\n  style: compressed\n\n# Heading anchor links appear on hover over h1-h6 tags\nheading_anchors: true\n\n# Footer\nfooter_content: \"Copyright &copy; 2025 Colorlib. Distributed by an <a href=\\\"https://github.com/puikinsh/Adminator-admin-dashboard/blob/master/LICENSE\\\">MIT license.</a>\"\n\n# Back to top link\nback_to_top: true\nback_to_top_text: \"Back to top\"\n\n# Navigation Structure\nnav_sort: case_insensitive\n\n# Aux links for the upper right navigation\naux_links:\n  \"GitHub Repository\":\n    - \"//github.com/puikinsh/Adminator-admin-dashboard\"\n  \"Live Demo\":\n    - \"//colorlib.com/polygon/adminator/index.html\"\n\n# Makes Aux links open in a new tab\naux_links_new_tab: true\n\n# SEO\nauthor: \"Colorlib\"\ntwitter:\n  username: colorlib\nsocial:\n  name: \"Colorlib\"\n  links:\n    - https://github.com/puikinsh/Adminator-admin-dashboard\n    - https://colorlib.com\n\n# Exclude from processing\nexclude:\n  - Gemfile\n  - Gemfile.lock\n  - node_modules\n  - vendor/bundle/\n  - vendor/cache/\n  - vendor/gems/\n  - vendor/ruby/\n\n# Code highlighting\nkramdown:\n  syntax_highlighter: rouge\n  syntax_highlighter_opts:\n    css_class: 'highlight'\n    block:\n      line_numbers: false\n      start_line: 1\n\n# Include\ninclude:\n  - _pages\n\n# Collections\ncollections:\n  pages:\n    output: true\n    permalink: /:name/\n\n# Defaults\ndefaults:\n  - scope:\n      path: \"\"\n      type: \"pages\"\n    values:\n      layout: \"page\"\n  - scope:\n      path: \"\"\n    values:\n      layout: \"default\" "
  },
  {
    "path": "docs/_sass/custom.scss",
    "content": "// Custom styles for Adminator Documentation\n\n// Fix code block formatting\n.highlight {\n  .language-javascript,\n  .language-css,\n  .language-html,\n  .language-bash {\n    &:before {\n      content: attr(class);\n      display: block;\n      font-size: 0.75rem;\n      font-weight: 600;\n      color: #6b7280;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: 0.5rem;\n      padding-bottom: 0.25rem;\n      border-bottom: 1px solid #e5e7eb;\n    }\n  }\n}\n\n// Better code block styling\npre.highlight {\n  background-color: #f8fafc !important;\n  border: 1px solid #e2e8f0;\n  border-radius: 6px;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  overflow-x: auto;\n  \n  code {\n    background: transparent !important;\n    border: none !important;\n    font-family: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;\n  }\n}\n\n// Inline code styling\ncode:not(.highlighter-rouge) {\n  background-color: #f1f5f9 !important;\n  color: #475569 !important;\n  padding: 0.125rem 0.25rem !important;\n  border-radius: 3px !important;\n  font-size: 0.875em !important;\n  border: 1px solid #e2e8f0 !important;\n}\n\n// Feature cards styling\n.feature-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: 1.5rem;\n  margin: 2rem 0;\n}\n\n.feature-card {\n  padding: 1.5rem;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  background: #ffffff;\n  \n  h3 {\n    margin-top: 0;\n    color: #1f2937;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    \n    &:before {\n      content: \"✨\";\n      font-size: 1.25em;\n    }\n  }\n}\n\n// Button improvements\n.btn {\n  &.btn-outline {\n    border: 1px solid #d1d5db;\n    color: #374151;\n    text-decoration: none;\n    \n    &:hover {\n      background-color: #f9fafb;\n      border-color: #9ca3af;\n    }\n  }\n  \n  &.btn-green {\n    background-color: #059669;\n    color: white;\n    border: 1px solid #059669;\n    \n    &:hover {\n      background-color: #047857;\n      border-color: #047857;\n    }\n  }\n}\n\n// Table styling improvements\ntable {\n  border-collapse: collapse;\n  width: 100%;\n  margin: 1.5rem 0;\n  \n  th, td {\n    padding: 0.75rem 1rem;\n    text-align: left;\n    border-bottom: 1px solid #e5e7eb;\n  }\n  \n  th {\n    background-color: #f9fafb;\n    font-weight: 600;\n    color: #374151;\n  }\n  \n  tr:hover {\n    background-color: #f9fafb;\n  }\n}\n\n// Navigation improvements\n.site-nav {\n  .nav-list {\n    .nav-list-item {\n      &.active {\n        > .nav-list-link {\n          background-color: #eff6ff;\n          color: #1d4ed8;\n        }\n      }\n    }\n  }\n}\n\n// Custom alert boxes\n.alert {\n  padding: 1rem 1.25rem;\n  margin: 1.5rem 0;\n  border-radius: 6px;\n  border-left: 4px solid;\n  \n  &.alert-info {\n    background-color: #eff6ff;\n    border-left-color: #3b82f6;\n    color: #1e40af;\n  }\n  \n  &.alert-warning {\n    background-color: #fffbeb;\n    border-left-color: #f59e0b;\n    color: #92400e;\n  }\n  \n  &.alert-success {\n    background-color: #f0fdf4;\n    border-left-color: #10b981;\n    color: #065f46;\n  }\n}\n\n// Dark mode improvements for code\n@media (prefers-color-scheme: dark) {\n  pre.highlight {\n    background-color: #1f2937 !important;\n    border-color: #374151;\n    \n    code {\n      color: #e5e7eb !important;\n    }\n  }\n  \n  code:not(.highlighter-rouge) {\n    background-color: #374151 !important;\n    color: #d1d5db !important;\n    border-color: #4b5563 !important;\n  }\n} "
  },
  {
    "path": "docs/api/theme-api.md",
    "content": "---\nlayout: default\ntitle: Theme API\nnav_order: 1\nparent: API Reference\n---\n\n# Theme API Reference\n{: .no_toc }\n\n## Table of contents\n{: .no_toc .text-delta }\n\n1. TOC\n{:toc}\n\nComplete API documentation for the Adminator Theme utility system.\n\n## Overview\n\nThe Theme API provides programmatic control over Adminator's dark mode and theming system. It includes methods for theme management, color retrieval, and event handling.\n\n## Theme Object\n\nThe global `Theme` object is available throughout the application:\n\n```javascript\n// Available globally\nwindow.Theme\n// or simply\nTheme\n```\n\n## Core Methods\n\n### `Theme.apply(theme)`\n\nApplies a specific theme to the application.\n\n**Parameters:**\n- `theme` (string): The theme to apply (`'light'` or `'dark'`)\n\n**Returns:** `void`\n\n**Example:**\n```javascript\n// Apply dark theme\nTheme.apply('dark');\n\n// Apply light theme\nTheme.apply('light');\n```\n\n**Side Effects:**\n- Sets `data-theme` attribute on `document.documentElement`\n- Updates Chart.js global defaults (if Chart.js is loaded)\n- Saves theme preference to localStorage\n- Dispatches `adminator:themeChanged` event\n\n---\n\n### `Theme.toggle()`\n\nToggles between light and dark themes.\n\n**Parameters:** None\n\n**Returns:** `void`\n\n**Example:**\n```javascript\n// Switch from current theme to opposite\nTheme.toggle();\n\n// If current theme is 'light', switches to 'dark'\n// If current theme is 'dark', switches to 'light'\n```\n\n---\n\n### `Theme.current()`\n\nGets the currently active theme.\n\n**Parameters:** None\n\n**Returns:** `string` - The current theme (`'light'` or `'dark'`)\n\n**Example:**\n```javascript\nconst currentTheme = Theme.current();\nconsole.log(currentTheme); // 'light' or 'dark'\n\n// Use in conditional logic\nif (Theme.current() === 'dark') {\n  // Dark theme specific logic\n}\n```\n\n---\n\n### `Theme.init()`\n\nInitializes the theme system. Called automatically on page load.\n\n**Parameters:** None\n\n**Returns:** `void`\n\n**Example:**\n```javascript\n// Manual initialization (usually not needed)\nTheme.init();\n```\n\n**Behavior:**\n- Checks for stored theme preference in localStorage\n- If no stored preference, detects OS color scheme preference\n- Applies the determined theme\n- Sets up Chart.js defaults if available\n\n---\n\n### `Theme.getCSSVar(varName)`\n\nRetrieves the computed value of a CSS custom property.\n\n**Parameters:**\n- `varName` (string): The CSS variable name (including `--` prefix)\n\n**Returns:** `string` - The computed CSS variable value\n\n**Example:**\n```javascript\n// Get primary color\nconst primaryColor = Theme.getCSSVar('--c-primary');\nconsole.log(primaryColor); // '#4b7cf3'\n\n// Get background color\nconst bgColor = Theme.getCSSVar('--c-bkg-body');\nconsole.log(bgColor); // '#f8f9fa' or '#181a1f'\n```\n\n## Specialized Color Methods\n\n### `Theme.getChartColors()`\n\nGets color values optimized for Chart.js components.\n\n**Parameters:** None\n\n**Returns:** `object` - Chart color configuration\n\n**Return Object:**\n```javascript\n{\n  textColor: string,    // Primary text color\n  mutedColor: string,   // Secondary text color\n  borderColor: string,  // Border colors\n  gridColor: string,    // Grid line colors\n  tooltipBg: string     // Tooltip background\n}\n```\n\n**Example:**\n```javascript\nconst chartColors = Theme.getChartColors();\n\nconst chart = new Chart(ctx, {\n  options: {\n    plugins: {\n      legend: {\n        labels: {\n          color: chartColors.textColor\n        }\n      }\n    },\n    scales: {\n      y: {\n        ticks: { color: chartColors.mutedColor },\n        grid: { color: chartColors.gridColor }\n      }\n    }\n  }\n});\n```\n\n---\n\n### `Theme.getVectorMapColors()`\n\nGets color palette for vector map components.\n\n**Parameters:** None\n\n**Returns:** `object` - Vector map color configuration\n\n**Return Object:**\n```javascript\n{\n  backgroundColor: string,   // Map background\n  borderColor: string,      // Map borders\n  regionColor: string,      // Default region color\n  markerFill: string,       // Marker fill color\n  markerStroke: string,     // Marker stroke color\n  hoverColor: string,       // Hover state color\n  selectedColor: string,    // Selected state color\n  scaleStart: string,       // Color scale start\n  scaleEnd: string,         // Color scale end\n  scaleLight: string,       // Light scale color\n  scaleDark: string         // Dark scale color\n}\n```\n\n**Example:**\n```javascript\nconst mapColors = Theme.getVectorMapColors();\n\n$('#world-map').vectorMap({\n  backgroundColor: mapColors.backgroundColor,\n  regionStyle: {\n    initial: {\n      fill: mapColors.regionColor,\n      stroke: mapColors.borderColor\n    },\n    hover: {\n      fill: mapColors.hoverColor\n    }\n  }\n});\n```\n\n---\n\n### `Theme.getSparklineColors()`\n\nGets color palette for Sparkline chart components.\n\n**Parameters:** None\n\n**Returns:** `object` - Sparkline color configuration\n\n**Return Object:**\n```javascript\n{\n  success: string,  // Success state color\n  purple: string,   // Purple variant\n  info: string,     // Info state color\n  danger: string,   // Danger state color\n  light: string     // Light variant\n}\n```\n\n**Example:**\n```javascript\nconst sparklineColors = Theme.getSparklineColors();\n\n$('.sparkline-success').sparkline(data, {\n  lineColor: sparklineColors.success,\n  fillColor: false\n});\n```\n\n## Event System\n\n### Theme Change Event\n\nThe theme system dispatches custom events when themes change.\n\n**Event Name:** `adminator:themeChanged`\n\n**Event Detail:**\n```javascript\n{\n  theme: string  // The new theme ('light' or 'dark')\n}\n```\n\n**Example:**\n```javascript\n// Listen for theme changes\nwindow.addEventListener('adminator:themeChanged', (event) => {\n  const newTheme = event.detail.theme;\n  console.log('Theme changed to:', newTheme);\n  \n  // Update custom components\n  updateCustomComponent(newTheme);\n});\n\n// Alternative using jQuery\n$(window).on('adminator:themeChanged', function(event) {\n  const newTheme = event.originalEvent.detail.theme;\n  // Handle theme change\n});\n```\n\n## Storage Management\n\n### Local Storage Key\n\nThe theme preference is stored using the key: `'adminator-theme'`\n\n**Example:**\n```javascript\n// Manually check stored theme\nconst storedTheme = localStorage.getItem('adminator-theme');\nconsole.log(storedTheme); // 'light', 'dark', or null\n\n// Manually set theme preference\nlocalStorage.setItem('adminator-theme', 'dark');\n```\n\n### Fallback Handling\n\nThe Theme API gracefully handles storage unavailability:\n\n```javascript\n// Internal implementation example\ntry {\n  localStorage.setItem('adminator-theme', theme);\n} catch (_) {\n  // Storage not available - theme won't persist\n  // But theme will still work for current session\n}\n```\n\n## Integration Examples\n\n### React Integration\n\n```javascript\nimport { useEffect, useState } from 'react';\n\nfunction useTheme() {\n  const [theme, setTheme] = useState(Theme.current());\n\n  useEffect(() => {\n    const handleThemeChange = (event) => {\n      setTheme(event.detail.theme);\n    };\n\n    window.addEventListener('adminator:themeChanged', handleThemeChange);\n    return () => {\n      window.removeEventListener('adminator:themeChanged', handleThemeChange);\n    };\n  }, []);\n\n  return {\n    theme,\n    toggle: Theme.toggle,\n    setTheme: Theme.apply\n  };\n}\n```\n\n### Vue.js Integration\n\n```javascript\nexport default {\n  data() {\n    return {\n      currentTheme: Theme.current()\n    }\n  },\n  \n  mounted() {\n    window.addEventListener('adminator:themeChanged', this.handleThemeChange);\n  },\n  \n  beforeDestroy() {\n    window.removeEventListener('adminator:themeChanged', this.handleThemeChange);\n  },\n  \n  methods: {\n    handleThemeChange(event) {\n      this.currentTheme = event.detail.theme;\n    },\n    \n    toggleTheme() {\n      Theme.toggle();\n    }\n  }\n}\n```\n\n### Custom Component Integration\n\n```javascript\nclass CustomWidget {\n  constructor(element) {\n    this.element = element;\n    this.currentTheme = Theme.current();\n    \n    this.init();\n    this.bindEvents();\n  }\n\n  init() {\n    this.updateTheme(this.currentTheme);\n  }\n\n  bindEvents() {\n    window.addEventListener('adminator:themeChanged', (event) => {\n      this.currentTheme = event.detail.theme;\n      this.updateTheme(this.currentTheme);\n    });\n  }\n\n  updateTheme(theme) {\n    // Update widget based on theme\n    if (theme === 'dark') {\n      this.element.classList.add('widget-dark');\n      this.element.style.backgroundColor = Theme.getCSSVar('--c-bkg-card');\n    } else {\n      this.element.classList.remove('widget-dark');\n      this.element.style.backgroundColor = Theme.getCSSVar('--c-bkg-card');\n    }\n  }\n}\n```\n\n## Error Handling\n\n### Browser Compatibility\n\n```javascript\n// Check for CSS custom property support\nfunction supportsCSSVariables() {\n  return window.CSS && CSS.supports('color', 'var(--fake-var)');\n}\n\nif (!supportsCSSVariables()) {\n  console.warn('CSS variables not supported - theme switching limited');\n}\n```\n\n### LocalStorage Availability\n\n```javascript\n// Check for localStorage support\nfunction supportsLocalStorage() {\n  try {\n    return 'localStorage' in window && window['localStorage'] !== null;\n  } catch (e) {\n    return false;\n  }\n}\n\nif (!supportsLocalStorage()) {\n  console.warn('localStorage not available - theme preference won\\'t persist');\n}\n```\n\n## Performance Considerations\n\n### Debounced Theme Changes\n\nFor applications with many theme-aware components:\n\n```javascript\nlet themeChangeTimeout;\n\nwindow.addEventListener('adminator:themeChanged', (event) => {\n  clearTimeout(themeChangeTimeout);\n  themeChangeTimeout = setTimeout(() => {\n    // Expensive theme update operations\n    updateManyComponents(event.detail.theme);\n  }, 100);\n});\n```\n\n### Efficient CSS Variable Reading\n\nCache CSS variable values when possible:\n\n```javascript\nclass ThemeCache {\n  constructor() {\n    this.cache = new Map();\n    this.cacheTheme = null;\n  }\n\n  getCSSVar(varName) {\n    const currentTheme = Theme.current();\n    \n    if (this.cacheTheme !== currentTheme) {\n      this.cache.clear();\n      this.cacheTheme = currentTheme;\n    }\n\n    if (!this.cache.has(varName)) {\n      const value = Theme.getCSSVar(varName);\n      this.cache.set(varName, value);\n    }\n\n    return this.cache.get(varName);\n  }\n}\n```\n\n---\n\n**Next:** Explore [Component APIs](component-apis.md) or check out [Theme Integration Examples](../examples/theme-integration.md). "
  },
  {
    "path": "docs/api.md",
    "content": "# Adminator API Reference\n\nComplete API documentation for Adminator utilities and components.\n\n## Table of Contents\n\n- [DOM Utilities](#dom-utilities)\n- [Theme Manager](#theme-manager)\n- [Events Utilities](#events-utilities)\n- [Performance Utilities](#performance-utilities)\n- [Logger](#logger)\n- [Date Utilities](#date-utilities)\n- [Custom Events](#custom-events)\n\n---\n\n## DOM Utilities\n\njQuery-like DOM manipulation using vanilla JavaScript.\n\n```javascript\nimport { DOM } from './utils/dom';\n```\n\n### Selection\n\n#### `DOM.select(selector, context?)`\n\nSelect a single element.\n\n| Parameter | Type | Default | Description |\n|-----------|------|---------|-------------|\n| selector | string | - | CSS selector |\n| context | Element | document | Context to search within |\n\n**Returns:** `Element | null`\n\n```javascript\nconst header = DOM.select('.header');\nconst navItem = DOM.select('.nav-item', sidebar);\n```\n\n#### `DOM.selectAll(selector, context?)`\n\nSelect all matching elements.\n\n**Returns:** `Element[]`\n\n```javascript\nconst buttons = DOM.selectAll('.btn');\nbuttons.forEach(btn => console.log(btn));\n```\n\n#### `DOM.exists(selector)`\n\nCheck if element exists.\n\n**Returns:** `boolean`\n\n```javascript\nif (DOM.exists('.sidebar')) {\n  initSidebar();\n}\n```\n\n### Events\n\n#### `DOM.on(element, event, handler, options?)`\n\nAdd event listener.\n\n```javascript\nDOM.on('.btn', 'click', handleClick);\nDOM.on(button, 'click', handleClick, { once: true });\n```\n\n#### `DOM.off(element, event, handler)`\n\nRemove event listener.\n\n```javascript\nDOM.off(button, 'click', handleClick);\n```\n\n### Classes\n\n#### `DOM.addClass(element, className)`\n\n```javascript\nDOM.addClass('.menu', 'open');\n```\n\n#### `DOM.removeClass(element, className)`\n\n```javascript\nDOM.removeClass('.menu', 'open');\n```\n\n#### `DOM.toggleClass(element, className)`\n\n```javascript\nDOM.toggleClass('.dropdown', 'show');\n```\n\n#### `DOM.hasClass(element, className)`\n\n**Returns:** `boolean`\n\n```javascript\nif (DOM.hasClass('.menu', 'open')) {\n  closeMenu();\n}\n```\n\n### Attributes\n\n#### `DOM.attr(element, name, value?)`\n\nGet or set attribute.\n\n```javascript\n// Get\nconst href = DOM.attr(link, 'href');\n\n// Set\nDOM.attr(link, 'href', '/new-page');\n```\n\n#### `DOM.data(element, name, value?)`\n\nGet or set data attribute.\n\n```javascript\n// Get data-id\nconst id = DOM.data(row, 'id');\n\n// Set data-id\nDOM.data(row, 'id', '123');\n```\n\n### Animations\n\n#### `DOM.slideUp(element, duration?)`\n\n**Returns:** `Promise<void>`\n\n```javascript\nawait DOM.slideUp('.panel', 300);\n```\n\n#### `DOM.slideDown(element, duration?)`\n\n**Returns:** `Promise<void>`\n\n```javascript\nawait DOM.slideDown('.panel', 300);\n```\n\n#### `DOM.fadeIn(element, duration?)`\n\n**Returns:** `Promise<void>`\n\n```javascript\nawait DOM.fadeIn('.modal', 200);\n```\n\n#### `DOM.fadeOut(element, duration?)`\n\n**Returns:** `Promise<void>`\n\n```javascript\nawait DOM.fadeOut('.modal', 200);\n```\n\n### Utilities\n\n#### `DOM.dimensions(element)`\n\nGet element dimensions.\n\n**Returns:** `{ width, height, top, left, bottom, right } | null`\n\n```javascript\nconst { width, height } = DOM.dimensions('.card');\n```\n\n#### `DOM.ready(callback)`\n\nExecute when DOM is ready.\n\n```javascript\nDOM.ready(() => {\n  initApp();\n});\n```\n\n#### `DOM.create(tag, attrs?, children?)`\n\nCreate an element.\n\n```javascript\nconst button = DOM.create('button', {\n  class: 'btn btn-primary',\n  type: 'submit',\n}, ['Submit']);\n```\n\n---\n\n## Theme Manager\n\nLight/dark mode switching with persistence.\n\n```javascript\nimport Theme from './utils/theme';\n```\n\n### Methods\n\n#### `Theme.init()`\n\nInitialize theme system. Detects OS preference on first visit.\n\n**Returns:** `'light' | 'dark'`\n\n#### `Theme.apply(theme)`\n\nApply a theme ('light' or 'dark').\n\n**Returns:** `boolean`\n\n```javascript\nTheme.apply('dark');\n```\n\n#### `Theme.toggle()`\n\nToggle between light and dark.\n\n**Returns:** `'light' | 'dark'` - The new theme\n\n```javascript\nconst newTheme = Theme.toggle();\n```\n\n#### `Theme.current()`\n\nGet current theme.\n\n**Returns:** `'light' | 'dark'`\n\n#### `Theme.isDark()` / `Theme.isLight()`\n\nCheck current theme state.\n\n**Returns:** `boolean`\n\n#### `Theme.getCSSVar(varName)`\n\nGet a CSS variable value.\n\n```javascript\nconst bgColor = Theme.getCSSVar('--c-bkg-body');\n```\n\n#### `Theme.getChartColors()`\n\nGet theme-aware Chart.js colors.\n\n**Returns:** `{ textColor, mutedColor, borderColor, gridColor, tooltipBg }`\n\n---\n\n## Events Utilities\n\nEfficient event handling with delegation and cleanup.\n\n```javascript\nimport Events from './utils/events';\n```\n\n### Methods\n\n#### `Events.on(element, event, handler, options?)`\n\nAdd event listener with cleanup support.\n\n**Returns:** `Function` - Cleanup function\n\n```javascript\nconst cleanup = Events.on(button, 'click', handleClick);\n// Later: cleanup();\n```\n\n#### `Events.delegate(parent, event, selector, handler, options?)`\n\nEvent delegation - single listener for many elements.\n\n**Returns:** `Function` - Cleanup function\n\n```javascript\nEvents.delegate(document, 'click', '.btn', (e, btn) => {\n  console.log('Clicked:', btn);\n});\n```\n\n#### `Events.once(element, event, handler)`\n\nOne-time event listener.\n\n#### `Events.debounce(handler, delay?)`\n\nCreate debounced handler (default: 250ms).\n\n```javascript\nconst debouncedSearch = Events.debounce(search, 300);\n```\n\n#### `Events.throttle(handler, limit?)`\n\nCreate throttled handler (default: 250ms).\n\n```javascript\nconst throttledScroll = Events.throttle(onScroll, 100);\n```\n\n#### `Events.emit(target, eventName, detail?, options?)`\n\nDispatch a custom event.\n\n```javascript\nEvents.emit(window, 'myapp:action', { type: 'save' });\n```\n\n---\n\n## Performance Utilities\n\nResizeObserver, IntersectionObserver, and optimization utilities.\n\n```javascript\nimport Performance from './utils/performance';\n```\n\n### Methods\n\n#### `Performance.onResize(element, callback)`\n\nObserve element resize.\n\n**Returns:** `Function` - Cleanup function\n\n```javascript\nconst unobserve = Performance.onResize(chart, ({ width, height }) => {\n  chart.resize(width, height);\n});\n```\n\n#### `Performance.onVisible(element, callback, options?)`\n\nObserve when element enters viewport.\n\n```javascript\nPerformance.onVisible(element, ({ isIntersecting }) => {\n  if (isIntersecting) loadContent();\n});\n```\n\n#### `Performance.lazyLoad(element, loadFn, options?)`\n\nLazy load when element becomes visible.\n\n```javascript\nPerformance.lazyLoad(chartContainer, () => initChart());\n```\n\n#### `Performance.batch(readFn, writeFn)`\n\nBatch DOM reads and writes.\n\n#### `Performance.nextFrame(callback)`\n\nExecute on next animation frame.\n\n#### `Performance.whenIdle(callback, options?)`\n\nExecute when browser is idle.\n\n#### `Performance.preload(url, as?)`\n\nPreload a resource.\n\n```javascript\nawait Performance.preload('/images/hero.jpg', 'image');\n```\n\n#### `Performance.cleanup()`\n\nCleanup all observers.\n\n---\n\n## Logger\n\nDevelopment-only logging utility.\n\n```javascript\nimport Logger from './utils/logger';\n```\n\nAll methods are no-ops in production.\n\n### Methods\n\n```javascript\nLogger.info('Message', { context });\nLogger.warn('Warning', { context });\nLogger.error('Error', error);\nLogger.debug('Debug info', { data });\n\nLogger.group('Group Name');\nLogger.groupEnd();\n\nLogger.time('operation');\nLogger.timeEnd('operation');\n\nLogger.table(arrayOfObjects);\n```\n\n---\n\n## Date Utilities\n\nDate handling using Day.js.\n\n```javascript\nimport DateUtils from './utils/date';\n```\n\n### Methods\n\n```javascript\nDateUtils.now()                    // Current date\nDateUtils.format.short(date)       // \"Jan 15, 2024\"\nDateUtils.format.long(date)        // \"January 15, 2024\"\nDateUtils.format.time(date)        // \"2:30 PM\"\nDateUtils.format.relative(date)    // \"2 hours ago\"\n\nDateUtils.form.toInputValue(date)  // HTML date input format\nDateUtils.form.fromInputValue(str) // Parse HTML date input\n\nDateUtils.compare.isBefore(d1, d2)\nDateUtils.compare.isAfter(d1, d2)\nDateUtils.compare.isSame(d1, d2)\n```\n\n---\n\n## Custom Events\n\n### `adminator:ready`\n\nFired when app is fully initialized.\n\n```javascript\nwindow.addEventListener('adminator:ready', (e) => {\n  const { app } = e.detail;\n});\n```\n\n### `adminator:themeChanged`\n\nFired when theme changes.\n\n```javascript\nwindow.addEventListener('adminator:themeChanged', (e) => {\n  const { theme } = e.detail; // 'light' or 'dark'\n});\n```\n\n---\n\n## TypeScript Support\n\nTypeScript declarations are available in `types/adminator.d.ts`.\n\n```javascript\nimport Theme from './utils/theme';\nTheme.apply('dark'); // Autocomplete works\n```\n\n---\n\n## Import Patterns\n\n```javascript\n// Individual (recommended)\nimport { DOM } from './utils/dom';\nimport Theme from './utils/theme';\n\n// Barrel import\nimport { DOM, Theme, Events, Performance, Logger } from './utils';\n```\n"
  },
  {
    "path": "docs/customization/theme-system.md",
    "content": "---\nlayout: default\ntitle: Theme System\nnav_order: 1\nparent: Customization\n---\n\n# Theme System Overview\n{: .no_toc }\n\n## Table of contents\n{: .no_toc .text-delta }\n\n1. TOC\n{:toc}\n\nAdminator v2.6.0 introduces a comprehensive dark mode system with intelligent theme switching and component integration.\n\n## 🌟 Features\n\n### Core Capabilities\n- **🌗 Smart Toggle**: Bootstrap-based switch with sun/moon icons\n- **🔄 OS Detection**: Automatically detects and applies system preference\n- **💾 Persistent Storage**: Remembers theme choice across browser sessions\n- **⚡ Instant Switching**: Real-time theme updates without page reload\n- **🎯 Component Integration**: All elements are theme-aware\n\n### Visual Enhancements\n- **🎨 Semantic Colors**: Consistent color variables across components\n- **📊 Chart Integration**: Dynamic color schemes for Chart.js\n- **🗓️ Calendar Support**: Dark-mode aware FullCalendar\n- **🗺️ Map Theming**: Custom color palettes for vector and Google maps\n\n## 🚀 Quick Start\n\n### Basic Usage\n\nThe theme system is automatically initialized when the page loads:\n\n```javascript\n// The theme toggle is automatically injected into the header\n// Users can click the Light/Dark switch to change themes\n```\n\n### Programmatic Control\n\n```javascript\n// Get current theme\nconst currentTheme = Theme.current(); // 'light' or 'dark'\n\n// Switch themes\nTheme.toggle();\n\n// Set specific theme\nTheme.apply('dark');\nTheme.apply('light');\n\n// Listen for theme changes\nwindow.addEventListener('adminator:themeChanged', (event) => {\n  console.log('Theme changed to:', event.detail.theme);\n  // Your custom logic here\n});\n```\n\n## 🎨 CSS Variables\n\n### Core Theme Variables\n\n```css\n:root {\n  /* Backgrounds */\n  --c-bkg-body: #f8f9fa;      /* Main page background */\n  --c-bkg-card: #ffffff;      /* Card and panel backgrounds */\n  --c-bkg-sidebar: #ffffff;   /* Sidebar background */\n\n  /* Text Colors */\n  --c-text-base: #212529;     /* Primary text color */\n  --c-text-muted: #6c757d;    /* Secondary text color */\n\n  /* UI Elements */\n  --c-border: #e2e5e8;        /* Border colors */\n  --c-primary: #4b7cf3;       /* Primary brand color */\n  --c-success: #2ecc71;       /* Success state color */\n  --c-danger: #e74c3c;        /* Error state color */\n}\n\n/* Dark theme overrides */\n[data-theme=\"dark\"] {\n  --c-bkg-body: #181a1f;\n  --c-bkg-card: #20232a;\n  --c-bkg-sidebar: #20232a;\n  --c-text-base: #e8eaed;\n  --c-text-muted: #9ca3af;\n  --c-border: #2b2f36;\n  /* ... additional dark theme variables */\n}\n```\n\n### Component-Specific Variables\n\n```css\n:root {\n  /* Vector Maps */\n  --vmap-bg-color: #ffffff;\n  --vmap-region-color: #e4ecef;\n  --vmap-hover-color: #ffffff;\n\n  /* Charts */\n  --sparkline-success: #4caf50;\n  --sparkline-info: #03a9f3;\n  --sparkline-danger: #f96262;\n\n  /* Maps */\n  --gmap-landscape-hue: #FFBB00;\n  --gmap-water-hue: #0078FF;\n}\n```\n\n## 🔧 Implementation Details\n\n### Theme Toggle Component\n\nThe theme toggle is automatically injected into the navigation:\n\n```html\n<!-- Automatically generated theme toggle -->\n<li class=\"theme-toggle d-flex ai-c\">\n  <div class=\"form-check form-switch d-flex ai-c\">\n    <label class=\"form-check-label me-2 text-nowrap c-grey-700\" for=\"theme-toggle\">\n      <i class=\"ti-sun\"></i> Light\n    </label>\n    <input class=\"form-check-input\" type=\"checkbox\" id=\"theme-toggle\">\n    <label class=\"form-check-label ms-2 text-nowrap c-grey-700\" for=\"theme-toggle\">\n      Dark <i class=\"ti-moon\"></i>\n    </label>\n  </div>\n</li>\n```\n\n### Theme Detection Logic\n\n```javascript\n// Automatic OS preference detection\nif (!localStorage.getItem('adminator-theme')) {\n  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n  Theme.apply(prefersDark ? 'dark' : 'light');\n} else {\n  Theme.apply(Theme.current());\n}\n```\n\n## 🎯 Component Integration\n\n### Chart.js Integration\n\nCharts automatically update colors when themes change:\n\n```javascript\n// Chart colors are automatically updated\nconst chartColors = Theme.getChartColors();\n// Returns: { textColor, mutedColor, borderColor, gridColor, tooltipBg }\n\n// Custom chart configuration\nconst chart = new Chart(ctx, {\n  data: data,\n  options: {\n    plugins: {\n      legend: {\n        labels: {\n          color: chartColors.textColor\n        }\n      }\n    },\n    scales: {\n      y: {\n        ticks: {\n          color: chartColors.mutedColor\n        },\n        grid: {\n          color: chartColors.gridColor\n        }\n      }\n    }\n  }\n});\n```\n\n### FullCalendar Integration\n\nCalendar styling updates automatically:\n\n```css\n/* Automatic dark mode calendar styling */\n.fc {\n  background: var(--c-bkg-card);\n  color: var(--c-text-base);\n}\n\n.fc-event {\n  border-color: var(--c-border) !important;\n}\n\n.fc-daygrid-day {\n  border-color: var(--c-border) !important;\n}\n```\n\n### Vector Maps Integration\n\nMaps use theme-aware color palettes:\n\n```javascript\n// Get vector map colors for current theme\nconst mapColors = Theme.getVectorMapColors();\n/* Returns:\n{\n  backgroundColor: '#ffffff' | '#20232a',\n  regionColor: '#e4ecef' | '#2b2f36',\n  hoverColor: '#ffffff' | '#181a1f',\n  // ... other map-specific colors\n}\n*/\n```\n\n## 🎨 Custom Styling\n\n### Using CSS Variables\n\nStyle your components with theme-aware variables:\n\n```css\n.my-custom-component {\n  background: var(--c-bkg-card);\n  color: var(--c-text-base);\n  border: 1px solid var(--c-border);\n  border-radius: 8px;\n  padding: 1rem;\n}\n\n.my-custom-button {\n  background: var(--c-primary);\n  color: white;\n  border: none;\n  padding: 0.5rem 1rem;\n  border-radius: 4px;\n}\n\n.my-custom-button:hover {\n  background: var(--c-primary);\n  opacity: 0.9;\n}\n```\n\n### Creating Theme-Aware Components\n\n```javascript\nclass MyCustomComponent {\n  constructor(element) {\n    this.element = element;\n    this.init();\n    \n    // Listen for theme changes\n    window.addEventListener('adminator:themeChanged', (event) => {\n      this.updateTheme(event.detail.theme);\n    });\n  }\n\n  updateTheme(theme) {\n    // Update component based on theme\n    if (theme === 'dark') {\n      this.element.classList.add('dark-mode');\n    } else {\n      this.element.classList.remove('dark-mode');\n    }\n  }\n}\n```\n\n## 🔍 Advanced Usage\n\n### Custom Theme Colors\n\nOverride default theme colors:\n\n```css\n:root {\n  /* Custom brand colors */\n  --c-primary: #your-brand-color;\n  --c-success: #your-success-color;\n}\n\n[data-theme=\"dark\"] {\n  /* Custom dark theme colors */\n  --c-primary: #your-dark-brand-color;\n  --c-success: #your-dark-success-color;\n}\n```\n\n### Theme-Specific Images\n\nUse different images for light/dark themes:\n\n```css\n.logo {\n  background-image: url('logo-light.png');\n}\n\n[data-theme=\"dark\"] .logo {\n  background-image: url('logo-dark.png');\n}\n```\n\n### Dynamic Theme Updates\n\nCreate dynamic theme switching animations:\n\n```css\n/* Smooth theme transitions */\n* {\n  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;\n}\n\n/* Disable transitions during theme switch */\n.theme-transitioning * {\n  transition: none !important;\n}\n```\n\n## 🐛 Troubleshooting\n\n### Common Issues\n\n#### Theme Not Persisting\n```javascript\n// Check localStorage availability\nif (typeof(Storage) !== \"undefined\") {\n  // localStorage is available\n} else {\n  // No web storage support\n  console.warn('localStorage not available - theme won\\'t persist');\n}\n```\n\n#### Components Not Updating\n```javascript\n// Ensure components listen for theme changes\nwindow.addEventListener('adminator:themeChanged', (event) => {\n  // Force component update\n  myComponent.refresh();\n});\n```\n\n#### CSS Variables Not Working\n```css\n/* Fallback for older browsers */\n.my-component {\n  background: #ffffff; /* Fallback */\n  background: var(--c-bkg-card); /* Modern */\n}\n```\n\n## 📚 Related Documentation\n\n- **[CSS Variables Reference](css-variables.md)** - Complete variable list\n- **[Custom Theme Creation](custom-themes.md)** - Create your own themes\n- **[Component Theming](component-theming.md)** - Theme individual components\n\n---\n\n**Ready to customize?** Start with the [CSS Variables Reference](css-variables.md) or explore [Custom Theme Creation](custom-themes.md)! "
  },
  {
    "path": "docs/customization.md",
    "content": "---\nlayout: default\ntitle: Customization\nnav_order: 3\nhas_children: true\n---\n\n# Customization\n\nLearn how to customize Adminator's appearance and behavior.\n\nThis section covers the dark mode system, theming, CSS variables, and custom component creation. "
  },
  {
    "path": "docs/examples/theme-integration.md",
    "content": "---\nlayout: default\ntitle: Theme Integration\nnav_order: 1\nparent: Examples\n---\n\n# Theme Integration Examples\n{: .no_toc }\n\n## Table of contents\n{: .no_toc .text-delta }\n\n1. TOC\n{:toc}\n\nPractical examples for integrating custom components with Adminator's theme system.\n\n## Basic Theme-Aware Component\n\n### Simple CSS Integration\n\nCreate components that automatically adapt to theme changes:\n\n```html\n<!-- HTML -->\n<div class=\"custom-widget\">\n  <h3 class=\"widget-title\">My Custom Widget</h3>\n  <div class=\"widget-content\">\n    <p>This widget adapts to the current theme.</p>\n    <button class=\"widget-button\">Action</button>\n  </div>\n</div>\n```\n\n```css\n/* CSS using theme variables */\n.custom-widget {\n  background: var(--c-bkg-card);\n  color: var(--c-text-base);\n  border: 1px solid var(--c-border);\n  border-radius: 8px;\n  padding: 1.5rem;\n  margin-bottom: 1rem;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.widget-title {\n  color: var(--c-text-base);\n  margin-bottom: 1rem;\n  font-size: 1.25rem;\n  font-weight: 600;\n}\n\n.widget-content {\n  color: var(--c-text-muted);\n  line-height: 1.6;\n}\n\n.widget-button {\n  background: var(--c-primary);\n  color: white;\n  border: none;\n  padding: 0.5rem 1rem;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: opacity 0.2s ease;\n}\n\n.widget-button:hover {\n  opacity: 0.9;\n}\n\n/* Dark theme specific adjustments */\n[data-theme=\"dark\"] .custom-widget {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\n```\n\n## JavaScript Integration\n\n### Theme-Aware Class Component\n\n```javascript\nclass ThemeAwareWidget {\n  constructor(element, options = {}) {\n    this.element = element;\n    this.options = {\n      autoUpdate: true,\n      customColors: {},\n      ...options\n    };\n    \n    this.currentTheme = Theme.current();\n    this.init();\n  }\n\n  init() {\n    this.render();\n    this.bindEvents();\n    this.updateTheme(this.currentTheme);\n  }\n\n  render() {\n    this.element.innerHTML = `\n      <div class=\"theme-widget\">\n        <div class=\"widget-header\">\n          <h4>Theme-Aware Widget</h4>\n          <span class=\"theme-indicator\">${this.currentTheme}</span>\n        </div>\n        <div class=\"widget-body\">\n          <div class=\"color-preview\">\n            <div class=\"color-sample\" data-color=\"primary\"></div>\n            <div class=\"color-sample\" data-color=\"success\"></div>\n            <div class=\"color-sample\" data-color=\"danger\"></div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  bindEvents() {\n    if (this.options.autoUpdate) {\n      window.addEventListener('adminator:themeChanged', (event) => {\n        this.currentTheme = event.detail.theme;\n        this.updateTheme(this.currentTheme);\n      });\n    }\n  }\n\n  updateTheme(theme) {\n    const widget = this.element.querySelector('.theme-widget');\n    \n    // Update theme indicator\n    const indicator = widget.querySelector('.theme-indicator');\n    indicator.textContent = theme;\n    indicator.className = `theme-indicator theme-${theme}`;\n\n    // Update color samples\n    const samples = widget.querySelectorAll('.color-sample');\n    samples.forEach(sample => {\n      const colorType = sample.dataset.color;\n      const cssVar = `--c-${colorType}`;\n      const color = Theme.getCSSVar(cssVar);\n      sample.style.backgroundColor = color;\n    });\n\n    // Apply custom colors if provided\n    if (this.options.customColors[theme]) {\n      Object.entries(this.options.customColors[theme]).forEach(([property, value]) => {\n        widget.style.setProperty(property, value);\n      });\n    }\n\n    // Trigger custom update callback\n    if (this.options.onThemeChange) {\n      this.options.onThemeChange(theme, this);\n    }\n  }\n\n  // Public methods\n  setTheme(theme) {\n    Theme.apply(theme);\n  }\n\n  getCurrentColors() {\n    return {\n      primary: Theme.getCSSVar('--c-primary'),\n      success: Theme.getCSSVar('--c-success'),\n      danger: Theme.getCSSVar('--c-danger'),\n      background: Theme.getCSSVar('--c-bkg-card'),\n      text: Theme.getCSSVar('--c-text-base')\n    };\n  }\n\n  destroy() {\n    // Cleanup event listeners\n    window.removeEventListener('adminator:themeChanged', this.updateTheme);\n  }\n}\n\n// Usage\nconst widget = new ThemeAwareWidget(document.getElementById('my-widget'), {\n  customColors: {\n    dark: {\n      '--custom-accent': '#ff6b6b'\n    },\n    light: {\n      '--custom-accent': '#4dabf7'\n    }\n  },\n  onThemeChange: (theme, instance) => {\n    console.log(`Widget theme changed to: ${theme}`);\n  }\n});\n```\n\n## Chart Integration\n\n### Theme-Aware Chart.js\n\n```javascript\nclass ThemeChart {\n  constructor(canvas, data, options = {}) {\n    this.canvas = canvas;\n    this.data = data;\n    this.options = options;\n    this.chart = null;\n    \n    this.init();\n  }\n\n  init() {\n    this.createChart();\n    this.bindThemeEvents();\n  }\n\n  createChart() {\n    const colors = Theme.getChartColors();\n    \n    const config = {\n      type: this.options.type || 'line',\n      data: this.processData(this.data, colors),\n      options: {\n        responsive: true,\n        plugins: {\n          legend: {\n            labels: {\n              color: colors.textColor,\n              usePointStyle: true\n            }\n          },\n          tooltip: {\n            backgroundColor: colors.tooltipBg,\n            titleColor: colors.textColor,\n            bodyColor: colors.textColor,\n            borderColor: colors.borderColor,\n            borderWidth: 1\n          }\n        },\n        scales: {\n          x: {\n            ticks: {\n              color: colors.mutedColor\n            },\n            grid: {\n              color: colors.gridColor\n            }\n          },\n          y: {\n            ticks: {\n              color: colors.mutedColor\n            },\n            grid: {\n              color: colors.gridColor\n            }\n          }\n        },\n        ...this.options.chartOptions\n      }\n    };\n\n    this.chart = new Chart(this.canvas, config);\n  }\n\n  processData(data, colors) {\n    return {\n      ...data,\n      datasets: data.datasets.map((dataset, index) => ({\n        ...dataset,\n        borderColor: dataset.borderColor || this.getDatasetColor(index, colors),\n        backgroundColor: dataset.backgroundColor || this.getDatasetColor(index, colors, 0.2)\n      }))\n    };\n  }\n\n  getDatasetColor(index, colors, alpha = 1) {\n    const colorKeys = ['primary', 'success', 'danger', 'info', 'warning'];\n    const colorKey = colorKeys[index % colorKeys.length];\n    const color = Theme.getCSSVar(`--c-${colorKey}`);\n    \n    if (alpha < 1) {\n      // Convert hex to rgba\n      const r = parseInt(color.slice(1, 3), 16);\n      const g = parseInt(color.slice(3, 5), 16);\n      const b = parseInt(color.slice(5, 7), 16);\n      return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n    }\n    \n    return color;\n  }\n\n  bindThemeEvents() {\n    window.addEventListener('adminator:themeChanged', () => {\n      this.updateChart();\n    });\n  }\n\n  updateChart() {\n    if (!this.chart) return;\n\n    const colors = Theme.getChartColors();\n\n    // Update chart options\n    this.chart.options.plugins.legend.labels.color = colors.textColor;\n    this.chart.options.plugins.tooltip.backgroundColor = colors.tooltipBg;\n    this.chart.options.plugins.tooltip.titleColor = colors.textColor;\n    this.chart.options.plugins.tooltip.bodyColor = colors.textColor;\n    this.chart.options.plugins.tooltip.borderColor = colors.borderColor;\n\n    // Update scales\n    this.chart.options.scales.x.ticks.color = colors.mutedColor;\n    this.chart.options.scales.x.grid.color = colors.gridColor;\n    this.chart.options.scales.y.ticks.color = colors.mutedColor;\n    this.chart.options.scales.y.grid.color = colors.gridColor;\n\n    // Update dataset colors\n    this.chart.data.datasets.forEach((dataset, index) => {\n      dataset.borderColor = this.getDatasetColor(index, colors);\n      dataset.backgroundColor = this.getDatasetColor(index, colors, 0.2);\n    });\n\n    this.chart.update();\n  }\n\n  destroy() {\n    if (this.chart) {\n      this.chart.destroy();\n    }\n  }\n}\n\n// Usage\nconst chartData = {\n  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],\n  datasets: [{\n    label: 'Sales',\n    data: [12, 19, 3, 5, 2, 3]\n  }, {\n    label: 'Revenue',\n    data: [2, 3, 20, 5, 1, 4]\n  }]\n};\n\nconst themeChart = new ThemeChart(\n  document.getElementById('myChart'),\n  chartData,\n  { \n    type: 'line',\n    chartOptions: {\n      tension: 0.4\n    }\n  }\n);\n```\n\n## Custom Modal Integration\n\n### Theme-Aware Modal\n\n```javascript\nclass ThemeModal {\n  constructor(options = {}) {\n    this.options = {\n      title: 'Modal Title',\n      content: '',\n      size: 'md', // sm, md, lg, xl\n      backdrop: true,\n      keyboard: true,\n      ...options\n    };\n    \n    this.modal = null;\n    this.element = null;\n    this.currentTheme = Theme.current();\n    \n    this.init();\n  }\n\n  init() {\n    this.createElement();\n    this.bindEvents();\n    this.updateTheme(this.currentTheme);\n  }\n\n  createElement() {\n    const modalId = `modal-${Date.now()}`;\n    \n    const modalHTML = `\n      <div class=\"modal fade theme-modal\" id=\"${modalId}\" tabindex=\"-1\">\n        <div class=\"modal-dialog modal-${this.options.size}\">\n          <div class=\"modal-content\">\n            <div class=\"modal-header\">\n              <h5 class=\"modal-title\">${this.options.title}</h5>\n              <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button>\n            </div>\n            <div class=\"modal-body\">\n              ${this.options.content}\n            </div>\n            <div class=\"modal-footer\">\n              <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\n              <button type=\"button\" class=\"btn btn-primary modal-action\">Save</button>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n\n    document.body.insertAdjacentHTML('beforeend', modalHTML);\n    this.element = document.getElementById(modalId);\n    \n    // Initialize Bootstrap modal\n    this.modal = new bootstrap.Modal(this.element, {\n      backdrop: this.options.backdrop,\n      keyboard: this.options.keyboard\n    });\n  }\n\n  bindEvents() {\n    // Theme change event\n    window.addEventListener('adminator:themeChanged', (event) => {\n      this.currentTheme = event.detail.theme;\n      this.updateTheme(this.currentTheme);\n    });\n\n    // Action button click\n    const actionButton = this.element.querySelector('.modal-action');\n    actionButton.addEventListener('click', () => {\n      if (this.options.onAction) {\n        this.options.onAction(this);\n      }\n    });\n\n    // Cleanup on hide\n    this.element.addEventListener('hidden.bs.modal', () => {\n      if (this.options.autoDestroy !== false) {\n        this.destroy();\n      }\n    });\n  }\n\n  updateTheme(theme) {\n    const content = this.element.querySelector('.modal-content');\n    \n    // Apply theme-specific styles\n    content.style.backgroundColor = Theme.getCSSVar('--c-bkg-card');\n    content.style.color = Theme.getCSSVar('--c-text-base');\n    content.style.border = `1px solid ${Theme.getCSSVar('--c-border')}`;\n\n    // Update header\n    const header = this.element.querySelector('.modal-header');\n    header.style.borderBottom = `1px solid ${Theme.getCSSVar('--c-border')}`;\n\n    // Update footer\n    const footer = this.element.querySelector('.modal-footer');\n    footer.style.borderTop = `1px solid ${Theme.getCSSVar('--c-border')}`;\n\n    // Update close button for dark theme\n    const closeButton = this.element.querySelector('.btn-close');\n    if (theme === 'dark') {\n      closeButton.classList.add('btn-close-white');\n    } else {\n      closeButton.classList.remove('btn-close-white');\n    }\n  }\n\n  show() {\n    this.modal.show();\n  }\n\n  hide() {\n    this.modal.hide();\n  }\n\n  destroy() {\n    if (this.modal) {\n      this.modal.dispose();\n    }\n    if (this.element) {\n      this.element.remove();\n    }\n  }\n}\n\n// Usage\nconst modal = new ThemeModal({\n  title: 'Theme-Aware Modal',\n  content: '<p>This modal adapts to the current theme automatically.</p>',\n  size: 'lg',\n  onAction: (modalInstance) => {\n    console.log('Action button clicked!');\n    modalInstance.hide();\n  }\n});\n\nmodal.show();\n```\n\n## React Hook Integration\n\n### useTheme Hook\n\n```javascript\nimport { useState, useEffect } from 'react';\n\n// Custom hook for theme management\nexport function useTheme() {\n  const [theme, setTheme] = useState(() => {\n    // Initialize with current theme\n    return window.Theme ? window.Theme.current() : 'light';\n  });\n\n  const [isLoading, setIsLoading] = useState(!window.Theme);\n\n  useEffect(() => {\n    // Wait for Theme object to be available\n    if (!window.Theme) {\n      const checkTheme = () => {\n        if (window.Theme) {\n          setTheme(window.Theme.current());\n          setIsLoading(false);\n        } else {\n          setTimeout(checkTheme, 100);\n        }\n      };\n      checkTheme();\n      return;\n    }\n\n    const handleThemeChange = (event) => {\n      setTheme(event.detail.theme);\n    };\n\n    window.addEventListener('adminator:themeChanged', handleThemeChange);\n\n    return () => {\n      window.removeEventListener('adminator:themeChanged', handleThemeChange);\n    };\n  }, []);\n\n  const toggleTheme = () => {\n    if (window.Theme) {\n      window.Theme.toggle();\n    }\n  };\n\n  const setSpecificTheme = (newTheme) => {\n    if (window.Theme) {\n      window.Theme.apply(newTheme);\n    }\n  };\n\n  const getThemeColors = () => {\n    if (!window.Theme) return {};\n    \n    return {\n      primary: window.Theme.getCSSVar('--c-primary'),\n      success: window.Theme.getCSSVar('--c-success'),\n      danger: window.Theme.getCSSVar('--c-danger'),\n      background: window.Theme.getCSSVar('--c-bkg-card'),\n      text: window.Theme.getCSSVar('--c-text-base'),\n      muted: window.Theme.getCSSVar('--c-text-muted'),\n      border: window.Theme.getCSSVar('--c-border')\n    };\n  };\n\n  return {\n    theme,\n    isLoading,\n    isDark: theme === 'dark',\n    isLight: theme === 'light',\n    toggle: toggleTheme,\n    setTheme: setSpecificTheme,\n    colors: getThemeColors()\n  };\n}\n\n// React component using the hook\nexport function ThemeAwareCard({ children, title }) {\n  const { theme, colors, isDark } = useTheme();\n\n  const cardStyle = {\n    backgroundColor: colors.background,\n    color: colors.text,\n    border: `1px solid ${colors.border}`,\n    borderRadius: '8px',\n    padding: '1.5rem',\n    boxShadow: isDark \n      ? '0 2px 4px rgba(0, 0, 0, 0.3)' \n      : '0 2px 4px rgba(0, 0, 0, 0.1)'\n  };\n\n  const titleStyle = {\n    color: colors.text,\n    marginBottom: '1rem',\n    fontSize: '1.25rem',\n    fontWeight: '600'\n  };\n\n  return (\n    <div style={cardStyle} className={`theme-card theme-${theme}`}>\n      {title && <h3 style={titleStyle}>{title}</h3>}\n      <div style={{ color: colors.muted }}>\n        {children}\n      </div>\n    </div>\n  );\n}\n\n// Theme toggle button component\nexport function ThemeToggle() {\n  const { theme, toggle, isLoading } = useTheme();\n\n  if (isLoading) {\n    return <div>Loading theme...</div>;\n  }\n\n  return (\n    <button \n      onClick={toggle}\n      className={`btn btn-outline-${theme === 'dark' ? 'light' : 'dark'}`}\n    >\n      {theme === 'dark' ? '☀️ Light' : '🌙 Dark'}\n    </button>\n  );\n}\n```\n\n## Performance Optimization\n\n### Throttled Theme Updates\n\nFor components with expensive rendering:\n\n```javascript\nclass PerformantThemeComponent {\n  constructor(element) {\n    this.element = element;\n    this.updateTheme = this.throttle(this._updateTheme.bind(this), 100);\n    \n    window.addEventListener('adminator:themeChanged', this.updateTheme);\n  }\n\n  throttle(func, limit) {\n    let inThrottle;\n    return function() {\n      const args = arguments;\n      const context = this;\n      if (!inThrottle) {\n        func.apply(context, args);\n        inThrottle = true;\n        setTimeout(() => inThrottle = false, limit);\n      }\n    }\n  }\n\n  _updateTheme(event) {\n    // Expensive theme update operations\n    this.recalculateLayout();\n    this.updateComplexVisuals();\n  }\n\n  recalculateLayout() {\n    // Complex layout calculations\n  }\n\n  updateComplexVisuals() {\n    // Expensive visual updates\n  }\n}\n```\n\n---\n\n**Next Steps:** \n- Check out [Component APIs](../api/component-apis.md) for more integration options\n- Explore [Advanced Patterns](advanced-patterns.md) for complex scenarios\n- Review [Performance Optimization](../deployment/performance.md) for production tips "
  },
  {
    "path": "docs/examples.md",
    "content": "---\nlayout: default\ntitle: Examples\nnav_order: 5\nhas_children: true\n---\n\n# Examples\n\nPractical examples and integration guides.\n\nThis section provides real-world examples of using Adminator in various scenarios and frameworks. "
  },
  {
    "path": "docs/getting-started/build-deployment.md",
    "content": "# Build & Deployment\n\nThis guide covers building Adminator for production and deploying it to various hosting platforms.\n\n## Table of Contents\n\n- Production Build\n- Build Commands\n- Build Output\n- Build Optimization\n- Deployment Options\n- Static Hosting Platforms\n- Server Deployment\n- Environment Configuration\n- Pre-Deployment Checklist\n- Post-Deployment Verification\n- Troubleshooting\n- Next Steps\n\n## Production Build\n\nBefore deploying, you need to create an optimized production build.\n\n### Quick Build\n\n```bash\nnpm run build\n```\n\nThis creates an optimized, minified production build in the `dist/` directory.\n\n## Build Commands\n\n### Standard Production Build\n\n```bash\nnpm run build\n```\n\n**Features:**\n- Minified JavaScript and CSS\n- Optimized assets\n- Source maps disabled\n- Production environment variables\n- Compressed bundle sizes\n\n### Minified Build\n\n```bash\nnpm run release:minified\n```\n\n**Use case:** Maximum optimization for production deployment\n\n**Features:**\n- Aggressive minification\n- Tree shaking\n- Dead code elimination\n- Smallest possible bundle size\n\n### Unminified Build\n\n```bash\nnpm run release:unminified\n```\n\n**Use case:** Debugging production issues\n\n**Features:**\n- Readable code\n- No minification\n- Easier to debug\n- Larger file sizes\n\n### Clean Build\n\n```bash\n# Clean and rebuild\nnpm run clean\nnpm run build\n```\n\nRemoves the `dist/` directory before building to ensure a fresh build.\n\n## Build Output\n\nAfter running the build command, the `dist/` directory contains:\n\n```\ndist/\n├── index.html              # Main dashboard page\n├── 404.html                # Error pages\n├── 500.html\n├── signin.html             # Authentication pages\n├── signup.html\n├── email.html              # Application pages\n├── compose.html\n├── chat.html\n├── calendar.html\n├── charts.html\n├── forms.html\n├── buttons.html\n├── ui.html\n├── basic-table.html\n├── datatable.html\n├── google-maps.html\n├── vector-maps.html\n├── blank.html\n└── assets/\n    ├── bundle.[hash].js    # Compiled JavaScript\n    ├── styles.[hash].css   # Compiled CSS\n    └── static/             # Images, fonts, etc.\n        ├── fonts/\n        └── images/\n```\n\n### File Hashing\n\nProduction builds include content hashes in filenames (e.g., `bundle.a1b2c3d4.js`) for:\n- Cache busting\n- Long-term caching\n- Version control\n\n## Build Optimization\n\n### Automatic Optimizations\n\nThe build process automatically applies:\n\n1. **JavaScript Optimization**\n   - Minification with Terser\n   - Tree shaking (removes unused code)\n   - Code splitting\n   - ES6+ transpilation to ES5\n\n2. **CSS Optimization**\n   - Minification with CSS Minimizer\n   - Autoprefixer for browser compatibility\n   - Unused CSS removal\n   - Critical CSS inlining (optional)\n\n3. **Asset Optimization**\n   - Image compression\n   - Font subsetting\n   - SVG optimization\n   - Asset hashing\n\n4. **Bundle Optimization**\n   - Gzip compression ready\n   - Brotli compression ready\n   - Chunk splitting\n   - Lazy loading support\n\n### Bundle Size Analysis\n\nTo analyze your bundle size:\n\n```bash\n# Install webpack-bundle-analyzer\nnpm install --save-dev webpack-bundle-analyzer\n\n# Add to webpack config and rebuild\nnpm run build\n```\n\n## Deployment Options\n\nAdminator can be deployed to various platforms:\n\n### 1. Static Hosting (Recommended)\n- Netlify\n- Vercel\n- GitHub Pages\n- Cloudflare Pages\n- AWS S3 + CloudFront\n- Azure Static Web Apps\n\n### 2. Traditional Hosting\n- Apache\n- Nginx\n- IIS\n- Any web server\n\n### 3. Cloud Platforms\n- AWS (S3, EC2, Amplify)\n- Google Cloud Platform\n- Microsoft Azure\n- DigitalOcean\n\n## Static Hosting Platforms\n\n### Netlify\n\n**1. Install Netlify CLI:**\n```bash\nnpm install -g netlify-cli\n```\n\n**2. Build your project:**\n```bash\nnpm run build\n```\n\n**3. Deploy:**\n```bash\nnetlify deploy --prod --dir=dist\n```\n\n**Or use Netlify's drag-and-drop:**\n1. Go to [netlify.com](https://netlify.com)\n2. Drag the `dist/` folder to deploy\n3. Done!\n\n**netlify.toml configuration:**\n```toml\n[build]\n  command = \"npm run build\"\n  publish = \"dist\"\n\n[[redirects]]\n  from = \"/*\"\n  to = \"/index.html\"\n  status = 200\n```\n\n### Vercel\n\n**1. Install Vercel CLI:**\n```bash\nnpm install -g vercel\n```\n\n**2. Deploy:**\n```bash\nvercel --prod\n```\n\n**vercel.json configuration:**\n```json\n{\n  \"buildCommand\": \"npm run build\",\n  \"outputDirectory\": \"dist\",\n  \"rewrites\": [\n    { \"source\": \"/(.*)\", \"destination\": \"/\" }\n  ]\n}\n```\n\n### GitHub Pages\n\n**1. Install gh-pages:**\n```bash\nnpm install --save-dev gh-pages\n```\n\n**2. Add deploy script to package.json:**\n```json\n{\n  \"scripts\": {\n    \"deploy\": \"npm run build && gh-pages -d dist\"\n  }\n}\n```\n\n**3. Deploy:**\n```bash\nnpm run deploy\n```\n\n**4. Configure GitHub Pages:**\n- Go to repository Settings → Pages\n- Select `gh-pages` branch\n- Save\n\n### Cloudflare Pages\n\n**1. Connect your repository:**\n- Go to [pages.cloudflare.com](https://pages.cloudflare.com)\n- Connect your GitHub/GitLab repository\n\n**2. Configure build settings:**\n- Build command: `npm run build`\n- Build output directory: `dist`\n- Root directory: `/`\n\n**3. Deploy:**\n- Push to your repository\n- Cloudflare automatically builds and deploys\n\n### AWS S3 + CloudFront\n\n**1. Build your project:**\n```bash\nnpm run build\n```\n\n**2. Install AWS CLI:**\n```bash\n# Follow AWS CLI installation guide\naws configure\n```\n\n**3. Create S3 bucket and upload:**\n```bash\n# Create bucket\naws s3 mb s3://your-bucket-name\n\n# Upload files\naws s3 sync dist/ s3://your-bucket-name --delete\n\n# Enable static website hosting\naws s3 website s3://your-bucket-name --index-document index.html --error-document 404.html\n```\n\n**4. Set up CloudFront (optional but recommended):**\n- Create CloudFront distribution\n- Point to S3 bucket\n- Configure caching rules\n- Add custom domain (optional)\n\n## Server Deployment\n\n### Apache\n\n**1. Build your project:**\n```bash\nnpm run build\n```\n\n**2. Copy files to web root:**\n```bash\ncp -r dist/* /var/www/html/\n```\n\n**3. Configure .htaccess:**\n```apache\n# .htaccess in dist/\n<IfModule mod_rewrite.c>\n  RewriteEngine On\n  RewriteBase /\n  RewriteRule ^index\\.html$ - [L]\n  RewriteCond %{REQUEST_FILENAME} !-f\n  RewriteCond %{REQUEST_FILENAME} !-d\n  RewriteRule . /index.html [L]\n</IfModule>\n\n# Enable Gzip compression\n<IfModule mod_deflate.c>\n  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript\n</IfModule>\n\n# Browser caching\n<IfModule mod_expires.c>\n  ExpiresActive On\n  ExpiresByType image/jpg \"access plus 1 year\"\n  ExpiresByType image/jpeg \"access plus 1 year\"\n  ExpiresByType image/gif \"access plus 1 year\"\n  ExpiresByType image/png \"access plus 1 year\"\n  ExpiresByType text/css \"access plus 1 month\"\n  ExpiresByType application/javascript \"access plus 1 month\"\n</IfModule>\n```\n\n### Nginx\n\n**1. Build your project:**\n```bash\nnpm run build\n```\n\n**2. Copy files to web root:**\n```bash\ncp -r dist/* /usr/share/nginx/html/\n```\n\n**3. Configure nginx.conf:**\n```nginx\nserver {\n    listen 80;\n    server_name your-domain.com;\n    root /usr/share/nginx/html;\n    index index.html;\n\n    # Gzip compression\n    gzip on;\n    gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript;\n    gzip_min_length 1000;\n\n    # Browser caching\n    location ~* \\.(jpg|jpeg|png|gif|ico|css|js)$ {\n        expires 1y;\n        add_header Cache-Control \"public, immutable\";\n    }\n\n    # SPA fallback\n    location / {\n        try_files $uri $uri/ /index.html;\n    }\n\n    # Security headers\n    add_header X-Frame-Options \"SAMEORIGIN\" always;\n    add_header X-Content-Type-Options \"nosniff\" always;\n    add_header X-XSS-Protection \"1; mode=block\" always;\n}\n```\n\n**4. Restart Nginx:**\n```bash\nsudo systemctl restart nginx\n```\n\n## Environment Configuration\n\n### Environment Variables\n\nCreate environment-specific configurations:\n\n**Development (.env.development):**\n```env\nNODE_ENV=development\nAPI_URL=http://localhost:3000\nDEBUG=true\n```\n\n**Production (.env.production):**\n```env\nNODE_ENV=production\nAPI_URL=https://api.yourdomain.com\nDEBUG=false\n```\n\n### Using Environment Variables\n\nIn your JavaScript:\n```javascript\nconst apiUrl = process.env.API_URL || 'http://localhost:3000';\nconst isProduction = process.env.NODE_ENV === 'production';\n```\n\n## Pre-Deployment Checklist\n\nBefore deploying to production, verify:\n\n### Code Quality\n- [ ] All linting errors fixed (`npm run lint`)\n- [ ] No console.log statements in production code\n- [ ] All TODO/FIXME comments addressed\n- [ ] Code reviewed and tested\n\n### Build\n- [ ] Production build succeeds (`npm run build`)\n- [ ] No build warnings or errors\n- [ ] Bundle sizes are acceptable\n- [ ] All assets are included\n\n### Testing\n- [ ] All pages load correctly\n- [ ] Navigation works properly\n- [ ] Forms submit correctly\n- [ ] Charts and visualizations display\n- [ ] Dark mode toggle works\n- [ ] Responsive design tested on mobile\n\n### Performance\n- [ ] Images optimized\n- [ ] Lazy loading implemented where needed\n- [ ] Bundle size optimized\n- [ ] Caching configured\n\n### Security\n- [ ] No sensitive data in code\n- [ ] API keys in environment variables\n- [ ] HTTPS configured\n- [ ] Security headers set\n- [ ] CORS configured properly\n\n### SEO (if applicable)\n- [ ] Meta tags added\n- [ ] Page titles set\n- [ ] Alt text for images\n- [ ] Sitemap generated\n- [ ] robots.txt configured\n\n### Browser Compatibility\n- [ ] Tested in Chrome/Edge\n- [ ] Tested in Firefox\n- [ ] Tested in Safari\n- [ ] Tested on mobile devices\n\n## Post-Deployment Verification\n\nAfter deployment, verify:\n\n1. **Site Accessibility**\n   - Visit your deployed URL\n   - Check all pages load\n   - Test navigation\n\n2. **Functionality**\n   - Test interactive features\n   - Verify forms work\n   - Check API connections\n\n3. **Performance**\n   - Run Lighthouse audit\n   - Check page load times\n   - Verify asset loading\n\n4. **Mobile Responsiveness**\n   - Test on actual devices\n   - Check responsive breakpoints\n   - Verify touch interactions\n\n5. **Console Errors**\n   - Open browser DevTools\n   - Check for JavaScript errors\n   - Verify no 404s for assets\n\n## Troubleshooting\n\n### Build Fails\n\n```bash\n# Clear cache and rebuild\nnpm run clean\nrm -rf node_modules package-lock.json\nnpm install\nnpm run build\n```\n\n### Assets Not Loading\n\n- Check file paths are relative\n- Verify assets are in `dist/` folder\n- Check server configuration\n- Verify CORS settings\n\n### Blank Page After Deployment\n\n- Check browser console for errors\n- Verify all files uploaded\n- Check base URL configuration\n- Verify server routing for SPA\n\n### Styles Not Applied\n\n- Check CSS file is loaded\n- Verify CSS file path\n- Check for CSS conflicts\n- Clear browser cache\n\n### 404 Errors\n\n- Configure server for SPA routing\n- Add `.htaccess` or nginx config\n- Verify all HTML files uploaded\n\n## Performance Optimization\n\n### Enable Compression\n\nMost hosting platforms enable Gzip/Brotli automatically. Verify:\n\n```bash\n# Check if Gzip is enabled\ncurl -H \"Accept-Encoding: gzip\" -I https://your-domain.com\n```\n\n### CDN Configuration\n\nUse a CDN for faster global delivery:\n- Cloudflare\n- AWS CloudFront\n- Fastly\n- KeyCDN\n\n### Caching Strategy\n\nSet appropriate cache headers:\n- HTML: No cache or short cache\n- CSS/JS: Long cache (1 year) with hashing\n- Images: Long cache (1 year)\n- Fonts: Long cache (1 year)\n\n## Continuous Deployment\n\n### GitHub Actions\n\nCreate `.github/workflows/deploy.yml`:\n\n```yaml\nname: Deploy to Production\n\non:\n  push:\n    branches: [ main ]\n\njobs:\n  build-and-deploy:\n    runs-on: ubuntu-latest\n    \n    steps:\n    - uses: actions/checkout@v2\n    \n    - name: Setup Node.js\n      uses: actions/setup-node@v2\n      with:\n        node-version: '18'\n    \n    - name: Install dependencies\n      run: npm ci\n    \n    - name: Build\n      run: npm run build\n    \n    - name: Deploy to Netlify\n      uses: netlify/actions/cli@master\n      env:\n        NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}\n        NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}\n      with:\n        args: deploy --prod --dir=dist\n```\n\n## Next Steps\n\nCongratulations on deploying Adminator! 🎉\n\nContinue learning:\n\n1. **[Theme System](../customization/theme-system.md)** - Customize colors and themes\n2. **[API Reference](../api/theme-api.md)** - JavaScript API documentation\n3. **[Examples](../examples/theme-integration.md)** - Integration examples\n\n---\n\n**Need Help?** Check the [main README](../../README.md) or [open an issue](https://github.com/puikinsh/Adminator-admin-dashboard/issues).\n"
  },
  {
    "path": "docs/getting-started/development.md",
    "content": "# Development Workflow\n\nThis guide covers the development workflow for working with Adminator, including running the development server, making changes, and best practices.\n\n## Table of Contents\n\n- Quick Start\n- Development Server\n- Available npm Scripts\n- Making Changes\n- Hot Module Replacement\n- Code Quality & Linting\n- Debugging\n- Working with Components\n- Working with Styles\n- Best Practices\n- Common Issues\n- Next Steps\n\n## Quick Start\n\nAfter [installation](installation.md), start the development server:\n\n```bash\nnpm start\n```\n\nYour application will be available at **http://localhost:4000**\n\n## Development Server\n\n### Standard Development Server\n\nThe standard development server includes hot module replacement (HMR) for instant updates:\n\n```bash\nnpm start\n```\n\n**Features:**\n- Hot module replacement (HMR)\n- Automatic browser refresh\n- Source maps for debugging\n- Fast rebuild times\n- Runs on port 4000\n\n### Development Server with Dashboard\n\nFor enhanced development experience with visual feedback:\n\n```bash\nnpm run dev\n```\n\n**Additional Features:**\n- Visual webpack dashboard\n- Real-time build statistics\n- Bundle size analysis\n- Build time metrics\n- Module dependency graph\n\n## Available npm Scripts\n\n### Development\n\n| Command | Description |\n|---------|-------------|\n| `npm start` | Start development server with HMR |\n| `npm run dev` | Start development server with webpack dashboard |\n| `npm run clean` | Clean the `dist/` directory |\n\n### Production Build\n\n| Command | Description |\n|---------|-------------|\n| `npm run build` | Production build (optimized, minified) |\n| `npm run release:minified` | Production build with minification |\n| `npm run release:unminified` | Production build without minification (for debugging) |\n| `npm run preview` | Preview production build locally |\n\n### Code Quality\n\n| Command | Description |\n|---------|-------------|\n| `npm run lint` | Run all linters (JavaScript + SCSS) |\n| `npm run lint:js` | Lint JavaScript files with ESLint |\n| `npm run lint:scss` | Lint SCSS files with Stylelint |\n\n## Making Changes\n\n### File Watching\n\nThe development server automatically watches for changes in:\n\n- **HTML files** (`src/*.html`)\n- **JavaScript files** (`src/assets/scripts/**/*.js`)\n- **SCSS files** (`src/assets/styles/**/*.scss`)\n- **Static assets** (`src/assets/static/**/*`)\n\nChanges are automatically compiled and the browser refreshes.\n\n### Workflow\n\n1. **Start the development server**\n   ```bash\n   npm start\n   ```\n\n2. **Make your changes** in the `src/` directory\n\n3. **Save the file** - Changes are automatically detected\n\n4. **Browser refreshes** - See your changes instantly\n\n## Hot Module Replacement (HMR)\n\nHMR allows modules to be updated without a full page reload, preserving application state.\n\n### What Gets Hot Reloaded?\n\n- ✅ **JavaScript modules** - Component updates without page reload\n- ✅ **SCSS/CSS** - Style updates without page reload\n- ⚠️ **HTML files** - Requires full page reload\n- ⚠️ **Configuration files** - Requires server restart\n\n### HMR Benefits\n\n- Faster development cycle\n- Preserves application state\n- Instant visual feedback\n- Better debugging experience\n\n## Code Quality & Linting\n\n### JavaScript Linting (ESLint)\n\nAdminator uses ESLint 9.x with flat configuration:\n\n```bash\n# Lint all JavaScript files\nnpm run lint:js\n\n# Auto-fix issues (if possible)\nnpx eslint ./src --fix\n```\n\n**Configuration:** `eslint.config.mjs`\n\n**Rules:**\n- ES6+ modern JavaScript\n- No jQuery patterns\n- Consistent code style\n- Import/export validation\n\n### SCSS Linting (Stylelint)\n\nMaintain consistent SCSS code style:\n\n```bash\n# Lint all SCSS files\nnpm run lint:scss\n\n# Auto-fix issues (if possible)\nnpx stylelint \"./src/**/*.scss\" --fix\n```\n\n**Configuration:** `.stylelintrc.json`\n\n### Running All Linters\n\n```bash\nnpm run lint\n```\n\nThis runs both JavaScript and SCSS linters in sequence.\n\n## Debugging\n\n### Source Maps\n\nDevelopment builds include source maps for easier debugging:\n\n1. Open browser DevTools (F12)\n2. Navigate to Sources tab\n3. Find your original source files under `webpack://`\n4. Set breakpoints and debug as normal\n\n### Console Logging\n\nThe application includes minimal console output in production. For development debugging:\n\n```javascript\n// Development-only logging\nif (process.env.NODE_ENV !== 'production') {\n  console.log('Debug info:', data);\n}\n```\n\n### Browser DevTools\n\n**Recommended Extensions:**\n- React Developer Tools (if using React components)\n- Vue.js devtools (if using Vue components)\n- Redux DevTools (if using Redux)\n\n## Working with Components\n\n### Creating a New Component\n\n1. **Create component file** in `src/assets/scripts/components/`:\n\n```javascript\n// src/assets/scripts/components/MyComponent.js\nclass MyComponent {\n  constructor(element) {\n    this.element = element;\n    this.init();\n  }\n\n  init() {\n    // Initialize component\n    this.setupEventListeners();\n  }\n\n  setupEventListeners() {\n    // Add event listeners\n  }\n\n  destroy() {\n    // Cleanup\n  }\n}\n\nexport default MyComponent;\n```\n\n2. **Import and use** in `app.js`:\n\n```javascript\nimport MyComponent from '@/components/MyComponent';\n\n// Initialize\nconst myComponent = new MyComponent(document.querySelector('.my-component'));\n```\n\n3. **Add component styles** in `src/assets/styles/spec/components/`:\n\n```scss\n// src/assets/styles/spec/components/myComponent.scss\n.my-component {\n  // Component styles\n}\n```\n\n4. **Import styles** in `src/assets/styles/spec/components/index.scss`:\n\n```scss\n@import 'myComponent';\n```\n\n### Component Best Practices\n\n- Use ES6 classes for components\n- Keep components focused and single-purpose\n- Implement `destroy()` method for cleanup\n- Use webpack aliases (`@/components`, `@/utils`)\n- Follow existing naming conventions\n\n## Working with Styles\n\n### SCSS Architecture\n\nAdminator follows ITCSS (Inverted Triangle CSS) methodology:\n\n```\nstyles/\n├── settings/    # Variables, config\n├── tools/       # Mixins, functions\n├── generic/     # Reset, normalize\n├── components/  # UI components\n├── utils/       # Utility classes\n└── vendor/      # Third-party styles\n```\n\n### Adding New Styles\n\n1. **Component styles** → `src/assets/styles/spec/components/`\n2. **Page-specific styles** → `src/assets/styles/spec/screens/`\n3. **Utility classes** → `src/assets/styles/spec/utils/`\n\n### Using CSS Variables\n\nAdminator uses CSS custom properties for theming:\n\n```scss\n.my-component {\n  background: var(--c-bkg-card);\n  color: var(--c-text-base);\n  border: 1px solid var(--c-border);\n}\n```\n\n**Available variables:** See `src/assets/styles/spec/utils/theme.css`\n\n### Dark Mode Support\n\nEnsure your components support dark mode:\n\n```scss\n.my-component {\n  background: var(--c-bkg-card); // Auto-adjusts for dark mode\n  \n  // Or use data attribute\n  [data-theme=\"dark\"] & {\n    background: #1f2937;\n  }\n}\n```\n\n## Best Practices\n\n### Code Organization\n\n- ✅ Keep files small and focused\n- ✅ Use meaningful file and variable names\n- ✅ Group related functionality\n- ✅ Follow existing project structure\n- ✅ Use webpack aliases for imports\n\n### JavaScript\n\n- ✅ Use modern ES6+ features\n- ✅ Avoid jQuery patterns\n- ✅ Use vanilla JavaScript DOM APIs\n- ✅ Implement proper error handling\n- ✅ Add JSDoc comments for complex functions\n\n### SCSS\n\n- ✅ Use variables for colors and spacing\n- ✅ Follow BEM naming convention (optional)\n- ✅ Keep selectors shallow (max 3 levels)\n- ✅ Use mixins for repeated patterns\n- ✅ Support dark mode with CSS variables\n\n### Performance\n\n- ✅ Minimize DOM manipulations\n- ✅ Use event delegation\n- ✅ Debounce/throttle frequent events\n- ✅ Lazy load heavy components\n- ✅ Optimize images and assets\n\n### Accessibility\n\n- ✅ Use semantic HTML\n- ✅ Add ARIA labels where needed\n- ✅ Ensure keyboard navigation\n- ✅ Maintain color contrast ratios\n- ✅ Test with screen readers\n\n## Common Issues\n\n### Port Already in Use\n\nIf port 4000 is already in use:\n\n```bash\n# Kill the process using port 4000 (Windows)\nnetstat -ano | findstr :4000\ntaskkill /PID <PID> /F\n\n# Or change the port in webpack/devServer.js\n```\n\n### Changes Not Reflecting\n\n1. **Hard refresh** the browser (Ctrl+F5)\n2. **Clear browser cache**\n3. **Restart development server**\n4. **Check for JavaScript errors** in console\n5. **Verify file is being watched** (check terminal output)\n\n### Build Errors\n\n```bash\n# Clean and rebuild\nnpm run clean\nnpm install\nnpm start\n```\n\n### Linting Errors\n\n```bash\n# Auto-fix common issues\nnpx eslint ./src --fix\nnpx stylelint \"./src/**/*.scss\" --fix\n\n# Check remaining issues\nnpm run lint\n```\n\n### Module Not Found\n\n```bash\n# Reinstall dependencies\nrm -rf node_modules package-lock.json\nnpm install\n```\n\n## Development Tips\n\n### 1. Use the Webpack Dashboard\n\n```bash\nnpm run dev\n```\n\nProvides visual feedback on build performance and bundle size.\n\n### 2. Keep the Console Clean\n\nFix warnings and errors as they appear to maintain code quality.\n\n### 3. Test in Multiple Browsers\n\n- Chrome/Edge (Chromium)\n- Firefox\n- Safari (if on macOS)\n- Mobile browsers (responsive mode)\n\n### 4. Use Browser DevTools\n\n- **Elements tab** - Inspect and modify DOM/CSS\n- **Console tab** - Debug JavaScript\n- **Network tab** - Monitor requests\n- **Performance tab** - Profile performance\n- **Application tab** - Check localStorage/theme\n\n### 5. Commit Often\n\nMake small, focused commits with clear messages:\n\n```bash\ngit add .\ngit commit -m \"feat: add new dashboard widget\"\ngit push\n```\n\n## Next Steps\n\nNow that you understand the development workflow:\n\n1. **[Customize Themes](../customization/theme-system.md)** - Set up dark mode and theming\n2. **[Build for Production](build-deployment.md)** - Deploy your application\n3. **[API Reference](../api/theme-api.md)** - JavaScript API documentation\n4. **[Project Structure](project-structure.md)** - Review the codebase structure\n\n---\n\n**Need Help?** Check the [main README](../../README.md) or [open an issue](https://github.com/puikinsh/Adminator-admin-dashboard/issues).\n"
  },
  {
    "path": "docs/getting-started/installation.md",
    "content": "---\nlayout: default\ntitle: Installation\nnav_order: 1\nparent: Getting Started\n---\n\n# Installation Guide\n{: .no_toc }\n\n## Table of contents\n{: .no_toc .text-delta }\n\n1. TOC\n{:toc}\n\n---\n\nThis guide will help you get Adminator up and running on your local machine.\n\n## Prerequisites\n\nBefore installing Adminator, ensure you have the following installed:\n\n### Required Software\n\n- **Node.js** (v18.12.0 or higher)\n  - Download from [nodejs.org](https://nodejs.org/)\n  - Verify installation: `node --version`\n- **npm** (comes with Node.js) or **Yarn**\n  - Verify npm: `npm --version`\n- **Git** for version control\n  - Download from [git-scm.com](https://git-scm.com/)\n\n### System Requirements\n\n- **Operating System**: Windows 10+, macOS 10.14+, or Linux\n- **RAM**: Minimum 4GB (8GB recommended for development)\n- **Storage**: 500MB free space for dependencies\n\n## Installation Methods\n\n### Method 1: Clone from GitHub (Recommended)\n\n```bash\n# Clone the repository\ngit clone https://github.com/puikinsh/Adminator-admin-dashboard.git\n\n# Navigate to the project directory\ncd Adminator-admin-dashboard\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm start\n```\n\n### Method 2: Download ZIP\n\n1. Visit the [GitHub repository](https://github.com/puikinsh/Adminator-admin-dashboard)\n2. Click **\"Code\"** → **\"Download ZIP\"**\n3. Extract the downloaded file\n4. Open terminal in the extracted folder\n5. Run `npm install` and `npm start`\n\n### Method 3: Use with Existing Project\n\n```bash\n# Add Adminator to your project\nnpm install --save adminator\n\n# Or download specific release\nwget https://github.com/puikinsh/Adminator-admin-dashboard/archive/v2.6.0.zip\n```\n\n## Verification\n\nAfter installation, verify everything works:\n\n### 1. Development Server\n```bash\nnpm start\n```\n\n**Expected Output:**\n```\n> adminator@2.6.0 start\n> webpack server\n\n✓ Project is running at: http://localhost:4000/\n✓ webpack compiled successfully\n```\n\n### 2. Build Process\n```bash\nnpm run build\n```\n\n**Expected Output:**\n```\n> adminator@2.6.0 build\n> npm run clean && cross-env webpack\n\n✓ webpack compiled successfully in [time]ms\n```\n\n### 3. Access the Application\n\nOpen your browser and navigate to:\n- **Local**: `http://localhost:4000`\n- **Network**: `http://[your-ip]:4000`\n\nYou should see the Adminator dashboard with:\n- ✅ Clean interface loading properly\n- ✅ Dark/Light mode toggle in the header\n- ✅ All components rendering correctly\n- ✅ No console errors\n\n## Troubleshooting\n\n### Common Issues\n\n#### Port Already in Use\n```bash\n# Error: EADDRINUSE: address already in use :::4000\n# Solution: Kill the process using port 4000\nsudo lsof -ti:4000 | xargs kill -9\n\n# Or use a different port\nPORT=3000 npm start\n```\n\n#### Node Version Issues\n```bash\n# Check your Node.js version\nnode --version\n\n# If version is below 18.12.0, update Node.js\n# Use nvm (recommended):\nnvm install 18\nnvm use 18\n```\n\n#### Permission Errors\n```bash\n# On macOS/Linux, you might need sudo for global packages\nsudo npm install -g npm@latest\n\n# Better solution: Fix npm permissions\nnpm config set prefix ~/.npm-global\nexport PATH=~/.npm-global/bin:$PATH\n```\n\n#### Missing Dependencies\n```bash\n# Clear npm cache and reinstall\nnpm cache clean --force\nrm -rf node_modules package-lock.json\nnpm install\n```\n\n#### Build Errors\n```bash\n# Check for conflicting global packages\nnpm list -g --depth=0\n\n# Update npm and dependencies\nnpm update\nnpm audit fix\n```\n\n### Getting Help\n\nIf you encounter issues:\n\n1. **Check the [GitHub Issues](https://github.com/puikinsh/Adminator-admin-dashboard/issues)**\n2. **Search existing solutions**\n3. **Create a new issue** with:\n   - Operating system and version\n   - Node.js and npm versions\n   - Complete error message\n   - Steps to reproduce\n\n## Next Steps\n\nAfter successful installation:\n\n1. **[Explore Project Structure](project-structure.md)** - Understand the codebase\n2. **[Development Workflow](development.md)** - Learn the development process\n3. **[Customize Themes](../customization/theme-system.md)** - Set up dark mode and theming\n4. **[Build for Production](build-deployment.md)** - Deploy your application\n\n---\n\n**Installation Complete!** 🎉 You're ready to start building with Adminator. "
  },
  {
    "path": "docs/getting-started/project-structure.md",
    "content": "# Project Structure\n\nThis guide explains the folder structure and organization of the Adminator admin dashboard template.\n\n## Overview\n\nAdminator follows a modern, modular architecture with clear separation of concerns. The project is organized into source files, build configuration, and documentation.\n\n```\nadminator-admin-dashboard/\n├── src/                    # Source files\n├── dist/                   # Built/compiled files (generated)\n├── webpack/                # Build configuration\n├── docs/                   # Documentation\n├── node_modules/           # Dependencies (generated)\n└── Configuration files\n```\n\n## Root Directory\n\n### Configuration Files\n\n| File | Purpose |\n|------|---------|\n| `package.json` | Node.js dependencies and npm scripts |\n| `webpack.config.js` | Webpack entry point |\n| `.babelrc` | Babel ES6+ transpiler configuration |\n| `eslint.config.mjs` | ESLint 9.x flat configuration for code linting |\n| `.stylelintrc.json` | Stylelint configuration for SCSS/CSS linting |\n| `.editorconfig` | Editor settings for consistent code style |\n| `browserslist` | Target browser versions for compilation |\n| `.gitignore` | Git ignore patterns |\n| `.gitattributes` | Git attributes configuration |\n| `.nvmrc` | Node.js version specification |\n\n### Documentation Files\n\n| File | Purpose |\n|------|---------|\n| `README.md` | Main project documentation |\n| `CHANGELOG.md` | Version history and release notes |\n| `LICENSE` | MIT license information |\n| `CODE_OF_CONDUCT.md` | Community guidelines |\n\n## Source Directory (`src/`)\n\nThe `src/` directory contains all template source files that are compiled into the final application.\n\n### HTML Templates\n\nLocated directly in `src/`, these are the template pages:\n\n```\nsrc/\n├── index.html              # Main dashboard page\n├── blank.html              # Blank page template\n├── 404.html                # 404 error page\n├── 500.html                # 500 error page\n├── signin.html             # Sign in page\n├── signup.html             # Sign up page\n├── email.html              # Email inbox\n├── compose.html            # Email compose\n├── chat.html               # Chat application\n├── calendar.html           # Calendar view\n├── charts.html             # Charts showcase\n├── forms.html              # Form elements\n├── buttons.html            # Button styles\n├── ui.html                 # UI elements showcase\n├── basic-table.html        # Basic table\n├── datatable.html          # Data table with features\n├── google-maps.html        # Google Maps integration\n└── vector-maps.html        # Vector maps\n```\n\n### Assets Directory (`src/assets/`)\n\nContains all JavaScript, styles, images, and fonts.\n\n```\nsrc/assets/\n├── scripts/                # JavaScript files\n├── styles/                 # SCSS stylesheets\n└── static/                 # Static assets (images, fonts)\n```\n\n## JavaScript Structure (`src/assets/scripts/`)\n\nModern, jQuery-free vanilla JavaScript architecture.\n\n### Main Application\n\n```\nscripts/\n├── app.js                  # Main application entry point\n├── index.js                # Module exports\n└── components/             # Reusable components\n    ├── Sidebar.js          # Sidebar navigation component\n    └── Chart.js            # Chart component wrapper\n```\n\n### Feature Modules\n\nEach feature has its own directory with an `index.js` entry point:\n\n```\nscripts/\n├── charts/                 # Chart implementations\n│   ├── chartJS/           # Chart.js integration\n│   ├── easyPieChart/      # Pie chart component\n│   └── sparkline/         # Sparkline mini charts\n├── chat/                   # Chat application logic\n├── email/                  # Email application logic\n├── fullcalendar/          # Calendar integration\n├── googleMaps/            # Google Maps integration\n├── vectorMaps/            # Vector maps integration\n├── datatable/             # Data table functionality\n├── datepicker/            # Date picker component\n├── masonry/               # Masonry grid layout\n├── popover/               # Popover components\n├── scrollbar/             # Custom scrollbar\n├── search/                # Search functionality\n├── sidebar/               # Sidebar behavior\n├── skycons/               # Weather icons\n└── ui/                    # UI components\n```\n\n### Utilities and Constants\n\n```\nscripts/\n├── utils/                  # Utility functions\n│   ├── dom.js             # DOM manipulation helpers\n│   ├── date.js            # Date utilities (Day.js wrapper)\n│   ├── theme.js           # Theme management (dark/light mode)\n│   └── index.js           # Utility exports\n└── constants/             # Application constants\n    └── colors.js          # Color definitions\n```\n\n## Styles Structure (`src/assets/styles/`)\n\nSCSS-based styling with modular architecture following ITCSS methodology.\n\n```\nstyles/\n├── index.scss              # Main style entry point\n├── spec/                   # Custom styles\n│   ├── components/        # Component styles\n│   │   ├── sidebar.scss\n│   │   ├── topbar.scss\n│   │   ├── footer.scss\n│   │   ├── forms.scss\n│   │   ├── loader.scss\n│   │   ├── masonry.scss\n│   │   ├── pageContainer.scss\n│   │   ├── progressBar.scss\n│   │   └── easyPieChart.scss\n│   ├── generic/           # Base/reset styles\n│   │   └── base.scss\n│   ├── screens/           # Page-specific styles\n│   │   ├── chat.scss\n│   │   └── email.scss\n│   ├── settings/          # Variables and configuration\n│   │   ├── baseColors.scss\n│   │   ├── materialColors.scss\n│   │   ├── borders.scss\n│   │   ├── breakpoints.scss\n│   │   └── fonts.scss\n│   ├── tools/             # Mixins and functions\n│   │   └── mixins/\n│   └── utils/             # Utility classes\n│       ├── colors.scss\n│       ├── theme.css      # CSS variables for dark mode\n│       └── layout/        # Layout helpers\n└── vendor/                # Third-party plugin styles\n```\n\n## Static Assets (`src/assets/static/`)\n\n```\nstatic/\n├── fonts/                  # Icon fonts\n│   ├── themify-icons/     # Themify Icons\n│   └── font-awesome/      # Font Awesome (if used)\n└── images/                 # Images and graphics\n    ├── logo.svg           # Application logo\n    ├── bg.jpg             # Background images\n    ├── 404.png            # Error page illustrations\n    └── 500.png\n```\n\n## Webpack Configuration (`webpack/`)\n\nModular webpack configuration split into logical parts:\n\n```\nwebpack/\n├── config.js               # Main webpack configuration\n├── manifest.js             # Build constants and paths\n├── devServer.js            # Development server settings\n├── plugins/                # Webpack plugins configuration\n│   ├── index.js\n│   ├── html.js            # HTML generation\n│   ├── copy.js            # File copying\n│   ├── extractCSS.js      # CSS extraction\n│   └── ...\n└── rules/                  # Webpack loaders configuration\n    ├── index.js\n    ├── javascript.js      # Babel loader\n    ├── styles.js          # SCSS/CSS loaders\n    ├── fonts.js           # Font loaders\n    └── images.js          # Image loaders\n```\n\n## Build Output (`dist/`)\n\nGenerated directory containing compiled production files:\n\n```\ndist/\n├── index.html              # Compiled HTML files\n├── *.html                  # All other pages\n├── assets/\n│   ├── bundle.[hash].js   # Compiled JavaScript\n│   ├── styles.[hash].css  # Compiled CSS\n│   └── static/            # Copied static assets\n└── ...\n```\n\n## Documentation (`docs/`)\n\nGitHub Pages documentation site:\n\n```\ndocs/\n├── index.md                # Documentation home\n├── getting-started/        # Getting started guides\n│   ├── installation.md\n│   └── project-structure.md (this file)\n├── customization/          # Customization guides\n│   └── theme-system.md\n├── api/                    # API documentation\n│   └── theme-api.md\n└── examples/               # Code examples\n    └── theme-integration.md\n```\n\n## Key Architecture Decisions\n\n### 1. **jQuery-Free**\nAll JavaScript is written in modern vanilla JavaScript (ES6+) without jQuery dependency, resulting in smaller bundle size and better performance.\n\n### 2. **Component-Based**\nJavaScript is organized into reusable components (`Sidebar`, `Chart`, etc.) using ES6 classes.\n\n### 3. **Modular SCSS**\nStyles follow ITCSS methodology with clear separation of settings, tools, generic, components, and utilities.\n\n### 4. **Modern Build System**\nWebpack 5 with Babel for ES6+ transpilation, SCSS compilation, and asset optimization.\n\n### 5. **Dark Mode Support**\nCSS custom properties (variables) enable seamless theme switching between light and dark modes.\n\n## File Naming Conventions\n\n- **JavaScript**: camelCase for files and classes (`app.js`, `Sidebar.js`)\n- **SCSS**: kebab-case for files (`sidebar.scss`, `page-container.scss`)\n- **HTML**: kebab-case for files (`basic-table.html`, `google-maps.html`)\n- **Components**: PascalCase for class names (`Sidebar`, `ChartComponent`)\n\n## Import Paths\n\nThe project uses webpack aliases for cleaner imports:\n\n```javascript\n// Instead of: import Sidebar from '../../components/Sidebar'\nimport Sidebar from '@/components/Sidebar';\n\n// Available aliases:\n// @/              -> src/\n// @/components    -> src/assets/scripts/components/\n// @/utils         -> src/assets/scripts/utils/\n// @/constants     -> src/assets/scripts/constants/\n```\n\n## Adding New Features\n\n### Adding a New Page\n\n1. Create HTML file in `src/` (e.g., `my-page.html`)\n2. Add page-specific styles in `src/assets/styles/spec/screens/`\n3. Add page-specific JavaScript in `src/assets/scripts/`\n4. The build system will automatically include it\n\n### Adding a New Component\n\n1. Create component file in `src/assets/scripts/components/`\n2. Export the component class\n3. Import and use in `app.js` or other modules\n4. Add component styles in `src/assets/styles/spec/components/`\n\n### Adding a New Utility\n\n1. Create utility file in `src/assets/scripts/utils/`\n2. Export functions/classes\n3. Import from `@/utils/` in other files\n\n## Next Steps\n\nNow that you understand the project structure:\n\n1. **[Development Workflow](development.md)** - Learn the development process\n2. **[Customize Themes](../customization/theme-system.md)** - Set up dark mode and theming\n3. **[Build for Production](build-deployment.md)** - Deploy your application\n4. **[API Reference](../api/theme-api.md)** - JavaScript API documentation\n\n---\n\n**Need Help?** Check the [main README](../../README.md) or [open an issue](https://github.com/puikinsh/Adminator-admin-dashboard/issues).\n"
  },
  {
    "path": "docs/getting-started.md",
    "content": "---\nlayout: default\ntitle: Getting Started\nnav_order: 2\nhas_children: true\n---\n\n# Getting Started\n\nEverything you need to know to start building with Adminator.\n\nThis section covers installation, project setup, development workflow, and deployment options. "
  },
  {
    "path": "docs/index.md",
    "content": "---\nlayout: default\ntitle: Home\nnav_order: 1\ndescription: \"Adminator Bootstrap 5 Admin Dashboard with Dark Mode\"\npermalink: /\n---\n\n# Adminator Documentation\n{: .fs-9 }\n\nComplete guide for the Bootstrap 5 Admin Dashboard Template with comprehensive Dark Mode system\n{: .fs-6 .fw-300 }\n\n[Get Started Now](getting-started/installation){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 }\n[View on GitHub](https://github.com/puikinsh/Adminator-admin-dashboard){: .btn .fs-5 .mb-4 .mb-md-0 }\n\n---\n\n## ✨ What's New in v2.6.0\n\n🌗 **Complete Dark Mode System** - Intelligent theme switching with OS preference detection  \n⚡ **Smart Theme Toggle** - Bootstrap-based switch with instant updates  \n🎨 **CSS Variables Architecture** - Semantic color system for easy customization  \n📊 **Component Integration** - All charts, calendars, and maps are theme-aware  \n\n---\n\n## 🚀 Quick Start\n\n```bash\n# Clone the repository\ngit clone https://github.com/puikinsh/Adminator-admin-dashboard.git\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm start\n```\n\nVisit `http://localhost:4000` to see your dashboard!\n\n---\n\n## 📚 Documentation Sections\n\n### Getting Started\nLearn how to install, configure, and deploy Adminator with our comprehensive setup guides.\n\n[Installation Guide →](getting-started/installation){: .btn .btn-outline }\n\n### Dark Mode & Theming\nDiscover the powerful dark mode system with CSS variables and theme switching capabilities.\n\n[Theme System →](customization/theme-system){: .btn .btn-outline }\n\n### API Reference\nComplete JavaScript API documentation for theme management and component integration.\n\n[API Documentation →](api/theme-api){: .btn .btn-outline }\n\n### Examples & Integration\nReal-world examples and integration guides for popular frameworks and use cases.\n\n[View Examples →](examples/theme-integration){: .btn .btn-outline }\n\n---\n\n## 🎯 Key Features\n\n| Feature | Description |\n|:--------|:------------|\n| **Bootstrap 5** | Latest Bootstrap framework with modern components |\n| **Dark Mode** | Comprehensive dark theme with intelligent switching |\n| **Responsive** | Mobile-first design that works on all devices |\n| **Chart Integration** | Chart.js with theme-aware color schemes |\n| **Calendar Support** | FullCalendar with dark mode styling |\n| **Vector Maps** | Interactive maps with custom color palettes |\n| **Clean Code** | Well-organized, documented, and maintainable |\n\n---\n\n## 🌟 Live Demo\n\nExperience Adminator's features in action:\n\n### Light Mode\n![Adminator Light Mode](assets/images/adminator-light-mode.avif)\n\n### Dark Mode  \n![Adminator Dark Mode](assets/images/adminator-dark-mode.avif)\n\n[Try Live Demo](https://colorlib.com/polygon/adminator/index.html){: .btn .btn-green .fs-5 }\n\n---\n\n## 🤝 Contributing\n\nWe welcome contributions! Please read our [contributing guidelines](contributing/) before submitting pull requests.\n\n---\n\n## 📄 License\n\nAdminator is released under the [MIT License](https://github.com/puikinsh/Adminator-admin-dashboard/blob/master/LICENSE).\n\n---\n\n**Ready to build amazing dashboards?** Start with our [installation guide](getting-started/installation) or explore the [dark mode features](customization/theme-system)! "
  },
  {
    "path": "eslint.config.mjs",
    "content": "import globals from \"globals\";\nimport babelParser from \"@babel/eslint-parser\";\nimport js from \"@eslint/js\";\n\nexport default [\n    {\n        files: [\"**/*.js\", \"**/*.mjs\", \"**/*.jsx\"],\n        languageOptions: {\n            globals: {\n                ...globals.browser,\n                ...globals.node,\n            },\n            parser: babelParser,\n            ecmaVersion: 2018,\n            sourceType: \"module\",\n            parserOptions: {\n                requireConfigFile: false,\n                babelOptions: {\n                    babelrc: false,\n                    configFile: false,\n                    presets: [\"@babel/preset-env\"],\n                },\n                ecmaFeatures: {\n                    modules: true,\n                    destructuring: true,\n                    classes: true,\n                    forOf: true,\n                    blockBindings: true,\n                    arrowFunctions: true,\n                },\n            },\n        },\n\n        settings: {\n            ecmascript: 7,\n        },\n\n        rules: {\n            // Start with ESLint recommended rules\n            ...js.configs.recommended.rules,\n\n            // Apply our custom overrides (keeping original project preferences)\n            \"arrow-body-style\": 0,\n            \"prefer-arrow-callback\": 0,\n            \"arrow-parens\": 0,\n            \"no-param-reassign\": 0,\n            \"no-new\": 0,\n            \"consistent-return\": 0,\n            \"key-spacing\": 0,\n            \"no-multi-spaces\": 0,\n            \"no-underscore-dangle\": 0,\n            \"one-var\": 0,\n            \"global-require\": 0,\n            \"class-methods-use-this\": 0,\n            \"comma-dangle\": [\"error\", {\n                arrays: \"always-multiline\",\n                objects: \"always-multiline\",\n                imports: \"always-multiline\",\n                exports: \"always-multiline\",\n                functions: \"never\",\n            }],\n            \"func-names\": 0,\n            \"function-paren-newline\": 0,\n            \"indent\": [\"error\", 2],\n            \"new-cap\": 0,\n            \"no-plusplus\": 0,\n            \"no-return-assign\": 0,\n            \"quote-props\": 0,\n            \"template-curly-spacing\": 0,\n            \"no-unused-expressions\": 0,\n\n            // Import rules (basic ones that don't require the import plugin)\n            \"no-duplicate-imports\": \"error\",\n\n            // Line ending for Unix/macOS (updated for current platform)\n            \"linebreak-style\": [\"error\", \"unix\"],\n\n            // Basic ES6+ rules that replace some airbnb functionality\n            \"prefer-const\": \"warn\",\n            \"no-var\": \"error\",\n            \"prefer-template\": \"warn\",\n            \"object-shorthand\": \"warn\",\n        },\n    },\n    {\n        // Global ignores\n        ignores: [\"dist/**/*\", \"node_modules/**/*\", \"*.min.js\"],\n    },\n];\n"
  },
  {
    "path": "jsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"ES2020\",\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"node\",\n    \"baseUrl\": \"./src\",\n    \"paths\": {\n      \"@/*\": [\"*\"],\n      \"@components/*\": [\"assets/scripts/components/*\"],\n      \"@utils/*\": [\"assets/scripts/utils/*\"],\n      \"@charts/*\": [\"assets/scripts/charts/*\"],\n      \"@styles/*\": [\"assets/styles/*\"]\n    },\n    \"checkJs\": true,\n    \"strict\": false,\n    \"noEmit\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"esModuleInterop\": true,\n    \"resolveJsonModule\": true,\n    \"typeRoots\": [\"./types\", \"./node_modules/@types\"]\n  },\n  \"include\": [\n    \"src/**/*.js\",\n    \"types/**/*.d.ts\"\n  ],\n  \"exclude\": [\n    \"node_modules\",\n    \"dist\"\n  ]\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"adminator-admin-dashboard\",\n  \"version\": \"3.0.0\",\n  \"private\": false,\n  \"description\": \"Modern jQuery-free Bootstrap 5 Admin Dashboard Template with Dark Mode\",\n  \"main\": \"dist/index.html\",\n  \"keywords\": [\n    \"admin\",\n    \"dashboard\",\n    \"template\",\n    \"bootstrap\",\n    \"bootstrap5\",\n    \"jquery-free\",\n    \"vanilla-js\",\n    \"dark-mode\",\n    \"responsive\",\n    \"mobile-first\",\n    \"scss\",\n    \"webpack\",\n    \"modern\",\n    \"ui-kit\",\n    \"admin-panel\",\n    \"charts\",\n    \"datatable\"\n  ],\n  \"author\": \"Aigars Silkalns <hello@colorlib.com> (https://colorlib.com)\",\n  \"license\": \"MIT\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/puikinsh/Adminator-admin-dashboard.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/puikinsh/Adminator-admin-dashboard/issues\"\n  },\n  \"homepage\": \"https://puikinsh.github.io/Adminator-admin-dashboard/\",\n  \"files\": [\n    \"dist/**/*\",\n    \"src/**/*\",\n    \"webpack.config.js\",\n    \"CLAUDE.md\",\n    \"CHANGELOG.md\",\n    \"README.md\"\n  ],\n  \"engines\": {\n    \"node\": \">=14.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"webpack server\",\n    \"dev\": \"webpack-dashboard -t 'Project' -- webpack server\",\n    \"clean\": \"shx rm -rf ./dist\",\n    \"build\": \"npm run clean && cross-env webpack\",\n    \"build:analyze\": \"npm run clean && cross-env ANALYZE=true NODE_ENV=production webpack\",\n    \"release:minified\": \"npm run clean && NODE_ENV=production MINIFY=true cross-env webpack\",\n    \"release:unminified\": \"npm run clean && NODE_ENV=production MINIFY=false cross-env webpack\",\n    \"preview\": \"cross-env webpack server\",\n    \"lint:js\": \"eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx\",\n    \"lint:scss\": \"stylelint ./src/**/*.scss\",\n    \"lint\": \"npm run lint:js && npm run lint:scss\",\n    \"test\": \"vitest\",\n    \"test:run\": \"vitest run\",\n    \"test:coverage\": \"vitest run --coverage\",\n    \"prepublishOnly\": \"npm run lint && npm run build\",\n    \"postpublish\": \"echo 'Package published successfully! View at: https://www.npmjs.com/package/adminator-admin-dashboard'\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.28.6\",\n    \"@babel/eslint-parser\": \"^7.28.6\",\n    \"@babel/plugin-transform-runtime\": \"^7.28.5\",\n    \"@babel/preset-env\": \"^7.28.6\",\n    \"@eslint/js\": \"^9.39.2\",\n    \"@vitest/coverage-v8\": \"^4.0.17\",\n    \"babel-loader\": \"^10.0.0\",\n    \"case-sensitive-paths-webpack-plugin\": \"^2.4.0\",\n    \"copy-webpack-plugin\": \"^13.0.1\",\n    \"cross-env\": \"^10.1.0\",\n    \"css-loader\": \"^7.1.2\",\n    \"css-minimizer-webpack-plugin\": \"^7.0.4\",\n    \"eslint\": \"^9.39.2\",\n    \"eslint-formatter-table\": \"^7.32.1\",\n    \"globals\": \"^17.0.0\",\n    \"html-webpack-plugin\": \"^5.6.5\",\n    \"jsdom\": \"^27.4.0\",\n    \"mini-css-extract-plugin\": \"^2.9.4\",\n    \"postcss\": \"^8.5.6\",\n    \"postcss-loader\": \"^8.2.0\",\n    \"postcss-preset-env\": \"^10.6.1\",\n    \"sass\": \"^1.97.2\",\n    \"sass-loader\": \"^16.0.6\",\n    \"shx\": \"^0.4.0\",\n    \"style-loader\": \"^4.0.0\",\n    \"stylelint\": \"^16.26.1\",\n    \"stylelint-config-standard\": \"^39.0.1\",\n    \"stylelint-config-standard-scss\": \"^16.0.0\",\n    \"vitest\": \"^4.0.17\",\n    \"webpack\": \"^5.104.1\",\n    \"webpack-bundle-analyzer\": \"^5.1.1\",\n    \"webpack-cli\": \"^6.0.1\",\n    \"webpack-dashboard\": \"^3.3.8\",\n    \"webpack-dev-server\": \"^5.2.3\"\n  },\n  \"dependencies\": {\n    \"@babel/runtime\": \"^7.28.6\",\n    \"@fullcalendar/core\": \"^6.1.20\",\n    \"@fullcalendar/daygrid\": \"^6.1.20\",\n    \"@fullcalendar/interaction\": \"^6.1.20\",\n    \"@fullcalendar/list\": \"^6.1.20\",\n    \"@fullcalendar/timegrid\": \"^6.1.20\",\n    \"@popperjs/core\": \"^2.11.8\",\n    \"bootstrap\": \"^5.3.8\",\n    \"brand-colors\": \"^2.1.1\",\n    \"chart.js\": \"^4.5.1\",\n    \"dayjs\": \"^1.11.19\",\n    \"jsvectormap\": \"^1.7.0\",\n    \"load-google-maps-api\": \"^2.0.2\",\n    \"masonry-layout\": \"^4.2.2\",\n    \"perfect-scrollbar\": \"^1.5.6\",\n    \"skycons\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "src/404.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <title>404</title>\n  </head>\n  <body class=\"app\">\n    <div class='pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30'>\n      <div class='mR-60'>\n        <img alt='#' src='assets/static/images/404.png' />\n      </div>\n\n      <div class='d-f jc-c fxd-c'>\n        <h1 class='mB-30 fw-900 lh-1 c-red-500' style=\"font-size: 60px;\">404</h1>\n        <h3 class='mB-10 fsz-lg c-grey-900 tt-c'>Oops Page Not Found</h3>\n        <p class='mB-30 fsz-def c-grey-700'>The page you are looking for does not exist or has been moved.</p>\n        <div>\n          <a href=\"index.html\" type='primary' class='btn btn-primary'>Go to Home</a>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "src/500.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <title>500</title>\n  </head>\n  <body class=\"app\">\n    <div class='pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30'>\n      <div class='mR-60'>\n        <img alt='#' src='assets/static/images/500.png' />\n      </div>\n\n      <div class='d-f jc-c fxd-c'>\n        <h1 class='mB-30 fw-900 lh-1 c-red-500' style=\"font-size: 60px;\">500</h1>\n        <h3 class='mB-10 fsz-lg c-grey-900 tt-c'>Internal server error</h3>\n        <p class='mB-30 fsz-def c-grey-700'>Something goes wrong with our servers, please try again later.</p>\n        <div>\n          <a href=\"index.html\" type='primary' class='btn btn-primary'>Go to Home</a>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "src/assets/scripts/app.js",
    "content": "/**\n * Modern Adminator Application\n * Main application entry point with enhanced mobile support\n *\n * @module app\n * @version 2.9.0\n */\n\n// Note: Bootstrap 5 CSS is still available via SCSS imports\n// Bootstrap JS components removed to eliminate jQuery dependency\nimport { DOM } from './utils/dom';\nimport DateUtils from './utils/date';\nimport ThemeManager from './utils/theme';\nimport Events from './utils/events';\nimport Performance from './utils/performance';\nimport Logger from './utils/logger';\nimport Sidebar from './components/Sidebar';\nimport ChartComponent from './components/Chart';\n\n// Import styles\nimport '../styles/index.scss';\n\n// Import other modules that don't need immediate modernization\nimport './fullcalendar';\nimport './masonry';\nimport './popover';\nimport './scrollbar';\nimport './search';\nimport './skycons';\nimport './vectorMaps';\nimport './chat';\nimport './email';\nimport './googleMaps';\nimport './ui';\n\nclass AdminatorApp {\n  constructor() {\n    this.components = new Map();\n    this.isInitialized = false;\n    this.themeManager = ThemeManager;\n    this.cleanupFunctions = [];\n\n    // Initialize when DOM is ready\n    DOM.ready(() => {\n      this.init();\n    });\n  }\n\n  /**\n   * Initialize the application\n   */\n  init() {\n    if (this.isInitialized) return;\n\n    Logger.time('Adminator Init');\n\n    try {\n      // Initialize core components\n      this.initSidebar();\n      this.initCharts();\n      this.initDataTables();\n      this.initDatePickers();\n      this.initTheme();\n      this.initMobileEnhancements();\n\n      // Setup global event listeners using event delegation\n      this.setupGlobalEvents();\n\n      this.isInitialized = true;\n\n      Logger.timeEnd('Adminator Init');\n      Logger.info('Application initialized successfully');\n\n      // Dispatch custom event for other scripts\n      Events.emit(window, 'adminator:ready', { app: this });\n\n    } catch (error) {\n      Logger.error('Error initializing Adminator App', error);\n    }\n  }\n\n  /**\n   * Initialize Sidebar component\n   */\n  initSidebar() {\n    if (DOM.exists('.sidebar')) {\n      const sidebar = new Sidebar();\n      this.components.set('sidebar', sidebar);\n    }\n  }\n\n  /**\n   * Initialize Chart components\n   */\n  initCharts() {\n    // Check if we have any chart elements\n    const hasCharts = DOM.exists('#sparklinedash') || \n                     DOM.exists('.sparkline') || \n                     DOM.exists('.sparkbar') ||\n                     DOM.exists('.sparktri') ||\n                     DOM.exists('.sparkdisc') ||\n                     DOM.exists('.sparkbull') ||\n                     DOM.exists('.sparkbox') ||\n                     DOM.exists('.easy-pie-chart') ||\n                     DOM.exists('#line-chart') ||\n                     DOM.exists('#area-chart') ||\n                     DOM.exists('#scatter-chart') ||\n                     DOM.exists('#bar-chart');\n    \n    if (hasCharts) {\n      const charts = new ChartComponent();\n      this.components.set('charts', charts);\n    }\n  }\n\n  /**\n   * Initialize DataTables (modern approach)\n   */\n  initDataTables() {\n    const dataTableElement = DOM.select('#dataTable');\n    if (dataTableElement) {\n      // For now, use a lightweight approach\n      // In future iterations, we can replace with a modern table library\n      this.initBasicDataTable(dataTableElement);\n    }\n  }\n\n  /**\n   * Basic DataTable implementation (placeholder for full modernization)\n   */\n  initBasicDataTable(table) {\n    // Add basic sorting functionality\n    const headers = DOM.selectAll('th', table);\n    \n    headers.forEach(header => {\n      if (header.textContent.trim()) {\n        header.style.cursor = 'pointer';\n        header.style.userSelect = 'none';\n        \n        DOM.on(header, 'click', () => {\n          // Basic sort functionality can be added here\n          // For now, we'll keep the existing DataTables library\n        });\n      }\n    });\n  }\n\n  /**\n   * Initialize Date Pickers (modern approach with Day.js)\n   */\n  initDatePickers() {\n    const startDatePickers = DOM.selectAll('.start-date');\n    const endDatePickers = DOM.selectAll('.end-date');\n    \n    [...startDatePickers, ...endDatePickers].forEach(picker => {\n      // Convert to HTML5 date input for better UX\n      if (picker.type !== 'date') {\n        picker.type = 'date';\n        picker.classList.add('form-control');\n        \n        // Clear the placeholder since HTML5 date inputs don't need it\n        picker.removeAttribute('placeholder');\n        \n        // Set default value to today if no value is set\n        if (!picker.value) {\n          picker.value = DateUtils.form.toInputValue(DateUtils.now());\n        }\n        \n        // Make sure the input is clickable and focusable\n        picker.style.pointerEvents = 'auto';\n        picker.style.cursor = 'pointer';\n        \n        // Ensure proper styling for HTML5 date input\n        picker.style.minHeight = '38px';\n        picker.style.lineHeight = '1.5';\n        \n        // Date picker converted to HTML5 with Day.js support\n      }\n    });\n    \n    // Add enhanced interaction - handle both field and icon clicks\n    [...startDatePickers, ...endDatePickers].forEach(picker => {\n      // Handle direct field clicks\n      DOM.on(picker, 'click', (event) => {\n        event.target.focus();\n        // For mobile browsers, trigger the date picker\n        if (event.target.showPicker && typeof event.target.showPicker === 'function') {\n          try {\n            event.target.showPicker();\n          } catch {\n            // Fallback if showPicker is not supported\n          }\n        }\n      });\n      \n      // Handle calendar icon clicks (find the icon in the input group)\n      const inputGroup = picker.closest('.input-group');\n      if (inputGroup) {\n        const calendarIcon = inputGroup.querySelector('.input-group-text i.ti-calendar');\n        if (calendarIcon) {\n          DOM.on(calendarIcon, 'click', (event) => {\n            event.preventDefault();\n            event.stopPropagation();\n            picker.focus();\n            if (picker.showPicker && typeof picker.showPicker === 'function') {\n              try {\n                picker.showPicker();\n              } catch {\n                // Date picker opened via icon click\n              }\n            }\n          });\n        }\n      }\n    });\n  }\n\n  /**\n   * Initialize theme system with toggle\n   */\n  initTheme() {\n    // Initializing theme system\n    \n    // Initialize theme system first\n    this.themeManager.init();\n    \n    // Inject theme toggle if missing - with retry mechanism\n    setTimeout(() => {\n      const navRight = DOM.select('.nav-right');\n      // Check for nav-right and theme-toggle existence\n      \n      if (navRight && !DOM.exists('#theme-toggle')) {\n        const li = document.createElement('li');\n        li.className = 'theme-toggle d-flex ai-c';\n        const currentTheme = this.themeManager.current();\n        const isDark = currentTheme === 'dark';\n        li.innerHTML = `\n        <div class=\"form-check form-switch d-flex ai-c\" style=\"margin: 0; padding: 0;\" role=\"group\" aria-label=\"Theme switcher\">\n          <label class=\"form-check-label me-2 text-nowrap c-grey-700\" for=\"theme-toggle\" style=\"font-size: 12px; margin-right: 8px;\">\n            <i class=\"ti-sun\" aria-hidden=\"true\" style=\"margin-right: 4px;\"></i><span class=\"theme-label\">Light</span>\n          </label>\n          <input class=\"form-check-input\" type=\"checkbox\" id=\"theme-toggle\"\n                 role=\"switch\"\n                 aria-checked=\"${isDark}\"\n                 aria-label=\"Toggle dark mode\"\n                 ${isDark ? 'checked' : ''}\n                 style=\"margin: 0;\">\n          <label class=\"form-check-label ms-2 text-nowrap c-grey-700\" for=\"theme-toggle\" style=\"font-size: 12px; margin-left: 8px;\">\n            <span class=\"theme-label\">Dark</span><i class=\"ti-moon\" aria-hidden=\"true\" style=\"margin-left: 4px;\"></i>\n          </label>\n        </div>\n      `;\n      \n        // Insert before user dropdown (last item) - safer approach\n        const lastItem = navRight.querySelector('li:last-child');\n      \n        if (lastItem && lastItem.parentNode === navRight) {\n          navRight.insertBefore(li, lastItem);\n        // Theme toggle inserted before last item\n        } else {\n          navRight.appendChild(li);\n        // Theme toggle appended to nav-right (safer approach)\n        }\n      \n        // Add toggle functionality\n        const toggle = DOM.select('#theme-toggle');\n        if (toggle) {\n          DOM.on(toggle, 'change', () => {\n            const newTheme = toggle.checked ? 'dark' : 'light';\n            toggle.setAttribute('aria-checked', toggle.checked ? 'true' : 'false');\n            this.themeManager.apply(newTheme);\n          });\n\n          // Listen for theme changes from other sources\n          window.addEventListener('adminator:themeChanged', (event) => {\n            const isDark = event.detail.theme === 'dark';\n            toggle.checked = isDark;\n            toggle.setAttribute('aria-checked', isDark ? 'true' : 'false');\n\n            // Update charts when theme changes\n            const charts = this.components.get('charts');\n            if (charts) charts.redrawCharts();\n          });\n        }\n      } else {\n        // No nav-right found or theme-toggle already exists\n      }\n    }, 100); // Wait 100ms for DOM to be fully ready\n  }\n\n  /**\n   * Initialize mobile-specific enhancements\n   */\n  initMobileEnhancements() {\n    // Initializing mobile enhancements\n    this.enhanceMobileDropdowns();\n    this.enhanceMobileSearch();\n    \n    // Prevent horizontal scroll on mobile\n    if (this.isMobile()) {\n      document.body.style.overflowX = 'hidden';\n    }\n  }\n\n  /**\n   * Setup global event listeners using event delegation for performance\n   */\n  setupGlobalEvents() {\n    // Use event delegation for dropdown clicks (single listener instead of many)\n    const dropdownCleanup = Events.delegate(\n      document,\n      'click',\n      '.nav-right .dropdown-toggle',\n      (e, toggle) => this.handleDropdownClick(e, toggle)\n    );\n    this.cleanupFunctions.push(dropdownCleanup);\n\n    // Global click handler for closing dropdowns/search\n    const globalClickCleanup = Events.on(document, 'click', (event) => {\n      this.handleGlobalClick(event);\n    });\n    this.cleanupFunctions.push(globalClickCleanup);\n\n    // Window resize handler with debouncing using Events utility\n    const debouncedResize = Events.debounce(() => this.handleResize(), 250);\n    const resizeCleanup = Events.on(window, 'resize', debouncedResize);\n    this.cleanupFunctions.push(resizeCleanup);\n\n    // Escape key handler using delegation\n    const escapeCleanup = Events.on(document, 'keydown', (e) => {\n      if (e.key === 'Escape') {\n        this.closeAllOverlays();\n      }\n    });\n    this.cleanupFunctions.push(escapeCleanup);\n\n    Logger.debug('Global event listeners set up with delegation');\n  }\n\n  /**\n   * Handle dropdown toggle clicks\n   * @param {Event} e - Click event\n   * @param {Element} toggle - The clicked toggle element\n   */\n  handleDropdownClick(e, toggle) {\n    if (!this.isMobile()) return;\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    const dropdown = toggle.closest('.dropdown');\n    const menu = dropdown?.querySelector('.dropdown-menu');\n    if (!dropdown || !menu) return;\n\n    // Close search if open\n    this.closeSearch();\n\n    // Close other dropdowns\n    DOM.selectAll('.nav-right .dropdown').forEach(d => {\n      if (d !== dropdown) {\n        d.classList.remove('show');\n        d.querySelector('.dropdown-menu')?.classList.remove('show');\n      }\n    });\n\n    // Toggle current dropdown\n    const isOpen = dropdown.classList.contains('show');\n    dropdown.classList.toggle('show', !isOpen);\n    menu.classList.toggle('show', !isOpen);\n    document.body.style.overflow = isOpen ? '' : 'hidden';\n    document.body.classList.toggle('mobile-menu-open', !isOpen);\n  }\n\n  /**\n   * Close all overlays (dropdowns, search)\n   */\n  closeAllOverlays() {\n    // Close dropdowns\n    DOM.selectAll('.nav-right .dropdown').forEach(dropdown => {\n      dropdown.classList.remove('show');\n      dropdown.querySelector('.dropdown-menu')?.classList.remove('show');\n    });\n\n    // Close search\n    this.closeSearch();\n\n    document.body.style.overflow = '';\n    document.body.classList.remove('mobile-menu-open');\n  }\n\n  /**\n   * Close the search overlay\n   */\n  closeSearch() {\n    const searchBox = DOM.select('.search-box');\n    const searchInput = DOM.select('.search-input');\n    if (searchBox && searchInput) {\n      searchBox.classList.remove('active');\n      searchInput.classList.remove('active');\n      document.body.classList.remove('search-open');\n\n      // Reset icon\n      const searchIcon = searchBox.querySelector('i');\n      if (searchIcon) {\n        searchIcon.className = 'ti-search';\n      }\n\n      // Clear input\n      const field = searchInput.querySelector('input');\n      if (field) {\n        field.value = '';\n        field.blur();\n      }\n    }\n  }\n\n  /**\n   * Handle window resize events\n   */\n  handleResize() {\n    // Window resized, updating mobile features\n    \n    // Close all mobile-specific overlays when switching to desktop\n    if (!this.isMobile()) {\n      document.body.style.overflow = '';\n      document.body.style.overflowX = '';\n      \n      // Close dropdowns\n      const dropdowns = DOM.selectAll('.nav-right .dropdown');\n      dropdowns.forEach(dropdown => {\n        dropdown.classList.remove('show');\n        const menu = dropdown.querySelector('.dropdown-menu');\n        if (menu) menu.classList.remove('show');\n      });\n      \n      // Close search\n      const searchBox = DOM.select('.search-box');\n      const searchInput = DOM.select('.search-input');\n      if (searchBox && searchInput) {\n        searchBox.classList.remove('active');\n        searchInput.classList.remove('active');\n      }\n    } else {\n      // Re-enable mobile overflow protection\n      document.body.style.overflowX = 'hidden';\n    }\n    \n    // Re-apply mobile enhancements\n    this.enhanceMobileDropdowns();\n    this.enhanceMobileSearch();\n  }\n\n  /**\n   * Handle global click events\n   */\n  handleGlobalClick(event) {\n    // Close mobile dropdowns when clicking outside\n    if (!event.target.closest('.dropdown')) {\n      const dropdowns = DOM.selectAll('.nav-right .dropdown');\n      dropdowns.forEach(dropdown => {\n        dropdown.classList.remove('show');\n        const menu = dropdown.querySelector('.dropdown-menu');\n        if (menu) menu.classList.remove('show');\n      });\n      document.body.style.overflow = '';\n    }\n\n    // Close search when clicking outside\n    if (!event.target.closest('.search-box') && !event.target.closest('.search-input')) {\n      const searchBox = DOM.select('.search-box');\n      const searchInput = DOM.select('.search-input');\n      if (searchBox && searchInput) {\n        searchBox.classList.remove('active');\n        searchInput.classList.remove('active');\n        document.body.style.overflow = '';\n        document.body.classList.remove('mobile-menu-open');\n      }\n    }\n  }\n\n  /**\n   * Check if we're on a mobile device\n   */\n  isMobile() {\n    return window.innerWidth <= 768;\n  }\n\n  /**\n   * Enhanced mobile dropdown handling with improved email layout\n   */\n  enhanceMobileDropdowns() {\n    if (!this.isMobile()) return;\n\n    const dropdowns = DOM.selectAll('.nav-right .dropdown');\n    \n    dropdowns.forEach(dropdown => {\n      const toggle = dropdown.querySelector('.dropdown-toggle');\n      const menu = dropdown.querySelector('.dropdown-menu');\n      \n      if (toggle && menu) {\n        // Remove existing listeners to prevent duplicates\n        const newToggle = toggle.cloneNode(true);\n        toggle.replaceWith(newToggle);\n        \n        // Add click functionality for mobile dropdowns\n        DOM.on(newToggle, 'click', (e) => {\n          e.preventDefault();\n          e.stopPropagation();\n          \n          // Close search if open\n          const searchBox = DOM.select('.search-box');\n          const searchInput = DOM.select('.search-input');\n          if (searchBox && searchInput) {\n            searchBox.classList.remove('active');\n            searchInput.classList.remove('active');\n          }\n          \n          // Close other dropdowns first\n          dropdowns.forEach(otherDropdown => {\n            if (otherDropdown !== dropdown) {\n              otherDropdown.classList.remove('show');\n              const otherMenu = otherDropdown.querySelector('.dropdown-menu');\n              if (otherMenu) otherMenu.classList.remove('show');\n            }\n          });\n          \n          // Toggle current dropdown\n          const isOpen = dropdown.classList.contains('show');\n          if (isOpen) {\n            dropdown.classList.remove('show');\n            menu.classList.remove('show');\n            document.body.style.overflow = '';\n            document.body.classList.remove('mobile-menu-open');\n          } else {\n            dropdown.classList.add('show');\n            menu.classList.add('show');\n            document.body.style.overflow = 'hidden';\n            document.body.classList.add('mobile-menu-open');\n          }\n        });\n\n        // Enhanced mobile close button functionality\n        DOM.on(menu, 'click', (e) => {\n          // Check if clicked on the close area (::before pseudo-element area)\n          const rect = menu.getBoundingClientRect();\n          const clickY = e.clientY - rect.top;\n          \n          // If clicked in top 50px (close button area)\n          if (clickY <= 50) {\n            dropdown.classList.remove('show');\n            menu.classList.remove('show');\n            document.body.style.overflow = '';\n            document.body.classList.remove('mobile-menu-open');\n            e.preventDefault();\n            e.stopPropagation();\n          }\n        });\n      }\n    });\n\n    // Close dropdowns on escape key\n    DOM.on(document, 'keydown', (e) => {\n      if (e.key === 'Escape') {\n        dropdowns.forEach(dropdown => {\n          dropdown.classList.remove('show');\n          const menu = dropdown.querySelector('.dropdown-menu');\n          if (menu) menu.classList.remove('show');\n        });\n        document.body.style.overflow = '';\n        document.body.classList.remove('mobile-menu-open');\n      }\n    });\n  }\n\n  /**\n     * Enhanced mobile search handling - Full-width search bar\n     */\n  enhanceMobileSearch() {\n    const searchBox = DOM.select('.search-box');\n    const searchInput = DOM.select('.search-input');\n      \n    if (searchBox && searchInput) {\n      const searchToggle = searchBox.querySelector('a');\n      const searchField = searchInput.querySelector('input');\n        \n      if (searchToggle && searchField) {\n        // Setting up full-width search functionality\n          \n        // Remove existing listeners to prevent duplication\n        const newSearchToggle = searchToggle.cloneNode(true);\n        searchToggle.replaceWith(newSearchToggle);\n          \n        DOM.on(newSearchToggle, 'click', (e) => {\n          e.preventDefault();\n          e.stopPropagation();\n            \n          // Full-width search toggle clicked\n            \n          // Close any open dropdowns first\n          const dropdowns = DOM.selectAll('.nav-right .dropdown');\n          dropdowns.forEach(dropdown => {\n            dropdown.classList.remove('show');\n            const menu = dropdown.querySelector('.dropdown-menu');\n            if (menu) menu.classList.remove('show');\n          });\n            \n          // Toggle search state\n          const isActive = searchInput.classList.contains('active');\n          const searchIcon = newSearchToggle.querySelector('i');\n            \n          if (isActive) {\n            // Close search\n            searchInput.classList.remove('active');\n            document.body.classList.remove('search-open');\n              \n            // Change icon back to search\n            if (searchIcon) {\n              searchIcon.className = 'ti-search';\n            }\n              \n            // Clear input\n            if (searchField) {\n              searchField.value = '';\n              searchField.blur();\n            }\n              \n            // Full-width search closed\n          } else {\n            // Open search\n            searchInput.classList.add('active');\n            document.body.classList.add('search-open');\n              \n            // Change icon to close\n            if (searchIcon) {\n              searchIcon.className = 'ti-close';\n            }\n              \n            // Focus the input after a short delay\n            setTimeout(() => {\n              if (searchField) {\n                searchField.focus();\n                // Search field focused\n              }\n            }, 100);\n              \n            // Full-width search opened\n          }\n        });\n          \n        // Close search on escape\n        DOM.on(document, 'keydown', (e) => {\n          if (e.key === 'Escape' && searchInput.classList.contains('active')) {\n            searchInput.classList.remove('active');\n            document.body.classList.remove('search-open');\n              \n            // Reset icon\n            const searchIcon = newSearchToggle.querySelector('i');\n            if (searchIcon) {\n              searchIcon.className = 'ti-search';\n            }\n              \n            // Clear input\n            if (searchField) {\n              searchField.value = '';\n              searchField.blur();\n            }\n              \n            // Full-width search closed via escape\n          }\n        });\n          \n        // Handle search input\n        DOM.on(searchField, 'keypress', (e) => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            const query = searchField.value.trim();\n            if (query) {\n              // Search query submitted\n              // Implement your search logic here\n                \n              // For demo, close search after \"searching\"\n              searchInput.classList.remove('active');\n              document.body.classList.remove('search-open');\n                \n              const searchIcon = newSearchToggle.querySelector('i');\n              if (searchIcon) {\n                searchIcon.className = 'ti-search';\n              }\n                \n              searchField.value = '';\n              searchField.blur();\n            }\n          }\n        });\n          \n        // Full-width search functionality initialized\n      }\n    }\n  }\n\n  /**\n   * Get a component by name\n   */\n  getComponent(name) {\n    return this.components.get(name);\n  }\n\n  /**\n   * Check if app is ready\n   */\n  isReady() {\n    return this.isInitialized;\n  }\n\n  /**\n   * Destroy the application and clean up all resources\n   */\n  destroy() {\n    Logger.info('Destroying Adminator App');\n\n    // Clean up all event listeners\n    this.cleanupFunctions.forEach(cleanup => {\n      if (typeof cleanup === 'function') {\n        cleanup();\n      }\n    });\n    this.cleanupFunctions = [];\n\n    // Destroy all components\n    this.components.forEach((component, name) => {\n      if (typeof component.destroy === 'function') {\n        component.destroy();\n        Logger.debug(`Component destroyed: ${name}`);\n      }\n    });\n\n    this.components.clear();\n\n    // Cleanup performance observers\n    Performance.cleanup();\n\n    this.isInitialized = false;\n    Logger.info('Adminator App destroyed');\n  }\n\n  /**\n   * Refresh/reinitialize the application\n   */\n  refresh() {\n    Logger.info('Refreshing Adminator App');\n\n    if (this.isInitialized) {\n      this.destroy();\n    }\n\n    setTimeout(() => {\n      this.init();\n    }, 100);\n  }\n}\n\n// Initialize the application\nconst app = new AdminatorApp();\n\n// Make app globally available for debugging\nwindow.AdminatorApp = app;\n\n// Export for module usage\nexport default app; "
  },
  {
    "path": "src/assets/scripts/charts/chartJS/index.js",
    "content": "import Chart from 'chart.js/auto';\nimport { COLORS } from '../../constants/colors';\n\nexport default (function () {\n  // ------------------------------------------------------\n  // @Line Charts\n  // ------------------------------------------------------\n\n  const lineChartBox = document.getElementById('line-chart');\n\n  if (lineChartBox) {\n    const lineCtx = lineChartBox.getContext('2d');\n    lineChartBox.height = 80;\n\n    new Chart(lineCtx, {\n      type: 'line',\n      data: {\n        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n        datasets: [{\n          label                : 'Series A',\n          backgroundColor      : 'rgba(237, 231, 246, 0.5)',\n          borderColor          : COLORS['deep-purple-500'],\n          pointBackgroundColor : COLORS['deep-purple-700'],\n          borderWidth          : 2,\n          data                 : [60, 50, 70, 60, 50, 70, 60],\n        }, {\n          label                : 'Series B',\n          backgroundColor      : 'rgba(232, 245, 233, 0.5)',\n          borderColor          : COLORS['blue-500'],\n          pointBackgroundColor : COLORS['blue-700'],\n          borderWidth          : 2,\n          data                 : [70, 75, 85, 70, 75, 85, 70],\n        }],\n      },\n\n      options: {\n        legend: {\n          display: false,\n        },\n      },\n\n    });\n  }\n\n  // ------------------------------------------------------\n  // @Bar Charts\n  // ------------------------------------------------------\n\n  const barChartBox = document.getElementById('bar-chart');\n\n  if (barChartBox) {\n    const barCtx = barChartBox.getContext('2d');\n\n    new Chart(barCtx, {\n      type: 'bar',\n      data: {\n        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n        datasets: [{\n          label           : 'Dataset 1',\n          backgroundColor : COLORS['deep-purple-500'],\n          borderColor     : COLORS['deep-purple-800'],\n          borderWidth     : 1,\n          data            : [10, 50, 20, 40, 60, 30, 70],\n        }, {\n          label           : 'Dataset 2',\n          backgroundColor : COLORS['light-blue-500'],\n          borderColor     : COLORS['light-blue-800'],\n          borderWidth     : 1,\n          data            : [10, 50, 20, 40, 60, 30, 70],\n        }],\n      },\n\n      options: {\n        responsive: true,\n        legend: {\n          position: 'bottom',\n        },\n      },\n    });\n  }\n\n  // ------------------------------------------------------\n  // @Area Charts\n  // ------------------------------------------------------\n\n  const areaChartBox = document.getElementById('area-chart');\n\n  if (areaChartBox) {\n    const areaCtx = areaChartBox.getContext('2d');\n\n    new Chart(areaCtx, {\n      type: 'line',\n      data: {\n        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n        datasets: [{\n          backgroundColor : 'rgba(3, 169, 244, 0.5)',\n          borderColor     : COLORS['light-blue-800'],\n          data            : [10, 50, 20, 40, 60, 30, 70],\n          label           : 'Dataset',\n          fill            : 'start',\n        }],\n      },\n    });\n  }\n\n  // ------------------------------------------------------\n  // @Scatter Charts\n  // ------------------------------------------------------\n\n  const scatterChartBox = document.getElementById('scatter-chart');\n\n  if (scatterChartBox) {\n    const scatterCtx = scatterChartBox.getContext('2d');\n\n    new Chart(scatterCtx, {\n      type: 'scatter',\n      data: {\n        datasets: [{\n          label           : 'My First dataset',\n          borderColor     : COLORS['red-500'],\n          backgroundColor : COLORS['red-500'],\n          data: [\n            { x: 10, y: 20 },\n            { x: 30, y: 40 },\n            { x: 50, y: 60 },\n            { x: 70, y: 80 },\n            { x: 90, y: 100 },\n            { x: 110, y: 120 },\n            { x: 130, y: 140 },\n          ],\n        }, {\n          label           : 'My Second dataset',\n          borderColor     : COLORS['green-500'],\n          backgroundColor : COLORS['green-500'],\n          data: [\n            { x: 150, y: 160 },\n            { x: 170, y: 180 },\n            { x: 190, y: 200 },\n            { x: 210, y: 220 },\n            { x: 230, y: 240 },\n            { x: 250, y: 260 },\n            { x: 270, y: 280 },\n          ],\n        }],\n      },\n    });\n  }\n}())\n"
  },
  {
    "path": "src/assets/scripts/charts/easyPieChart/index.js",
    "content": "import Theme from '../../utils/theme.js';\n\nexport default (function () {\n  \n  // Vanilla JS Pie Chart implementation using SVG\n  class VanillaPieChart {\n    constructor(element, options = {}) {\n      this.element = element;\n      this.options = {\n        size: 110,\n        lineWidth: 3,\n        lineCap: 'round',\n        trackColor: '#f2f2f2',\n        barColor: '#ef1e25',\n        scaleColor: false,\n        animate: 1000,\n        onStep: null,\n        ...options,\n      };\n      \n      this.percentage = parseInt(element.dataset.percent || 0);\n      this.init();\n    }\n    \n    init() {\n      this.createSVG();\n      this.animate();\n    }\n    \n    createSVG() {\n      const size = this.options.size;\n      const lineWidth = this.options.lineWidth;\n      const radius = (size - lineWidth) / 2;\n      const circumference = 2 * Math.PI * radius;\n      \n      // Create SVG element\n      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n      svg.setAttribute('width', size);\n      svg.setAttribute('height', size);\n      svg.style.transform = 'rotate(-90deg)';\n      \n      // Create track (background circle)\n      const track = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n      track.setAttribute('cx', size / 2);\n      track.setAttribute('cy', size / 2);\n      track.setAttribute('r', radius);\n      track.setAttribute('fill', 'none');\n      track.setAttribute('stroke', this.options.trackColor);\n      track.setAttribute('stroke-width', lineWidth);\n      \n      // Create bar (progress circle)\n      const bar = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n      bar.setAttribute('cx', size / 2);\n      bar.setAttribute('cy', size / 2);\n      bar.setAttribute('r', radius);\n      bar.setAttribute('fill', 'none');\n      bar.setAttribute('stroke', this.options.barColor);\n      bar.setAttribute('stroke-width', lineWidth);\n      bar.setAttribute('stroke-linecap', this.options.lineCap);\n      bar.setAttribute('stroke-dasharray', circumference);\n      bar.setAttribute('stroke-dashoffset', circumference);\n      \n      // Add elements to SVG\n      svg.appendChild(track);\n      svg.appendChild(bar);\n      \n      // Clear element and add SVG\n      this.element.innerHTML = '';\n      this.element.appendChild(svg);\n      \n      // Add percentage text\n      const textElement = document.createElement('div');\n      textElement.style.position = 'absolute';\n      textElement.style.top = '50%';\n      textElement.style.left = '50%';\n      textElement.style.transform = 'translate(-50%, -50%)';\n      textElement.style.fontSize = '14px';\n      textElement.style.fontWeight = 'bold';\n      textElement.style.color = Theme.getCSSVar('--c-text-base') || '#333';\n      textElement.textContent = '0%';\n      \n      this.element.style.position = 'relative';\n      this.element.appendChild(textElement);\n      \n      // Store references\n      this.svg = svg;\n      this.bar = bar;\n      this.textElement = textElement;\n      this.circumference = circumference;\n    }\n    \n    animate() {\n      const targetOffset = this.circumference - (this.percentage / 100) * this.circumference;\n      const duration = this.options.animate;\n      const startTime = Date.now();\n      const startOffset = this.circumference;\n      \n      const animateStep = () => {\n        const elapsed = Date.now() - startTime;\n        const progress = Math.min(elapsed / duration, 1);\n        \n        // Easing function (easeOutCubic)\n        const easeProgress = 1 - Math.pow(1 - progress, 3);\n        \n        const currentOffset = startOffset - (startOffset - targetOffset) * easeProgress;\n        const currentPercent = ((this.circumference - currentOffset) / this.circumference) * 100;\n        \n        this.bar.setAttribute('stroke-dashoffset', currentOffset);\n        this.textElement.textContent = `${Math.round(currentPercent)}%`;\n        \n        // Call onStep callback if provided\n        if (this.options.onStep) {\n          this.options.onStep.call(this, 0, this.percentage, currentPercent);\n        }\n        \n        if (progress < 1) {\n          requestAnimationFrame(animateStep);\n        }\n      };\n      \n      requestAnimationFrame(animateStep);\n    }\n    \n    update(percentage) {\n      this.percentage = percentage;\n      this.animate();\n    }\n    \n    destroy() {\n      if (this.element) {\n        this.element.innerHTML = '';\n      }\n    }\n  }\n  \n  // Initialize all pie charts\n  const initializePieCharts = () => {\n    const pieChartElements = document.querySelectorAll('.easy-pie-chart');\n    \n    pieChartElements.forEach(element => {\n      // Skip if already initialized\n      if (element.pieChartInstance) {\n        element.pieChartInstance.destroy();\n      }\n      \n      // Get theme colors\n      const isDark = Theme.current() === 'dark';\n      const barColor = element.dataset.barColor || (isDark ? '#4f46e5' : '#ef4444');\n      const trackColor = element.dataset.trackColor || (isDark ? '#374151' : '#f3f4f6');\n      \n      // Create pie chart instance\n      const pieChart = new VanillaPieChart(element, {\n        size: parseInt(element.dataset.size || 110),\n        lineWidth: parseInt(element.dataset.lineWidth || 3),\n        barColor,\n        trackColor,\n        animate: parseInt(element.dataset.animate || 1000),\n        onStep(from, to, percent) {\n          // Update the percentage display\n          const textElement = this.element.querySelector('div');\n          if (textElement) {\n            textElement.innerHTML = `${Math.round(percent)}%`;\n          }\n        },\n      });\n      \n      // Store instance for cleanup\n      element.pieChartInstance = pieChart;\n    });\n  };\n  \n  // Initialize on load\n  initializePieCharts();\n  \n  // Reinitialize on theme change\n  window.addEventListener('adminator:themeChanged', () => {\n    setTimeout(initializePieCharts, 100);\n  });\n  \n  // Reinitialize on window resize\n  window.addEventListener('resize', () => {\n    setTimeout(initializePieCharts, 100);\n  });\n  \n  // Cleanup on page unload\n  window.addEventListener('beforeunload', () => {\n    const pieChartElements = document.querySelectorAll('.easy-pie-chart');\n    pieChartElements.forEach(element => {\n      if (element.pieChartInstance) {\n        element.pieChartInstance.destroy();\n      }\n    });\n  });\n  \n  // Return public API\n  return {\n    init: initializePieCharts,\n    VanillaPieChart,\n  };\n}());"
  },
  {
    "path": "src/assets/scripts/charts/index.js",
    "content": "import './chartJS';\nimport './easyPieChart';\nimport './sparkline';\n"
  },
  {
    "path": "src/assets/scripts/charts/sparkline/index.js",
    "content": "import { Chart, registerables } from 'chart.js';\nimport { COLORS } from '../../constants/colors';\nimport Theme from '../../utils/theme.js';\nimport { Events } from '../../utils';\n\n// Register Chart.js components\nChart.register(...registerables);\n\nexport default (function () {\n  // Store chart instances for cleanup\n  let chartInstances = [];\n\n  // ------------------------------------------------------\n  // @Sparkline Chart Creation Helpers\n  // ------------------------------------------------------\n\n  const createSparklineChart = (elementId, data, color, type = 'bar') => {\n    const element = document.getElementById(elementId);\n    if (!element) return null;\n\n    // Clear existing chart\n    const existingChart = chartInstances.find(chart => chart.canvas.id === elementId);\n    if (existingChart) {\n      existingChart.destroy();\n      chartInstances = chartInstances.filter(chart => chart.canvas.id !== elementId);\n    }\n\n    // Create canvas if it doesn't exist\n    let canvas = element.querySelector('canvas');\n    if (!canvas) {\n      canvas = document.createElement('canvas');\n      canvas.id = `${elementId  }-canvas`;\n      element.appendChild(canvas);\n    }\n\n    // Set canvas size\n    canvas.width = element.offsetWidth || 100;\n    canvas.height = 20;\n\n    const ctx = canvas.getContext('2d');\n    \n    const chartConfig = {\n      type,\n      data: {\n        labels: data.map((_, index) => index),\n        datasets: [{\n          data,\n          backgroundColor: color,\n          borderColor: color,\n          borderWidth: type === 'line' ? 2 : 0,\n          barThickness: 3,\n          categoryPercentage: 1.0,\n          barPercentage: 0.8,\n          fill: false,\n          pointRadius: 0,\n          pointHoverRadius: 0,\n        }],\n      },\n      options: {\n        responsive: true,\n        maintainAspectRatio: false,\n        plugins: {\n          legend: {\n            display: false,\n          },\n          tooltip: {\n            enabled: false,\n          },\n        },\n        scales: {\n          x: {\n            display: false,\n            grid: {\n              display: false,\n            },\n          },\n          y: {\n            display: false,\n            grid: {\n              display: false,\n            },\n          },\n        },\n        elements: {\n          bar: {\n            borderRadius: 0,\n          },\n          line: {\n            tension: 0.1,\n          },\n        },\n        layout: {\n          padding: 0,\n        },\n      },\n    };\n\n    const chart = new Chart(ctx, chartConfig);\n    chartInstances.push(chart);\n    return chart;\n  };\n\n  const createSparklineForElements = (selector, data, color, type = 'bar') => {\n    const elements = document.querySelectorAll(selector);\n    elements.forEach((element, index) => {\n      const elementId = element.id || `sparkline-${selector.replace(/[^a-zA-Z0-9]/g, '')}-${index}`;\n      if (!element.id) element.id = elementId;\n      createSparklineChart(elementId, data, color, type);\n    });\n  };\n\n  // ------------------------------------------------------\n  // @Dashboard Sparklines\n  // ------------------------------------------------------\n\n  const drawSparklines = () => {\n    const sparkColors = Theme.getSparklineColors();\n    const data = [0, 5, 6, 10, 9, 12, 4, 9];\n    \n    // Dashboard sparklines\n    createSparklineChart('sparklinedash', data, sparkColors.success);\n    createSparklineChart('sparklinedash2', data, sparkColors.purple);\n    createSparklineChart('sparklinedash3', data, sparkColors.info);\n    createSparklineChart('sparklinedash4', data, sparkColors.danger);\n  };\n\n  // ------------------------------------------------------\n  // @Other Sparklines\n  // ------------------------------------------------------\n\n  const drawOtherSparklines = () => {\n    const sparkColors = Theme.getSparklineColors();\n    \n    // Line sparklines\n    createSparklineChart('sparkline', [5, 6, 7, 9, 9, 5, 3, 2, 2, 4, 6, 7], COLORS['red-500'], 'line');\n    \n    // Composite bar - simplified implementation\n    createSparklineChart('compositebar', [4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7], sparkColors.light);\n    \n    // Normal line\n    createSparklineChart('normalline', [5, 6, 7, 9, 9, 5, 3, 2, 2, 4, 6, 7], sparkColors.info, 'line');\n    \n    // Various sparkline types for elements with classes\n    const values = [5, 4, 5, -2, 0, 3, -5, 6, 7, 9, 9, 5, -3, -2, 2, -4];\n    const valuesAlt = [1, 1, 0, 1, -1, -1, 1, -1, 0, 0, 1, 1];\n\n    // Line sparklines\n    createSparklineForElements('.sparkline', values, COLORS['red-500'], 'line');\n    \n    // Bar sparklines\n    createSparklineForElements('.sparkbar', values, COLORS['deep-purple-500'], 'bar');\n    \n    // Tristate sparklines (simplified as bar charts)\n    createSparklineForElements('.sparktri', valuesAlt, COLORS['light-blue-500'], 'bar');\n    createSparklineForElements('.sparktristate', valuesAlt, sparkColors.info, 'bar');\n    createSparklineForElements('.sparktristatecols', valuesAlt, '#fa7', 'bar');\n    \n    // Discrete sparklines (as line charts)\n    createSparklineForElements('.sparkdisc', values, '#9f0', 'line');\n    \n    // Bullet sparklines (simplified as bar charts)\n    createSparklineForElements('.sparkbull', values, COLORS['amber-500'], 'bar');\n    \n    // Box sparklines (simplified as bar charts)\n    createSparklineForElements('.sparkbox', values, '#9f0', 'bar');\n  };\n\n  // ------------------------------------------------------\n  // @Initialization\n  // ------------------------------------------------------\n\n  const initializeSparklines = () => {\n    drawSparklines();\n    drawOtherSparklines();\n  };\n\n  // Initial draw\n  initializeSparklines();\n\n  // Redraw sparklines on window resize\n  window.addEventListener('resize', Events.debounce(initializeSparklines, 150));\n\n  // Listen for theme changes\n  window.addEventListener('adminator:themeChanged', Events.debounce(initializeSparklines, 150));\n\n  // Cleanup function for chart instances\n  window.addEventListener('beforeunload', () => {\n    chartInstances.forEach(chart => {\n      if (chart && typeof chart.destroy === 'function') {\n        chart.destroy();\n      }\n    });\n    chartInstances = [];\n  });\n\n  // Export for external access\n  return {\n    redraw: initializeSparklines,\n    destroy: () => {\n      chartInstances.forEach(chart => {\n        if (chart && typeof chart.destroy === 'function') {\n          chart.destroy();\n        }\n      });\n      chartInstances = [];\n    },\n  };\n}());"
  },
  {
    "path": "src/assets/scripts/chat/index.js",
    "content": "export default (function () {\n  const chatSidebarToggle = document.getElementById('chat-sidebar-toggle');\n  const chatSidebar = document.getElementById('chat-sidebar');\n  \n  if (chatSidebarToggle && chatSidebar) {\n    chatSidebarToggle.addEventListener('click', e => {\n      chatSidebar.classList.toggle('open');\n      e.preventDefault();\n    });\n  }\n}())\n"
  },
  {
    "path": "src/assets/scripts/components/Chart.js",
    "content": "/**\n * Modern Chart Component\n * Replaces jQuery Sparkline with Chart.js\n */\n\nimport { Chart, registerables } from 'chart.js';\nimport { COLORS } from '../constants/colors';\n\n// Register Chart.js components\nChart.register(...registerables);\n\nclass ChartComponent {\n  constructor() {\n    this.charts = new Map(); // Store chart instances\n    this.debounceTimer = null;\n    this.init();\n  }\n\n  init() {\n    // Only disable resizing for small sparkline charts\n    this.createSparklines();\n    this.createOtherCharts();\n    this.setupResizeHandler();\n  }\n\n\n\n  /**\n   * Create sparklines (only for dashboard page)\n   */\n  createSparklines() {\n    // Only create sparklines if we're on a page that has them\n    const sparklineExists = document.getElementById('sparklinedash');\n    if (!sparklineExists) {\n      return;\n    }\n\n    const sparklineConfigs = [\n      {\n        id: 'sparklinedash',\n        data: [0, 5, 6, 10, 9, 12, 4, 9],\n        color: '#4caf50',\n      },\n      {\n        id: 'sparklinedash2',\n        data: [0, 5, 6, 10, 9, 12, 4, 9],\n        color: '#9675ce',\n      },\n      {\n        id: 'sparklinedash3',\n        data: [0, 5, 6, 10, 9, 12, 4, 9],\n        color: '#03a9f3',\n      },\n      {\n        id: 'sparklinedash4',\n        data: [0, 5, 6, 10, 9, 12, 4, 9],\n        color: '#f96262',\n      },\n    ];\n\n    sparklineConfigs.forEach(config => {\n      // Only create if the target element exists\n      if (document.getElementById(config.id)) {\n        this.createSparklineChart(config);\n      }\n    });\n  }\n\n  /**\n   * Create sparkline chart from configuration\n   */\n  createSparklineChart({ id, data, color }) {\n    let canvas = document.getElementById(id);\n    \n    // Only proceed if we have a valid target element\n    if (!canvas) {\n      return;\n    }\n    \n    // If element exists but isn't a canvas, replace it with canvas\n    if (canvas.tagName !== 'CANVAS') {\n      const parent = canvas.parentNode;\n      if (!parent) {\n        return;\n      }\n      \n      // Create new canvas element\n      const newCanvas = document.createElement('canvas');\n      newCanvas.id = id;\n      newCanvas.width = 100;\n      newCanvas.height = 20;\n      newCanvas.style.width = '100px';\n      newCanvas.style.height = '20px';\n      \n      // Replace the span with canvas\n      parent.replaceChild(newCanvas, canvas);\n      canvas = newCanvas;\n    } else {\n      // Set canvas dimensions to match original sparkline\n      canvas.width = 100;\n      canvas.height = 20;\n      canvas.style.width = '100px';\n      canvas.style.height = '20px';\n    }\n\n    const ctx = canvas.getContext('2d');\n    \n    const chart = new Chart(ctx, {\n      type: 'bar',\n      data: {\n        labels: data.map((_, i) => i),\n        datasets: [{\n          data,\n          backgroundColor: color,\n          borderColor: color,\n          borderWidth: 0,\n          barPercentage: 0.6,\n          categoryPercentage: 0.8,\n        }],\n      },\n      options: {\n        responsive: false,\n        maintainAspectRatio: false,\n        animation: false,\n        events: [],\n        onResize: null,\n        scales: {\n          x: {\n            display: false,\n          },\n          y: {\n            display: false,\n          },\n        },\n        plugins: {\n          legend: {\n            display: false,\n          },\n          tooltip: {\n            enabled: false,\n          },\n        },\n        elements: {\n          bar: {\n            borderRadius: 1,\n          },\n        },\n      },\n    });\n\n    this.charts.set(id, chart);\n  }\n\n  /**\n   * Create other chart types (only if they exist on the page)\n   */\n  createOtherCharts() {\n    // Determine if we're on the dashboard or charts page\n    const isChartsPage = document.getElementById('area-chart') !== null;\n    const isDashboard = !isChartsPage && document.getElementById('line-chart') !== null;\n    \n    // Create Monthly Stats chart with enhanced dual-line data (dashboard only)\n    if (isDashboard) {\n      this.createMonthlyStatsChart();\n    }\n    \n    // Charts page specific charts (only on charts page)\n    if (isChartsPage) {\n      this.createChartsPageCharts();\n    }\n    \n    // Only create charts if their target elements exist\n    if (document.getElementById('sparkline')) {\n      this.createLineChart('sparkline', [5, 6, 7, 9, 9, 5, 3, 2, 2, 4, 6, 7]);\n    }\n    \n    if (document.getElementById('compositebar')) {\n      this.createCompositeChart('compositebar', [4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7]);\n    }\n    \n    // Regular sparklines with custom colors (only on pages that have them)\n    this.createCustomSparklines();\n\n    // Easy Pie Charts (only if they exist)\n    this.createEasyPieCharts();\n  }\n\n  /**\n   * Create enhanced Monthly Stats chart with dual lines and more data\n   */\n  createMonthlyStatsChart() {\n    const canvas = document.getElementById('line-chart');\n    if (!canvas) return;\n\n    const ctx = canvas.getContext('2d');\n    \n    // Enhanced data for monthly stats\n    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n    const salesData = [120, 135, 145, 165, 180, 195, 210, 225, 240, 220, 200, 185];\n    const profitData = [45, 52, 58, 62, 68, 75, 82, 88, 92, 85, 78, 72];\n    \n    const chart = new Chart(ctx, {\n      type: 'line',\n      data: {\n        labels: months,\n        datasets: [\n          {\n            label: 'Sales ($K)',\n            data: salesData,\n            borderColor: '#4caf50',\n            backgroundColor: 'rgba(76, 175, 80, 0.1)',\n            borderWidth: 3,\n            pointRadius: 5,\n            pointHoverRadius: 7,\n            pointBackgroundColor: '#4caf50',\n            pointBorderColor: '#ffffff',\n            pointBorderWidth: 2,\n            tension: 0.4,\n            fill: false,\n          },\n          {\n            label: 'Profit ($K)',\n            data: profitData,\n            borderColor: '#2196f3',\n            backgroundColor: 'rgba(33, 150, 243, 0.1)',\n            borderWidth: 3,\n            pointRadius: 5,\n            pointHoverRadius: 7,\n            pointBackgroundColor: '#2196f3',\n            pointBorderColor: '#ffffff',\n            pointBorderWidth: 2,\n            tension: 0.4,\n            fill: false,\n          },\n        ],\n      },\n      options: {\n        responsive: true,\n        maintainAspectRatio: false,\n        plugins: {\n          legend: {\n            display: true,\n            position: 'top',\n            labels: {\n              padding: 20,\n              font: {\n                size: 12,\n                weight: '600',\n              },\n            },\n          },\n          tooltip: {\n            enabled: true,\n            cornerRadius: 8,\n            displayColors: true,\n            intersect: false,\n            mode: 'index',\n            callbacks: {\n              label(context) {\n                return `${context.dataset.label  }: $${  context.parsed.y  }K`;\n              },\n            },\n          },\n        },\n        scales: {\n          x: {\n            grid: {\n              display: false,\n            },\n            ticks: {\n              font: {\n                size: 11,\n              },\n            },\n          },\n          y: {\n            beginAtZero: true,\n            grid: {\n              borderDash: [5, 5],\n            },\n            ticks: {\n              font: {\n                size: 11,\n              },\n              callback(value) {\n                return `$${  value  }K`;\n              },\n            },\n          },\n        },\n        interaction: {\n          intersect: false,\n          mode: 'index',\n        },\n      },\n    });\n\n    this.charts.set('line-chart', chart);\n  }\n\n  /**\n   * Create line chart (only if target exists)\n   */\n  createLineChart(id, data) {\n    let canvas = document.getElementById(id);\n    \n    // Only proceed if target element exists\n    if (!canvas) {\n      return;\n    }\n    \n    // If element exists but isn't a canvas, replace it with canvas\n    if (canvas.tagName !== 'CANVAS') {\n      const parent = canvas.parentNode;\n      if (!parent) {\n        return;\n      }\n      \n      // Create new canvas element\n      const newCanvas = document.createElement('canvas');\n      newCanvas.id = id;\n      newCanvas.width = 100;\n      newCanvas.height = 20;\n      newCanvas.style.width = '100px';\n      newCanvas.style.height = '20px';\n      \n      // Replace element with canvas\n      parent.replaceChild(newCanvas, canvas);\n      canvas = newCanvas;\n    } else {\n      canvas.width = 100;\n      canvas.height = 20;\n      canvas.style.width = '100px';\n      canvas.style.height = '20px';\n    }\n\n    const ctx = canvas.getContext('2d');\n    \n    const chart = new Chart(ctx, {\n      type: 'line',\n      data: {\n        labels: data.map((_, i) => i),\n        datasets: [{\n          data,\n          borderColor: COLORS['blue-500'],\n          backgroundColor: 'transparent',\n          borderWidth: 1,\n          pointRadius: 0,\n          tension: 0.4,\n        }],\n      },\n      options: {\n        responsive: false,\n        maintainAspectRatio: false,\n        animation: false,\n        events: [],\n        onResize: null,\n        scales: {\n          x: { display: false },\n          y: { display: false },\n        },\n        plugins: {\n          legend: { display: false },\n          tooltip: { enabled: false },\n        },\n      },\n    });\n\n    this.charts.set(id, chart);\n  }\n\n  /**\n   * Create composite chart (only if target exists)\n   */\n  createCompositeChart(id, data) {\n    let canvas = document.getElementById(id);\n    \n    // Only proceed if target element exists\n    if (!canvas) {\n      return;\n    }\n    \n    // If element exists but isn't a canvas, replace it with canvas  \n    if (canvas.tagName !== 'CANVAS') {\n      const parent = canvas.parentNode;\n      if (!parent) {\n        return;\n      }\n      \n      // Create new canvas element\n      const newCanvas = document.createElement('canvas');\n      newCanvas.id = id;\n      newCanvas.width = 100;\n      newCanvas.height = 20;\n      newCanvas.style.width = '100px';\n      newCanvas.style.height = '20px';\n      \n      // Replace element with canvas\n      parent.replaceChild(newCanvas, canvas);\n      canvas = newCanvas;\n    } else {\n      canvas.width = 100;\n      canvas.height = 20;\n      canvas.style.width = '100px';\n      canvas.style.height = '20px';\n    }\n\n    const ctx = canvas.getContext('2d');\n    \n    const chart = new Chart(ctx, {\n      type: 'bar',\n      data: {\n        labels: data.map((_, i) => i),\n        datasets: [\n          {\n            type: 'bar',\n            data,\n            backgroundColor: '#aaf',\n            borderColor: '#aaf',\n            borderWidth: 0,\n          },\n          {\n            type: 'line',\n            data,\n            borderColor: 'red',\n            backgroundColor: 'transparent',\n            borderWidth: 1,\n            pointRadius: 0,\n            tension: 0.4,\n          },\n        ],\n      },\n      options: {\n        responsive: false,\n        maintainAspectRatio: false,\n        animation: false,\n        events: [],\n        onResize: null,\n        scales: {\n          x: { display: false },\n          y: { display: false },\n        },\n        plugins: {\n          legend: { display: false },\n          tooltip: { enabled: false },\n        },\n      },\n    });\n\n    this.charts.set(id, chart);\n  }\n\n  /**\n   * Create custom sparklines for different elements (only if they exist)\n   */\n  createCustomSparklines() {\n    const sparklineElements = document.querySelectorAll('.sparkline');\n    const sparkbarElements = document.querySelectorAll('.sparkbar');\n    const sparktriElements = document.querySelectorAll('.sparktri');\n    const sparkdiscElements = document.querySelectorAll('.sparkdisc');\n    const sparkbullElements = document.querySelectorAll('.sparkbull');\n    const sparkboxElements = document.querySelectorAll('.sparkbox');\n    \n    // Only create if we have elements\n    if (sparklineElements.length === 0 && sparkbarElements.length === 0 && \n        sparktriElements.length === 0 && sparkdiscElements.length === 0 &&\n        sparkbullElements.length === 0 && sparkboxElements.length === 0) {\n      return;\n    }\n    \n    const values = [5, 4, 5, -2, 0, 3, -5, 6, 7, 9, 9, 5, -3, -2, 2, -4];\n    const valuesAlt = [1, 1, 0, 1, -1, -1, 1, -1, 0, 0, 1, 1];\n\n    sparklineElements.forEach((element, index) => {\n      this.createCustomLineChart(element, values, `sparkline-${index}`);\n    });\n\n    sparkbarElements.forEach((element, index) => {\n      this.createCustomBarChart(element, values, `sparkbar-${index}`);\n    });\n\n    sparktriElements.forEach((element, index) => {\n      this.createTristateChart(element, valuesAlt, `sparktri-${index}`);\n    });\n\n    sparkdiscElements.forEach((element, index) => {\n      this.createDiscreteChart(element, values, `sparkdisc-${index}`);\n    });\n\n    sparkbullElements.forEach((element, index) => {\n      this.createBulletChart(element, values, `sparkbull-${index}`);\n    });\n\n    sparkboxElements.forEach((element, index) => {\n      this.createBoxChart(element, values, `sparkbox-${index}`);\n    });\n  }\n\n  /**\n   * Create custom line chart for sparkline elements\n   */\n  createCustomLineChart(element, data, id) {\n    // Create canvas if it doesn't exist\n    let canvas = element.querySelector('canvas');\n    if (!canvas) {\n      canvas = document.createElement('canvas');\n      canvas.width = 100;\n      canvas.height = 20;\n      canvas.style.width = '100px';\n      canvas.style.height = '20px';\n      element.appendChild(canvas);\n    }\n\n    const ctx = canvas.getContext('2d');\n    \n    const chart = new Chart(ctx, {\n      type: 'line',\n      data: {\n        labels: data.map((_, i) => i),\n        datasets: [{\n          data,\n          borderColor: COLORS['red-500'],\n          backgroundColor: 'transparent',\n          borderWidth: 2,\n          pointRadius: 3,\n          pointBackgroundColor: COLORS['red-500'],\n          tension: 0.4,\n        }],\n      },\n      options: {\n        responsive: false,\n        maintainAspectRatio: false,\n        animation: false, // Disable animations to prevent resize triggers\n        events: [], // Disable all events to prevent resize\n        onResize: null, // Explicitly disable resize callback\n        scales: {\n          x: { display: false },\n          y: { display: false },\n        },\n        plugins: {\n          legend: { display: false },\n          tooltip: { enabled: false }, // Disable tooltip to prevent events\n        },\n      },\n    });\n\n\n\n    this.charts.set(id, chart);\n  }\n\n  /**\n   * Create custom bar chart for sparkbar elements\n   */\n  createCustomBarChart(element, data, id) {\n    // Create canvas if it doesn't exist\n    let canvas = element.querySelector('canvas');\n    if (!canvas) {\n      canvas = document.createElement('canvas');\n      canvas.width = 100;\n      canvas.height = 20;\n      canvas.style.width = '100px';\n      canvas.style.height = '20px';\n      element.appendChild(canvas);\n    }\n\n    const ctx = canvas.getContext('2d');\n    \n    const chart = new Chart(ctx, {\n      type: 'bar',\n      data: {\n        labels: data.map((_, i) => i),\n        datasets: [{\n          data,\n          backgroundColor: data.map(val => val < 0 ? COLORS['deep-purple-500'] : '#39f'),\n          borderColor: data.map(val => val < 0 ? COLORS['deep-purple-500'] : '#39f'),\n          borderWidth: 1,\n          barPercentage: 0.8,\n        }],\n      },\n      options: {\n        responsive: false,\n        maintainAspectRatio: false,\n        scales: {\n          x: { display: false },\n          y: { display: false },\n        },\n        plugins: {\n          legend: { display: false },\n          tooltip: {\n            enabled: true,\n            callbacks: {\n              label: (context) => `${context.parsed.y}°Celsius`,\n            },\n          },\n        },\n      },\n    });\n\n    this.charts.set(id, chart);\n  }\n\n  /**\n   * Setup resize handler for charts\n   */\n  setupResizeHandler() {\n    // Setup responsive resize for large charts only\n    window.addEventListener('resize', () => {\n      this.debounceResize();\n    });\n    \n    // Listen for sidebar toggle events\n    window.addEventListener('sidebar:toggle', () => {\n      this.debounceResize();\n    });\n  }\n\n  /**\n   * Debounced resize handler\n   */\n  debounceResize() {\n    if (this.debounceTimer) {\n      clearTimeout(this.debounceTimer);\n    }\n    this.debounceTimer = setTimeout(() => {\n      this.redrawLargeChartsOnly();\n    }, 150);\n  }\n\n  /**\n   * Redraw only large charts, not sparklines\n   */\n  redrawLargeChartsOnly() {\n    const largeChartIds = [\n      'line-chart', 'area-chart', 'scatter-chart', 'bar-chart',\n      'doughnut-chart', 'polar-chart', 'radar-chart', 'mixed-chart', 'bubble-chart',\n    ];\n    \n    largeChartIds.forEach(id => {\n      const chart = this.charts.get(id);\n      if (chart && chart.options.responsive) {\n        chart.resize();\n      }\n    });\n  }\n\n  /**\n   * Redraw all charts (used sparingly)\n   */\n  redrawCharts() {\n    this.charts.forEach((chart) => {\n      if (chart.options.responsive) {\n        chart.resize();\n      }\n    });\n  }\n\n  /**\n   * Update chart data\n   */\n  updateChart(id, newData) {\n    const chart = this.charts.get(id);\n    if (chart) {\n      chart.data.datasets[0].data = newData;\n      chart.update();\n    }\n  }\n\n  /**\n   * Create charts for the charts.html page\n   */\n  createChartsPageCharts() {\n    // Line Chart\n    this.createLargeChart('line-chart', 'line', {\n      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n      datasets: [{\n        label: 'Dataset 1',\n        data: [65, 59, 80, 81, 56, 55, 40],\n        borderColor: 'rgb(75, 192, 192)',\n        backgroundColor: 'rgba(75, 192, 192, 0.2)',\n        tension: 0.4,\n      }],\n    });\n\n    // Area Chart\n    this.createLargeChart('area-chart', 'line', {\n      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n      datasets: [{\n        label: 'Dataset 1',\n        data: [65, 59, 80, 81, 56, 55, 40],\n        borderColor: 'rgb(54, 162, 235)',\n        backgroundColor: 'rgba(54, 162, 235, 0.4)',\n        fill: true,\n        tension: 0.4,\n      }],\n    });\n\n    // Scatter Chart with more data points\n    this.createLargeChart('scatter-chart', 'scatter', {\n      datasets: [{\n        label: 'Dataset 1',\n        data: [\n          {x: -15, y: 8}, {x: -12, y: 12}, {x: -8, y: 3}, {x: -5, y: 15},\n          {x: -2, y: 7}, {x: 0, y: 10}, {x: 3, y: 18}, {x: 6, y: 5},\n          {x: 9, y: 22}, {x: 12, y: 8}, {x: 15, y: 14}, {x: 18, y: 19},\n          {x: -10, y: 0}, {x: 10, y: 5}, {x: 0.5, y: 5.5}, {x: 7, y: 12},\n          {x: -7, y: 17}, {x: 4, y: 9}, {x: 11, y: 16}, {x: -3, y: 11},\n        ],\n        backgroundColor: 'rgba(255, 99, 132, 0.7)',\n        borderColor: 'rgb(255, 99, 132)',\n        borderWidth: 1,\n      }, {\n        label: 'Dataset 2',\n        data: [\n          {x: -13, y: 4}, {x: -9, y: 8}, {x: -6, y: 13}, {x: -1, y: 6},\n          {x: 2, y: 11}, {x: 5, y: 15}, {x: 8, y: 2}, {x: 13, y: 17},\n          {x: 16, y: 9}, {x: -4, y: 14}, {x: 1, y: 20}, {x: 14, y: 4},\n        ],\n        backgroundColor: 'rgba(54, 162, 235, 0.7)',\n        borderColor: 'rgb(54, 162, 235)',\n        borderWidth: 1,\n      }],\n    });\n\n    // Bar Chart\n    this.createLargeChart('bar-chart', 'bar', {\n      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],\n      datasets: [{\n        label: '# of Votes',\n        data: [12, 19, 3, 5, 2, 3],\n        backgroundColor: [\n          'rgba(255, 99, 132, 0.6)',\n          'rgba(54, 162, 235, 0.6)',\n          'rgba(255, 205, 86, 0.6)',\n          'rgba(75, 192, 192, 0.6)',\n          'rgba(153, 102, 255, 0.6)',\n          'rgba(255, 159, 64, 0.6)',\n        ],\n        borderColor: [\n          'rgba(255, 99, 132, 1)',\n          'rgba(54, 162, 235, 1)',\n          'rgba(255, 205, 86, 1)',\n          'rgba(75, 192, 192, 1)',\n          'rgba(153, 102, 255, 1)',\n          'rgba(255, 159, 64, 1)',\n        ],\n        borderWidth: 1,\n      }],\n    });\n\n    // Doughnut Chart\n    this.createLargeChart('doughnut-chart', 'doughnut', {\n      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],\n      datasets: [{\n        label: 'My First Dataset',\n        data: [300, 50, 100, 75, 120, 60],\n        backgroundColor: [\n          'rgba(255, 99, 132, 0.8)',\n          'rgba(54, 162, 235, 0.8)',\n          'rgba(255, 205, 86, 0.8)',\n          'rgba(75, 192, 192, 0.8)',\n          'rgba(153, 102, 255, 0.8)',\n          'rgba(255, 159, 64, 0.8)',\n        ],\n        borderColor: [\n          'rgba(255, 99, 132, 1)',\n          'rgba(54, 162, 235, 1)',\n          'rgba(255, 205, 86, 1)',\n          'rgba(75, 192, 192, 1)',\n          'rgba(153, 102, 255, 1)',\n          'rgba(255, 159, 64, 1)',\n        ],\n        borderWidth: 2,\n        hoverOffset: 10,\n      }],\n    });\n\n    // Polar Area Chart\n    this.createLargeChart('polar-chart', 'polarArea', {\n      labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],\n      datasets: [{\n        label: 'My First Dataset',\n        data: [11, 16, 7, 3, 14],\n        backgroundColor: [\n          'rgba(255, 99, 132, 0.7)',\n          'rgba(75, 192, 192, 0.7)',\n          'rgba(255, 205, 86, 0.7)',\n          'rgba(201, 203, 207, 0.7)',\n          'rgba(54, 162, 235, 0.7)',\n        ],\n        borderColor: [\n          'rgb(255, 99, 132)',\n          'rgb(75, 192, 192)',\n          'rgb(255, 205, 86)',\n          'rgb(201, 203, 207)',\n          'rgb(54, 162, 235)',\n        ],\n        borderWidth: 2,\n      }],\n    });\n\n    // Radar Chart\n    this.createLargeChart('radar-chart', 'radar', {\n      labels: ['Speed', 'Reliability', 'Comfort', 'Safety', 'Efficiency', 'Innovation'],\n      datasets: [{\n        label: 'Product A',\n        data: [65, 59, 90, 81, 56, 55],\n        fill: true,\n        backgroundColor: 'rgba(54, 162, 235, 0.2)',\n        borderColor: 'rgb(54, 162, 235)',\n        borderWidth: 2,\n        pointBackgroundColor: 'rgb(54, 162, 235)',\n        pointBorderColor: '#fff',\n        pointHoverBackgroundColor: '#fff',\n        pointHoverBorderColor: 'rgb(54, 162, 235)',\n      }, {\n        label: 'Product B',\n        data: [28, 48, 40, 95, 86, 27],\n        fill: true,\n        backgroundColor: 'rgba(255, 99, 132, 0.2)',\n        borderColor: 'rgb(255, 99, 132)',\n        borderWidth: 2,\n        pointBackgroundColor: 'rgb(255, 99, 132)',\n        pointBorderColor: '#fff',\n        pointHoverBackgroundColor: '#fff',\n        pointHoverBorderColor: 'rgb(255, 99, 132)',\n      }],\n    });\n\n    // Mixed Chart (Bar + Line)\n    this.createLargeChart('mixed-chart', 'bar', {\n      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],\n      datasets: [{\n        type: 'bar',\n        label: 'Sales',\n        data: [12, 19, 3, 5, 2, 3],\n        backgroundColor: 'rgba(54, 162, 235, 0.7)',\n        borderColor: 'rgb(54, 162, 235)',\n        borderWidth: 1,\n      }, {\n        type: 'line',\n        label: 'Revenue',\n        data: [18, 25, 8, 15, 12, 18],\n        fill: false,\n        borderColor: 'rgb(255, 99, 132)',\n        backgroundColor: 'rgba(255, 99, 132, 0.2)',\n        borderWidth: 3,\n        tension: 0.4,\n        pointRadius: 5,\n        pointHoverRadius: 7,\n      }],\n    });\n\n    // Bubble Chart\n    this.createLargeChart('bubble-chart', 'bubble', {\n      datasets: [{\n        label: 'First Dataset',\n        data: [\n          {x: 20, y: 30, r: 15},\n          {x: 40, y: 10, r: 10},\n          {x: 30, y: 40, r: 20},\n          {x: 50, y: 35, r: 12},\n          {x: 10, y: 50, r: 8},\n          {x: 60, y: 20, r: 18},\n          {x: 25, y: 25, r: 14},\n        ],\n        backgroundColor: 'rgba(54, 162, 235, 0.6)',\n        borderColor: 'rgb(54, 162, 235)',\n        borderWidth: 2,\n      }, {\n        label: 'Second Dataset',\n        data: [\n          {x: 15, y: 45, r: 12},\n          {x: 35, y: 15, r: 16},\n          {x: 45, y: 25, r: 9},\n          {x: 55, y: 45, r: 14},\n          {x: 25, y: 35, r: 11},\n        ],\n        backgroundColor: 'rgba(255, 99, 132, 0.6)',\n        borderColor: 'rgb(255, 99, 132)',\n        borderWidth: 2,\n      }],\n    });\n  }\n\n  /**\n   * Create large chart for charts page\n   */\n  createLargeChart(id, type, data) {\n    const canvas = document.getElementById(id);\n    if (!canvas) return;\n\n    const ctx = canvas.getContext('2d');\n    \n    // Define chart-specific options\n    const chartOptions = this.getChartOptions(type);\n    \n    const chart = new Chart(ctx, {\n      type,\n      data,\n      options: chartOptions,\n    });\n\n    this.charts.set(id, chart);\n  }\n\n  /**\n   * Get chart-specific options based on chart type\n   */\n  getChartOptions(type) {\n    const baseOptions = {\n      responsive: true,\n      maintainAspectRatio: false,\n      plugins: {\n        legend: {\n          display: true,\n          position: 'top',\n          labels: {\n            padding: 20,\n            font: {\n              size: 12,\n              weight: '600',\n            },\n          },\n        },\n        tooltip: {\n          enabled: true,\n          cornerRadius: 8,\n          displayColors: true,\n        },\n      },\n    };\n\n    // Chart type specific configurations\n    switch (type) {\n    case 'doughnut':\n    case 'pie':\n      return {\n        ...baseOptions,\n        plugins: {\n          ...baseOptions.plugins,\n          legend: {\n            ...baseOptions.plugins.legend,\n            position: 'right',\n          },\n        },\n        interaction: {\n          intersect: false,\n        },\n      };\n\n    case 'polarArea':\n      return {\n        ...baseOptions,\n        scales: {\n          r: {\n            pointLabels: {\n              display: true,\n              centerPointLabels: true,\n              font: {\n                size: 10,\n              },\n            },\n            grid: {\n            },\n          },\n        },\n      };\n\n    case 'radar':\n      return {\n        ...baseOptions,\n        scales: {\n          r: {\n            angleLines: {\n              display: true,\n            },\n            grid: {\n            },\n            pointLabels: {\n              font: {\n                size: 11,\n              },\n            },\n            ticks: {\n              display: true,\n              font: {\n                size: 10,\n              },\n            },\n          },\n        },\n      };\n\n    case 'bubble':\n      return {\n        ...baseOptions,\n        scales: {\n          x: {\n            type: 'linear',\n            position: 'bottom',\n            grid: {\n              borderDash: [5, 5],\n            },\n            ticks: {\n              font: {\n                size: 11,\n              },\n            },\n          },\n          y: {\n            beginAtZero: true,\n            grid: {\n              borderDash: [5, 5],\n            },\n            ticks: {\n              font: {\n                size: 11,\n              },\n            },\n          },\n        },\n        plugins: {\n          ...baseOptions.plugins,\n          tooltip: {\n            ...baseOptions.plugins.tooltip,\n            callbacks: {\n              label(context) {\n                return `${context.dataset.label}: (${context.parsed.x}, ${context.parsed.y}), Size: ${context.parsed._custom}`;\n              },\n            },\n          },\n        },\n      };\n\n    case 'scatter':\n      return {\n        ...baseOptions,\n        scales: {\n          x: {\n            type: 'linear',\n            position: 'bottom',\n            grid: {\n              borderDash: [5, 5],\n            },\n            ticks: {\n              font: {\n                size: 11,\n              },\n            },\n          },\n          y: {\n            grid: {\n              borderDash: [5, 5],\n            },\n            ticks: {\n              font: {\n                size: 11,\n              },\n            },\n          },\n        },\n      };\n\n    default:\n      // For line, bar, area, mixed charts\n      return {\n        ...baseOptions,\n        scales: {\n          x: {\n            grid: {\n              borderDash: [5, 5],\n            },\n            ticks: {\n              font: {\n                size: 11,\n              },\n            },\n          },\n          y: {\n            beginAtZero: true,\n            grid: {\n              borderDash: [5, 5],\n            },\n            ticks: {\n              font: {\n                size: 11,\n              },\n            },\n          },\n        },\n      };\n    }\n  }\n\n  /**\n   * Create tristate chart (for .sparktri elements)\n   */\n  createTristateChart(element, data, id) {\n    let canvas = element.querySelector('canvas');\n    if (!canvas) {\n      canvas = document.createElement('canvas');\n      canvas.width = 100;\n      canvas.height = 20;\n      canvas.style.width = '100px';\n      canvas.style.height = '20px';\n      element.appendChild(canvas);\n    }\n\n    const ctx = canvas.getContext('2d');\n    \n    const chart = new Chart(ctx, {\n      type: 'bar',\n      data: {\n        labels: data.map((_, i) => i),\n        datasets: [{\n          data: data.map(val => Math.abs(val)),\n          backgroundColor: data.map(val => {\n            if (val > 0) return COLORS['light-blue-500'];\n            if (val < 0) return '#f90';\n            return '#000';\n          }),\n          borderColor: data.map(val => {\n            if (val > 0) return COLORS['light-blue-500'];\n            if (val < 0) return '#f90';\n            return '#000';\n          }),\n          borderWidth: 1,\n          barPercentage: 0.8,\n        }],\n      },\n      options: {\n        responsive: false,\n        maintainAspectRatio: false,\n        scales: {\n          x: { display: false },\n          y: { display: false },\n        },\n        plugins: {\n          legend: { display: false },\n          tooltip: {\n            enabled: true,\n            callbacks: {\n              label: (context) => `${context.parsed.y}°Celsius`,\n            },\n          },\n        },\n      },\n    });\n\n    this.charts.set(id, chart);\n  }\n\n  /**\n   * Create discrete chart (for .sparkdisc elements)\n   */\n  createDiscreteChart(element, data, id) {\n    let canvas = element.querySelector('canvas');\n    if (!canvas) {\n      canvas = document.createElement('canvas');\n      canvas.width = 100;\n      canvas.height = 20;\n      canvas.style.width = '100px';\n      canvas.style.height = '20px';\n      element.appendChild(canvas);\n    }\n\n    const ctx = canvas.getContext('2d');\n    \n    const chart = new Chart(ctx, {\n      type: 'scatter',\n      data: {\n        datasets: [{\n          data: data.map((val, index) => ({x: index, y: val})),\n          backgroundColor: '#9f0',\n          borderColor: '#9f0',\n          pointRadius: 2,\n          showLine: false,\n        }],\n      },\n      options: {\n        responsive: false,\n        maintainAspectRatio: false,\n        scales: {\n          x: { display: false },\n          y: { display: false },\n        },\n        plugins: {\n          legend: { display: false },\n          tooltip: {\n            enabled: true,\n            callbacks: {\n              label: (context) => `${context.parsed.y}°Celsius`,\n            },\n          },\n        },\n      },\n    });\n\n    this.charts.set(id, chart);\n  }\n\n  /**\n   * Create bullet chart (for .sparkbull elements)\n   */\n  createBulletChart(element, data, id) {\n    let canvas = element.querySelector('canvas');\n    if (!canvas) {\n      canvas = document.createElement('canvas');\n      canvas.width = 100;\n      canvas.height = 20;\n      canvas.style.width = '100px';\n      canvas.style.height = '20px';\n      element.appendChild(canvas);\n    }\n\n    const ctx = canvas.getContext('2d');\n    \n    // Simplified bullet chart as horizontal bar\n    const chart = new Chart(ctx, {\n      type: 'bar',\n      data: {\n        labels: [''],\n        datasets: [{\n          data: [Math.max(...data)],\n          backgroundColor: COLORS['amber-500'],\n          borderColor: COLORS['amber-500'],\n          borderWidth: 1,\n          barPercentage: 0.6,\n        }],\n      },\n      options: {\n        responsive: false,\n        maintainAspectRatio: false,\n        indexAxis: 'y',\n        scales: {\n          x: { display: false },\n          y: { display: false },\n        },\n        plugins: {\n          legend: { display: false },\n          tooltip: {\n            enabled: true,\n            callbacks: {\n              label: (context) => `${context.parsed.x}°Celsius`,\n            },\n          },\n        },\n      },\n    });\n\n    this.charts.set(id, chart);\n  }\n\n  /**\n   * Create box chart (for .sparkbox elements) \n   */\n  createBoxChart(element, data, id) {\n    let canvas = element.querySelector('canvas');\n    if (!canvas) {\n      canvas = document.createElement('canvas');\n      canvas.width = 100;\n      canvas.height = 20;\n      canvas.style.width = '100px';\n      canvas.style.height = '20px';\n      element.appendChild(canvas);\n    }\n\n    const ctx = canvas.getContext('2d');\n    \n    // Box plot simplified as bar chart showing quartiles\n    const sortedData = [...data].sort((a, b) => a - b);\n    const q1 = sortedData[Math.floor(sortedData.length * 0.25)];\n    const median = sortedData[Math.floor(sortedData.length * 0.5)];\n    const q3 = sortedData[Math.floor(sortedData.length * 0.75)];\n    \n    const chart = new Chart(ctx, {\n      type: 'bar',\n      data: {\n        labels: ['Q1', 'Med', 'Q3'],\n        datasets: [{\n          data: [q1, median, q3],\n          backgroundColor: '#9f0',\n          borderColor: '#9f0',\n          borderWidth: 1,\n          barPercentage: 0.8,\n        }],\n      },\n      options: {\n        responsive: false,\n        maintainAspectRatio: false,\n        scales: {\n          x: { display: false },\n          y: { display: false },\n        },\n        plugins: {\n          legend: { display: false },\n          tooltip: {\n            enabled: true,\n            callbacks: {\n              label: (context) => `${context.parsed.y}°Celsius`,\n            },\n          },\n        },\n      },\n    });\n\n    this.charts.set(id, chart);\n  }\n\n  /**\n   * Create Easy Pie Charts (replaces jQuery Easy Pie Chart)\n   */\n  createEasyPieCharts() {\n    const easyPieElements = document.querySelectorAll('.easy-pie-chart');\n    \n    easyPieElements.forEach((element, index) => {\n      const size = parseInt(element.dataset.size) || 80;\n      const percent = parseInt(element.dataset.percent) || 0;\n      const barColor = element.dataset.barColor || '#f44336';\n      \n      // Create canvas for the pie chart\n      let canvas = element.querySelector('canvas');\n      if (!canvas) {\n        canvas = document.createElement('canvas');\n        canvas.width = size;\n        canvas.height = size;\n        canvas.style.width = `${size}px`;\n        canvas.style.height = `${size}px`;\n        element.appendChild(canvas);\n      }\n\n      // Create percentage display\n      const percentDisplay = element.querySelector('span');\n      if (percentDisplay) {\n        percentDisplay.textContent = `${percent}%`;\n        percentDisplay.style.position = 'absolute';\n        percentDisplay.style.top = '50%';\n        percentDisplay.style.left = '50%';\n        percentDisplay.style.transform = 'translate(-50%, -50%)';\n        percentDisplay.style.fontSize = '14px';\n        percentDisplay.style.fontWeight = 'bold';\n      }\n\n      // Set element position to relative for absolute positioning of text\n      element.style.position = 'relative';\n      element.style.display = 'inline-block';\n\n      const ctx = canvas.getContext('2d');\n      \n      const chart = new Chart(ctx, {\n        type: 'doughnut',\n        data: {\n          datasets: [{\n            data: [percent, 100 - percent],\n            backgroundColor: [barColor, '#f0f0f0'],\n            borderWidth: 0,\n            cutout: '70%',\n          }],\n        },\n        options: {\n          responsive: false,\n          maintainAspectRatio: false,\n          plugins: {\n            legend: { display: false },\n            tooltip: { enabled: false },\n          },\n        },\n      });\n\n      this.charts.set(`easy-pie-${index}`, chart);\n    });\n  }\n\n  /**\n   * Destroy all charts\n   */\n  destroy() {\n    this.charts.forEach(chart => {\n      chart.destroy();\n    });\n    this.charts.clear();\n    \n    if (this.debounceTimer) {\n      clearTimeout(this.debounceTimer);\n    }\n  }\n}\n\nexport default ChartComponent; "
  },
  {
    "path": "src/assets/scripts/components/Sidebar.js",
    "content": "/**\n * Modern Sidebar Component\n * Replaces jQuery-based sidebar functionality with vanilla JavaScript\n */\n\nclass Sidebar {\n  constructor() {\n    this.sidebar = document.querySelector('.sidebar');\n    this.sidebarMenu = document.querySelector('.sidebar .sidebar-menu');\n    this.sidebarToggleLinks = document.querySelectorAll('.sidebar-toggle a');\n    this.sidebarToggleById = document.querySelector('#sidebar-toggle');\n    this.app = document.querySelector('.app');\n    \n    this.init();\n  }\n\n  init() {\n    if (!this.sidebar || !this.sidebarMenu) {\n      return;\n    }\n\n    this.setupMenuToggle();\n    this.setupSidebarToggle();\n    this.setActiveLink();\n  }\n\n  /**\n   * Setup dropdown menu functionality\n   */\n  setupMenuToggle() {\n    const menuLinks = this.sidebarMenu.querySelectorAll('li a');\n    \n    menuLinks.forEach(link => {\n      link.addEventListener('click', (e) => {\n        const listItem = link.parentElement;\n        const dropdownMenu = listItem.querySelector('.dropdown-menu');\n        \n        // If this is a regular navigation link (not dropdown), allow normal navigation\n        if (!dropdownMenu) {\n          // Don't prevent default for regular navigation links\n          return;\n        }\n        \n        // Only prevent default for dropdown toggles\n        e.preventDefault();\n        \n        if (listItem.classList.contains('open')) {\n          this.closeDropdown(listItem, dropdownMenu);\n        } else {\n          this.closeAllDropdowns();\n          this.openDropdown(listItem, dropdownMenu);\n        }\n      });\n    });\n  }\n\n  /**\n   * Open dropdown with smooth animation\n   */\n  openDropdown(listItem, dropdownMenu) {\n    listItem.classList.add('open');\n    dropdownMenu.style.display = 'block';\n    dropdownMenu.style.height = '0px';\n    dropdownMenu.style.overflow = 'hidden';\n    \n    // Get the natural height\n    const height = dropdownMenu.scrollHeight;\n    \n    // Animate to full height\n    dropdownMenu.animate([\n      { height: '0px' },\n      { height: `${height}px` },\n    ], {\n      duration: 200,\n      easing: 'ease-out',\n    }).onfinish = () => {\n      dropdownMenu.style.height = 'auto';\n      dropdownMenu.style.overflow = 'visible';\n    };\n  }\n\n  /**\n   * Close dropdown with smooth animation\n   */\n  closeDropdown(listItem, dropdownMenu) {\n    const height = dropdownMenu.scrollHeight;\n    \n    dropdownMenu.style.height = `${height}px`;\n    dropdownMenu.style.overflow = 'hidden';\n    \n    dropdownMenu.animate([\n      { height: `${height}px` },\n      { height: '0px' },\n    ], {\n      duration: 200,\n      easing: 'ease-in',\n    }).onfinish = () => {\n      listItem.classList.remove('open');\n      dropdownMenu.style.display = 'none';\n      dropdownMenu.style.height = '';\n      dropdownMenu.style.overflow = '';\n    };\n  }\n\n  /**\n   * Close all open dropdowns\n   */\n  closeAllDropdowns() {\n    const openItems = this.sidebarMenu.querySelectorAll('li.open');\n    \n    openItems.forEach(item => {\n      const dropdownMenu = item.querySelector('.dropdown-menu');\n      if (dropdownMenu) {\n        this.closeDropdown(item, dropdownMenu);\n      }\n      \n      // Also remove the has-active-child class\n      item.classList.remove('has-active-child');\n    });\n  }\n\n  /**\n   * Setup sidebar toggle functionality\n   */\n  setupSidebarToggle() {\n    // Handle mobile sidebar toggle links (inside .sidebar-toggle divs)\n    this.sidebarToggleLinks.forEach(link => {\n      if (link && this.app) {\n        link.addEventListener('click', (e) => {\n          e.preventDefault();\n          this.toggleSidebar();\n        });\n      }\n    });\n\n    // Handle the main topbar sidebar toggle\n    if (this.sidebarToggleById && this.app) {\n      this.sidebarToggleById.addEventListener('click', (e) => {\n        e.preventDefault();\n        this.toggleSidebar();\n      });\n    }\n  }\n\n  /**\n   * Toggle sidebar and handle resize events properly\n   */\n  toggleSidebar() {\n    this.app.classList.toggle('is-collapsed');\n    \n    // Only trigger resize for masonry, but avoid chart redraw issues\n    setTimeout(() => {\n      // Dispatch a custom event instead of generic resize to avoid chart issues\n      window.dispatchEvent(new CustomEvent('sidebar:toggle', {\n        detail: { collapsed: this.app.classList.contains('is-collapsed') },\n      }));\n      \n      // Still trigger resize for masonry but with a specific check\n      if (window.EVENT) {\n        window.dispatchEvent(window.EVENT);\n      }\n    }, 300);\n  }\n\n  /**\n   * Set active link based on current URL\n   */\n  setActiveLink() {\n    // Remove active class from all nav items (including dropdown items)\n    const allNavItems = this.sidebar.querySelectorAll('.nav-item');\n    allNavItems.forEach(item => {\n      item.classList.remove('actived');\n    });\n\n    // Close all dropdowns first\n    this.closeAllDropdowns();\n\n    // Get current page filename\n    const currentPath = window.location.pathname;\n    const currentPage = currentPath.split('/').pop() || 'index.html';\n    \n    \n    // Find and activate the correct nav item\n    const allLinks = this.sidebar.querySelectorAll('a[href]');\n    \n    allLinks.forEach(link => {\n      const href = link.getAttribute('href');\n      if (!href || href === 'javascript:void(0);' || href === 'javascript:void(0)') return;\n      \n      // Extract filename from href\n      const linkPage = href.split('/').pop();\n      \n      if (linkPage === currentPage) {\n        const navItem = link.closest('.nav-item');\n        if (navItem) {\n          navItem.classList.add('actived');\n          \n          // If this is inside a dropdown, handle parent dropdown specially\n          const parentDropdown = navItem.closest('.dropdown-menu');\n          if (parentDropdown) {\n            const parentDropdownItem = parentDropdown.closest('.nav-item.dropdown');\n            if (parentDropdownItem) {\n              // Open the parent dropdown\n              parentDropdownItem.classList.add('open');\n              parentDropdown.style.display = 'block';\n              \n              // Add special styling to indicate parent has active child\n              parentDropdownItem.classList.add('has-active-child');\n            }\n          }\n        }\n      }\n    });\n    \n  }\n\n  /**\n   * Public method to refresh active links (useful for SPA navigation)\n   */\n  refreshActiveLink() {\n    this.setActiveLink();\n  }\n\n  /**\n   * Public method to toggle sidebar programmatically\n   */\n  toggle() {\n    if (this.app) {\n      this.app.classList.toggle('is-collapsed');\n    }\n  }\n\n  /**\n   * Public method to check if sidebar is collapsed\n   */\n  isCollapsed() {\n    return this.app ? this.app.classList.contains('is-collapsed') : false;\n  }\n}\n\nexport default Sidebar; "
  },
  {
    "path": "src/assets/scripts/constants/colors.js",
    "content": "const COLORS = {\n  'white'                 : '#ffffff',\n  'red-50'                : '#ffebee',\n  'red-100'               : '#ffcdd2',\n  'red-200'               : '#ef9a9a',\n  'red-300'               : '#e57373',\n  'red-400'               : '#ef5350',\n  'red-500'               : '#f44336',\n  'red-600'               : '#e53935',\n  'red-700'               : '#d32f2f',\n  'red-800'               : '#c62828',\n  'red-900'               : '#b71c1c',\n  'red-a100'              : '#ff8a80',\n  'red-a200'              : '#ff5252',\n  'red-a400'              : '#ff1744',\n  'red-a700'              : '#d50000',\n  'pink-50'               : '#fce4ec',\n  'pink-100'              : '#f8bbd0',\n  'pink-200'              : '#f48fb1',\n  'pink-300'              : '#f06292',\n  'pink-400'              : '#ec407a',\n  'pink-500'              : '#e91e63',\n  'pink-600'              : '#d81b60',\n  'pink-700'              : '#c2185b',\n  'pink-800'              : '#ad1457',\n  'pink-900'              : '#880e4f',\n  'pink-a100'             : '#ff80ab',\n  'pink-a200'             : '#ff4081',\n  'pink-a400'             : '#f50057',\n  'pink-a700'             : '#c51162',\n  'purple-50'             : '#f3e5f5',\n  'purple-100'            : '#e1bee7',\n  'purple-200'            : '#ce93d8',\n  'purple-300'            : '#ba68c8',\n  'purple-400'            : '#ab47bc',\n  'purple-500'            : '#9c27b0',\n  'purple-600'            : '#8e24aa',\n  'purple-700'            : '#7b1fa2',\n  'purple-800'            : '#6a1b9a',\n  'purple-900'            : '#4a148c',\n  'purple-a100'           : '#ea80fc',\n  'purple-a200'           : '#e040fb',\n  'purple-a400'           : '#d500f9',\n  'purple-a700'           : '#aa00ff',\n  'deep-purple-50'        : '#ede7f6',\n  'deep-purple-100'       : '#d1c4e9',\n  'deep-purple-200'       : '#b39ddb',\n  'deep-purple-300'       : '#9575cd',\n  'deep-purple-400'       : '#7e57c2',\n  'deep-purple-500'       : '#673ab7',\n  'deep-purple-600'       : '#5e35b1',\n  'deep-purple-700'       : '#512da8',\n  'deep-purple-800'       : '#4527a0',\n  'deep-purple-900'       : '#311b92',\n  'deep-purple-a100'      : '#b388ff',\n  'deep-purple-a200'      : '#7c4dff',\n  'deep-purple-a400'      : '#651fff',\n  'deep-purple-a700'      : '#6200ea',\n  'indigo-50'             : '#e8eaf6',\n  'indigo-100'            : '#c5cae9',\n  'indigo-200'            : '#9fa8da',\n  'indigo-300'            : '#7986cb',\n  'indigo-400'            : '#5c6bc0',\n  'indigo-500'            : '#3f51b5',\n  'indigo-600'            : '#3949ab',\n  'indigo-700'            : '#303f9f',\n  'indigo-800'            : '#283593',\n  'indigo-900'            : '#1a237e',\n  'indigo-a100'           : '#8c9eff',\n  'indigo-a200'           : '#536dfe',\n  'indigo-a400'           : '#3d5afe',\n  'indigo-a700'           : '#304ffe',\n  'blue-50'               : '#e3f2fd',\n  'blue-100'              : '#bbdefb',\n  'blue-200'              : '#90caf9',\n  'blue-300'              : '#64b5f6',\n  'blue-400'              : '#42a5f5',\n  'blue-500'              : '#2196f3',\n  'blue-600'              : '#1e88e5',\n  'blue-700'              : '#1976d2',\n  'blue-800'              : '#1565c0',\n  'blue-900'              : '#0d47a1',\n  'blue-a100'             : '#82b1ff',\n  'blue-a200'             : '#448aff',\n  'blue-a400'             : '#2979ff',\n  'blue-a700'             : '#2962ff',\n  'light-blue-50'         : '#e1f5fe',\n  'light-blue-100'        : '#b3e5fc',\n  'light-blue-200'        : '#81d4fa',\n  'light-blue-300'        : '#4fc3f7',\n  'light-blue-400'        : '#29b6f6',\n  'light-blue-500'        : '#03a9f4',\n  'light-blue-600'        : '#039be5',\n  'light-blue-700'        : '#0288d1',\n  'light-blue-800'        : '#0277bd',\n  'light-blue-900'        : '#01579b',\n  'light-blue-a100'       : '#80d8ff',\n  'light-blue-a200'       : '#40c4ff',\n  'light-blue-a400'       : '#00b0ff',\n  'light-blue-a700'       : '#0091ea',\n  'cyan-50'               : '#e0f7fa',\n  'cyan-100'              : '#b2ebf2',\n  'cyan-200'              : '#80deea',\n  'cyan-300'              : '#4dd0e1',\n  'cyan-400'              : '#26c6da',\n  'cyan-500'              : '#00bcd4',\n  'cyan-600'              : '#00acc1',\n  'cyan-700'              : '#0097a7',\n  'cyan-800'              : '#00838f',\n  'cyan-900'              : '#006064',\n  'cyan-a100'             : '#84ffff',\n  'cyan-a200'             : '#18ffff',\n  'cyan-a400'             : '#00e5ff',\n  'cyan-a700'             : '#00b8d4',\n  'teal-50'               : '#e0f2f1',\n  'teal-100'              : '#b2dfdb',\n  'teal-200'              : '#80cbc4',\n  'teal-300'              : '#4db6ac',\n  'teal-400'              : '#26a69a',\n  'teal-500'              : '#009688',\n  'teal-600'              : '#00897b',\n  'teal-700'              : '#00796b',\n  'teal-800'              : '#00695c',\n  'teal-900'              : '#004d40',\n  'teal-a100'             : '#a7ffeb',\n  'teal-a200'             : '#64ffda',\n  'teal-a400'             : '#1de9b6',\n  'teal-a700'             : '#00bfa5',\n  'green-50'              : '#e8f5e9',\n  'green-100'             : '#c8e6c9',\n  'green-200'             : '#a5d6a7',\n  'green-300'             : '#81c784',\n  'green-400'             : '#66bb6a',\n  'green-500'             : '#4caf50',\n  'green-600'             : '#43a047',\n  'green-700'             : '#388e3c',\n  'green-800'             : '#2e7d32',\n  'green-900'             : '#1b5e20',\n  'green-a100'            : '#b9f6ca',\n  'green-a200'            : '#69f0ae',\n  'green-a400'            : '#00e676',\n  'green-a700'            : '#00c853',\n  'light-green-50'        : '#f1f8e9',\n  'light-green-100'       : '#dcedc8',\n  'light-green-200'       : '#c5e1a5',\n  'light-green-300'       : '#aed581',\n  'light-green-400'       : '#9ccc65',\n  'light-green-500'       : '#8bc34a',\n  'light-green-600'       : '#7cb342',\n  'light-green-700'       : '#689f38',\n  'light-green-800'       : '#558b2f',\n  'light-green-900'       : '#33691e',\n  'light-green-a100'      : '#ccff90',\n  'light-green-a200'      : '#b2ff59',\n  'light-green-a400'      : '#76ff03',\n  'light-green-a700'      : '#64dd17',\n  'lime-50'               : '#f9fbe7',\n  'lime-100'              : '#f0f4c3',\n  'lime-200'              : '#e6ee9c',\n  'lime-300'              : '#dce775',\n  'lime-400'              : '#d4e157',\n  'lime-500'              : '#cddc39',\n  'lime-600'              : '#c0ca33',\n  'lime-700'              : '#afb42b',\n  'lime-800'              : '#9e9d24',\n  'lime-900'              : '#827717',\n  'lime-a100'             : '#f4ff81',\n  'lime-a200'             : '#eeff41',\n  'lime-a400'             : '#c6ff00',\n  'lime-a700'             : '#aeea00',\n  'yellow-50'             : '#fffde7',\n  'yellow-100'            : '#fff9c4',\n  'yellow-200'            : '#fff59d',\n  'yellow-300'            : '#fff176',\n  'yellow-400'            : '#ffee58',\n  'yellow-500'            : '#ffeb3b',\n  'yellow-600'            : '#fdd835',\n  'yellow-700'            : '#fbc02d',\n  'yellow-800'            : '#f9a825',\n  'yellow-900'            : '#f57f17',\n  'yellow-a100'           : '#ffff8d',\n  'yellow-a200'           : '#ffff00',\n  'yellow-a400'           : '#ffea00',\n  'yellow-a700'           : '#ffd600',\n  'amber-50'              : '#fff8e1',\n  'amber-100'             : '#ffecb3',\n  'amber-200'             : '#ffe082',\n  'amber-300'             : '#ffd54f',\n  'amber-400'             : '#ffca28',\n  'amber-500'             : '#ffc107',\n  'amber-600'             : '#ffb300',\n  'amber-700'             : '#ffa000',\n  'amber-800'             : '#ff8f00',\n  'amber-900'             : '#ff6f00',\n  'amber-a100'            : '#ffe57f',\n  'amber-a200'            : '#ffd740',\n  'amber-a400'            : '#ffc400',\n  'amber-a700'            : '#ffab00',\n  'orange-50'             : '#fff3e0',\n  'orange-100'            : '#ffe0b2',\n  'orange-200'            : '#ffcc80',\n  'orange-300'            : '#ffb74d',\n  'orange-400'            : '#ffa726',\n  'orange-500'            : '#ff9800',\n  'orange-600'            : '#fb8c00',\n  'orange-700'            : '#f57c00',\n  'orange-800'            : '#ef6c00',\n  'orange-900'            : '#e65100',\n  'orange-a100'           : '#ffd180',\n  'orange-a200'           : '#ffab40',\n  'orange-a400'           : '#ff9100',\n  'orange-a700'           : '#ff6d00',\n  'deep-orange-50'        : '#fbe9e7',\n  'deep-orange-100'       : '#ffccbc',\n  'deep-orange-200'       : '#ffab91',\n  'deep-orange-300'       : '#ff8a65',\n  'deep-orange-400'       : '#ff7043',\n  'deep-orange-500'       : '#ff5722',\n  'deep-orange-600'       : '#f4511e',\n  'deep-orange-700'       : '#e64a19',\n  'deep-orange-800'       : '#d84315',\n  'deep-orange-900'       : '#bf360c',\n  'deep-orange-a100'      : '#ff9e80',\n  'deep-orange-a200'      : '#ff6e40',\n  'deep-orange-a400'      : '#ff3d00',\n  'deep-orange-a700'      : '#dd2c00',\n  'brown-50'              : '#efebe9',\n  'brown-100'             : '#d7ccc8',\n  'brown-200'             : '#bcaaa4',\n  'brown-300'             : '#a1887f',\n  'brown-400'             : '#8d6e63',\n  'brown-500'             : '#795548',\n  'brown-600'             : '#6d4c41',\n  'brown-700'             : '#5d4037',\n  'brown-800'             : '#4e342e',\n  'brown-900'             : '#3e2723',\n  'grey-50'               : '#fafafa',\n  'grey-100'              : '#f5f5f5',\n  'grey-200'              : '#eeeeee',\n  'grey-300'              : '#e0e0e0',\n  'grey-400'              : '#bdbdbd',\n  'grey-500'              : '#9e9e9e',\n  'grey-600'              : '#757575',\n  'grey-700'              : '#616161',\n  'grey-800'              : '#424242',\n  'grey-900'              : '#212121',\n  'blue-grey-50'          : '#eceff1',\n  'blue-grey-100'         : '#cfd8dc',\n  'blue-grey-200'         : '#b0bec5',\n  'blue-grey-300'         : '#90a4ae',\n  'blue-grey-400'         : '#78909c',\n  'blue-grey-500'         : '#607d8b',\n  'blue-grey-600'         : '#546e7a',\n  'blue-grey-700'         : '#455a64',\n  'blue-grey-800'         : '#37474f',\n  'blue-grey-900'         : '#263238',\n};\n\nconst GREYS = {\n  'grey-100' : '#f9fafb',\n  'grey-200' : '#f2f3f5',\n  'grey-300' : '#e6eaf0',\n  'grey-400' : '#d3d9e3',\n  'grey-500' : '#b9c2d0',\n  'grey-600' : '#7c8695',\n  'grey-700' : '#72777a',\n  'grey-800' : '#565a5c',\n  'grey-900' : '#313435',\n};\n\nexport {\n  COLORS,\n  GREYS,\n};\n"
  },
  {
    "path": "src/assets/scripts/datatable/index.js",
    "content": "// DataTable implementation\n\nexport default (function () {\n  \n  // Vanilla JS DataTable implementation\n  class VanillaDataTable {\n    constructor(element, options = {}) {\n      this.element = element;\n      this.options = {\n        sortable: true,\n        searchable: true,\n        pagination: true,\n        pageSize: 10,\n        ...options,\n      };\n      \n      this.originalData = [];\n      this.filteredData = [];\n      this.currentPage = 1;\n      this.sortColumn = null;\n      this.sortDirection = 'asc';\n      \n      this.init();\n    }\n    \n    init() {\n      this.extractData();\n      this.createControls();\n      this.applyStyles();\n      this.bindEvents();\n      this.render();\n    }\n    \n    extractData() {\n      const rows = this.element.querySelectorAll('tbody tr');\n      this.originalData = Array.from(rows).map(row => {\n        const cells = row.querySelectorAll('td');\n        return Array.from(cells).map(cell => cell.textContent.trim());\n      });\n      this.filteredData = [...this.originalData];\n    }\n    \n    createControls() {\n      const wrapper = document.createElement('div');\n      wrapper.className = 'datatable-wrapper';\n      \n      // Create search input\n      if (this.options.searchable) {\n        const searchWrapper = document.createElement('div');\n        searchWrapper.className = 'datatable-search';\n        searchWrapper.innerHTML = `\n          <label>\n            Search: \n            <input type=\"text\" class=\"form-control\" placeholder=\"Search...\">\n          </label>\n        `;\n        wrapper.appendChild(searchWrapper);\n      }\n      \n      // Create pagination info\n      if (this.options.pagination) {\n        const infoWrapper = document.createElement('div');\n        infoWrapper.className = 'datatable-info';\n        wrapper.appendChild(infoWrapper);\n      }\n      \n      // Wrap the table\n      this.element.parentNode.insertBefore(wrapper, this.element);\n      wrapper.appendChild(this.element);\n      \n      // Create pagination controls\n      if (this.options.pagination) {\n        const paginationWrapper = document.createElement('div');\n        paginationWrapper.className = 'datatable-pagination';\n        wrapper.appendChild(paginationWrapper);\n      }\n      \n      this.wrapper = wrapper;\n    }\n    \n    applyStyles() {\n      // Apply Bootstrap-like styles\n      this.element.classList.add('table', 'table-striped', 'table-bordered');\n      \n      // Add custom styles\n      const style = document.createElement('style');\n      style.textContent = `\n        .datatable-wrapper {\n          margin: 20px 0;\n        }\n        \n        .datatable-search {\n          margin-bottom: 15px;\n        }\n        \n        .datatable-search input {\n          width: 250px;\n          display: inline-block;\n          margin-left: 5px;\n        }\n        \n        .datatable-info {\n          margin-top: 15px;\n          color: var(--c-text-muted, #6c757d);\n          font-size: 14px;\n        }\n        \n        .datatable-pagination {\n          margin-top: 15px;\n          display: flex;\n          justify-content: center;\n        }\n        \n        .datatable-pagination button {\n          background: var(--c-bkg-card, #fff);\n          border: 1px solid var(--c-border, #dee2e6);\n          color: var(--c-text-base, #333);\n          padding: 6px 12px;\n          margin: 0 2px;\n          cursor: pointer;\n          border-radius: 4px;\n        }\n        \n        .datatable-pagination button:hover {\n          background: var(--c-primary, #007bff);\n          color: white;\n        }\n        \n        .datatable-pagination button.active {\n          background: var(--c-primary, #007bff);\n          color: white;\n        }\n        \n        .datatable-pagination button:disabled {\n          opacity: 0.6;\n          cursor: not-allowed;\n        }\n        \n        .datatable-sort {\n          cursor: pointer;\n          user-select: none;\n          position: relative;\n        }\n        \n        .datatable-sort:hover {\n          background: var(--c-bkg-card, #f8f9fa);\n        }\n        \n        .datatable-sort::after {\n          content: '↕';\n          position: absolute;\n          right: 8px;\n          opacity: 0.5;\n        }\n        \n        .datatable-sort.asc::after {\n          content: '↑';\n          opacity: 1;\n        }\n        \n        .datatable-sort.desc::after {\n          content: '↓';\n          opacity: 1;\n        }\n      `;\n      document.head.appendChild(style);\n    }\n    \n    bindEvents() {\n      // Search functionality\n      if (this.options.searchable) {\n        const searchInput = this.wrapper.querySelector('.datatable-search input');\n        searchInput.addEventListener('input', (e) => {\n          this.search(e.target.value);\n        });\n      }\n      \n      // Sorting functionality\n      if (this.options.sortable) {\n        const headers = this.element.querySelectorAll('thead th');\n        headers.forEach((header, index) => {\n          header.classList.add('datatable-sort');\n          header.addEventListener('click', () => {\n            this.sort(index);\n          });\n        });\n      }\n    }\n    \n    search(query) {\n      if (!query) {\n        this.filteredData = [...this.originalData];\n      } else {\n        this.filteredData = this.originalData.filter(row => \n          row.some(cell => \n            cell.toLowerCase().includes(query.toLowerCase())\n          )\n        );\n      }\n      this.currentPage = 1;\n      this.render();\n    }\n    \n    sort(columnIndex) {\n      if (this.sortColumn === columnIndex) {\n        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';\n      } else {\n        this.sortColumn = columnIndex;\n        this.sortDirection = 'asc';\n      }\n      \n      this.filteredData.sort((a, b) => {\n        const aVal = a[columnIndex];\n        const bVal = b[columnIndex];\n        \n        // Try to parse as numbers\n        const aNum = parseFloat(aVal);\n        const bNum = parseFloat(bVal);\n        \n        let comparison = 0;\n        if (!isNaN(aNum) && !isNaN(bNum)) {\n          comparison = aNum - bNum;\n        } else {\n          comparison = aVal.localeCompare(bVal);\n        }\n        \n        return this.sortDirection === 'asc' ? comparison : -comparison;\n      });\n      \n      this.updateSortHeaders();\n      this.render();\n    }\n    \n    updateSortHeaders() {\n      const headers = this.element.querySelectorAll('thead th');\n      headers.forEach((header, index) => {\n        header.classList.remove('asc', 'desc');\n        if (index === this.sortColumn) {\n          header.classList.add(this.sortDirection);\n        }\n      });\n    }\n    \n    render() {\n      const tbody = this.element.querySelector('tbody');\n      const startIndex = (this.currentPage - 1) * this.options.pageSize;\n      const endIndex = startIndex + this.options.pageSize;\n      const pageData = this.filteredData.slice(startIndex, endIndex);\n      \n      // Clear tbody\n      tbody.innerHTML = '';\n      \n      // Add rows\n      pageData.forEach(rowData => {\n        const row = document.createElement('tr');\n        rowData.forEach(cellData => {\n          const cell = document.createElement('td');\n          cell.textContent = cellData;\n          row.appendChild(cell);\n        });\n        tbody.appendChild(row);\n      });\n      \n      // Update pagination\n      if (this.options.pagination) {\n        this.updatePagination();\n      }\n      \n      // Update info\n      this.updateInfo();\n    }\n    \n    updatePagination() {\n      const totalPages = Math.ceil(this.filteredData.length / this.options.pageSize);\n      const paginationWrapper = this.wrapper.querySelector('.datatable-pagination');\n      \n      paginationWrapper.innerHTML = '';\n      \n      if (totalPages <= 1) return;\n      \n      // Previous button\n      const prevBtn = document.createElement('button');\n      prevBtn.textContent = 'Previous';\n      prevBtn.disabled = this.currentPage === 1;\n      prevBtn.addEventListener('click', () => {\n        if (this.currentPage > 1) {\n          this.currentPage--;\n          this.render();\n        }\n      });\n      paginationWrapper.appendChild(prevBtn);\n      \n      // Page numbers\n      for (let i = 1; i <= totalPages; i++) {\n        const pageBtn = document.createElement('button');\n        pageBtn.textContent = i;\n        pageBtn.classList.toggle('active', i === this.currentPage);\n        pageBtn.addEventListener('click', () => {\n          this.currentPage = i;\n          this.render();\n        });\n        paginationWrapper.appendChild(pageBtn);\n      }\n      \n      // Next button\n      const nextBtn = document.createElement('button');\n      nextBtn.textContent = 'Next';\n      nextBtn.disabled = this.currentPage === totalPages;\n      nextBtn.addEventListener('click', () => {\n        if (this.currentPage < totalPages) {\n          this.currentPage++;\n          this.render();\n        }\n      });\n      paginationWrapper.appendChild(nextBtn);\n    }\n    \n    updateInfo() {\n      const infoWrapper = this.wrapper.querySelector('.datatable-info');\n      if (!infoWrapper) return;\n      \n      const startIndex = (this.currentPage - 1) * this.options.pageSize + 1;\n      const endIndex = Math.min(startIndex + this.options.pageSize - 1, this.filteredData.length);\n      const total = this.filteredData.length;\n      \n      infoWrapper.textContent = `Showing ${startIndex} to ${endIndex} of ${total} entries`;\n    }\n    \n    destroy() {\n      if (this.wrapper && this.wrapper.parentNode) {\n        this.wrapper.parentNode.replaceChild(this.element, this.wrapper);\n      }\n    }\n  }\n  \n  // Initialize DataTable\n  const initializeDataTable = () => {\n    const tableElement = document.getElementById('dataTable');\n    if (tableElement) {\n      // Clean up existing instance\n      if (tableElement.dataTableInstance) {\n        tableElement.dataTableInstance.destroy();\n      }\n      \n      // Create new instance\n      const dataTable = new VanillaDataTable(tableElement, {\n        sortable: true,\n        searchable: true,\n        pagination: true,\n        pageSize: 10,\n      });\n      \n      // Store instance for cleanup\n      tableElement.dataTableInstance = dataTable;\n    }\n  };\n  \n  // Initialize on load\n  initializeDataTable();\n  \n  // Reinitialize on theme change\n  window.addEventListener('adminator:themeChanged', () => {\n    setTimeout(initializeDataTable, 100);\n  });\n  \n  // Cleanup on page unload\n  window.addEventListener('beforeunload', () => {\n    const tableElement = document.getElementById('dataTable');\n    if (tableElement && tableElement.dataTableInstance) {\n      tableElement.dataTableInstance.destroy();\n    }\n  });\n  \n  // Return public API\n  return {\n    init: initializeDataTable,\n    VanillaDataTable,\n  };\n}());"
  },
  {
    "path": "src/assets/scripts/datepicker/index.js",
    "content": "import DateUtils from '../utils/date.js';\n\nexport default (function () {\n  \n  // Enhanced HTML5 date picker with vanilla JS\n  class VanillaDatePicker {\n    constructor(element, options = {}) {\n      this.element = element;\n      this.options = {\n        format: 'yyyy-mm-dd',\n        autoclose: true,\n        todayHighlight: true,\n        ...options,\n      };\n      \n      this.init();\n    }\n    \n    init() {\n      this.convertToHTML5();\n      this.enhanceInput();\n      this.applyStyles();\n      this.bindEvents();\n    }\n    \n    convertToHTML5() {\n      // Convert input to HTML5 date type\n      this.element.type = 'date';\n      this.element.classList.add('form-control', 'vanilla-datepicker');\n      \n      // Remove placeholder since HTML5 date inputs don't need it\n      this.element.removeAttribute('placeholder');\n      \n      // Set default value to today if no value is set\n      if (!this.element.value) {\n        this.element.value = DateUtils.form.toInputValue(DateUtils.now());\n      }\n      \n      // Ensure proper styling\n      this.element.style.minHeight = '38px';\n      this.element.style.lineHeight = '1.5';\n      this.element.style.cursor = 'pointer';\n    }\n    \n    enhanceInput() {\n      // Create wrapper for enhanced functionality\n      const wrapper = document.createElement('div');\n      wrapper.className = 'vanilla-datepicker-wrapper';\n      wrapper.style.position = 'relative';\n      \n      // Wrap the input\n      this.element.parentNode.insertBefore(wrapper, this.element);\n      wrapper.appendChild(this.element);\n      \n      // Add calendar icon if input is in an input group\n      const inputGroup = this.element.closest('.input-group');\n      if (inputGroup) {\n        const calendarIcon = inputGroup.querySelector('.input-group-text i.ti-calendar');\n        if (calendarIcon) {\n          calendarIcon.addEventListener('click', (e) => {\n            e.preventDefault();\n            e.stopPropagation();\n            this.openPicker();\n          });\n        }\n      }\n      \n      this.wrapper = wrapper;\n    }\n    \n    applyStyles() {\n      // Add custom styles for enhanced appearance\n      const style = document.createElement('style');\n      style.textContent = `\n        .vanilla-datepicker-wrapper {\n          position: relative;\n        }\n        \n        .vanilla-datepicker {\n          width: 100%;\n          padding: 6px 12px;\n          border: 1px solid var(--c-border, #ced4da);\n          border-radius: 4px;\n          background-color: var(--c-bkg-card, #fff);\n          color: var(--c-text-base, #495057);\n          font-size: 14px;\n          transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n        }\n        \n        .vanilla-datepicker:focus {\n          outline: none;\n          border-color: var(--c-primary, #007bff);\n          box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);\n        }\n        \n        .vanilla-datepicker::-webkit-calendar-picker-indicator {\n          cursor: pointer;\n          border-radius: 4px;\n          margin-right: 2px;\n          opacity: 0.6;\n          transition: opacity 0.15s ease-in-out;\n        }\n        \n        .vanilla-datepicker::-webkit-calendar-picker-indicator:hover {\n          opacity: 1;\n        }\n        \n        .vanilla-datepicker::-webkit-datetime-edit-fields-wrapper {\n          padding: 0;\n        }\n        \n        .vanilla-datepicker::-webkit-datetime-edit-month-field,\n        .vanilla-datepicker::-webkit-datetime-edit-day-field,\n        .vanilla-datepicker::-webkit-datetime-edit-year-field {\n          color: var(--c-text-base, #495057);\n        }\n        \n        .vanilla-datepicker::-webkit-datetime-edit-text {\n          color: var(--c-text-muted, #6c757d);\n        }\n        \n        /* Dark mode support */\n        [data-theme=\"dark\"] .vanilla-datepicker {\n          background-color: var(--c-bkg-card, #1f2937);\n          color: var(--c-text-base, #f9fafb);\n          border-color: var(--c-border, #374151);\n        }\n        \n        [data-theme=\"dark\"] .vanilla-datepicker::-webkit-calendar-picker-indicator {\n          filter: invert(1);\n        }\n        \n        .datepicker-today-indicator {\n          position: absolute;\n          top: 2px;\n          right: 8px;\n          width: 6px;\n          height: 6px;\n          background-color: var(--c-primary, #007bff);\n          border-radius: 50%;\n          opacity: 0.8;\n          pointer-events: none;\n        }\n        \n        .datepicker-animation {\n          animation: datepicker-highlight 0.3s ease-in-out;\n        }\n        \n        @keyframes datepicker-highlight {\n          0% { transform: scale(1); }\n          50% { transform: scale(1.02); }\n          100% { transform: scale(1); }\n        }\n      `;\n      \n      // Only add the style if it doesn't exist\n      if (!document.querySelector('style[data-vanilla-datepicker-styles]')) {\n        style.setAttribute('data-vanilla-datepicker-styles', 'true');\n        document.head.appendChild(style);\n      }\n    }\n    \n    bindEvents() {\n      // Handle click events\n      this.element.addEventListener('click', () => {\n        this.openPicker();\n      });\n      \n      // Handle keyboard events\n      this.element.addEventListener('keydown', (e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          this.openPicker();\n        }\n      });\n      \n      // Handle change events\n      this.element.addEventListener('change', (e) => {\n        this.handleDateChange(e);\n      });\n      \n      // Handle focus events\n      this.element.addEventListener('focus', () => {\n        this.element.classList.add('datepicker-animation');\n        setTimeout(() => {\n          this.element.classList.remove('datepicker-animation');\n        }, 300);\n      });\n    }\n    \n    openPicker() {\n      this.element.focus();\n      \n      // Try to open the native date picker\n      if (this.element.showPicker && typeof this.element.showPicker === 'function') {\n        try {\n          this.element.showPicker();\n        } catch {\n          // Fallback for browsers that don't support showPicker\n        }\n      }\n    }\n    \n    handleDateChange(e) {\n      const selectedDate = e.target.value;\n      \n      if (selectedDate) {\n        // Add visual feedback\n        this.element.classList.add('datepicker-animation');\n        setTimeout(() => {\n          this.element.classList.remove('datepicker-animation');\n        }, 300);\n        \n        // Trigger custom event\n        const changeEvent = new CustomEvent('datepicker:change', {\n          detail: {\n            date: selectedDate,\n            formattedDate: this.formatDate(selectedDate),\n          },\n        });\n        this.element.dispatchEvent(changeEvent);\n      }\n    }\n    \n    formatDate(dateString) {\n      const date = new Date(dateString);\n      return DateUtils.format(date, this.options.format);\n    }\n    \n    setDate(dateString) {\n      this.element.value = dateString;\n      this.handleDateChange({ target: this.element });\n    }\n    \n    getDate() {\n      return this.element.value;\n    }\n    \n    destroy() {\n      if (this.wrapper && this.wrapper.parentNode) {\n        this.wrapper.parentNode.replaceChild(this.element, this.wrapper);\n      }\n    }\n  }\n  \n  // Initialize date pickers\n  const initializeDatePickers = () => {\n    // Start date pickers\n    const startDateElements = document.querySelectorAll('.start-date');\n    startDateElements.forEach(element => {\n      if (element.vanillaDatePicker) {\n        element.vanillaDatePicker.destroy();\n      }\n      \n      const datePicker = new VanillaDatePicker(element, {\n        format: 'yyyy-mm-dd',\n        autoclose: true,\n        todayHighlight: true,\n      });\n      \n      element.vanillaDatePicker = datePicker;\n    });\n    \n    // End date pickers\n    const endDateElements = document.querySelectorAll('.end-date');\n    endDateElements.forEach(element => {\n      if (element.vanillaDatePicker) {\n        element.vanillaDatePicker.destroy();\n      }\n      \n      const datePicker = new VanillaDatePicker(element, {\n        format: 'yyyy-mm-dd',\n        autoclose: true,\n        todayHighlight: true,\n      });\n      \n      element.vanillaDatePicker = datePicker;\n    });\n  };\n  \n  // Initialize on load\n  initializeDatePickers();\n  \n  // Reinitialize on theme change\n  window.addEventListener('adminator:themeChanged', () => {\n    setTimeout(initializeDatePickers, 100);\n  });\n  \n  // Cleanup on page unload\n  window.addEventListener('beforeunload', () => {\n    document.querySelectorAll('.start-date, .end-date').forEach(element => {\n      if (element.vanillaDatePicker) {\n        element.vanillaDatePicker.destroy();\n      }\n    });\n  });\n  \n  // Return public API\n  return {\n    init: initializeDatePickers,\n    VanillaDatePicker,\n  };\n}());"
  },
  {
    "path": "src/assets/scripts/email/index.js",
    "content": "export default (function () {\n  // Email side toggle functionality\n  const emailSideToggle = document.querySelector('.email-side-toggle');\n  const emailApp = document.querySelector('.email-app');\n  \n  if (emailSideToggle && emailApp) {\n    emailSideToggle.addEventListener('click', e => {\n      emailApp.classList.toggle('side-active');\n      e.preventDefault();\n    });\n  }\n\n  // Email list item and back to mailbox functionality\n  const emailListItems = document.querySelectorAll('.email-list-item, .back-to-mailbox');\n  const emailContent = document.querySelector('.email-content');\n  \n  if (emailListItems.length > 0 && emailContent) {\n    emailListItems.forEach(item => {\n      item.addEventListener('click', e => {\n        emailContent.classList.toggle('open');\n        e.preventDefault();\n      });\n    });\n  }\n}())\n"
  },
  {
    "path": "src/assets/scripts/fullcalendar/index.js",
    "content": "import { Calendar } from '@fullcalendar/core';\nimport interactionPlugin from '@fullcalendar/interaction';\nimport dayGridPlugin from '@fullcalendar/daygrid';\nimport timeGridPlugin from '@fullcalendar/timegrid';\nimport listPlugin from '@fullcalendar/list';\nimport DateUtils from '../utils/date';\n\ndocument.addEventListener('DOMContentLoaded', function () {\n  const calendarEl = document.getElementById('calendar');\n\n  // element found in dom ?\n  if (calendarEl == null) {\n    return;\n  }\n\n  const calendar = new Calendar(calendarEl, {\n    plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin],\n    headerToolbar: {\n      left: 'prev,next today',\n      center: 'title',\n      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',\n    },\n    initialDate: DateUtils.format(DateUtils.now(), 'YYYY-MM-DD'),\n    navLinks: true, // can click day/week names to navigate views\n    editable: true,\n    dayMaxEvents: true, // allow \"more\" link when too many events\n    events: [\n      {\n        title: 'All Day Event',\n        start: DateUtils.format(DateUtils.now(), 'YYYY-MM-DD'),\n      },\n      {\n        title: 'Long Event',\n        start: DateUtils.format(DateUtils.add(DateUtils.now(), 1, 'day'), 'YYYY-MM-DD'),\n        end: DateUtils.format(DateUtils.add(DateUtils.now(), 4, 'day'), 'YYYY-MM-DD'),\n      },\n      {\n        groupId: 999,\n        title: 'Repeating Event',\n        start: DateUtils.format(DateUtils.add(DateUtils.now(), 2, 'day'), 'YYYY-MM-DDTHH:mm:ss').replace(/:\\d{2}$/, ':00:00').replace(/T\\d{2}:\\d{2}/, 'T16:00'),\n      },\n      {\n        groupId: 999,\n        title: 'Repeating Event',\n        start: DateUtils.format(DateUtils.add(DateUtils.now(), 9, 'day'), 'YYYY-MM-DDTHH:mm:ss').replace(/:\\d{2}$/, ':00:00').replace(/T\\d{2}:\\d{2}/, 'T16:00'),\n      },\n      {\n        title: 'Conference',\n        start: DateUtils.format(DateUtils.add(DateUtils.now(), 5, 'day'), 'YYYY-MM-DD'),\n        end: DateUtils.format(DateUtils.add(DateUtils.now(), 7, 'day'), 'YYYY-MM-DD'),\n      },\n      {\n        title: 'Meeting',\n        start: DateUtils.format(DateUtils.add(DateUtils.now(), 3, 'day'), 'YYYY-MM-DDTHH:mm:ss').replace(/:\\d{2}$/, ':00:00').replace(/T\\d{2}:\\d{2}/, 'T10:30'),\n        end: DateUtils.format(DateUtils.add(DateUtils.now(), 3, 'day'), 'YYYY-MM-DDTHH:mm:ss').replace(/:\\d{2}$/, ':00:00').replace(/T\\d{2}:\\d{2}/, 'T12:30'),\n      },\n      {\n        title: 'Lunch',\n        start: DateUtils.format(DateUtils.add(DateUtils.now(), 3, 'day'), 'YYYY-MM-DDTHH:mm:ss').replace(/:\\d{2}$/, ':00:00').replace(/T\\d{2}:\\d{2}/, 'T12:00'),\n      },\n      {\n        title: 'Meeting',\n        start: DateUtils.format(DateUtils.add(DateUtils.now(), 3, 'day'), 'YYYY-MM-DDTHH:mm:ss').replace(/:\\d{2}$/, ':00:00').replace(/T\\d{2}:\\d{2}/, 'T14:30'),\n      },\n      {\n        title: 'Happy Hour',\n        start: DateUtils.format(DateUtils.add(DateUtils.now(), 3, 'day'), 'YYYY-MM-DDTHH:mm:ss').replace(/:\\d{2}$/, ':00:00').replace(/T\\d{2}:\\d{2}/, 'T17:30'),\n      },\n      {\n        title: 'Dinner',\n        start: DateUtils.format(DateUtils.add(DateUtils.now(), 3, 'day'), 'YYYY-MM-DDTHH:mm:ss').replace(/:\\d{2}$/, ':00:00').replace(/T\\d{2}:\\d{2}/, 'T20:00'),\n      },\n      {\n        title: 'Birthday Party',\n        start: DateUtils.format(DateUtils.add(DateUtils.now(), 4, 'day'), 'YYYY-MM-DDTHH:mm:ss').replace(/:\\d{2}$/, ':00:00').replace(/T\\d{2}:\\d{2}/, 'T07:00'),\n      },\n      {\n        title: 'Click for Google',\n        url: 'http://google.com/',\n        start: DateUtils.format(DateUtils.add(DateUtils.now(), 14, 'day'), 'YYYY-MM-DD'),\n      },\n    ],\n  });\n\n  calendar.render();\n});\n"
  },
  {
    "path": "src/assets/scripts/googleMaps/index.js",
    "content": "import loadGoogleMapsAPI  from 'load-google-maps-api';\nimport Theme from '../utils/theme.js';\n\nexport default (function () {\n  let map, marker;\n  \n  const initGoogleMap = () => {\n    const googleMapElement = document.getElementById('google-map');\n    if (googleMapElement) {\n      loadGoogleMapsAPI({\n        key: 'AIzaSyDW8td30_gj6sGXjiMU0ALeMu1SDEwUnEA',\n      }).then(() => {\n        const latitude  = 26.8206;\n        const longitude = 30.8025;\n        const mapZoom   = 5;\n        const { google }    = window;\n\n        const mapOptions = {\n          center    : new google.maps.LatLng(latitude, longitude),\n          zoom      : mapZoom,\n          mapTypeId : google.maps.MapTypeId.ROADMAP,\n          styles: [{\n            'featureType': 'landscape',\n            'stylers': [\n              { 'hue'        : Theme.getCSSVar('--gmap-landscape-hue') },\n              { 'saturation' : 43.400000000000006 },\n              { 'lightness'  : 37.599999999999994 },\n              { 'gamma'      : 1 },\n            ],\n          }, {\n            'featureType': 'road.highway',\n            'stylers': [\n              { 'hue'        : Theme.getCSSVar('--gmap-highway-hue') },\n              { 'saturation' : -61.8 },\n              { 'lightness'  : 45.599999999999994 },\n              { 'gamma'      : 1 },\n            ],\n          }, {\n            'featureType': 'road.arterial',\n            'stylers': [\n              { 'hue'        : Theme.getCSSVar('--gmap-road-hue') },\n              { 'saturation' : -100 },\n              { 'lightness'  : 51.19999999999999 },\n              { 'gamma'      : 1 },\n            ],\n          }, {\n            'featureType': 'road.local',\n            'stylers': [\n              { 'hue'        : Theme.getCSSVar('--gmap-road-hue') },\n              { 'saturation' : -100 },\n              { 'lightness'  : 52 },\n              { 'gamma'      : 1 },\n            ],\n          }, {\n            'featureType': 'water',\n            'stylers': [\n              { 'hue'        : Theme.getCSSVar('--gmap-water-hue') },\n              { 'saturation' : -13.200000000000003 },\n              { 'lightness'  : 2.4000000000000057 },\n              { 'gamma'      : 1 },\n            ],\n          }, {\n            'featureType': 'poi',\n            'stylers': [\n              { 'hue'        : Theme.getCSSVar('--gmap-poi-hue') },\n              { 'saturation' : -1.0989010989011234 },\n              { 'lightness'  : 11.200000000000017 },\n              { 'gamma'      : 1 },\n            ],\n          }],\n        };\n\n        map = new google.maps.Map(document.getElementById('google-map'), mapOptions);\n\n        if (marker) {\n          marker.setMap(null);\n        }\n\n        marker = new google.maps.Marker({\n          map,\n          position : new google.maps.LatLng(latitude, longitude),\n          visible  : true,\n        });\n      });\n    }\n  };\n  \n  // Initialize Google Maps\n  initGoogleMap();\n  \n  // Listen for theme changes\n  window.addEventListener('adminator:themeChanged', initGoogleMap);\n}())\n"
  },
  {
    "path": "src/assets/scripts/index.js",
    "content": "/**\n * Adminator Admin Template\n * Modern Entry Point - Phase 2 Modernization\n */\n\n// Import the modern application\nimport './app.js';\n\n// Legacy imports that haven't been modernized yet\n// These will be gradually replaced in future iterations\nimport './datatable';\n// import './datepicker'; // REMOVED: Replaced with modern day.js implementation in app.js\n\n// Note: The following have been modernized and are now handled by app.js:\n// - sidebar (now Sidebar component)\n// - charts (now ChartComponent using Chart.js instead of jQuery Sparkline)\n// - Basic DOM utilities (now DOM utils)\n\n"
  },
  {
    "path": "src/assets/scripts/masonry/index.js",
    "content": "import Masonry from 'masonry-layout';\n\nexport default (function () {\n  window.addEventListener('load', () => {\n    const masonryElement = document.querySelector('.masonry');\n    if (masonryElement) {\n      new Masonry(masonryElement, {\n        itemSelector: '.masonry-item',\n        columnWidth: '.masonry-sizer',\n        percentPosition: true,\n      });\n    }\n  });\n}());\n"
  },
  {
    "path": "src/assets/scripts/popover/index.js",
    "content": "// Simple vanilla JS tooltip and popover implementation\nexport default (function () {\n  \n  // Simple tooltip implementation\n  function initTooltips() {\n    const tooltipElements = document.querySelectorAll('[data-bs-toggle=\"tooltip\"]');\n    \n    tooltipElements.forEach(element => {\n      const tooltipText = element.getAttribute('data-bs-title') || element.getAttribute('title');\n      \n      if (tooltipText) {\n        element.addEventListener('mouseenter', function() {\n          const tooltip = document.createElement('div');\n          tooltip.className = 'custom-tooltip';\n          tooltip.textContent = tooltipText;\n          tooltip.style.cssText = `\n            position: absolute;\n            background: #000;\n            color: #fff;\n            padding: 4px 8px;\n            border-radius: 4px;\n            font-size: 12px;\n            z-index: 1050;\n            pointer-events: none;\n            white-space: nowrap;\n          `;\n          \n          document.body.appendChild(tooltip);\n          \n          const rect = element.getBoundingClientRect();\n          tooltip.style.left = `${rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2)  }px`;\n          tooltip.style.top = `${rect.top - tooltip.offsetHeight - 5  }px`;\n          \n          element._tooltip = tooltip;\n        });\n        \n        element.addEventListener('mouseleave', function() {\n          if (element._tooltip) {\n            element._tooltip.remove();\n            element._tooltip = null;\n          }\n        });\n      }\n    });\n  }\n  \n  // Simple popover implementation\n  function initPopovers() {\n    const popoverElements = document.querySelectorAll('[data-bs-toggle=\"popover\"]');\n    \n    popoverElements.forEach(element => {\n      const popoverContent = element.getAttribute('data-bs-content');\n      const popoverTitle = element.getAttribute('data-bs-title');\n      \n      if (popoverContent) {\n        element.addEventListener('click', function(e) {\n          e.preventDefault();\n          \n          // Remove existing popover\n          if (element._popover) {\n            element._popover.remove();\n            element._popover = null;\n            return;\n          }\n          \n          const popover = document.createElement('div');\n          popover.className = 'custom-popover';\n          popover.innerHTML = `\n            ${popoverTitle ? `<div class=\"popover-title\">${popoverTitle}</div>` : ''}\n            <div class=\"popover-content\">${popoverContent}</div>\n          `;\n          popover.style.cssText = `\n            position: absolute;\n            background: #fff;\n            border: 1px solid #ccc;\n            border-radius: 6px;\n            box-shadow: 0 2px 8px rgba(0,0,0,0.15);\n            z-index: 1050;\n            min-width: 200px;\n            max-width: 300px;\n          `;\n          \n          document.body.appendChild(popover);\n          \n          const rect = element.getBoundingClientRect();\n          popover.style.left = `${rect.left  }px`;\n          popover.style.top = `${rect.bottom + 5  }px`;\n          \n          element._popover = popover;\n        });\n      }\n    });\n  }\n  \n  // Initialize both\n  initTooltips();\n  initPopovers();\n  \n  // Close popovers when clicking outside\n  document.addEventListener('click', function(e) {\n    const popovers = document.querySelectorAll('.custom-popover');\n    popovers.forEach(popover => {\n      if (!popover.contains(e.target)) {\n        popover.remove();\n      }\n    });\n  });\n  \n}());\n"
  },
  {
    "path": "src/assets/scripts/scrollbar/index.js",
    "content": "import PerfectScrollbar from 'perfect-scrollbar';\n\nexport default (function () {\n  const scrollables = document.querySelectorAll('.scrollable');\n  if (scrollables.length > 0) {\n    scrollables.forEach(el => {\n      new PerfectScrollbar(el);\n    });\n  }\n}());\n"
  },
  {
    "path": "src/assets/scripts/search/index.js",
    "content": "export default (function () {\n  const searchToggle = document.querySelector('.search-toggle');\n  const searchBox = document.querySelector('.search-box');\n  const searchInput = document.querySelector('.search-input');\n  const searchInputField = document.querySelector('.search-input input');\n  \n  if (searchToggle && searchBox && searchInput && searchInputField) {\n    searchToggle.addEventListener('click', e => {\n      searchBox.classList.toggle('active');\n      searchInput.classList.toggle('active');\n      searchInputField.focus();\n      e.preventDefault();\n    });\n  }\n}());\n"
  },
  {
    "path": "src/assets/scripts/skycons/index.js",
    "content": "import SkyconsInit from 'skycons';\nimport Theme from '../utils/theme.js';\n\nconst Skycons = SkyconsInit(window);\n\nexport default (function () {\n  let icons;\n  \n  const initSkycons = () => {\n    const skyconsColor = Theme.getCSSVar('--skycons-color');\n    \n    if (icons) {\n      icons.pause();\n      icons.remove('all');\n    }\n    \n    icons = new Skycons({ 'color': skyconsColor });\n    \n    const list  = [\n      'clear-day',\n      'clear-night',\n      'partly-cloudy-day',\n      'partly-cloudy-night',\n      'cloudy',\n      'rain',\n      'sleet',\n      'snow',\n      'wind',\n      'fog',\n    ];\n    let i = list.length;\n\n    while (i--) {\n      const\n        weatherType = list[i],\n        elements    = document.getElementsByClassName(weatherType);\n      let j = elements.length;\n\n      while (j--) {\n        icons.set(elements[j], weatherType);\n      }\n    }\n\n    icons.play();\n  };\n  \n  // Initialize skycons\n  initSkycons();\n  \n  // Listen for theme changes\n  window.addEventListener('adminator:themeChanged', initSkycons);\n}());\n"
  },
  {
    "path": "src/assets/scripts/ui/index.js",
    "content": "/**\n * UI Page Bootstrap Components\n * Vanilla JavaScript implementations for Bootstrap components\n */\n\nexport default (function () {\n  \n  // Modal functionality\n  class VanillaModal {\n    constructor(element) {\n      this.element = element;\n      this.modal = null;\n      this.backdrop = null;\n      this.isOpen = false;\n      this.init();\n    }\n    \n    init() {\n      this.modal = document.querySelector(this.element.getAttribute('data-bs-target'));\n      if (this.modal) {\n        this.element.addEventListener('click', (e) => {\n          e.preventDefault();\n          this.show();\n        });\n        \n        // Close button functionality\n        const closeButtons = this.modal.querySelectorAll('[data-bs-dismiss=\"modal\"]');\n        closeButtons.forEach(btn => {\n          btn.addEventListener('click', () => this.hide());\n        });\n        \n        // Close on backdrop click\n        this.modal.addEventListener('click', (e) => {\n          if (e.target === this.modal) {\n            this.hide();\n          }\n        });\n      }\n    }\n    \n    show() {\n      if (this.isOpen) return;\n      \n      // Create backdrop\n      this.backdrop = document.createElement('div');\n      this.backdrop.className = 'modal-backdrop fade show';\n      document.body.appendChild(this.backdrop);\n      \n      // Show modal\n      this.modal.style.display = 'block';\n      this.modal.classList.add('show');\n      document.body.classList.add('modal-open');\n      \n      this.isOpen = true;\n      \n      // Focus the modal\n      this.modal.setAttribute('tabindex', '-1');\n      this.modal.focus();\n      \n      // Escape key handler\n      this.escapeHandler = (e) => {\n        if (e.key === 'Escape') {\n          this.hide();\n        }\n      };\n      document.addEventListener('keydown', this.escapeHandler);\n    }\n    \n    hide() {\n      if (!this.isOpen) return;\n      \n      // Hide modal\n      this.modal.classList.remove('show');\n      this.modal.style.display = 'none';\n      document.body.classList.remove('modal-open');\n      \n      // Remove backdrop\n      if (this.backdrop) {\n        this.backdrop.remove();\n        this.backdrop = null;\n      }\n      \n      this.isOpen = false;\n      \n      // Remove escape handler\n      if (this.escapeHandler) {\n        document.removeEventListener('keydown', this.escapeHandler);\n        this.escapeHandler = null;\n      }\n    }\n  }\n  \n  // Dropdown functionality\n  class VanillaDropdown {\n    constructor(element) {\n      this.element = element;\n      this.menu = null;\n      this.isOpen = false;\n      this.init();\n    }\n    \n    init() {\n      this.menu = this.element.parentNode.querySelector('.dropdown-menu');\n      if (this.menu) {\n        this.element.addEventListener('click', (e) => {\n          e.preventDefault();\n          e.stopPropagation();\n          this.toggle();\n        });\n        \n        // Close on outside click\n        document.addEventListener('click', (e) => {\n          if (!this.element.parentNode.contains(e.target)) {\n            this.hide();\n          }\n        });\n        \n        // Close on escape\n        document.addEventListener('keydown', (e) => {\n          if (e.key === 'Escape' && this.isOpen) {\n            this.hide();\n          }\n        });\n      }\n    }\n    \n    toggle() {\n      if (this.isOpen) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n    \n    show() {\n      if (this.isOpen) return;\n      \n      // Close other dropdowns\n      document.querySelectorAll('.dropdown-menu.show').forEach(menu => {\n        menu.classList.remove('show');\n      });\n      \n      this.menu.classList.add('show');\n      this.element.setAttribute('aria-expanded', 'true');\n      this.isOpen = true;\n    }\n    \n    hide() {\n      if (!this.isOpen) return;\n      \n      this.menu.classList.remove('show');\n      this.element.setAttribute('aria-expanded', 'false');\n      this.isOpen = false;\n    }\n  }\n  \n  // Popover functionality\n  class VanillaPopover {\n    constructor(element) {\n      this.element = element;\n      this.popover = null;\n      this.isOpen = false;\n      this.init();\n    }\n    \n    init() {\n      this.element.addEventListener('click', (e) => {\n        e.preventDefault();\n        this.toggle();\n      });\n      \n      // Close on outside click\n      document.addEventListener('click', (e) => {\n        if (!this.element.contains(e.target) && (!this.popover || !this.popover.contains(e.target))) {\n          this.hide();\n        }\n      });\n    }\n    \n    toggle() {\n      if (this.isOpen) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n    \n    show() {\n      if (this.isOpen) return;\n      \n      // Close other popovers\n      document.querySelectorAll('.popover').forEach(popover => {\n        popover.remove();\n      });\n      \n      const title = this.element.getAttribute('title') || this.element.getAttribute('data-bs-title');\n      const content = this.element.getAttribute('data-bs-content');\n      \n      this.popover = document.createElement('div');\n      this.popover.className = 'popover bs-popover-top show';\n      this.popover.style.position = 'absolute';\n      this.popover.style.zIndex = '1070';\n      this.popover.style.maxWidth = '276px';\n      this.popover.style.backgroundColor = '#fff';\n      this.popover.style.border = '1px solid rgba(0,0,0,.2)';\n      this.popover.style.borderRadius = '6px';\n      this.popover.style.boxShadow = '0 5px 10px rgba(0,0,0,.2)';\n      \n      let popoverContent = '';\n      if (title) {\n        popoverContent += `<div class=\"popover-header\" style=\"padding: 8px 14px; margin-bottom: 0; font-size: 14px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0; font-weight: 600;\">${title}</div>`;\n      }\n      popoverContent += `<div class=\"popover-body\" style=\"padding: 9px 14px; word-wrap: break-word;\">${content}</div>`;\n      \n      this.popover.innerHTML = popoverContent;\n      document.body.appendChild(this.popover);\n      \n      // Position popover\n      const rect = this.element.getBoundingClientRect();\n      this.popover.style.left = `${rect.left + (rect.width / 2) - (this.popover.offsetWidth / 2)}px`;\n      this.popover.style.top = `${rect.top - this.popover.offsetHeight - 10}px`;\n      \n      this.isOpen = true;\n    }\n    \n    hide() {\n      if (!this.isOpen) return;\n      \n      if (this.popover) {\n        this.popover.remove();\n        this.popover = null;\n      }\n      this.isOpen = false;\n    }\n  }\n  \n  // Tooltip functionality\n  class VanillaTooltip {\n    constructor(element) {\n      this.element = element;\n      this.tooltip = null;\n      this.init();\n    }\n    \n    init() {\n      this.element.addEventListener('mouseenter', () => this.show());\n      this.element.addEventListener('mouseleave', () => this.hide());\n      this.element.addEventListener('focus', () => this.show());\n      this.element.addEventListener('blur', () => this.hide());\n    }\n    \n    show() {\n      if (this.tooltip) return;\n      \n      const title = this.element.getAttribute('title') || this.element.getAttribute('data-bs-title');\n      const placement = this.element.getAttribute('data-bs-placement') || 'top';\n      \n      if (!title) return;\n      \n      this.tooltip = document.createElement('div');\n      this.tooltip.className = `tooltip bs-tooltip-${placement} show`;\n      this.tooltip.style.position = 'absolute';\n      this.tooltip.style.zIndex = '1070';\n      this.tooltip.style.maxWidth = '200px';\n      this.tooltip.style.padding = '4px 8px';\n      this.tooltip.style.fontSize = '12px';\n      this.tooltip.style.backgroundColor = '#000';\n      this.tooltip.style.color = '#fff';\n      this.tooltip.style.borderRadius = '4px';\n      this.tooltip.style.pointerEvents = 'none';\n      this.tooltip.style.whiteSpace = 'nowrap';\n      \n      this.tooltip.innerHTML = `<div class=\"tooltip-inner\">${title}</div>`;\n      document.body.appendChild(this.tooltip);\n      \n      // Position tooltip\n      const rect = this.element.getBoundingClientRect();\n      \n      switch (placement) {\n      case 'top':\n        this.tooltip.style.left = `${rect.left + (rect.width / 2) - (this.tooltip.offsetWidth / 2)}px`;\n        this.tooltip.style.top = `${rect.top - this.tooltip.offsetHeight - 5}px`;\n        break;\n      case 'bottom':\n        this.tooltip.style.left = `${rect.left + (rect.width / 2) - (this.tooltip.offsetWidth / 2)}px`;\n        this.tooltip.style.top = `${rect.bottom + 5}px`;\n        break;\n      case 'left':\n        this.tooltip.style.left = `${rect.left - this.tooltip.offsetWidth - 5}px`;\n        this.tooltip.style.top = `${rect.top + (rect.height / 2) - (this.tooltip.offsetHeight / 2)}px`;\n        break;\n      case 'right':\n        this.tooltip.style.left = `${rect.right + 5}px`;\n        this.tooltip.style.top = `${rect.top + (rect.height / 2) - (this.tooltip.offsetHeight / 2)}px`;\n        break;\n      }\n    }\n    \n    hide() {\n      if (this.tooltip) {\n        this.tooltip.remove();\n        this.tooltip = null;\n      }\n    }\n  }\n  \n  // Accordion functionality\n  class VanillaAccordion {\n    constructor(element) {\n      this.element = element;\n      this.accordion = element.closest('.accordion');\n      this.target = document.querySelector(element.getAttribute('data-bs-target'));\n      this.isOpen = !element.classList.contains('collapsed');\n      this.init();\n    }\n    \n    init() {\n      this.element.addEventListener('click', (e) => {\n        e.preventDefault();\n        this.toggle();\n      });\n    }\n    \n    toggle() {\n      if (this.isOpen) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n    \n    show() {\n      if (this.isOpen) return;\n      \n      // Close other accordion items in the same parent\n      const parentAccordion = this.accordion;\n      if (parentAccordion) {\n        const otherItems = parentAccordion.querySelectorAll('.accordion-collapse.show');\n        otherItems.forEach(item => {\n          if (item !== this.target) {\n            item.classList.remove('show');\n            const button = parentAccordion.querySelector(`[data-bs-target=\"#${item.id}\"]`);\n            if (button) {\n              button.classList.add('collapsed');\n              button.setAttribute('aria-expanded', 'false');\n            }\n          }\n        });\n      }\n      \n      // Show this item\n      this.target.classList.add('show');\n      this.element.classList.remove('collapsed');\n      this.element.setAttribute('aria-expanded', 'true');\n      this.isOpen = true;\n    }\n    \n    hide() {\n      if (!this.isOpen) return;\n      \n      this.target.classList.remove('show');\n      this.element.classList.add('collapsed');\n      this.element.setAttribute('aria-expanded', 'false');\n      this.isOpen = false;\n    }\n  }\n  \n  // Initialize all components\n  const initComponents = () => {\n    // Initialize modals\n    document.querySelectorAll('[data-bs-toggle=\"modal\"]').forEach(element => {\n      new VanillaModal(element);\n    });\n    \n    // Initialize dropdowns\n    document.querySelectorAll('[data-bs-toggle=\"dropdown\"]').forEach(element => {\n      new VanillaDropdown(element);\n    });\n    \n    // Initialize popovers\n    document.querySelectorAll('[data-bs-toggle=\"popover\"]').forEach(element => {\n      new VanillaPopover(element);\n    });\n    \n    // Initialize tooltips\n    document.querySelectorAll('[data-bs-toggle=\"tooltip\"]').forEach(element => {\n      new VanillaTooltip(element);\n    });\n    \n    // Initialize accordions\n    document.querySelectorAll('[data-bs-toggle=\"collapse\"]').forEach(element => {\n      new VanillaAccordion(element);\n    });\n  };\n  \n  // Initialize when DOM is ready\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initComponents);\n  } else {\n    initComponents();\n  }\n  \n  // Public API\n  return {\n    init: initComponents,\n    Modal: VanillaModal,\n    Dropdown: VanillaDropdown,\n    Popover: VanillaPopover,\n    Tooltip: VanillaTooltip,\n    Accordion: VanillaAccordion,\n  };\n}());"
  },
  {
    "path": "src/assets/scripts/utils/date.js",
    "content": "/**\n * Modern Date Utilities\n * Using Day.js (2KB) instead of Moment.js (67KB) - 97% size reduction\n * Provides consistent date formatting and manipulation across the application\n */\n\nimport dayjs from 'dayjs';\nimport utc from 'dayjs/plugin/utc';\nimport timezone from 'dayjs/plugin/timezone';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport advancedFormat from 'dayjs/plugin/advancedFormat';\n\n// Enable Day.js plugins\ndayjs.extend(utc);\ndayjs.extend(timezone);\ndayjs.extend(relativeTime);\ndayjs.extend(customParseFormat);\ndayjs.extend(advancedFormat);\n\nexport const DateUtils = {\n  /**\n   * Get current date/time\n   */\n  now: () => dayjs(),\n\n  /**\n   * Parse date from string or Date object\n   */\n  parse: (input, format = null) => {\n    return format ? dayjs(input, format) : dayjs(input);\n  },\n\n  /**\n   * Format date for display\n   */\n  format: (date, format = 'YYYY-MM-DD') => {\n    return dayjs(date).format(format);\n  },\n\n  /**\n   * Common date formatting presets\n   */\n  formatters: {\n    // Dashboard display formats\n    shortDate: (date) => dayjs(date).format('MMM DD, YYYY'),\n    longDate: (date) => dayjs(date).format('MMMM DD, YYYY'),\n    dateTime: (date) => dayjs(date).format('MMM DD, YYYY h:mm A'),\n    \n    // Calendar formats\n    calendarDate: (date) => dayjs(date).format('YYYY-MM-DD'),\n    calendarDateTime: (date) => dayjs(date).format('YYYY-MM-DD HH:mm:ss'),\n    \n    // Form input formats\n    inputDate: (date) => dayjs(date).format('YYYY-MM-DD'),\n    inputDateTime: (date) => dayjs(date).format('YYYY-MM-DDTHH:mm'),\n    \n    // Display formats\n    timeOnly: (date) => dayjs(date).format('h:mm A'),\n    monthYear: (date) => dayjs(date).format('MMMM YYYY'),\n    dayMonth: (date) => dayjs(date).format('DD MMM'),\n    \n    // Relative time\n    relative: (date) => dayjs(date).fromNow(),\n    relativeCalendar: (date) => {\n      const now = dayjs();\n      const target = dayjs(date);\n      const diffDays = now.diff(target, 'day');\n      \n      if (diffDays === 0) return 'Today';\n      if (diffDays === 1) return 'Yesterday';\n      if (diffDays === -1) return 'Tomorrow';\n      if (diffDays > 1 && diffDays < 7) return `${diffDays} days ago`;\n      if (diffDays < -1 && diffDays > -7) return `In ${Math.abs(diffDays)} days`;\n      return target.format('MMM DD, YYYY');\n    },\n  },\n\n  /**\n   * Date manipulation\n   */\n  add: (date, amount, unit) => dayjs(date).add(amount, unit),\n  subtract: (date, amount, unit) => dayjs(date).subtract(amount, unit),\n  startOf: (date, unit) => dayjs(date).startOf(unit),\n  endOf: (date, unit) => dayjs(date).endOf(unit),\n\n  /**\n   * Date comparison\n   */\n  isBefore: (date1, date2) => dayjs(date1).isBefore(dayjs(date2)),\n  isAfter: (date1, date2) => dayjs(date1).isAfter(dayjs(date2)),\n  isSame: (date1, date2, unit = 'day') => dayjs(date1).isSame(dayjs(date2), unit),\n  isBetween: (date, start, end) => dayjs(date).isBetween(dayjs(start), dayjs(end)),\n\n  /**\n   * Date validation\n   */\n  isValid: (date) => dayjs(date).isValid(),\n\n  /**\n   * Timezone utilities\n   */\n  timezone: {\n    convert: (date, tz) => dayjs(date).tz(tz),\n    utc: (date) => dayjs(date).utc(),\n    local: (date) => dayjs(date).local(),\n    guess: () => dayjs.tz.guess(),\n  },\n\n  /**\n   * Calendar utilities\n   */\n  calendar: {\n    // Get calendar month data for building calendar views\n    getMonthData: (date = null) => {\n      const target = date ? dayjs(date) : dayjs();\n      const startOfMonth = target.startOf('month');\n      const endOfMonth = target.endOf('month');\n      const startOfCalendar = startOfMonth.startOf('week');\n      const endOfCalendar = endOfMonth.endOf('week');\n      \n      const days = [];\n      let current = startOfCalendar;\n      \n      while (current.isBefore(endOfCalendar) || current.isSame(endOfCalendar, 'day')) {\n        days.push({\n          date: current.format('YYYY-MM-DD'),\n          day: current.date(),\n          isCurrentMonth: current.isSame(target, 'month'),\n          isToday: current.isSame(dayjs(), 'day'),\n          dayjs: current.clone(),\n        });\n        current = current.add(1, 'day');\n      }\n      \n      return {\n        month: target.format('MMMM YYYY'),\n        year: target.year(),\n        monthIndex: target.month(),\n        days,\n      };\n    },\n\n    // Get week data\n    getWeekData: (date = null) => {\n      const target = date ? dayjs(date) : dayjs();\n      const startOfWeek = target.startOf('week');\n      const endOfWeek = target.endOf('week');\n      \n      const days = [];\n      let current = startOfWeek;\n      \n      while (current.isBefore(endOfWeek) || current.isSame(endOfWeek, 'day')) {\n        days.push({\n          date: current.format('YYYY-MM-DD'),\n          day: current.date(),\n          dayName: current.format('dddd'),\n          shortDayName: current.format('ddd'),\n          isToday: current.isSame(dayjs(), 'day'),\n          dayjs: current.clone(),\n        });\n        current = current.add(1, 'day');\n      }\n      \n      return {\n        weekStart: startOfWeek.format('MMM DD'),\n        weekEnd: endOfWeek.format('MMM DD, YYYY'),\n        days,\n      };\n    },\n  },\n\n  /**\n   * Form utilities\n   */\n  form: {\n    // Convert date to HTML5 input format\n    toInputValue: (date) => dayjs(date).format('YYYY-MM-DD'),\n    toDateTimeInputValue: (date) => dayjs(date).format('YYYY-MM-DDTHH:mm'),\n    \n    // Parse from HTML5 input\n    fromInputValue: (value) => dayjs(value),\n    \n    // Validate date input\n    validateDateInput: (value) => {\n      const parsed = dayjs(value);\n      return parsed.isValid() && value.length >= 8; // Basic validation\n    },\n  },\n\n  /**\n   * Chart/Data utilities\n   */\n  charts: {\n    // Generate date ranges for charts\n    generateDateRange: (start, end, interval = 'day') => {\n      const dates = [];\n      let current = dayjs(start);\n      const endDate = dayjs(end);\n      \n      while (current.isBefore(endDate) || current.isSame(endDate, interval)) {\n        dates.push({\n          date: current.format('YYYY-MM-DD'),\n          label: current.format('MMM DD'),\n          value: current.toISOString(),\n          dayjs: current.clone(),\n        });\n        current = current.add(1, interval);\n      }\n      \n      return dates;\n    },\n\n    // Get common chart date labels\n    getChartLabels: (period = 'week') => {\n      const now = dayjs();\n      \n      switch (period) {\n      case 'week':\n        return Array.from({ length: 7 }, (_, i) => \n          now.subtract(6 - i, 'day').format('ddd')\n        );\n      case 'month':\n        return Array.from({ length: 30 }, (_, i) => \n          now.subtract(29 - i, 'day').format('DD')\n        );\n      case 'year':\n        return Array.from({ length: 12 }, (_, i) => \n          now.subtract(11 - i, 'month').format('MMM')\n        );\n      default:\n        return [];\n      }\n    },\n  },\n};\n\n// Export dayjs instance for direct use when needed\nexport { dayjs };\n\n// Default export\nexport default DateUtils; "
  },
  {
    "path": "src/assets/scripts/utils/dom.js",
    "content": "/**\n * Adminator DOM Utility Functions\n * Provides jQuery-like functionality using vanilla JavaScript\n *\n * @module utils/dom\n * @example\n * import { DOM } from './utils/dom';\n *\n * // Select elements\n * const button = DOM.select('.my-button');\n * const items = DOM.selectAll('.list-item');\n *\n * // Add event listeners\n * DOM.on(button, 'click', () => console.log('Clicked!'));\n *\n * // Manipulate classes\n * DOM.addClass(button, 'active');\n * DOM.toggleClass(button, 'loading');\n */\n\n/**\n * DOM utility object providing jQuery-like methods\n * @namespace\n */\nexport const DOM = {\n  /**\n   * Select a single element matching the selector\n   * Replaces jQuery's $('selector').first()\n   *\n   * @param {string} selector - CSS selector\n   * @param {Document|Element} [context=document] - Context to search within\n   * @returns {Element|null} The matched element or null\n   *\n   * @example\n   * const header = DOM.select('.header');\n   * const navItem = DOM.select('.nav-item', sidebar);\n   */\n  select: (selector, context = document) => {\n    return context.querySelector(selector);\n  },\n\n  /**\n   * Select all elements matching the selector\n   * Replaces jQuery's $('selector')\n   *\n   * @param {string} selector - CSS selector\n   * @param {Document|Element} [context=document] - Context to search within\n   * @returns {Element[]} Array of matched elements\n   *\n   * @example\n   * const buttons = DOM.selectAll('.btn');\n   * buttons.forEach(btn => DOM.addClass(btn, 'initialized'));\n   */\n  selectAll: (selector, context = document) => {\n    return Array.from(context.querySelectorAll(selector));\n  },\n\n  /**\n   * Check if an element matching the selector exists\n   *\n   * @param {string} selector - CSS selector\n   * @returns {boolean} True if element exists\n   *\n   * @example\n   * if (DOM.exists('.sidebar')) {\n   *   initSidebar();\n   * }\n   */\n  exists: (selector) => {\n    return document.querySelector(selector) !== null;\n  },\n\n  /**\n   * Add an event listener to an element\n   * Replaces jQuery's $.on()\n   *\n   * @param {Element|string} element - Element or selector\n   * @param {string} event - Event name (e.g., 'click', 'change')\n   * @param {Function} handler - Event handler function\n   * @param {Object} [options={}] - addEventListener options\n   *\n   * @example\n   * DOM.on('.btn', 'click', handleClick);\n   * DOM.on(button, 'click', handleClick, { once: true });\n   */\n  on: (element, event, handler, options = {}) => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    if (element) {\n      element.addEventListener(event, handler, options);\n    }\n  },\n\n  /**\n   * Remove an event listener from an element\n   * Replaces jQuery's $.off()\n   *\n   * @param {Element|string} element - Element or selector\n   * @param {string} event - Event name\n   * @param {Function} handler - Event handler to remove\n   *\n   * @example\n   * DOM.off(button, 'click', handleClick);\n   */\n  off: (element, event, handler) => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    if (element) {\n      element.removeEventListener(event, handler);\n    }\n  },\n\n  /**\n   * Add a class to an element\n   * Replaces jQuery's $.addClass()\n   *\n   * @param {Element|string} element - Element or selector\n   * @param {string} className - Class name to add\n   *\n   * @example\n   * DOM.addClass('.menu', 'open');\n   */\n  addClass: (element, className) => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    if (element) {\n      element.classList.add(className);\n    }\n  },\n\n  /**\n   * Remove a class from an element\n   * Replaces jQuery's $.removeClass()\n   *\n   * @param {Element|string} element - Element or selector\n   * @param {string} className - Class name to remove\n   *\n   * @example\n   * DOM.removeClass('.menu', 'open');\n   */\n  removeClass: (element, className) => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    if (element) {\n      element.classList.remove(className);\n    }\n  },\n\n  /**\n   * Toggle a class on an element\n   * Replaces jQuery's $.toggleClass()\n   *\n   * @param {Element|string} element - Element or selector\n   * @param {string} className - Class name to toggle\n   *\n   * @example\n   * DOM.toggleClass('.dropdown', 'show');\n   */\n  toggleClass: (element, className) => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    if (element) {\n      element.classList.toggle(className);\n    }\n  },\n\n  /**\n   * Check if an element has a class\n   * Replaces jQuery's $.hasClass()\n   *\n   * @param {Element|string} element - Element or selector\n   * @param {string} className - Class name to check\n   * @returns {boolean} True if element has the class\n   *\n   * @example\n   * if (DOM.hasClass('.menu', 'open')) {\n   *   closeMenu();\n   * }\n   */\n  hasClass: (element, className) => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    return element ? element.classList.contains(className) : false;\n  },\n\n  /**\n   * Get or set an attribute on an element\n   * Replaces jQuery's $.attr()\n   *\n   * @param {Element|string} element - Element or selector\n   * @param {string} name - Attribute name\n   * @param {string} [value] - Value to set (omit to get)\n   * @returns {string|Element|null} Attribute value when getting, element when setting\n   *\n   * @example\n   * // Get attribute\n   * const href = DOM.attr(link, 'href');\n   *\n   * // Set attribute\n   * DOM.attr(link, 'href', '/new-page');\n   */\n  attr: (element, name, value) => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    if (!element) return null;\n\n    if (value === undefined) {\n      return element.getAttribute(name);\n    } else {\n      element.setAttribute(name, value);\n      return element;\n    }\n  },\n\n  /**\n   * Get or set a data attribute on an element\n   * Replaces jQuery's $.data()\n   *\n   * @param {Element|string} element - Element or selector\n   * @param {string} name - Data attribute name (without 'data-' prefix)\n   * @param {string} [value] - Value to set (omit to get)\n   * @returns {string|Element|null} Data value when getting, element when setting\n   *\n   * @example\n   * // Get data attribute\n   * const id = DOM.data(row, 'id'); // Gets data-id\n   *\n   * // Set data attribute\n   * DOM.data(row, 'id', '123');\n   */\n  data: (element, name, value) => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    if (!element) return null;\n\n    const dataName = `data-${name}`;\n\n    if (value === undefined) {\n      return element.getAttribute(dataName);\n    } else {\n      element.setAttribute(dataName, value);\n      return element;\n    }\n  },\n\n  /**\n   * Get or set text content of an element\n   * Replaces jQuery's $.text()\n   *\n   * @param {Element|string} element - Element or selector\n   * @param {string} [content] - Text to set (omit to get)\n   * @returns {string|Element|null} Text content when getting, element when setting\n   *\n   * @example\n   * const text = DOM.text('.title');\n   * DOM.text('.title', 'New Title');\n   */\n  text: (element, content) => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    if (!element) return null;\n\n    if (content === undefined) {\n      return element.textContent;\n    } else {\n      element.textContent = content;\n      return element;\n    }\n  },\n\n  /**\n   * Get or set HTML content of an element\n   * Replaces jQuery's $.html()\n   *\n   * @param {Element|string} element - Element or selector\n   * @param {string} [content] - HTML to set (omit to get)\n   * @returns {string|Element|null} HTML content when getting, element when setting\n   *\n   * @example\n   * const html = DOM.html('.container');\n   * DOM.html('.container', '<p>New content</p>');\n   */\n  html: (element, content) => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    if (!element) return null;\n\n    if (content === undefined) {\n      return element.innerHTML;\n    } else {\n      element.innerHTML = content;\n      return element;\n    }\n  },\n\n  /**\n   * Hide an element\n   * Replaces jQuery's $.hide()\n   *\n   * @param {Element|string} element - Element or selector\n   *\n   * @example\n   * DOM.hide('.modal');\n   */\n  hide: (element) => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    if (element) {\n      element.style.display = 'none';\n    }\n  },\n\n  /**\n   * Show an element\n   * Replaces jQuery's $.show()\n   *\n   * @param {Element|string} element - Element or selector\n   * @param {string} [display='block'] - Display value to use\n   *\n   * @example\n   * DOM.show('.modal');\n   * DOM.show('.flex-item', 'flex');\n   */\n  show: (element, display = 'block') => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    if (element) {\n      element.style.display = display;\n    }\n  },\n\n  /**\n   * Toggle element visibility\n   * Replaces jQuery's $.toggle()\n   *\n   * @param {Element|string} element - Element or selector\n   * @param {string} [display='block'] - Display value when showing\n   *\n   * @example\n   * DOM.toggle('.menu');\n   */\n  toggle: (element, display = 'block') => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    if (element) {\n      if (element.style.display === 'none') {\n        element.style.display = display;\n      } else {\n        element.style.display = 'none';\n      }\n    }\n  },\n\n  /**\n   * Animate element sliding up (collapsing)\n   * Replaces jQuery's $.slideUp()\n   *\n   * @param {Element|string} element - Element or selector\n   * @param {number} [duration=300] - Animation duration in ms\n   * @returns {Promise<void>} Resolves when animation completes\n   *\n   * @example\n   * await DOM.slideUp('.panel');\n   */\n  slideUp: (element, duration = 300) => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    if (!element) return Promise.resolve();\n\n    return new Promise((resolve) => {\n      const height = element.scrollHeight;\n      element.style.height = `${height}px`;\n      element.style.overflow = 'hidden';\n\n      element.animate([\n        { height: `${height}px` },\n        { height: '0px' },\n      ], {\n        duration,\n        easing: 'ease-in-out',\n      }).onfinish = () => {\n        element.style.display = 'none';\n        element.style.height = '';\n        element.style.overflow = '';\n        resolve();\n      };\n    });\n  },\n\n  /**\n   * Animate element sliding down (expanding)\n   * Replaces jQuery's $.slideDown()\n   *\n   * @param {Element|string} element - Element or selector\n   * @param {number} [duration=300] - Animation duration in ms\n   * @returns {Promise<void>} Resolves when animation completes\n   *\n   * @example\n   * await DOM.slideDown('.panel');\n   */\n  slideDown: (element, duration = 300) => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    if (!element) return Promise.resolve();\n\n    return new Promise((resolve) => {\n      element.style.display = 'block';\n      element.style.height = '0px';\n      element.style.overflow = 'hidden';\n\n      const height = element.scrollHeight;\n\n      element.animate([\n        { height: '0px' },\n        { height: `${height}px` },\n      ], {\n        duration,\n        easing: 'ease-in-out',\n      }).onfinish = () => {\n        element.style.height = 'auto';\n        element.style.overflow = 'visible';\n        resolve();\n      };\n    });\n  },\n\n  /**\n   * Animate element fading in\n   * Replaces jQuery's $.fadeIn()\n   *\n   * @param {Element|string} element - Element or selector\n   * @param {number} [duration=300] - Animation duration in ms\n   * @returns {Promise<void>} Resolves when animation completes\n   *\n   * @example\n   * await DOM.fadeIn('.modal');\n   */\n  fadeIn: (element, duration = 300) => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    if (!element) return Promise.resolve();\n\n    return new Promise((resolve) => {\n      element.style.opacity = '0';\n      element.style.display = 'block';\n\n      element.animate([\n        { opacity: 0 },\n        { opacity: 1 },\n      ], {\n        duration,\n        easing: 'ease-in-out',\n      }).onfinish = () => {\n        element.style.opacity = '';\n        resolve();\n      };\n    });\n  },\n\n  /**\n   * Animate element fading out\n   * Replaces jQuery's $.fadeOut()\n   *\n   * @param {Element|string} element - Element or selector\n   * @param {number} [duration=300] - Animation duration in ms\n   * @returns {Promise<void>} Resolves when animation completes\n   *\n   * @example\n   * await DOM.fadeOut('.modal');\n   */\n  fadeOut: (element, duration = 300) => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    if (!element) return Promise.resolve();\n\n    return new Promise((resolve) => {\n      element.animate([\n        { opacity: 1 },\n        { opacity: 0 },\n      ], {\n        duration,\n        easing: 'ease-in-out',\n      }).onfinish = () => {\n        element.style.display = 'none';\n        element.style.opacity = '';\n        resolve();\n      };\n    });\n  },\n\n  /**\n   * Get element dimensions and position relative to viewport\n   *\n   * @param {Element|string} element - Element or selector\n   * @returns {Object|null} Dimensions object or null\n   * @property {number} width - Element width\n   * @property {number} height - Element height\n   * @property {number} top - Distance from viewport top\n   * @property {number} left - Distance from viewport left\n   * @property {number} bottom - Distance from viewport bottom\n   * @property {number} right - Distance from viewport right\n   *\n   * @example\n   * const { width, height, top, left } = DOM.dimensions('.card');\n   */\n  dimensions: (element) => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    if (!element) return null;\n\n    const rect = element.getBoundingClientRect();\n    return {\n      width: rect.width,\n      height: rect.height,\n      top: rect.top,\n      left: rect.left,\n      bottom: rect.bottom,\n      right: rect.right,\n    };\n  },\n\n  /**\n   * Execute callback when DOM is ready\n   * Replaces jQuery's $(document).ready()\n   *\n   * @param {Function} callback - Function to execute when DOM is ready\n   *\n   * @example\n   * DOM.ready(() => {\n   *   initApp();\n   * });\n   */\n  ready: (callback) => {\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', callback);\n    } else {\n      callback();\n    }\n  },\n\n  /**\n   * Create an element with optional attributes and children\n   *\n   * @param {string} tag - HTML tag name\n   * @param {Object} [attrs={}] - Attributes to set\n   * @param {Array<Element|string>} [children=[]] - Child elements or text\n   * @returns {Element} The created element\n   *\n   * @example\n   * const button = DOM.create('button', { class: 'btn', type: 'submit' }, ['Submit']);\n   */\n  create: (tag, attrs = {}, children = []) => {\n    const el = document.createElement(tag);\n\n    Object.entries(attrs).forEach(([key, value]) => {\n      if (key === 'class') {\n        el.className = value;\n      } else if (key.startsWith('data-')) {\n        el.setAttribute(key, value);\n      } else {\n        el[key] = value;\n      }\n    });\n\n    children.forEach(child => {\n      if (typeof child === 'string') {\n        el.appendChild(document.createTextNode(child));\n      } else if (child instanceof Element) {\n        el.appendChild(child);\n      }\n    });\n\n    return el;\n  },\n\n  /**\n   * Find the closest ancestor matching a selector\n   *\n   * @param {Element|string} element - Element or selector\n   * @param {string} selector - Selector to match\n   * @returns {Element|null} Closest matching ancestor or null\n   *\n   * @example\n   * const form = DOM.closest(input, 'form');\n   */\n  closest: (element, selector) => {\n    if (typeof element === 'string') {\n      element = document.querySelector(element);\n    }\n    return element ? element.closest(selector) : null;\n  },\n};\n\nexport default DOM;\n"
  },
  {
    "path": "src/assets/scripts/utils/events.js",
    "content": "/**\n * Adminator Event Utilities\n * Provides efficient event handling with delegation and cleanup\n *\n * @module utils/events\n */\n\n/**\n * Store for event handlers to enable proper cleanup\n * @type {WeakMap<Element, Map<string, Set<Function>>>}\n */\nconst handlerRegistry = new WeakMap();\n\n/**\n * Store for AbortControllers to enable easy cleanup\n * @type {WeakMap<Element, AbortController>}\n */\nconst controllerRegistry = new WeakMap();\n\n/**\n * Event utilities namespace\n * @namespace\n */\nconst Events = {\n  /**\n   * Add an event listener with automatic cleanup support\n   * Uses AbortController for efficient removal\n   *\n   * @param {Element} element - Target element\n   * @param {string} event - Event type\n   * @param {Function} handler - Event handler\n   * @param {Object} [options={}] - Event listener options\n   * @returns {Function} Cleanup function to remove the listener\n   *\n   * @example\n   * const cleanup = Events.on(button, 'click', handleClick);\n   * // Later: cleanup() to remove\n   */\n  on(element, event, handler, options = {}) {\n    if (!element) return () => {};\n\n    // Get or create AbortController for this element\n    let controller = controllerRegistry.get(element);\n    if (!controller) {\n      controller = new AbortController();\n      controllerRegistry.set(element, controller);\n    }\n\n    // Register handler\n    if (!handlerRegistry.has(element)) {\n      handlerRegistry.set(element, new Map());\n    }\n    const elementHandlers = handlerRegistry.get(element);\n    if (!elementHandlers.has(event)) {\n      elementHandlers.set(event, new Set());\n    }\n    elementHandlers.get(event).add(handler);\n\n    // Add listener with abort signal\n    element.addEventListener(event, handler, {\n      ...options,\n      signal: controller.signal,\n    });\n\n    // Return cleanup function\n    return () => {\n      element.removeEventListener(event, handler, options);\n      const handlers = handlerRegistry.get(element)?.get(event);\n      if (handlers) {\n        handlers.delete(handler);\n      }\n    };\n  },\n\n  /**\n   * Remove all event listeners from an element\n   *\n   * @param {Element} element - Target element\n   *\n   * @example\n   * Events.off(element); // Removes all listeners\n   */\n  off(element) {\n    if (!element) return;\n\n    const controller = controllerRegistry.get(element);\n    if (controller) {\n      controller.abort();\n      controllerRegistry.delete(element);\n    }\n    handlerRegistry.delete(element);\n  },\n\n  /**\n   * Add event delegation - listen on parent for events from children\n   * More efficient than adding listeners to many elements\n   *\n   * @param {Element} parent - Parent element to listen on\n   * @param {string} event - Event type\n   * @param {string} selector - CSS selector for target elements\n   * @param {Function} handler - Event handler (receives event and matched element)\n   * @param {Object} [options={}] - Event listener options\n   * @returns {Function} Cleanup function\n   *\n   * @example\n   * // Instead of adding click to every .btn\n   * Events.delegate(container, 'click', '.btn', (e, btn) => {\n   *   console.log('Button clicked:', btn);\n   * });\n   */\n  delegate(parent, event, selector, handler, options = {}) {\n    if (!parent) return () => {};\n\n    const delegatedHandler = (e) => {\n      const target = e.target.closest(selector);\n      if (target && parent.contains(target)) {\n        handler.call(target, e, target);\n      }\n    };\n\n    return this.on(parent, event, delegatedHandler, options);\n  },\n\n  /**\n   * Add a one-time event listener\n   *\n   * @param {Element} element - Target element\n   * @param {string} event - Event type\n   * @param {Function} handler - Event handler\n   * @returns {Function} Cleanup function\n   *\n   * @example\n   * Events.once(button, 'click', handleFirstClick);\n   */\n  once(element, event, handler) {\n    return this.on(element, event, handler, { once: true });\n  },\n\n  /**\n   * Create a debounced event handler\n   *\n   * @param {Function} handler - Original handler\n   * @param {number} [delay=250] - Debounce delay in ms\n   * @returns {Function} Debounced handler\n   *\n   * @example\n   * const debouncedResize = Events.debounce(handleResize, 200);\n   * window.addEventListener('resize', debouncedResize);\n   */\n  debounce(handler, delay = 250) {\n    let timeoutId;\n    return function debounced(...args) {\n      clearTimeout(timeoutId);\n      timeoutId = setTimeout(() => handler.apply(this, args), delay);\n    };\n  },\n\n  /**\n   * Create a throttled event handler\n   *\n   * @param {Function} handler - Original handler\n   * @param {number} [limit=250] - Throttle limit in ms\n   * @returns {Function} Throttled handler\n   *\n   * @example\n   * const throttledScroll = Events.throttle(handleScroll, 100);\n   * window.addEventListener('scroll', throttledScroll);\n   */\n  throttle(handler, limit = 250) {\n    let inThrottle;\n    return function throttled(...args) {\n      if (!inThrottle) {\n        handler.apply(this, args);\n        inThrottle = true;\n        setTimeout(() => (inThrottle = false), limit);\n      }\n    };\n  },\n\n  /**\n   * Dispatch a custom event\n   *\n   * @param {Element|Window} target - Target to dispatch on\n   * @param {string} eventName - Event name\n   * @param {Object} [detail={}] - Event detail data\n   * @param {Object} [options={}] - Event options (bubbles, cancelable)\n   * @returns {boolean} Whether the event was not cancelled\n   *\n   * @example\n   * Events.emit(element, 'custom:event', { data: 'value' });\n   */\n  emit(target, eventName, detail = {}, options = {}) {\n    const event = new CustomEvent(eventName, {\n      detail,\n      bubbles: options.bubbles ?? true,\n      cancelable: options.cancelable ?? true,\n    });\n    return target.dispatchEvent(event);\n  },\n};\n\nexport default Events;\n"
  },
  {
    "path": "src/assets/scripts/utils/index.js",
    "content": "/**\n * Adminator Utilities Index\n * Re-exports all utility modules for convenient importing\n *\n * @module utils\n */\n\n// Re-export all utilities\nexport { default as DOM } from './dom';\nexport { default as Theme } from './theme';\nexport { default as DateUtils } from './date';\nexport { default as Logger } from './logger';\nexport { default as Events } from './events';\nexport { default as Performance } from './performance';\nexport { default as Storage } from './storage';\nexport { default as Sanitize } from './sanitize';\n\n// Legacy initialization code\nexport default (function () {\n  // ------------------------------------------------------\n  // @Window Resize\n  // ------------------------------------------------------\n\n  /**\n   * NOTE: Register resize event for Masonry layout\n   */\n  const EVENT = document.createEvent('UIEvents');\n  window.EVENT = EVENT;\n  EVENT.initUIEvent('resize', true, false, window, 0);\n\n\n  window.addEventListener('load', () => {\n    /**\n     * Trigger window resize event after page load\n     * for recalculation of masonry layout.\n     */\n    window.dispatchEvent(EVENT);\n  });\n\n  // ------------------------------------------------------\n  // @External Links\n  // ------------------------------------------------------\n\n  // Open external links in new window\n  const externalLinks = document.querySelectorAll('a[href^=\"http\"], a[href^=\"//\"]');\n\n  externalLinks.forEach(link => {\n    const href = link.getAttribute('href');\n    if (href && !href.includes(window.location.host)) {\n      link.setAttribute('rel', 'noopener noreferrer');\n      link.setAttribute('target', '_blank');\n    }\n  });\n\n  // ------------------------------------------------------\n  // @Resize Trigger\n  // ------------------------------------------------------\n\n  // Trigger resize on any element click\n  document.addEventListener('click', () => {\n    window.dispatchEvent(window.EVENT);\n  });\n}());\n"
  },
  {
    "path": "src/assets/scripts/utils/logger.js",
    "content": "/**\n * Adminator Logger Utility\n * Development-only logging utility for debugging\n *\n * @module utils/logger\n */\n\n/**\n * Check if we're in development mode\n * @returns {boolean}\n */\nconst isDev = () => {\n  try {\n    return process.env.NODE_ENV === 'development' ||\n           window.location.hostname === 'localhost' ||\n           window.location.hostname === '127.0.0.1';\n  } catch {\n    return false;\n  }\n};\n\n/**\n * Logger object with development-only output\n * All methods are no-ops in production for zero overhead\n */\nconst Logger = {\n  /**\n   * Log informational messages (development only)\n   * @param {string} message - The message to log\n   * @param {Object} [context] - Additional context data\n   */\n  info(message, context) {\n    if (isDev()) {\n      console.info(`[Adminator] ${message}`, context || '');\n    }\n  },\n\n  /**\n   * Log warning messages (development only)\n   * @param {string} message - The warning message\n   * @param {Object} [context] - Additional context data\n   */\n  warn(message, context) {\n    if (isDev()) {\n      console.warn(`[Adminator] ${message}`, context || '');\n    }\n  },\n\n  /**\n   * Log error messages (development only)\n   * @param {string} message - The error message\n   * @param {Error|Object} [context] - Error object or context data\n   */\n  error(message, context) {\n    if (isDev()) {\n      console.error(`[Adminator] ${message}`, context || '');\n    }\n  },\n\n  /**\n   * Log debug messages (development only)\n   * @param {string} message - The debug message\n   * @param {Object} [context] - Additional context data\n   */\n  debug(message, context) {\n    if (isDev()) {\n      console.debug(`[Adminator] ${message}`, context || '');\n    }\n  },\n\n  /**\n   * Group related log messages (development only)\n   * @param {string} label - Group label\n   */\n  group(label) {\n    if (isDev()) {\n      console.group(`[Adminator] ${label}`);\n    }\n  },\n\n  /**\n   * End a log group (development only)\n   */\n  groupEnd() {\n    if (isDev()) {\n      console.groupEnd();\n    }\n  },\n\n  /**\n   * Log with timing information (development only)\n   * @param {string} label - Timer label\n   */\n  time(label) {\n    if (isDev()) {\n      console.time(`[Adminator] ${label}`);\n    }\n  },\n\n  /**\n   * End timing and log result (development only)\n   * @param {string} label - Timer label (must match time() call)\n   */\n  timeEnd(label) {\n    if (isDev()) {\n      console.timeEnd(`[Adminator] ${label}`);\n    }\n  },\n\n  /**\n   * Log a table of data (development only)\n   * @param {Array|Object} data - Data to display as table\n   */\n  table(data) {\n    if (isDev()) {\n      console.table(data);\n    }\n  },\n};\n\nexport default Logger;\n"
  },
  {
    "path": "src/assets/scripts/utils/performance.js",
    "content": "/**\n * Adminator Performance Utilities\n * Provides ResizeObserver, IntersectionObserver, and lazy loading utilities\n *\n * @module utils/performance\n */\n\n/**\n * Store for ResizeObserver instances\n * @type {WeakMap<Element, Function>}\n */\nconst resizeCallbacks = new WeakMap();\n\n/**\n * Shared ResizeObserver instance for efficiency\n * @type {ResizeObserver|null}\n */\nlet sharedResizeObserver = null;\n\n/**\n * Store for IntersectionObserver callbacks\n * @type {WeakMap<Element, Function>}\n */\nconst intersectionCallbacks = new WeakMap();\n\n/**\n * Map of IntersectionObservers by threshold\n * @type {Map<string, IntersectionObserver>}\n */\nconst intersectionObservers = new Map();\n\n/**\n * Performance utilities namespace\n * @namespace\n */\nconst Performance = {\n  /**\n   * Observe element resize events efficiently\n   * Uses shared ResizeObserver for better performance\n   *\n   * @param {Element} element - Element to observe\n   * @param {Function} callback - Callback receiving { width, height, entry }\n   * @returns {Function} Cleanup function to stop observing\n   *\n   * @example\n   * const unobserve = Performance.onResize(chart, ({ width, height }) => {\n   *   chart.resize(width, height);\n   * });\n   */\n  onResize(element, callback) {\n    if (!element || typeof callback !== 'function') {\n      return () => {};\n    }\n\n    // Create shared observer if needed\n    if (!sharedResizeObserver) {\n      sharedResizeObserver = new ResizeObserver((entries) => {\n        for (const entry of entries) {\n          const cb = resizeCallbacks.get(entry.target);\n          if (cb) {\n            const { width, height } = entry.contentRect;\n            cb({ width, height, entry });\n          }\n        }\n      });\n    }\n\n    // Store callback and observe\n    resizeCallbacks.set(element, callback);\n    sharedResizeObserver.observe(element);\n\n    // Return cleanup function\n    return () => {\n      resizeCallbacks.delete(element);\n      sharedResizeObserver?.unobserve(element);\n    };\n  },\n\n  /**\n   * Observe when element enters/exits viewport\n   * Useful for lazy loading and animations\n   *\n   * @param {Element} element - Element to observe\n   * @param {Function} callback - Callback receiving { isIntersecting, entry }\n   * @param {Object} [options={}] - IntersectionObserver options\n   * @param {number} [options.threshold=0] - Visibility threshold (0-1)\n   * @param {string} [options.rootMargin='0px'] - Root margin\n   * @returns {Function} Cleanup function to stop observing\n   *\n   * @example\n   * const unobserve = Performance.onVisible(element, ({ isIntersecting }) => {\n   *   if (isIntersecting) {\n   *     loadContent();\n   *     unobserve(); // Stop after first trigger\n   *   }\n   * });\n   */\n  onVisible(element, callback, options = {}) {\n    if (!element || typeof callback !== 'function') {\n      return () => {};\n    }\n\n    const { threshold = 0, rootMargin = '0px' } = options;\n    const key = `${threshold}-${rootMargin}`;\n\n    // Get or create observer for this threshold\n    if (!intersectionObservers.has(key)) {\n      const observer = new IntersectionObserver(\n        (entries) => {\n          for (const entry of entries) {\n            const cb = intersectionCallbacks.get(entry.target);\n            if (cb) {\n              cb({\n                isIntersecting: entry.isIntersecting,\n                ratio: entry.intersectionRatio,\n                entry,\n              });\n            }\n          }\n        },\n        { threshold, rootMargin }\n      );\n      intersectionObservers.set(key, observer);\n    }\n\n    const observer = intersectionObservers.get(key);\n\n    // Store callback and observe\n    intersectionCallbacks.set(element, callback);\n    observer.observe(element);\n\n    // Return cleanup function\n    return () => {\n      intersectionCallbacks.delete(element);\n      observer.unobserve(element);\n    };\n  },\n\n  /**\n   * Lazy load an element when it becomes visible\n   * Automatically handles cleanup after loading\n   *\n   * @param {Element} element - Element to lazy load\n   * @param {Function} loadFn - Function to call when visible\n   * @param {Object} [options={}] - Options\n   * @param {string} [options.rootMargin='100px'] - Preload margin\n   * @returns {Function} Cleanup function\n   *\n   * @example\n   * Performance.lazyLoad(chartContainer, () => {\n   *   initializeChart(chartContainer);\n   * });\n   */\n  lazyLoad(element, loadFn, options = {}) {\n    const { rootMargin = '100px' } = options;\n    let loaded = false;\n\n    const unobserve = this.onVisible(\n      element,\n      ({ isIntersecting }) => {\n        if (isIntersecting && !loaded) {\n          loaded = true;\n          loadFn();\n          unobserve();\n        }\n      },\n      { rootMargin }\n    );\n\n    return unobserve;\n  },\n\n  /**\n   * Batch DOM reads and writes to prevent layout thrashing\n   *\n   * @param {Function} readFn - Function that reads from DOM\n   * @param {Function} writeFn - Function that writes to DOM\n   *\n   * @example\n   * Performance.batch(\n   *   () => element.offsetHeight, // Read\n   *   (height) => element.style.minHeight = height + 'px' // Write\n   * );\n   */\n  batch(readFn, writeFn) {\n    // Use requestAnimationFrame for batching\n    requestAnimationFrame(() => {\n      const value = readFn();\n      requestAnimationFrame(() => {\n        writeFn(value);\n      });\n    });\n  },\n\n  /**\n   * Execute callback on next animation frame\n   *\n   * @param {Function} callback - Function to execute\n   * @returns {number} Request ID for cancellation\n   *\n   * @example\n   * const id = Performance.nextFrame(() => updateUI());\n   * // Cancel: cancelAnimationFrame(id);\n   */\n  nextFrame(callback) {\n    return requestAnimationFrame(callback);\n  },\n\n  /**\n   * Execute callback when browser is idle\n   * Falls back to setTimeout if requestIdleCallback not available\n   *\n   * @param {Function} callback - Function to execute\n   * @param {Object} [options={}] - Options\n   * @param {number} [options.timeout=1000] - Maximum wait time\n   * @returns {number} Request ID for cancellation\n   *\n   * @example\n   * Performance.whenIdle(() => {\n   *   // Non-critical work\n   *   preloadNextPage();\n   * });\n   */\n  whenIdle(callback, options = {}) {\n    const { timeout = 1000 } = options;\n\n    if ('requestIdleCallback' in window) {\n      return requestIdleCallback(callback, { timeout });\n    }\n\n    // Fallback for Safari\n    return setTimeout(callback, 1);\n  },\n\n  /**\n   * Cancel an idle callback\n   *\n   * @param {number} id - Request ID from whenIdle\n   */\n  cancelIdle(id) {\n    if ('cancelIdleCallback' in window) {\n      cancelIdleCallback(id);\n    } else {\n      clearTimeout(id);\n    }\n  },\n\n  /**\n   * Preload a resource (image, script, etc.)\n   *\n   * @param {string} url - URL to preload\n   * @param {string} [as='image'] - Resource type (image, script, style, font)\n   * @returns {Promise<void>} Resolves when loaded\n   *\n   * @example\n   * await Performance.preload('/images/hero.jpg', 'image');\n   */\n  preload(url, as = 'image') {\n    return new Promise((resolve, reject) => {\n      const link = document.createElement('link');\n      link.rel = 'preload';\n      link.as = as;\n      link.href = url;\n      link.onload = resolve;\n      link.onerror = reject;\n      document.head.appendChild(link);\n    });\n  },\n\n  /**\n   * Measure execution time of a function\n   *\n   * @param {string} label - Label for the measurement\n   * @param {Function} fn - Function to measure\n   * @returns {*} Return value of the function\n   *\n   * @example\n   * const result = Performance.measure('render', () => renderChart());\n   */\n  measure(label, fn) {\n    const start = performance.now();\n    const result = fn();\n    const end = performance.now();\n\n    if (process.env.NODE_ENV === 'development') {\n      console.log(`[Adminator] ${label}: ${(end - start).toFixed(2)}ms`);\n    }\n\n    return result;\n  },\n\n  /**\n   * Cleanup all observers\n   * Call this when destroying the app\n   */\n  cleanup() {\n    // Cleanup resize observer\n    if (sharedResizeObserver) {\n      sharedResizeObserver.disconnect();\n      sharedResizeObserver = null;\n    }\n\n    // Cleanup intersection observers\n    for (const observer of intersectionObservers.values()) {\n      observer.disconnect();\n    }\n    intersectionObservers.clear();\n  },\n};\n\nexport default Performance;\n"
  },
  {
    "path": "src/assets/scripts/utils/sanitize.js",
    "content": "/**\n * Adminator Sanitization Utilities\n * HTML and input sanitization for security\n *\n * @module utils/sanitize\n */\n\n/**\n * HTML entities map for encoding\n * @type {Object<string, string>}\n */\nconst HTML_ENTITIES = {\n  '&': '&amp;',\n  '<': '&lt;',\n  '>': '&gt;',\n  '\"': '&quot;',\n  \"'\": '&#x27;',\n  '/': '&#x2F;',\n  '`': '&#x60;',\n  '=': '&#x3D;',\n};\n\n/**\n * Sanitization utilities namespace\n * @namespace\n */\nconst Sanitize = {\n  /**\n   * Escape HTML entities to prevent XSS\n   *\n   * @param {string} str - String to escape\n   * @returns {string} Escaped string safe for HTML insertion\n   *\n   * @example\n   * const safe = Sanitize.html('<script>alert(\"xss\")</script>');\n   * // Returns: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;\n   */\n  html(str) {\n    if (typeof str !== 'string') {\n      return String(str ?? '');\n    }\n    return str.replace(/[&<>\"'`=/]/g, char => HTML_ENTITIES[char]);\n  },\n\n  /**\n   * Escape string for use in HTML attributes\n   *\n   * @param {string} str - String to escape\n   * @returns {string} Escaped string safe for attribute values\n   *\n   * @example\n   * element.setAttribute('data-name', Sanitize.attr(userInput));\n   */\n  attr(str) {\n    return this.html(str);\n  },\n\n  /**\n   * Sanitize URL to prevent javascript: and data: URLs\n   *\n   * @param {string} url - URL to sanitize\n   * @param {string[]} [allowedProtocols=['http:', 'https:', 'mailto:', 'tel:']] - Allowed protocols\n   * @returns {string} Sanitized URL or empty string if invalid\n   *\n   * @example\n   * const safeUrl = Sanitize.url(userProvidedUrl);\n   * if (safeUrl) {\n   *   window.location.href = safeUrl;\n   * }\n   */\n  url(url, allowedProtocols = ['http:', 'https:', 'mailto:', 'tel:']) {\n    if (typeof url !== 'string') {\n      return '';\n    }\n\n    // Trim and normalize\n    const trimmed = url.trim().toLowerCase();\n\n    // Block dangerous protocols\n    const dangerousProtocols = ['javascript:', 'data:', 'vbscript:'];\n    for (const protocol of dangerousProtocols) {\n      if (trimmed.startsWith(protocol)) {\n        return '';\n      }\n    }\n\n    // Check for allowed protocols\n    try {\n      const parsed = new URL(url, window.location.origin);\n      if (!allowedProtocols.includes(parsed.protocol)) {\n        // Allow relative URLs\n        if (!url.startsWith('/') && !url.startsWith('./') && !url.startsWith('../')) {\n          return '';\n        }\n      }\n      return url;\n    } catch {\n      // If URL parsing fails, check if it's a relative URL\n      if (url.startsWith('/') || url.startsWith('./') || url.startsWith('../') || url.startsWith('#')) {\n        return url;\n      }\n      return '';\n    }\n  },\n\n  /**\n   * Strip HTML tags from a string\n   *\n   * @param {string} str - String with HTML\n   * @returns {string} String with HTML tags removed\n   *\n   * @example\n   * const text = Sanitize.stripTags('<p>Hello <b>World</b></p>');\n   * // Returns: 'Hello World'\n   */\n  stripTags(str) {\n    if (typeof str !== 'string') {\n      return String(str ?? '');\n    }\n\n    // Create a temporary element to leverage browser's HTML parser\n    const div = document.createElement('div');\n    div.innerHTML = str;\n    return div.textContent || div.innerText || '';\n  },\n\n  /**\n   * Sanitize a string for use in CSS\n   *\n   * @param {string} str - String to sanitize\n   * @returns {string} CSS-safe string\n   *\n   * @example\n   * element.style.setProperty('--custom', Sanitize.css(userInput));\n   */\n  css(str) {\n    if (typeof str !== 'string') {\n      return '';\n    }\n\n    // Remove potentially dangerous CSS values\n    return str\n      .replace(/expression\\s*\\(/gi, '')\n      .replace(/url\\s*\\(/gi, '')\n      .replace(/javascript:/gi, '')\n      .replace(/[<>\"']/g, '');\n  },\n\n  /**\n   * Sanitize a string for use in a filename\n   *\n   * @param {string} str - String to sanitize\n   * @returns {string} Filename-safe string\n   *\n   * @example\n   * const filename = Sanitize.filename(userInput) + '.txt';\n   */\n  filename(str) {\n    if (typeof str !== 'string') {\n      return '';\n    }\n\n    return str\n      .replace(/[/\\\\?%*:|\"<>]/g, '-') // Replace dangerous characters\n      .replace(/\\.\\./g, '-') // Prevent directory traversal\n      .replace(/^\\./, '_') // Don't start with dot\n      .slice(0, 255); // Limit length\n  },\n\n  /**\n   * Create safe innerHTML by escaping interpolated values\n   *\n   * @param {TemplateStringsArray} strings - Template literal strings\n   * @param {...*} values - Values to interpolate\n   * @returns {string} HTML string with escaped values\n   *\n   * @example\n   * element.innerHTML = Sanitize.template`<div>${userInput}</div>`;\n   */\n  template(strings, ...values) {\n    return strings.reduce((result, str, i) => {\n      const value = values[i - 1];\n      const escaped = value !== undefined ? this.html(String(value)) : '';\n      return result + escaped + str;\n    });\n  },\n\n  /**\n   * Validate and sanitize an email address\n   *\n   * @param {string} email - Email to validate\n   * @returns {string} Sanitized email or empty string if invalid\n   *\n   * @example\n   * const email = Sanitize.email(userInput);\n   * if (email) {\n   *   sendEmail(email);\n   * }\n   */\n  email(email) {\n    if (typeof email !== 'string') {\n      return '';\n    }\n\n    const trimmed = email.trim().toLowerCase();\n\n    // Basic email validation\n    const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n    if (!emailRegex.test(trimmed)) {\n      return '';\n    }\n\n    // Additional checks\n    if (trimmed.length > 254) {\n      return '';\n    }\n\n    return trimmed;\n  },\n\n  /**\n   * Sanitize a number input\n   *\n   * @param {*} value - Value to sanitize\n   * @param {Object} [options={}] - Options\n   * @param {number} [options.min=-Infinity] - Minimum value\n   * @param {number} [options.max=Infinity] - Maximum value\n   * @param {number} [options.default=0] - Default if invalid\n   * @returns {number} Sanitized number\n   *\n   * @example\n   * const age = Sanitize.number(userInput, { min: 0, max: 120, default: 18 });\n   */\n  number(value, options = {}) {\n    const { min = -Infinity, max = Infinity, default: defaultValue = 0 } = options;\n\n    const num = parseFloat(value);\n\n    if (isNaN(num) || !isFinite(num)) {\n      return defaultValue;\n    }\n\n    return Math.max(min, Math.min(max, num));\n  },\n\n  /**\n   * Sanitize an integer input\n   *\n   * @param {*} value - Value to sanitize\n   * @param {Object} [options={}] - Options\n   * @param {number} [options.min=-Infinity] - Minimum value\n   * @param {number} [options.max=Infinity] - Maximum value\n   * @param {number} [options.default=0] - Default if invalid\n   * @returns {number} Sanitized integer\n   *\n   * @example\n   * const count = Sanitize.integer(userInput, { min: 1, max: 100 });\n   */\n  integer(value, options = {}) {\n    return Math.floor(this.number(value, options));\n  },\n};\n\nexport default Sanitize;\n"
  },
  {
    "path": "src/assets/scripts/utils/storage.js",
    "content": "/**\n * Adminator Storage Utilities\n * Safe localStorage wrapper with error handling\n *\n * @module utils/storage\n */\n\n/**\n * Check if localStorage is available\n * @returns {boolean}\n */\nconst isAvailable = () => {\n  try {\n    const test = '__storage_test__';\n    localStorage.setItem(test, test);\n    localStorage.removeItem(test);\n    return true;\n  } catch {\n    return false;\n  }\n};\n\n/**\n * In-memory fallback when localStorage is unavailable\n * @type {Map<string, string>}\n */\nconst memoryStorage = new Map();\n\n/**\n * Storage utility with safe localStorage access\n * Falls back to in-memory storage when localStorage is unavailable\n * (e.g., private browsing, storage quota exceeded)\n *\n * @namespace\n */\nconst Storage = {\n  /**\n   * Check if storage is available\n   * @returns {boolean}\n   */\n  isAvailable,\n\n  /**\n   * Get an item from storage\n   *\n   * @param {string} key - Storage key\n   * @returns {string|null} Stored value or null\n   *\n   * @example\n   * const theme = Storage.get('theme');\n   */\n  get(key) {\n    try {\n      if (isAvailable()) {\n        return localStorage.getItem(key);\n      }\n      return memoryStorage.get(key) ?? null;\n    } catch {\n      return memoryStorage.get(key) ?? null;\n    }\n  },\n\n  /**\n   * Set an item in storage\n   *\n   * @param {string} key - Storage key\n   * @param {string} value - Value to store\n   * @returns {boolean} Success status\n   *\n   * @example\n   * Storage.set('theme', 'dark');\n   */\n  set(key, value) {\n    try {\n      if (isAvailable()) {\n        localStorage.setItem(key, value);\n        return true;\n      }\n      memoryStorage.set(key, value);\n      return true;\n    } catch {\n      // Fallback to memory storage\n      memoryStorage.set(key, value);\n      return true;\n    }\n  },\n\n  /**\n   * Remove an item from storage\n   *\n   * @param {string} key - Storage key\n   * @returns {boolean} Success status\n   *\n   * @example\n   * Storage.remove('theme');\n   */\n  remove(key) {\n    try {\n      if (isAvailable()) {\n        localStorage.removeItem(key);\n      }\n      memoryStorage.delete(key);\n      return true;\n    } catch {\n      memoryStorage.delete(key);\n      return true;\n    }\n  },\n\n  /**\n   * Clear all storage\n   *\n   * @returns {boolean} Success status\n   *\n   * @example\n   * Storage.clear();\n   */\n  clear() {\n    try {\n      if (isAvailable()) {\n        localStorage.clear();\n      }\n      memoryStorage.clear();\n      return true;\n    } catch {\n      memoryStorage.clear();\n      return true;\n    }\n  },\n\n  /**\n   * Get a JSON object from storage\n   *\n   * @param {string} key - Storage key\n   * @param {*} [defaultValue=null] - Default value if key doesn't exist or parse fails\n   * @returns {*} Parsed object or default value\n   *\n   * @example\n   * const settings = Storage.getJSON('settings', { theme: 'light' });\n   */\n  getJSON(key, defaultValue = null) {\n    try {\n      const value = this.get(key);\n      if (value === null) {\n        return defaultValue;\n      }\n      return JSON.parse(value);\n    } catch {\n      return defaultValue;\n    }\n  },\n\n  /**\n   * Set a JSON object in storage\n   *\n   * @param {string} key - Storage key\n   * @param {*} value - Value to store (will be JSON stringified)\n   * @returns {boolean} Success status\n   *\n   * @example\n   * Storage.setJSON('settings', { theme: 'dark', sidebar: 'expanded' });\n   */\n  setJSON(key, value) {\n    try {\n      return this.set(key, JSON.stringify(value));\n    } catch {\n      return false;\n    }\n  },\n\n  /**\n   * Check if a key exists in storage\n   *\n   * @param {string} key - Storage key\n   * @returns {boolean}\n   *\n   * @example\n   * if (Storage.has('theme')) {\n   *   // Use stored theme\n   * }\n   */\n  has(key) {\n    return this.get(key) !== null;\n  },\n\n  /**\n   * Get all keys in storage\n   *\n   * @returns {string[]} Array of keys\n   *\n   * @example\n   * const keys = Storage.keys();\n   */\n  keys() {\n    try {\n      if (isAvailable()) {\n        return Object.keys(localStorage);\n      }\n      return Array.from(memoryStorage.keys());\n    } catch {\n      return Array.from(memoryStorage.keys());\n    }\n  },\n\n  /**\n   * Get storage size in bytes (approximate)\n   *\n   * @returns {number} Size in bytes\n   *\n   * @example\n   * console.log(`Storage used: ${Storage.size()} bytes`);\n   */\n  size() {\n    try {\n      let total = 0;\n      const keys = this.keys();\n      for (const key of keys) {\n        const value = this.get(key);\n        if (value) {\n          total += key.length + value.length;\n        }\n      }\n      return total * 2; // UTF-16 uses 2 bytes per character\n    } catch {\n      return 0;\n    }\n  },\n};\n\nexport default Storage;\n"
  },
  {
    "path": "src/assets/scripts/utils/theme.js",
    "content": "/**\n * Adminator Theme Manager\n * Handles light/dark mode switching with localStorage persistence\n *\n * @module utils/theme\n * @example\n * // Get current theme\n * const current = Theme.current(); // 'light' or 'dark'\n *\n * // Toggle theme\n * Theme.toggle();\n *\n * // Apply specific theme\n * Theme.apply('dark');\n *\n * // Listen for theme changes\n * window.addEventListener('adminator:themeChanged', (e) => {\n *   console.log('New theme:', e.detail.theme);\n * });\n */\n\n/* global Chart */\n\n/** @constant {string} Storage key for theme preference */\nconst THEME_KEY = 'adminator-theme';\n\n/** @constant {string[]} Valid theme values */\nconst VALID_THEMES = ['light', 'dark'];\n\n/**\n * Safe localStorage wrapper\n * Handles cases where localStorage is unavailable (private browsing, etc.)\n * @private\n */\nconst Storage = {\n  /**\n   * Get item from localStorage\n   * @param {string} key - Storage key\n   * @returns {string|null} Stored value or null\n   */\n  get(key) {\n    try {\n      return localStorage.getItem(key);\n    } catch {\n      return null;\n    }\n  },\n\n  /**\n   * Set item in localStorage\n   * @param {string} key - Storage key\n   * @param {string} value - Value to store\n   * @returns {boolean} Success status\n   */\n  set(key, value) {\n    try {\n      localStorage.setItem(key, value);\n      return true;\n    } catch {\n      return false;\n    }\n  },\n};\n\n/**\n * Theme Manager\n * @namespace\n */\nconst Theme = {\n  /**\n   * Apply a theme to the document\n   * Updates Chart.js defaults if available\n   *\n   * @param {('light'|'dark')} theme - Theme to apply\n   * @fires adminator:themeChanged\n   * @returns {boolean} Success status\n   *\n   * @example\n   * Theme.apply('dark');\n   */\n  apply(theme) {\n    // Validate theme\n    if (!VALID_THEMES.includes(theme)) {\n      console.warn(`[Adminator] Invalid theme \"${theme}\". Using \"light\".`);\n      theme = 'light';\n    }\n\n    // Apply to document\n    document.documentElement.setAttribute('data-theme', theme);\n\n    // Update Chart.js defaults if available\n    if (window.Chart && Chart.defaults) {\n      const isDark = theme === 'dark';\n      const textColor = isDark ? '#FFFFFF' : '#212529';\n      const mutedColor = isDark ? '#D1D5DB' : '#6C757D';\n      const borderColor = isDark ? '#374151' : '#E2E5E8';\n      const gridColor = isDark ? 'rgba(209, 213, 219, 0.15)' : 'rgba(0, 0, 0, 0.05)';\n      const tooltipBg = isDark ? '#1F2937' : 'rgba(255, 255, 255, 0.95)';\n\n      // Set global defaults\n      Chart.defaults.color = textColor;\n      Chart.defaults.borderColor = borderColor;\n      Chart.defaults.backgroundColor = tooltipBg;\n\n      // Set plugin defaults\n      Chart.defaults.plugins.legend.labels.color = textColor;\n      Chart.defaults.plugins.tooltip.backgroundColor = tooltipBg;\n      Chart.defaults.plugins.tooltip.titleColor = textColor;\n      Chart.defaults.plugins.tooltip.bodyColor = textColor;\n      Chart.defaults.plugins.tooltip.borderColor = borderColor;\n\n      // Set scale defaults\n      const scales = ['category', 'linear', 'logarithmic', 'time', 'radialLinear'];\n      scales.forEach(scale => {\n        if (Chart.defaults.scales[scale]) {\n          Chart.defaults.scales[scale].ticks.color = mutedColor;\n          Chart.defaults.scales[scale].grid.color = gridColor;\n        }\n      });\n\n      // RadialLinear specific\n      if (Chart.defaults.scales.radialLinear) {\n        Chart.defaults.scales.radialLinear.pointLabels.color = mutedColor;\n        Chart.defaults.scales.radialLinear.angleLines.color = gridColor;\n      }\n    }\n\n    // Persist to storage\n    Storage.set(THEME_KEY, theme);\n\n    // Update toggle accessibility state if exists\n    const toggle = document.getElementById('theme-toggle');\n    if (toggle) {\n      toggle.setAttribute('aria-checked', theme === 'dark' ? 'true' : 'false');\n    }\n\n    // Dispatch event for other components\n    window.dispatchEvent(new CustomEvent('adminator:themeChanged', {\n      detail: { theme },\n    }));\n\n    return true;\n  },\n\n  /**\n   * Toggle between light and dark themes\n   *\n   * @returns {('light'|'dark')} The new theme\n   *\n   * @example\n   * const newTheme = Theme.toggle();\n   * console.log('Switched to:', newTheme);\n   */\n  toggle() {\n    const next = this.current() === 'dark' ? 'light' : 'dark';\n    this.apply(next);\n    return next;\n  },\n\n  /**\n   * Get the current theme\n   *\n   * @returns {('light'|'dark')} Current theme\n   *\n   * @example\n   * if (Theme.current() === 'dark') {\n   *   // Dark mode specific logic\n   * }\n   */\n  current() {\n    const stored = Storage.get(THEME_KEY);\n    return VALID_THEMES.includes(stored) ? stored : 'light';\n  },\n\n  /**\n   * Initialize the theme system\n   * Detects OS preference on first visit, otherwise uses stored preference\n   *\n   * @returns {('light'|'dark')} The applied theme\n   *\n   * @example\n   * // Call once on app initialization\n   * Theme.init();\n   */\n  init() {\n    const stored = Storage.get(THEME_KEY);\n\n    if (!stored) {\n      // First visit - detect OS preference\n      const prefersDark = window.matchMedia &&\n        window.matchMedia('(prefers-color-scheme: dark)').matches;\n      const theme = prefersDark ? 'dark' : 'light';\n      this.apply(theme);\n      return theme;\n    }\n\n    // Use stored preference\n    this.apply(this.current());\n    return this.current();\n  },\n\n  /**\n   * Get a CSS variable value from the document\n   *\n   * @param {string} varName - CSS variable name (with or without --)\n   * @returns {string} The CSS variable value\n   *\n   * @example\n   * const bgColor = Theme.getCSSVar('--c-bkg-body');\n   */\n  getCSSVar(varName) {\n    const name = varName.startsWith('--') ? varName : `--${varName}`;\n    return getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n  },\n\n  /**\n   * Get theme-aware colors for vector maps\n   *\n   * @returns {Object} Vector map color configuration\n   * @property {string} backgroundColor - Map background color\n   * @property {string} borderColor - Border color\n   * @property {string} regionColor - Default region fill color\n   * @property {string} markerFill - Marker fill color\n   * @property {string} markerStroke - Marker stroke color\n   * @property {string} hoverColor - Region hover color\n   * @property {string} selectedColor - Selected region color\n   * @property {string} scaleStart - Scale gradient start\n   * @property {string} scaleEnd - Scale gradient end\n   */\n  getVectorMapColors() {\n    return {\n      backgroundColor: this.getCSSVar('--vmap-bg-color'),\n      borderColor: this.getCSSVar('--vmap-border-color'),\n      regionColor: this.getCSSVar('--vmap-region-color'),\n      markerFill: this.getCSSVar('--vmap-marker-fill'),\n      markerStroke: this.getCSSVar('--vmap-marker-stroke'),\n      hoverColor: this.getCSSVar('--vmap-hover-color'),\n      selectedColor: this.getCSSVar('--vmap-selected-color'),\n      scaleStart: this.getCSSVar('--vmap-scale-start'),\n      scaleEnd: this.getCSSVar('--vmap-scale-end'),\n      scaleLight: this.getCSSVar('--vmap-scale-light'),\n      scaleDark: this.getCSSVar('--vmap-scale-dark'),\n    };\n  },\n\n  /**\n   * Get theme-aware colors for sparkline charts\n   *\n   * @returns {Object} Sparkline color configuration\n   */\n  getSparklineColors() {\n    return {\n      success: this.getCSSVar('--sparkline-success'),\n      purple: this.getCSSVar('--sparkline-purple'),\n      info: this.getCSSVar('--sparkline-info'),\n      danger: this.getCSSVar('--sparkline-danger'),\n      light: this.getCSSVar('--sparkline-light'),\n    };\n  },\n\n  /**\n   * Get theme-aware colors for Chart.js charts\n   *\n   * @returns {Object} Chart color configuration\n   * @property {string} textColor - Main text color\n   * @property {string} mutedColor - Muted/secondary text color\n   * @property {string} borderColor - Border color\n   * @property {string} gridColor - Grid line color\n   * @property {string} tooltipBg - Tooltip background color\n   */\n  getChartColors() {\n    const isDark = this.current() === 'dark';\n    return {\n      textColor: isDark ? '#FFFFFF' : '#212529',\n      mutedColor: isDark ? '#D1D5DB' : '#6C757D',\n      borderColor: isDark ? '#374151' : '#E2E5E8',\n      gridColor: isDark ? 'rgba(209, 213, 219, 0.15)' : 'rgba(0, 0, 0, 0.05)',\n      tooltipBg: isDark ? '#1F2937' : 'rgba(255, 255, 255, 0.95)',\n    };\n  },\n\n  /**\n   * Check if dark mode is currently active\n   *\n   * @returns {boolean} True if dark mode is active\n   *\n   * @example\n   * if (Theme.isDark()) {\n   *   // Apply dark-specific styles\n   * }\n   */\n  isDark() {\n    return this.current() === 'dark';\n  },\n\n  /**\n   * Check if light mode is currently active\n   *\n   * @returns {boolean} True if light mode is active\n   */\n  isLight() {\n    return this.current() === 'light';\n  },\n};\n\nexport default Theme;\n"
  },
  {
    "path": "src/assets/scripts/vectorMaps/index.js",
    "content": "import jsVectorMap from 'jsvectormap';\nimport 'jsvectormap/dist/jsvectormap.css';\nimport 'jsvectormap/dist/maps/world.js';\nimport Theme from '../utils/theme.js';\nimport { Events } from '../utils';\n\nexport default (function () {\n  \n  // Store map instance for cleanup\n  let mapInstance = null;\n  \n  // Main initialization function\n  const vectorMapInit = () => {\n    const worldMapContainer = document.getElementById('world-map-marker');\n    if (!worldMapContainer) return;\n    \n    // Remove existing map\n    const existingMap = document.getElementById('vmap');\n    if (existingMap) {\n      existingMap.remove();\n    }\n    \n    // Destroy existing map instance\n    if (mapInstance) {\n      try {\n        mapInstance.destroy();\n      } catch {\n        // Map instance cleanup\n      }\n      mapInstance = null;\n    }\n    \n    // Get current theme colors - using template colors directly\n    const isDark = Theme.current() === 'dark';\n    const colors = {\n      backgroundColor: isDark ? '#313644' : '#f9fafb',\n      regionColor: isDark ? '#565a5c' : '#e6eaf0',\n      borderColor: isDark ? '#72777a' : '#d3d9e3',\n      hoverColor: isDark ? '#7774e7' : '#0f9aee',\n      selectedColor: isDark ? '#37c936' : '#7774e7',\n      markerFill: isDark ? '#0f9aee' : '#7774e7',\n      markerStroke: isDark ? '#37c936' : '#0f9aee',\n      scaleStart: isDark ? '#b9c2d0' : '#e6eaf0',\n      scaleEnd: isDark ? '#0f9aee' : '#007bff',\n      textColor: isDark ? '#99abb4' : '#72777a',\n    };\n    \n    // Create new map container\n    const mapContainer = document.createElement('div');\n    mapContainer.id = 'vmap';\n    mapContainer.style.height = '490px';\n    mapContainer.style.position = 'relative';\n    mapContainer.style.overflow = 'hidden';\n    mapContainer.style.backgroundColor = colors.backgroundColor;\n    mapContainer.style.borderRadius = '8px';\n    mapContainer.style.border = `1px solid ${colors.borderColor}`;\n    \n    worldMapContainer.appendChild(mapContainer);\n    \n    // Initialize JSVectorMap\n    try {\n      mapInstance = jsVectorMap({\n        selector: '#vmap',\n        map: 'world',\n        \n        // Styling options\n        backgroundColor: 'transparent',\n        \n        // Region styling\n        regionStyle: {\n          initial: {\n            fill: colors.regionColor,\n            stroke: colors.borderColor,\n            'stroke-width': 1,\n            'stroke-opacity': 0.4,\n          },\n          hover: {\n            fill: colors.hoverColor,\n            cursor: 'pointer',\n          },\n          selected: {\n            fill: colors.selectedColor,\n          },\n        },\n        \n        // Marker styling\n        markerStyle: {\n          initial: {\n            r: 7,\n            fill: colors.markerFill,\n            stroke: colors.markerStroke,\n            'stroke-width': 2,\n            'stroke-opacity': 0.4,\n          },\n          hover: {\n            r: 10,\n            fill: colors.hoverColor,\n            'stroke-opacity': 0.8,\n            cursor: 'pointer',\n          },\n        },\n        \n        // Markers data\n        markers: [\n          {\n            name: 'INDIA : 350',\n            coords: [21.00, 78.00],\n          },\n          {\n            name: 'Australia : 250',\n            coords: [-33.00, 151.00],\n          },\n          {\n            name: 'USA : 250',\n            coords: [36.77, -119.41],\n          },\n          {\n            name: 'UK : 250',\n            coords: [55.37, -3.41],\n          },\n          {\n            name: 'UAE : 250',\n            coords: [25.20, 55.27],\n          },\n        ],\n        \n        // Simplified approach - remove series for now to test base colors\n        // series: {\n        //   regions: [\n        //     {\n        //       attribute: 'fill',\n        //       scale: [colors.scaleStart, colors.scaleEnd],\n        //       normalizeFunction: 'polynomial',\n        //       values: {\n        //         'US': 50,\n        //         'SA': 30,\n        //         'AU': 70,\n        //         'IN': 40,\n        //         'GB': 60,\n        //         'LV': 80,\n        //       },\n        //     },\n        //   ],\n        // },\n        \n        // Interaction options\n        zoomOnScroll: false,\n        zoomButtons: false,\n        \n        // Event handlers\n        onMarkerTooltipShow(event, tooltip, index) {\n          // Safe access to marker data\n          const marker = this.markers && this.markers[index];\n          const markerName = marker ? marker.name : `Marker ${index + 1}`;\n          tooltip.text(markerName);\n        },\n        \n        onRegionTooltipShow(event, tooltip, code) {\n          // Safe access to region data\n          const regionName = (this.mapData && this.mapData.paths && this.mapData.paths[code]) \n            ? this.mapData.paths[code].name || code \n            : code;\n          const value = (this.series && this.series.regions && this.series.regions[0] && this.series.regions[0].values) \n            ? this.series.regions[0].values[code] \n            : null;\n          tooltip.text(`${regionName}${value ? `: ${  value}` : ''}`);\n        },\n        \n        onLoaded() {\n          // Map loaded successfully\n        },\n      });\n      \n      // Store instance for theme updates\n      worldMapContainer.mapInstance = mapInstance;\n      \n    } catch {\n      // Error initializing JSVectorMap\n      \n      // Fallback: show a simple message\n      mapContainer.innerHTML = `\n        <div style=\"\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          height: 100%;\n          background: ${colors.backgroundColor};\n          border: 1px solid ${colors.borderColor};\n          border-radius: 8px;\n          color: ${colors.textColor};\n          font-size: 14px;\n        \">\n          <div style=\"text-align: center;\">\n            <div style=\"font-size: 24px; margin-bottom: 8px;\">🗺️</div>\n            <div>World Map</div>\n            <div style=\"font-size: 12px; margin-top: 4px;\">Interactive map will load here</div>\n          </div>\n        </div>\n      `;\n    }\n  };\n  \n  // Theme update function\n  const updateMapTheme = () => {\n    if (mapInstance) {\n      const isDark = Theme.current() === 'dark';\n      const colors = {\n        backgroundColor: isDark ? '#313644' : '#f9fafb',\n        regionColor: isDark ? '#565a5c' : '#e6eaf0',\n        borderColor: isDark ? '#72777a' : '#d3d9e3',\n        hoverColor: isDark ? '#7774e7' : '#0f9aee',\n        selectedColor: isDark ? '#37c936' : '#7774e7',\n        markerFill: isDark ? '#0f9aee' : '#7774e7',\n        markerStroke: isDark ? '#37c936' : '#0f9aee',\n        scaleStart: isDark ? '#b9c2d0' : '#e6eaf0',\n        scaleEnd: isDark ? '#0f9aee' : '#007bff',\n        textColor: isDark ? '#99abb4' : '#72777a',\n      };\n      \n      try {\n        // Update region styles - commented out series for now\n        // mapInstance.updateSeries('regions', {\n        //   attribute: 'fill',\n        //   scale: [colors.scaleStart, colors.scaleEnd],\n        //   values: {\n        //     'US': 50,\n        //     'SA': 30,\n        //     'AU': 70,\n        //     'IN': 40,\n        //     'GB': 60,\n        //     'LV': 80,\n        //   },\n        // });\n        \n        // Update container background\n        const container = document.getElementById('vmap');\n        if (container) {\n          container.style.backgroundColor = colors.backgroundColor;\n        }\n        \n      } catch {\n        // Theme update failed, reinitializing map\n        vectorMapInit();\n      }\n    } else {\n      vectorMapInit();\n    }\n  };\n  \n  // Initialize map\n  vectorMapInit();\n  \n  // Reinitialize on window resize\n  window.addEventListener('resize', Events.debounce(vectorMapInit, 300));\n\n  // Listen for theme changes\n  window.addEventListener('adminator:themeChanged', Events.debounce(updateMapTheme, 150));\n  \n  // Cleanup on page unload\n  window.addEventListener('beforeunload', () => {\n    if (mapInstance) {\n      try {\n        mapInstance.destroy();\n      } catch {\n        // Map cleanup on unload\n      }\n      mapInstance = null;\n    }\n  });\n  \n  // Return public API\n  return {\n    init: vectorMapInit,\n    updateTheme: updateMapTheme,\n    getInstance: () => mapInstance,\n  };\n}());"
  },
  {
    "path": "src/assets/styles/index.scss",
    "content": "@use 'spec/settings/index' as *;\n@use 'spec/tools/index' as *;\n@use \"bootstrap/scss/bootstrap\" as *;\n@use 'spec/index' as *;\n@use 'vendor/index' as *;\n@import \"utils/theme.css\";\n@import \"utils/mobile.scss\";\n\nbody {\n  background: var(--c-bkg-body);\n  color: var(--c-text-base);\n}\n\n.sidebar {\n  background: var(--c-bkg-sidebar);\n}\n\n.bgc-white {\n  background: var(--c-bkg-card) !important;\n}\n\n// Dark-mode aware Header & Dropdown --------------------------------\n.header {\n  background: var(--c-bkg-card);\n  border-bottom: 1px solid var(--c-border);\n\n  .dropdown-menu {\n    background: var(--c-bkg-card);\n    border: 1px solid var(--c-border);\n  }\n\n  .nav-left > li > a,\n  .nav-right > li > a {\n    color: var(--c-text-base);\n\n    &:hover,\n    &:focus {\n      color: var(--c-primary);\n    }\n  }\n\n  .notifications .counter {\n    background: var(--c-danger);\n    color: #fff;\n  }\n\n  // Theme toggle switch styling\n  .theme-toggle {\n    display: flex;\n    align-items: center;\n    height: 65px; // Match header height\n    padding: 0 15px;\n\n    .form-check {\n      margin: 0;\n      \n      .form-check-label {\n        color: var(--c-text-muted);\n        font-size: 11px;\n        font-weight: 500;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        \n        i {\n          font-size: 12px;\n        }\n      }\n\n      .form-check-input {\n        width: 2.5rem;\n        height: 1.25rem;\n        background-color: var(--c-border);\n        border: 1px solid var(--c-border);\n        cursor: pointer;\n        \n        &:checked {\n          background-color: var(--c-primary);\n          border-color: var(--c-primary);\n        }\n\n        &:focus {\n          box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--c-primary) 25%, transparent);\n          border-color: var(--c-primary);\n        }\n      }\n    }\n\n    // Mobile theme toggle adjustments\n    @media (max-width: 991px) {\n      padding: 0 6px;\n      height: 65px;\n\n      .form-check {\n        .form-check-label {\n          font-size: 10px;\n          \n          &:first-child {\n            margin-right: 4px;\n          }\n          \n          &:last-child {\n            margin-left: 4px;\n          }\n        }\n\n        .form-check-input {\n          width: 2rem;\n          height: 1rem;\n        }\n      }\n    }\n\n    // Very small mobile adjustments\n    @media (max-width: 480px) {\n      padding: 0 4px;\n\n      .form-check {\n        flex-direction: column;\n        align-items: center;\n        text-align: center;\n        \n        .form-check-label {\n          font-size: 8px;\n          margin: 1px 0;\n          white-space: nowrap;\n          \n          i {\n            margin: 0 2px;\n          }\n        }\n\n        .form-check-input {\n          width: 1.5rem;\n          height: 0.8rem;\n          margin: 2px 0;\n        }\n      }\n    }\n  }\n}\n\n// Mobile dropdown menu improvements\n@media (max-width: 767px) {\n  .header {\n    .nav-right {\n      .dropdown-menu {\n        position: fixed !important;\n        top: 65px !important;\n        left: 5px !important;\n        right: 5px !important;\n        width: auto !important;\n        max-width: none !important;\n        min-width: auto !important;\n        transform: none !important;\n        z-index: 1050;\n        border-radius: 8px;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        max-height: calc(100vh - 85px);\n        overflow-y: auto;\n      }\n\n      .notifications .dropdown-menu {\n        max-height: calc(100vh - 85px);\n        overflow-y: auto;\n      }\n    }\n  }\n}\n\n// Mobile search input overlay\n@media (max-width: 480px) {\n  .header {\n    .search-input {\n      &.active {\n        position: absolute;\n        top: 65px;\n        left: 0;\n        right: 0;\n        background: var(--c-bkg-card);\n        border-top: 1px solid var(--c-border);\n        padding: 10px;\n        z-index: 999;\n\n        input {\n          margin-top: 0;\n          width: 100%;\n          padding: 10px;\n          border: 1px solid var(--c-border);\n          border-radius: 4px;\n          background: var(--c-bkg-card);\n          color: var(--c-text-base);\n\n          &::placeholder {\n            color: var(--c-text-muted);\n          }\n        }\n      }\n    }\n  }\n}\n\n// Tables -------------------------------------------------\n.table {\n  background: var(--c-bkg-card);\n  color: var(--c-text-base);\n  \n  thead th {\n    background: var(--c-bkg-card);\n    color: var(--c-text-base);\n    border-color: var(--c-border);\n  }\n  \n  tbody {\n    td, th {\n      border-color: var(--c-border);\n      color: var(--c-text-base);\n      background: var(--c-bkg-card);\n    }\n    \n    tr:nth-child(even) {\n      td, th {\n        background: color-mix(in srgb, var(--c-bkg-card) 95%, var(--c-border));\n      }\n    }\n  }\n  \n  tfoot th {\n    background: var(--c-bkg-card);\n    color: var(--c-text-base);\n    border-color: var(--c-border);\n  }\n  \n  // Bootstrap table variants\n  &.table-striped {\n    tbody tr:nth-child(odd) {\n      td, th {\n        background: var(--c-bkg-card);\n      }\n    }\n    \n    tbody tr:nth-child(even) {\n      td, th {\n        background: color-mix(in srgb, var(--c-bkg-card) 95%, var(--c-border));\n      }\n    }\n  }\n  \n  &.table-hover {\n    tbody tr:hover {\n      td, th {\n        background: color-mix(in srgb, var(--c-bkg-card) 90%, var(--c-border)) !important;\n        color: var(--c-text-base);\n      }\n    }\n  }\n  \n  &.table-bordered {\n    border: 1px solid var(--c-border);\n    \n    th, td {\n      border: 1px solid var(--c-border);\n    }\n  }\n  \n  // Table head variants\n  .table-dark {\n    background: color-mix(in srgb, var(--c-bkg-card) 80%, #000);\n    \n    th {\n      background: color-mix(in srgb, var(--c-bkg-card) 80%, #000);\n      color: var(--c-text-base);\n      border-color: var(--c-border);\n    }\n  }\n  \n  .table-light {\n    background: var(--c-bkg-card);\n    \n    th {\n      background: var(--c-bkg-card);\n      color: var(--c-text-base);\n      border-color: var(--c-border);\n    }\n  }\n}\n\n// Forms --------------------------------------------------\n.form-control,\n.form-select {\n  background: var(--c-bkg-card);\n  color: var(--c-text-base);\n  border: 1px solid var(--c-border);\n\n  &:focus {\n    border-color: var(--c-primary);\n    box-shadow: 0 0 0 0.1rem rgba(75, 124, 243, .25);\n  }\n}\n\ninput::placeholder {\n  color: var(--c-text-muted);\n}\n\n// Cards --------------------------------------------------\n.card,\n.bgc-white.bd,\n.bgc-white.bdT,\n.bgc-white.bdB {\n  background: var(--c-bkg-card);\n  border-color: var(--c-border) !important;\n  color: var(--c-text-base);\n}\n\n// Alerts -------------------------------------------------\n.alert {\n  color: var(--c-text-base);\n  border-color: var(--c-border);\n  background: color-mix(in srgb, var(--c-bkg-card) 85%, var(--c-border));\n\n  &.alert-primary {\n    background: color-mix(in srgb, var(--c-primary) 20%, var(--c-bkg-card));\n    border-color: var(--c-primary);\n    color: var(--c-primary);\n  }\n}\n\n// Modals -------------------------------------------------\n.modal-content {\n  background: var(--c-bkg-card);\n  color: var(--c-text-base);\n  border: 1px solid var(--c-border);\n}\n\n// Logo colours ------------------------------------------\n// Logo SVG has white \"A\" on primary indigo background (#6366f1)\n// No CSS manipulation needed - colors are baked into the SVG\n\n.logo-text {\n  color: var(--c-text-base);\n}\n\n// Ensure auth page logos are properly sized\n.logo-auth {\n  max-width: 60px !important;\n  max-height: 60px !important;\n  width: auto;\n  height: auto;\n}\n\n// Generic border utility override -----------------------\n.bd,\n.bdT,\n.bdB,\n.bdL,\n.bdR {\n  border-color: var(--c-border) !important;\n}\n\n// Sidebar logo border -----------------------------------\n.sidebar-logo {\n  border-color: var(--c-border) !important;\n}\n\n// Grey-100 utility override -----------------------------\n.bgc-grey-100 { background: color-mix(in srgb, var(--c-bkg-body) 90%, #000) !important; }\n\n// Sales Report widget styling -------------------------------\n.sales-report-header {\n  background-color: var(--c-primary) !important;\n  color: #ffffff !important;\n  \n  h5, h3, p {\n    color: #ffffff !important;\n  }\n}\n\n// Hover background utilities for dark mode ----------------\n[data-theme=\"dark\"] .bgcH-grey-100:hover {\n  background: color-mix(in srgb, var(--c-bkg-card) 85%, var(--c-border)) !important;\n}\n\n// Sidebar right border ----------------------------------\n.sidebar,\n.sidebar-menu {\n  border-right: 1px solid var(--c-border);\n}\n\n// Dark mode text color overrides for better visibility -------\n[data-theme=\"dark\"] .c-grey-900 {\n  color: var(--c-text-base) !important;\n}\n\n[data-theme=\"dark\"] .c-grey-800 {\n  color: var(--c-text-base) !important;\n}\n\n[data-theme=\"dark\"] .c-grey-700 {\n  color: var(--c-text-muted) !important;\n}\n\n[data-theme=\"dark\"] .c-grey-600 {\n  color: var(--c-text-muted) !important;\n}\n\n[data-theme=\"dark\"] .text-dark {\n  color: var(--c-text-base) !important;\n}\n\n// Ensure all headings are theme-aware ----------------------\nh1, h2, h3, h4, h5, h6 {\n  color: var(--c-text-base);\n}\n\n// Email & Compose dark mode fixes ---------------------------\n.email-app {\n  .email-side-nav {\n    background: var(--c-bkg-card);\n    border-color: var(--c-border);\n  }\n  \n  .email-list,\n  .email-content,\n  .email-wrapper {\n    background: var(--c-bkg-card) !important;\n    color: var(--c-text-base);\n  }\n  \n  .email-list-item {\n    border-color: var(--c-border) !important;\n    \n    &:hover {\n      background: color-mix(in srgb, var(--c-bkg-card) 85%, var(--c-border)) !important;\n    }\n  }\n}\n\n// Badge colors for dark mode ---------------------------------\n[data-theme=\"dark\"] .badge {\n  &.bgc-deep-purple-50 {\n    background: #8b5cf6 !important;\n    color: #fff !important;\n  }\n  \n  &.c-deep-purple-700 {\n    color: #fff !important;\n  }\n  \n  &.bgc-green-50 {\n    background: var(--c-success) !important;\n    color: #fff !important;\n  }\n  \n  &.c-green-700 {\n    color: #fff !important;\n  }\n  \n  &.bgc-blue-50 {\n    background: var(--c-primary) !important;\n    color: #fff !important;\n  }\n  \n  &.c-blue-700 {\n    color: #fff !important;\n  }\n  \n  &.bgc-amber-50 {\n    background: #f59e0b !important;\n    color: #000 !important;\n  }\n  \n  &.c-amber-700 {\n    color: #000 !important;\n  }\n  \n  &.bgc-red-50 {\n    background: var(--c-danger) !important;\n    color: #fff !important;\n  }\n  \n  &.c-red-700 {\n    color: #fff !important;\n  }\n}\n\n// Email buttons in dark mode ---------------------------------\n[data-theme=\"dark\"] .email-app {\n  .btn.bgc-white {\n    background: var(--c-bkg-card) !important;\n    color: var(--c-text-base) !important;\n    border: 1px solid var(--c-border) !important;\n    \n    &:hover {\n      background: color-mix(in srgb, var(--c-bkg-card) 85%, var(--c-border)) !important;\n    }\n  }\n}\n\n// Additional table styling for consistency ----------------\n.table-responsive {\n  border: 1px solid var(--c-border);\n  border-radius: 3px;\n}\n\n// Table inside cards should blend seamlessly\n.bgc-white .table {\n  background: var(--c-bkg-card);\n  border: none;\n  \n  thead th {\n    border-top: none;\n  }\n}\n\n// Status badges in tables need proper theming\n.table .badge {\n  &.bgc-red-50.c-red-700 {\n    background: var(--c-danger) !important;\n    color: #fff !important;\n  }\n  \n  &.bgc-deep-purple-50.c-deep-purple-700 {\n    background: #8b5cf6 !important;\n    color: #fff !important;\n  }\n  \n  &.bgc-pink-50.c-pink-700 {\n    background: #ec4899 !important;\n    color: #fff !important;\n  }\n}\n\n// Chat page specific dark mode fixes ----------------------\n[data-theme=\"dark\"] {\n  // Chat page loader\n  #loader {\n    background: var(--c-bkg-body) !important;\n  }\n\n  // Chat message bubbles - different styling for sent vs received\n  .ai-fs .pY-3.pX-10.bgc-white {\n    background: var(--c-bkg-card) !important;\n    border: 1px solid var(--c-border);\n  }\n\n  .ai-fe .pY-3.pX-10.bgc-white {\n    background: var(--c-primary) !important;\n    border: 1px solid var(--c-primary);\n    color: white !important;\n\n    small {\n      color: rgba(255, 255, 255, 0.8) !important;\n    }\n\n    span {\n      color: white !important;\n    }\n  }\n\n  // Chat status indicators (preserve their semantic colors)\n  .c-green-500 {\n    color: var(--c-success) !important;\n  }\n\n  .c-amber-500 {\n    color: #f59e0b !important;\n  }\n\n  .c-red-500 {\n    color: var(--c-danger) !important;\n  }\n\n  // Chat typing indicator\n  .lh-1 i {\n    color: var(--c-text-muted);\n  }\n\n  // Chat backgrounds  \n  .bgc-grey-200 {\n    background: var(--c-bkg-body) !important;\n  }\n}\n\n// Todo List dark mode fixes ---------------------------------\n[data-theme=\"dark\"] {\n  .list-task {\n    background: var(--c-bkg-card);\n    border: 1px solid var(--c-border);\n\n    .list-group-item {\n      background: var(--c-bkg-card);\n      border-color: var(--c-border);\n      color: var(--c-text-base);\n\n      &:first-child {\n        border-top-color: var(--c-border);\n      }\n\n      &:last-child {\n        border-bottom-color: var(--c-border);\n      }\n\n      .form-label {\n        color: var(--c-text-base);\n      }\n\n      // Checkbox styling for dark mode\n      .checkbox {\n        input[type=\"checkbox\"] {\n          &:checked + label::before {\n            background: var(--c-primary);\n            border-color: var(--c-primary);\n          }\n\n          &:focus + label::before {\n            border-color: var(--c-primary);\n            box-shadow: 0 0 0 0.2rem rgba(var(--c-primary-rgb), 0.25);\n          }\n        }\n\n        label::before {\n          background: var(--c-bkg-card);\n          border-color: var(--c-border);\n        }\n      }\n\n      // Todo badges\n      .badge {\n        &.bg-success {\n          background: var(--c-success) !important;\n          color: white !important;\n        }\n\n        &.bg-danger {\n          background: var(--c-danger) !important;\n          color: white !important;\n        }\n\n        &.bg-warning {\n          background: #f59e0b !important;\n          color: #000 !important;\n        }\n\n        &.bg-info {\n          background: var(--c-primary) !important;\n          color: white !important;\n        }\n      }\n    }\n  }\n}\n\n// Calendar page dark mode fixes -----------------------------\n[data-theme=\"dark\"] {\n  // Calendar event sidebar\n  .bgc-white.bd {\n    background: var(--c-bkg-card) !important;\n    border-color: var(--c-border) !important;\n\n    .bdB {\n      border-bottom-color: var(--c-border) !important;\n    }\n\n    // Calendar event items\n    .peers.ai-c.jc-sb.fxw-nw {\n      border-bottom-color: var(--c-border) !important;\n\n      .c-grey-900 {\n        color: var(--c-text-base) !important;\n      }\n\n      .c-grey-600 {\n        color: var(--c-text-muted) !important;\n      }\n\n      .c-grey-700 {\n        color: var(--c-text-muted) !important;\n      }\n\n      // Action buttons (edit, delete)\n      .c-deep-purple-500 {\n        &:hover.cH-blue-500 {\n          color: var(--c-primary) !important;\n        }\n      }\n\n      .c-red-500 {\n        &:hover.cH-blue-500 {\n          color: var(--c-danger) !important;\n        }\n      }\n    }\n\n    // Add event button\n    .btn-warning {\n      background: #f59e0b;\n      border-color: #f59e0b;\n      color: #000;\n\n      &:hover {\n        background: #d97706;\n        border-color: #d97706;\n      }\n    }\n  }\n\n  // Calendar modal\n  .modal-content {\n    background: var(--c-bkg-card);\n    border: 1px solid var(--c-border);\n    color: var(--c-text-base);\n\n    .modal-body {\n      .form-label {\n        color: var(--c-text-base);\n      }\n\n      .form-control {\n        background: var(--c-bkg-body);\n        border-color: var(--c-border);\n        color: var(--c-text-base);\n\n        &::placeholder {\n          color: var(--c-text-muted);\n        }\n\n        &:focus {\n          background: var(--c-bkg-body);\n          border-color: var(--c-primary);\n          box-shadow: 0 0 0 0.2rem rgba(var(--c-primary-rgb), 0.25);\n        }\n      }\n\n      .input-group-text {\n        background: var(--c-bkg-card) !important;\n        border-color: var(--c-border);\n        color: var(--c-text-base);\n\n        &.bgc-white {\n          background: var(--c-bkg-card) !important;\n        }\n      }\n\n      .btn-primary {\n        background: var(--c-primary);\n        border-color: var(--c-primary);\n\n        &:hover {\n          background: var(--c-primary-hover);\n          border-color: var(--c-primary-hover);\n        }\n      }\n    }\n  }\n\n  // Calendar grid improvements\n  .fc {\n    // Calendar day cells\n    .fc-day {\n      background: var(--c-bkg-card);\n      \n      &:hover {\n        background: color-mix(in srgb, var(--c-bkg-card) 90%, var(--c-border));\n      }\n    }\n\n    // Calendar header\n    .fc-head {\n      background: var(--c-bkg-card);\n    }\n\n    // Weekend styling\n    .fc-sun,\n    .fc-sat {\n      background: color-mix(in srgb, var(--c-bkg-card) 95%, var(--c-border));\n    }\n\n    // Other days\n    .fc-other-month {\n      .fc-day-number {\n        color: var(--c-text-muted) !important;\n      }\n    }\n\n    // Event hover effects\n    .fc-event {\n      &:hover {\n        opacity: 0.9;\n      }\n    }\n  }\n}\n\n"
  },
  {
    "path": "src/assets/styles/spec/components/easyPieChart.scss",
    "content": ".easy-pie-chart {\n  position: relative;\n\n  span {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    line-height: 0;\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/components/footer.scss",
    "content": "footer {\n  z-index: 1;\n  position: relative;\n}\n"
  },
  {
    "path": "src/assets/styles/spec/components/forms.scss",
    "content": "@use '../settings/baseColors' as *;\n@use '../settings/materialColors' as *;\n\n.checkbox label {\n  display: inline-block;\n  vertical-align: middle;\n  position: relative;\n  padding-left: 17px;\n  margin-bottom: 0;\n}\n\n.checkbox label::before {\n  content: \"\";\n  display: inline-block;\n  position: absolute;\n  width: 17px;\n  height: 17px;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-left: -12px;\n  border: 1px solid $grey-300;\n  border-radius: 3px;\n  background-color: $md-white;\n  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;\n  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;\n  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;\n}\n\n.checkbox label::after {\n  display: inline-block;\n  position: absolute;\n  width: 17px;\n  height: 17px;\n  text-align: center;\n  font-size: 10px !important;\n  line-height: 17px;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-left: -12px;\n  color: $grey-500;\n}\n\n.checkbox input[type=\"checkbox\"] {\n  opacity: 0;\n  z-index: 1;\n}\n\n.checkbox input[type=\"checkbox\"]:focus + label::before {\n  outline: thin dotted;\n  outline: 5px auto -webkit-focus-ring-color;\n  outline-offset: -2px;\n}\n\n.checkbox input[type=\"checkbox\"]:checked + label::after {\n  font-family: 'FontAwesome';\n  content: \"\\f00c\";\n  font-size: 13px;\n}\n\n.checkbox input[type=\"checkbox\"]:disabled + label {\n  opacity: 0.65;\n}\n\n.checkbox input[type=\"checkbox\"]:disabled + label::before {\n  background-color: $grey-400;\n  cursor: not-allowed;\n}\n\n.checkbox.checkbox-circle label::before {\n  border-radius: 50%;\n}\n\n.checkbox.checkbox-inline {\n  margin-top: 0;\n}\n\n.checkbox-primary input[type=\"checkbox\"]:checked + label::before {\n  background-color: $default-primary;\n  border-color: $default-primary;\n}\n\n.checkbox-primary input[type=\"checkbox\"]:checked + label::after {\n  color: #fff;\n}\n\n.checkbox-danger input[type=\"checkbox\"]:checked + label::before {\n  background-color: $default-danger;\n  border-color: $default-danger;\n}\n\n.checkbox-danger input[type=\"checkbox\"]:checked + label::after {\n  color: $md-white;\n}\n\n.checkbox-info input[type=\"checkbox\"]:checked + label::before {\n  background-color: $default-info;\n  border-color: $default-info;\n}\n\n.checkbox-info input[type=\"checkbox\"]:checked + label::after {\n  color: $md-white;\n}\n\n.checkbox-warning input[type=\"checkbox\"]:checked + label::before {\n  background-color: $default-warning;\n  border-color: $default-warning;\n}\n\n.checkbox-warning input[type=\"checkbox\"]:checked + label::after {\n  color: $md-white;\n}\n\n.checkbox-success input[type=\"checkbox\"]:checked + label::before {\n  background-color: $default-success;\n  border-color: $default-success;\n}\n\n.checkbox-success input[type=\"checkbox\"]:checked + label::after {\n  color: $md-white;\n}\n\n.radio {\n  padding-left: 20px;\n}\n\n.radio label {\n  display: inline-block;\n  vertical-align: middle;\n  position: relative;\n  padding-left: 5px;\n}\n\n.radio label::before {\n  content: \"\";\n  display: inline-block;\n  position: absolute;\n  width: 17px;\n  height: 17px;\n  left: 0;\n  margin-left: -20px;\n  border: 1px solid #cccccc;\n  border-radius: 50%;\n  background-color: var(--c-bkg-card);\n  -webkit-transition: border 0.15s ease-in-out;\n  -o-transition: border 0.15s ease-in-out;\n  transition: border 0.15s ease-in-out;\n}\n\n.radio label::after {\n  display: inline-block;\n  position: absolute;\n  content: \" \";\n  width: 11px;\n  height: 11px;\n  left: 3px;\n  top: 3px;\n  margin-left: -20px;\n  border-radius: 50%;\n  background-color: var(--c-text-base);\n  -webkit-transform: scale(0, 0);\n  -ms-transform: scale(0, 0);\n  -o-transform: scale(0, 0);\n  transform: scale(0, 0);\n  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);\n  -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);\n  -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);\n  transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);\n}\n\n.radio input[type=\"radio\"] {\n  opacity: 0;\n  z-index: 1;\n}\n\n.radio input[type=\"radio\"]:focus + label::before {\n  outline: thin dotted;\n  outline: 5px auto -webkit-focus-ring-color;\n  outline-offset: -2px;\n}\n\n.radio input[type=\"radio\"]:checked + label::after {\n  -webkit-transform: scale(1, 1);\n  -ms-transform: scale(1, 1);\n  -o-transform: scale(1, 1);\n  transform: scale(1, 1);\n}\n\n.radio input[type=\"radio\"]:disabled + label {\n  opacity: 0.65;\n}\n\n.radio input[type=\"radio\"]:disabled + label::before {\n  cursor: not-allowed;\n}\n\n.radio.radio-inline {\n  margin-top: 0;\n}\n\n.radio-primary input[type=\"radio\"] + label::after {\n  background-color: #428bca;\n}\n\n.radio-primary input[type=\"radio\"]:checked + label::before {\n  border-color: #428bca;\n}\n\n.radio-primary input[type=\"radio\"]:checked + label::after {\n  background-color: #428bca;\n}\n\n.radio-danger input[type=\"radio\"] + label::after {\n  background-color: #d9534f;\n}\n\n.radio-danger input[type=\"radio\"]:checked + label::before {\n  border-color: #d9534f;\n}\n\n.radio-danger input[type=\"radio\"]:checked + label::after {\n  background-color: #d9534f;\n}\n\n.radio-info input[type=\"radio\"] + label::after {\n  background-color: #5bc0de;\n}\n\n.radio-info input[type=\"radio\"]:checked + label::before {\n  border-color: #5bc0de;\n}\n\n.radio-info input[type=\"radio\"]:checked + label::after {\n  background-color: #5bc0de;\n}\n\n.radio-warning input[type=\"radio\"] + label::after {\n  background-color: #f0ad4e;\n}\n\n.radio-warning input[type=\"radio\"]:checked + label::before {\n  border-color: #f0ad4e;\n}\n\n.radio-warning input[type=\"radio\"]:checked + label::after {\n  background-color: #f0ad4e;\n}\n\n.radio-success input[type=\"radio\"] + label::after {\n  background-color: #5cb85c;\n}\n\n.radio-success input[type=\"radio\"]:checked + label::before {\n  border-color: #5cb85c;\n}\n\n.radio-success input[type=\"radio\"]:checked + label::after {\n  background-color: #5cb85c;\n}\n\n// Dark mode specific fixes for birthdate field only\n[data-theme=\"dark\"] {\n  // Date picker specific styling (birthdate field)\n  .timepicker-input {\n    .input-group-text {\n      background-color: var(--c-bkg-card) !important;\n      border-color: var(--c-border) !important;\n      color: var(--c-text-base) !important;\n\n      // Override specific background classes\n      &.bgc-white {\n        background-color: var(--c-bkg-card) !important;\n      }\n\n      // Calendar icon styling\n      .ti-calendar {\n        color: var(--c-text-base) !important;\n      }\n    }\n\n    .form-control {\n      &.bdc-grey-200 {\n        border-color: var(--c-border) !important;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/components/index.scss",
    "content": "@use 'sidebar' as *;\n@use 'topbar' as *;\n@use 'pageContainer' as *;\n@use 'progressBar' as *;\n@use 'easyPieChart' as *;\n@use 'forms' as *;\n@use 'masonry' as *;\n@use 'loader' as *;\n@use 'footer' as *;\n@use 'modernize' as *;\n"
  },
  {
    "path": "src/assets/styles/spec/components/loader.scss",
    "content": "#loader {\n  transition: all 0.3s ease-in-out;\n  opacity: 1;\n  visibility: visible;\n  position: fixed;\n  height: 100vh;\n  width: 100%;\n  background: var(--loader-bg);\n  z-index: 90000;\n}\n\n#loader.fadeOut {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.spinner {\n  width: 40px;\n  height: 40px;\n  position: absolute;\n  top: calc(50% - 20px);\n  left: calc(50% - 20px);\n  background-color: var(--spinner-bg);\n  border-radius: 100%;\n  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;\n  animation: sk-scaleout 1.0s infinite ease-in-out;\n}\n\n@-webkit-keyframes sk-scaleout {\n  0% { -webkit-transform: scale(0) }\n  100% {\n    -webkit-transform: scale(1.0);\n    opacity: 0;\n  }\n}\n\n@keyframes sk-scaleout {\n  0% {\n    -webkit-transform: scale(0);\n    transform: scale(0);\n  } 100% {\n    -webkit-transform: scale(1.0);\n    transform: scale(1.0);\n    opacity: 0;\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/components/masonry.scss",
    "content": "\n"
  },
  {
    "path": "src/assets/styles/spec/components/modernize.scss",
    "content": "// ---------------------------------------------------------\n// @Modern Design Enhancements\n// Subtle improvements for a contemporary look\n// ---------------------------------------------------------\n\n// ---------------------------------------------------------\n// @Body & Background\n// ---------------------------------------------------------\n\nbody {\n  background-color: var(--c-bkg-body);\n  // Subtle dot pattern for depth\n  background-image: radial-gradient(circle at 1px 1px, var(--c-border) 1px, transparent 0);\n  background-size: 24px 24px;\n}\n\n// ---------------------------------------------------------\n// @Cards - Modern styling\n// ---------------------------------------------------------\n\n.card {\n  background: var(--c-bkg-card);\n  border: 1px solid var(--c-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-card);\n  transition: box-shadow 0.2s ease, transform 0.2s ease;\n\n  &:hover {\n    box-shadow: var(--shadow-md);\n  }\n}\n\n.card-header {\n  background: transparent;\n  border-bottom: 1px solid var(--c-border-light);\n  padding: 1rem 1.25rem;\n  font-weight: 600;\n  color: var(--c-text-base);\n}\n\n.card-body {\n  padding: 1.25rem;\n}\n\n.card-footer {\n  background: var(--c-bkg-hover);\n  border-top: 1px solid var(--c-border-light);\n  padding: 0.875rem 1.25rem;\n}\n\n// ---------------------------------------------------------\n// @Stat Cards - Dashboard widgets\n// ---------------------------------------------------------\n\n.peers {\n  &.ai-c {\n    .peer {\n      &:first-child {\n        // Icon container styling\n        .layers {\n          border-radius: var(--radius-md);\n          transition: transform 0.2s ease;\n\n          &:hover {\n            transform: scale(1.05);\n          }\n        }\n      }\n    }\n  }\n}\n\n// Stat value styling\n.fw-500 {\n  font-weight: 600;\n  letter-spacing: -0.02em;\n}\n\n// ---------------------------------------------------------\n// @Tables - Modern look\n// ---------------------------------------------------------\n\n.table {\n  --bs-table-bg: var(--c-bkg-card);\n\n  thead {\n    th {\n      background: var(--c-bkg-hover);\n      border-bottom: 2px solid var(--c-border);\n      color: var(--c-text-base);\n      font-weight: 600;\n      font-size: 0.75rem;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      padding: 0.875rem 1rem;\n    }\n  }\n\n  tbody {\n    tr {\n      transition: background-color 0.15s ease;\n\n      &:hover {\n        background-color: var(--c-bkg-hover);\n      }\n\n      td {\n        padding: 0.875rem 1rem;\n        border-bottom: 1px solid var(--c-border-light);\n        vertical-align: middle;\n      }\n    }\n  }\n}\n\n.table-bordered {\n  border: 1px solid var(--c-border);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n\n  th,\n  td {\n    border-color: var(--c-border-light);\n  }\n}\n\n// ---------------------------------------------------------\n// @Buttons - Refined styling\n// ---------------------------------------------------------\n\n.btn {\n  border-radius: var(--radius-sm);\n  font-weight: 500;\n  padding: 0.5rem 1rem;\n  transition: all 0.2s ease;\n  border: none;\n\n  &:focus {\n    box-shadow: 0 0 0 3px rgb(99 102 241 / 0.25);\n  }\n}\n\n.btn-primary {\n  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);\n\n  &:hover {\n    background: linear-gradient(135deg, var(--c-primary-light) 0%, var(--c-primary) 100%);\n    transform: translateY(-1px);\n    box-shadow: var(--shadow-md);\n  }\n\n  &:active {\n    transform: translateY(0);\n  }\n}\n\n.btn-success {\n  background: linear-gradient(135deg, var(--c-success) 0%, #059669 100%);\n\n  &:hover {\n    transform: translateY(-1px);\n    box-shadow: var(--shadow-md);\n  }\n}\n\n.btn-danger {\n  background: linear-gradient(135deg, var(--c-danger) 0%, #dc2626 100%);\n\n  &:hover {\n    transform: translateY(-1px);\n    box-shadow: var(--shadow-md);\n  }\n}\n\n.btn-outline-primary {\n  border: 1.5px solid var(--c-primary);\n  color: var(--c-primary);\n  background: transparent;\n\n  &:hover {\n    background: var(--c-primary);\n    color: white;\n    transform: translateY(-1px);\n  }\n}\n\n// ---------------------------------------------------------\n// @Form Controls - Modern inputs\n// ---------------------------------------------------------\n\n.form-control,\n.form-select {\n  background-color: var(--c-bkg-card);\n  border: 1.5px solid var(--c-border);\n  border-radius: var(--radius-sm);\n  color: var(--c-text-base);\n  padding: 0.625rem 0.875rem;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n\n  &:focus {\n    border-color: var(--c-primary);\n    box-shadow: 0 0 0 3px rgb(99 102 241 / 0.15);\n    outline: none;\n  }\n\n  &::placeholder {\n    color: var(--c-text-light);\n  }\n}\n\n.form-label {\n  color: var(--c-text-base);\n  font-weight: 500;\n  font-size: 0.875rem;\n  margin-bottom: 0.5rem;\n}\n\n// ---------------------------------------------------------\n// @Badges - Modern pills\n// ---------------------------------------------------------\n\n.badge {\n  border-radius: 50px;\n  font-weight: 500;\n  font-size: 0.75rem;\n  padding: 0.35em 0.75em;\n  letter-spacing: 0.02em;\n}\n\n.bg-primary {\n  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%) !important;\n}\n\n.bg-success {\n  background: linear-gradient(135deg, var(--c-success) 0%, #059669 100%) !important;\n}\n\n.bg-danger {\n  background: linear-gradient(135deg, var(--c-danger) 0%, #dc2626 100%) !important;\n}\n\n.bg-warning {\n  background: linear-gradient(135deg, var(--c-warning) 0%, #d97706 100%) !important;\n  color: #1e293b !important;\n}\n\n.bg-info {\n  background: linear-gradient(135deg, var(--c-info) 0%, #0284c7 100%) !important;\n}\n\n// ---------------------------------------------------------\n// @Dropdowns - Refined menus\n// ---------------------------------------------------------\n\n.dropdown-menu {\n  background: var(--c-bkg-card);\n  border: 1px solid var(--c-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-lg);\n  padding: 0.5rem;\n  margin-top: 0.5rem;\n\n  .dropdown-item {\n    border-radius: var(--radius-sm);\n    color: var(--c-text-base);\n    padding: 0.5rem 0.875rem;\n    transition: background-color 0.15s ease;\n\n    &:hover,\n    &:focus {\n      background-color: var(--c-bkg-hover);\n      color: var(--c-primary);\n    }\n\n    &.active,\n    &:active {\n      background-color: var(--c-primary);\n      color: white;\n    }\n  }\n\n  .dropdown-divider {\n    border-top-color: var(--c-border-light);\n    margin: 0.5rem 0;\n  }\n}\n\n// ---------------------------------------------------------\n// @Progress Bars - Modern look\n// ---------------------------------------------------------\n\n.progress {\n  background-color: var(--c-border-light);\n  border-radius: 50px;\n  height: 8px;\n  overflow: hidden;\n}\n\n.progress-bar {\n  border-radius: 50px;\n  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-light) 100%);\n}\n\n// ---------------------------------------------------------\n// @Alerts - Soft backgrounds\n// ---------------------------------------------------------\n\n.alert {\n  border: none;\n  border-radius: var(--radius-md);\n  border-left: 4px solid;\n}\n\n.alert-primary {\n  background-color: rgb(99 102 241 / 0.1);\n  border-left-color: var(--c-primary);\n  color: var(--c-primary-dark);\n}\n\n.alert-success {\n  background-color: rgb(16 185 129 / 0.1);\n  border-left-color: var(--c-success);\n  color: #047857;\n}\n\n.alert-danger {\n  background-color: rgb(239 68 68 / 0.1);\n  border-left-color: var(--c-danger);\n  color: #b91c1c;\n}\n\n.alert-warning {\n  background-color: rgb(245 158 11 / 0.1);\n  border-left-color: var(--c-warning);\n  color: #92400e;\n}\n\n.alert-info {\n  background-color: rgb(14 165 233 / 0.1);\n  border-left-color: var(--c-info);\n  color: #0369a1;\n}\n\n// ---------------------------------------------------------\n// @Nav Tabs - Modern tabs\n// ---------------------------------------------------------\n\n.nav-tabs {\n  border-bottom: 2px solid var(--c-border-light);\n  gap: 0.25rem;\n\n  .nav-link {\n    border: none;\n    border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n    color: var(--c-text-muted);\n    font-weight: 500;\n    padding: 0.75rem 1.25rem;\n    transition: all 0.2s ease;\n    position: relative;\n\n    &:hover {\n      color: var(--c-primary);\n      background-color: var(--c-bkg-hover);\n    }\n\n    &.active {\n      color: var(--c-primary);\n      background-color: var(--c-bkg-card);\n\n      &::after {\n        content: '';\n        position: absolute;\n        bottom: -2px;\n        left: 0;\n        right: 0;\n        height: 2px;\n        background: var(--c-primary);\n      }\n    }\n  }\n}\n\n// ---------------------------------------------------------\n// @Pagination - Modern style\n// ---------------------------------------------------------\n\n.pagination {\n  gap: 0.25rem;\n\n  .page-link {\n    border: none;\n    border-radius: var(--radius-sm);\n    color: var(--c-text-base);\n    font-weight: 500;\n    min-width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.2s ease;\n\n    &:hover {\n      background-color: var(--c-bkg-hover);\n      color: var(--c-primary);\n    }\n  }\n\n  .page-item {\n    &.active .page-link {\n      background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);\n      color: white;\n    }\n\n    &.disabled .page-link {\n      color: var(--c-text-light);\n      background: transparent;\n    }\n  }\n}\n\n// ---------------------------------------------------------\n// @List Groups - Refined lists\n// ---------------------------------------------------------\n\n.list-group {\n  border-radius: var(--radius-md);\n  overflow: hidden;\n}\n\n.list-group-item {\n  background-color: var(--c-bkg-card);\n  border: none;\n  border-bottom: 1px solid var(--c-border-light);\n  padding: 1rem 1.25rem;\n  transition: background-color 0.15s ease;\n\n  &:last-child {\n    border-bottom: none;\n  }\n\n  &:hover {\n    background-color: var(--c-bkg-hover);\n  }\n\n  &.active {\n    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);\n    border-color: transparent;\n    color: white;\n  }\n}\n\n// ---------------------------------------------------------\n// @Tooltips & Popovers\n// ---------------------------------------------------------\n\n.tooltip-inner {\n  background-color: var(--c-text-base);\n  border-radius: var(--radius-sm);\n  font-size: 0.8125rem;\n  padding: 0.5rem 0.75rem;\n}\n\n.popover {\n  border: 1px solid var(--c-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-lg);\n}\n\n// ---------------------------------------------------------\n// @Modals - Modern dialogs\n// ---------------------------------------------------------\n\n.modal-content {\n  background: var(--c-bkg-card);\n  border: 1px solid var(--c-border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-lg);\n}\n\n.modal-header {\n  border-bottom: 1px solid var(--c-border-light);\n  padding: 1.25rem 1.5rem;\n}\n\n.modal-body {\n  padding: 1.5rem;\n}\n\n.modal-footer {\n  border-top: 1px solid var(--c-border-light);\n  padding: 1rem 1.5rem;\n}\n\n// ---------------------------------------------------------\n// @Scrollbar - Custom styling\n// ---------------------------------------------------------\n\n::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n::-webkit-scrollbar-track {\n  background: var(--c-bkg-body);\n}\n\n::-webkit-scrollbar-thumb {\n  background: var(--c-border);\n  border-radius: 4px;\n\n  &:hover {\n    background: var(--c-text-light);\n  }\n}\n\n// ---------------------------------------------------------\n// @Dark Mode Refinements\n// ---------------------------------------------------------\n\n[data-theme=\"dark\"] {\n  body {\n    background-image: radial-gradient(circle at 1px 1px, var(--c-border) 0.5px, transparent 0);\n  }\n\n  .card {\n    border-color: var(--c-border);\n    box-shadow: var(--shadow-card);\n  }\n\n  .table {\n    --bs-table-bg: var(--c-bkg-card);\n    --bs-table-hover-bg: var(--c-bkg-hover);\n  }\n\n  .form-control,\n  .form-select {\n    background-color: var(--c-bkg-body);\n    border-color: var(--c-border);\n\n    &:focus {\n      border-color: var(--c-primary);\n      box-shadow: 0 0 0 3px rgb(129 140 248 / 0.2);\n    }\n  }\n\n  .alert-primary {\n    background-color: rgb(129 140 248 / 0.15);\n    color: var(--c-primary-light);\n  }\n\n  .alert-success {\n    background-color: rgb(52 211 153 / 0.15);\n    color: var(--c-success);\n  }\n\n  .alert-danger {\n    background-color: rgb(248 113 113 / 0.15);\n    color: var(--c-danger);\n  }\n\n  .alert-warning {\n    background-color: rgb(251 191 36 / 0.15);\n    color: var(--c-warning);\n  }\n\n  .alert-info {\n    background-color: rgb(56 189 248 / 0.15);\n    color: var(--c-info);\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/components/pageContainer.scss",
    "content": "@use '../settings/baseColors' as *;\n@use '../settings/breakpoints' as *;\n@use '../tools/mixins/mediaQueriesRanges' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// ---------------------------------------------------------\n\n// + @Page Container\n// + @Main Content\n// + @Full Container\n// + @Collapsed State\n// + @Mobile Layout Fixes\n\n// ---------------------------------------------------------\n// @Page Container - MODERN LAYOUT APPROACH\n// ---------------------------------------------------------\n\n.page-container {\n  min-height: 100vh;\n  padding-left: $offscreen-size;\n  transition: all 0.2s ease;\n  \n  // Modern flexbox layout to prevent footer overlap\n  display: flex;\n  flex-direction: column;\n\n  @include between($breakpoint-md, $breakpoint-xl) {\n    padding-left: $collapsed-size;\n  }\n\n  @include to($breakpoint-md) {\n    padding-left: 0;\n  }\n}\n\n// ---------------------------------------------------------\n// @Main Content - FLEXIBLE LAYOUT\n// ---------------------------------------------------------\n\n.main-content {\n  padding: 85px 20px 20px;\n  \n  // Flex-grow to push footer to bottom\n  flex: 1 0 auto;\n  min-height: 0; // Allow flex shrinking\n  \n  // Ensure content doesn't overflow\n  overflow-x: hidden;\n\n  @include to($breakpoint-md) {\n    padding: 85px 5px 5px;\n  }\n\n  @include to($breakpoint-sm) {\n    padding: 85px 10px 30px; // Extra bottom padding on mobile\n  }\n  \n  @include to(400px) {\n    padding: 85px 5px 40px; // Even more bottom padding on tiny screens\n  }\n}\n\n.remain-height {\n  height: calc(100vh - 126px);\n}\n\n// ---------------------------------------------------------\n// @Full Container\n// ---------------------------------------------------------\n\n.full-container {\n  left: $offscreen-size;\n  min-height: calc(100vh - #{$header-height});\n  position: absolute;\n  right: 0;\n  top: $header-height;\n  transition: all 0.2s ease;\n\n  @include between($breakpoint-md, $breakpoint-xl) {\n    left: 0;\n    padding-left: $collapsed-size;\n  }\n\n  @include to($breakpoint-md) {\n    left: 0;\n  }\n}\n\n// ---------------------------------------------------------\n// @Mobile Layout Fixes - AGGRESSIVE FOOTER SOLUTION\n// ---------------------------------------------------------\n\n// Footer - completely redesigned for mobile\nfooter {\n  // Flex-shrink: 0 to prevent compression\n  flex: 0 0 auto;\n  \n  // Positioning\n  position: relative;\n  z-index: 1;\n  \n  // Styling\n  margin-top: auto;\n  padding: 20px;\n  text-align: center;\n  border-top: 1px solid var(--c-border);\n  background: var(--c-bkg-card);\n  color: var(--c-text-muted);\n  font-size: 12px;\n  line-height: 1.4;\n  \n  // Prevent any potential overflow\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n\n  // Tablet footer adjustments\n  @include to($breakpoint-md) {\n    padding: 18px 15px;\n    font-size: 11px;\n  }\n\n  // Mobile footer adjustments\n  @include to($breakpoint-sm) {\n    padding: 15px 10px;\n    font-size: 10px;\n    line-height: 1.3;\n    \n    span {\n      display: inline-block;\n      max-width: 100%;\n      \n      a {\n        color: var(--c-primary);\n        text-decoration: none;\n        word-break: break-word;\n        \n        &:hover {\n          text-decoration: underline;\n        }\n      }\n    }\n  }\n\n  // Tiny screen footer adjustments\n  @include to(400px) {\n    padding: 12px 8px;\n    font-size: 9px;\n    line-height: 1.2;\n    \n    span {\n      display: block;\n      \n      // Break long text on new lines for readability\n      &::after {\n        content: \"\";\n        display: block;\n        height: 2px;\n      }\n    }\n  }\n}\n\n// Ensure body and html take full height for flex layout\nhtml, body {\n  height: 100%;\n  margin: 0;\n  padding: 0;\n}\n\n// Global mobile overflow prevention\n@include to($breakpoint-sm) {\n  body {\n    overflow-x: hidden;\n  }\n  \n  // Prevent any element from causing horizontal scroll\n  * {\n    max-width: 100%;\n    box-sizing: border-box;\n  }\n}\n\n// Additional mobile content spacing\n@include to($breakpoint-sm) {\n  .page-container {\n    .main-content {\n      // Extra margin-bottom to ensure footer never overlaps\n      margin-bottom: 20px;\n      \n      // Responsive content adjustments\n      .row {\n        margin-left: 0;\n        margin-right: 0;\n      }\n      \n      .col-md-6, .col-md-3, .col-md-12 {\n        padding-left: 5px;\n        padding-right: 5px;\n      }\n    }\n  }\n}\n\n// Emergency footer overlap prevention\n@include to(480px) {\n  .page-container {\n    // Force minimum height that accounts for content\n    min-height: calc(100vh - 80px);\n    \n    .main-content {\n      // Ensure there's always space for footer\n      padding-bottom: 60px !important;\n      margin-bottom: 20px !important;\n    }\n  }\n  \n  footer {\n    // Stick to bottom on very small screens\n    position: relative;\n    margin-top: auto;\n    clear: both;\n  }\n}\n\n// ---------------------------------------------------------\n// @Collapsed State\n// ---------------------------------------------------------\n\n.is-collapsed {\n  .page-container {\n    padding-left: $collapsed-size;\n\n    @include to($breakpoint-md) {\n      padding-left: 0;\n    }\n\n    @include between($breakpoint-md, $breakpoint-xl) {\n      padding-left: $offscreen-size;\n    }\n  }\n\n  .full-container {\n    left: $collapsed-size;\n\n    @include to($breakpoint-md) {\n      left: 0;\n    }\n\n    @include between($breakpoint-md, $breakpoint-xl) {\n      left: $offscreen-size;\n      padding-left: 0;\n    }\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/components/progressBar.scss",
    "content": ".progress {\n  height: 4px;\n  background-color: var(--c-border);\n  border-radius: 4px;\n  margin-bottom: 10px;\n}\n"
  },
  {
    "path": "src/assets/styles/spec/components/sidebar.scss",
    "content": "@use '../settings/baseColors' as *;\n@use '../tools/mixins/mediaQueriesRanges' as *;\n@use '../settings/breakpoints' as *;\n@use '../tools/mixins/clearfix' as *;\n@use '../settings/materialColors' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// ---------------------------------------------------------\n\n// + @Sidebar\n// + @Sidebar Inner\n// + @Sidebar Header\n// + @Sidebar Menu\n// + @Sidebar Collapsed\n\n// ---------------------------------------------------------\n// @Sidebar\n// ---------------------------------------------------------\n\n.sidebar {\n  background-color: var(--c-bkg-sidebar);\n  border-right: 1px solid var(--c-border);\n  bottom: 0;\n  overflow: hidden;\n  position: fixed;\n  top: 0;\n  transition: all 0.2s ease;\n  width: $offscreen-size;\n  z-index: 1000;\n\n  ul {\n    list-style-type: none;\n  }\n\n  @include between($breakpoint-md, $breakpoint-xl) {\n    width: $collapsed-size;\n\n    .sidebar-inner {\n      .sidebar-logo {\n        border-bottom: 1px solid transparent;\n        padding: 0;\n\n        a {\n          .logo {\n            background-position: center center;\n            width: $collapsed-size;\n          }\n        }\n      }\n\n      .sidebar-menu {\n        overflow-x: hidden;\n\n        > li {\n          > a {\n            .title {\n              display: none;\n            }\n          }\n        }\n\n        li {\n          &.dropdown {\n            .arrow {\n              opacity: 0;\n            }\n\n            &.open {\n              ul.dropdown-menu {\n                display: none !important;\n              }\n            }\n          }\n        }\n      }\n    }\n\n    &:hover {\n      width: $offscreen-size;\n\n      .sidebar-inner {\n        .sidebar-logo {\n          border-bottom: 1px solid $border-color;\n          padding: 0 20px;\n        }\n\n        .sidebar-menu {\n          > li {\n            > a {\n              .title {\n                display: inline-block;\n              }\n            }\n          }\n\n          li {\n            &.dropdown {\n              .arrow {\n                opacity: 1;\n              }\n            }\n\n            &.open {\n              > ul.dropdown-menu {\n                display: block !important;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @include to($breakpoint-md) {\n    left: -$offscreen-size;\n    width: calc(#{$offscreen-size} - 30px);\n  }\n}\n\n// ---------------------------------------------------------\n// @Sidebar Inner\n// ---------------------------------------------------------\n\n.sidebar-inner {\n  position: relative;\n  height: 100%;\n}\n\n// ---------------------------------------------------------\n// @Sidebar Header\n// ---------------------------------------------------------\n\n.sidebar-logo {\n  border-bottom: 1px solid var(--c-border);\n  line-height: 0;\n  padding: 0 20px;\n  transition: all 0.2s ease;\n  background: var(--c-bkg-card);\n\n  a {\n    display: inline-block;\n    width: 100%;\n\n    .logo {\n      background-position: center left;\n      background-repeat: no-repeat;\n      display: inline-block;\n      min-height: calc(#{$header-height} - 1px);\n      width: 100%;\n      width: 70px;\n      img {\n        height: 42px;\n        width: auto;\n        display: block;\n        margin: 11px auto;\n      }\n    }\n\n    .logo-text {\n      color: var(--c-text-base);\n    }\n  }\n\n  .mobile-toggle {\n    display: none;\n    float: right;\n    font-size: 18px;\n    line-height: calc(#{$header-height} - 1px);\n\n    a {\n      color: var(--c-icon);\n\n      &:hover {\n        color: var(--c-icon-hover);\n      }\n    }\n\n    @include to($breakpoint-md) {\n      display: inline-block;\n    }\n\n    @include between($breakpoint-md, $breakpoint-xl) {\n      display: none;\n    }\n  }\n}\n\n// ---------------------------------------------------------\n// @Sidebar Menu\n// ---------------------------------------------------------\n\n.sidebar-menu {\n  @include clearfix;\n  height: calc(100vh - #{$header-height});\n  list-style: none;\n  margin: 0;\n  overflow: auto;\n  padding: 0.75rem 0;\n  position: relative;\n\n  .dropdown-toggle::after {\n    display: none;\n  }\n\n  .sidebar-link {\n    &.actived::before {\n      background: $md-blue-500;\n      border-radius: 50%;\n      content: '';\n      display: block;\n      height: 8px;\n      left: -4px;\n      position: absolute;\n      top: calc(50% - 4px);\n      width: 8px;\n    }\n  }\n\n  li {\n    position: relative;\n\n    &.dropdown {\n      .arrow {\n        font-size: 10px;\n        line-height: 40px;\n        position: absolute;\n        right: 30px;\n        transition: all 0.05s ease-in;\n\n        @include to($breakpoint-md) {\n          right: 25px;\n        }\n      }\n\n      &.open {\n        > a {\n          color: var(--c-text-base);\n\n          .icon-holder {\n            color: var(--c-icon-hover);\n          }\n\n          > .arrow {\n            transform: rotate(90deg);\n          }\n        }\n\n        > .dropdown-menu {\n          display: block;\n\n          .dropdown-menu {\n            padding-left: 20px;\n          }\n\n          .arrow {\n            line-height: 25px;\n          }\n        }\n      }\n    }\n\n    a {\n      color: var(--c-text-muted);\n      transition: all 0.3s ease;\n\n      &:hover,\n      &:focus {\n        color: var(--c-text-base);\n        text-decoration: none;\n\n        .icon-holder {\n          color: var(--c-icon-hover);\n        }\n      }\n    }\n  }\n\n  > li {\n    &.dropdown {\n      ul {\n        &.dropdown-menu {\n          background-color: transparent;\n          border-radius: 0;\n          border: 0;\n          box-shadow: none;\n          float: none;\n          padding-left: 50px;\n          padding-top: 0;\n          position: relative;\n          width: 100%;\n\n          > li {\n            > a {\n              display: block;\n              padding: 10px 15px;\n\n              &:hover,\n              &:focus {\n                background-color: transparent;\n                color: var(--c-text-base);\n              }\n            }\n\n            &.actived {\n              a {\n                color: var(--c-text-base);\n              }\n            }\n          }\n        }\n      }\n    }\n\n    > a {\n      display: block;\n      font-size: 15px;\n      font-weight: 500;\n      padding: 5px 15px;\n      position: relative;\n      white-space: nowrap;\n\n      .icon-holder {\n        border-radius: 6px;\n        color: var(--c-icon);\n        display: inline-block;\n        font-size: 17px;\n        height: 35px;\n        left: 0;\n        line-height: 35px;\n        margin-right: 14px;\n        position: relative;\n        text-align: center;\n        transition: all 0.3s ease;\n        width: 35px;\n      }\n    }\n  }\n}\n\n// ---------------------------------------------------------\n// @Sidebar Collapsed\n// ---------------------------------------------------------\n\n.is-collapsed {\n  .sidebar {\n    @include from($breakpoint-xl) {\n      width: $collapsed-size;\n\n      .sidebar-inner {\n        .sidebar-logo {\n          border-bottom: 1px solid transparent;\n          padding: 0;\n        }\n\n        .sidebar-menu {\n          overflow-x: hidden;\n\n          > li {\n            > a {\n              .title {\n                display: none;\n              }\n            }\n          }\n\n          li {\n            &.dropdown {\n              .arrow {\n                opacity: 0;\n              }\n\n              &.open {\n                ul.dropdown-menu {\n                  display: none !important;\n                }\n              }\n            }\n          }\n        }\n      }\n\n      &:hover {\n        width: $offscreen-size;\n\n        .sidebar-inner {\n          .sidebar-logo {\n            border-bottom: 1px solid $border-color;\n            padding: 0 20px;\n          }\n\n          .sidebar-menu {\n            > li {\n              > a {\n                .title {\n                  display: inline-block;\n                }\n              }\n            }\n\n            li {\n              &.dropdown {\n                .arrow {\n                  opacity: 1;\n                }\n              }\n\n              &.open {\n                > ul.dropdown-menu {\n                  display: block !important;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n\n    @include between($breakpoint-md, $breakpoint-xl) {\n      width: $offscreen-size;\n\n      .sidebar-inner {\n        .sidebar-logo {\n          border-bottom: 1px solid $border-color;\n          padding: 0 20px;\n\n          > a {\n            .logo {\n              background-position: center left;\n              width: 150px;\n            }\n          }\n        }\n\n        .sidebar-menu {\n          > li {\n            > a {\n              .title {\n                display: inline-block;\n              }\n            }\n          }\n\n          li {\n            &.dropdown {\n              .arrow {\n                opacity: 1;\n              }\n            }\n\n            &.open {\n              > ul.dropdown-menu {\n                display: block !important;\n              }\n            }\n          }\n        }\n      }\n    }\n\n    @include to($breakpoint-md) {\n      left: 0;\n    }\n  }\n}\n\n// Dark mode sidebar improvements - subtle, cohesive dark theme\n[data-theme=\"dark\"] {\n  .sidebar {\n    background-color: var(--c-bkg-card);\n\n    .sidebar-menu {\n      border-right-color: var(--c-border);\n\n      li {\n        a {\n          color: var(--c-text-muted);\n\n          .icon-holder {\n            color: var(--c-icon);\n          }\n\n          &:hover,\n          &:focus {\n            color: var(--c-text-base);\n            background-color: var(--c-bkg-hover);\n\n            .icon-holder {\n              color: var(--c-icon-hover);\n            }\n          }\n        }\n\n        &.dropdown {\n          &.open {\n            > a {\n              color: var(--c-text-base);\n              background-color: var(--c-bkg-hover);\n\n              .icon-holder {\n                color: var(--c-icon-hover);\n              }\n            }\n          }\n        }\n\n        // Active menu item styling for dark mode - subtle left border accent\n        &.actived {\n          > a {\n            color: var(--c-text-base) !important;\n            background-color: var(--c-bkg-hover) !important;\n            border-left: 3px solid var(--c-primary) !important;\n            margin-left: -3px;\n\n            .icon-holder {\n              color: var(--c-primary) !important;\n            }\n          }\n        }\n\n        // Styling for dropdown parent when it has an active child\n        &.dropdown.has-active-child {\n          > a {\n            color: var(--c-text-base) !important;\n            background-color: transparent !important;\n            border-left: 3px solid var(--c-primary) !important;\n            margin-left: -3px;\n\n            .icon-holder {\n              color: var(--c-primary) !important;\n            }\n          }\n        }\n      }\n\n      // Dropdown menu items\n      > li {\n        &.dropdown {\n          ul.dropdown-menu {\n            > li {\n              > a {\n                color: var(--c-text-muted);\n\n                &:hover,\n                &:focus {\n                  color: var(--c-text-base);\n                  background-color: var(--c-bkg-hover);\n                }\n              }\n\n              &.actived {\n                a {\n                  color: var(--c-primary) !important;\n                  background-color: transparent !important;\n                  font-weight: 500;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n\n  .sidebar-logo {\n    border-bottom-color: var(--c-border);\n    border-right-color: var(--c-border);\n\n    a {\n      .logo-text {\n        color: var(--c-text-base);\n      }\n    }\n\n    .mobile-toggle {\n      a {\n        color: var(--c-icon);\n\n        &:hover {\n          color: var(--c-icon-hover);\n        }\n      }\n    }\n  }\n}\n\n// Light mode active states (ensure proper visibility)\n[data-theme=\"light\"], :root {\n  .sidebar {\n    .sidebar-menu {\n      li {\n        &.actived {\n          > a {\n            background-color: color-mix(in srgb, #ffffff 85%, var(--c-primary)) !important;\n            color: var(--c-primary) !important;\n\n            .icon-holder {\n              color: var(--c-primary) !important;\n              background-color: color-mix(in srgb, var(--c-primary) 10%, transparent) !important;\n            }\n          }\n        }\n\n        // Styling for dropdown parent when it has an active child (light mode)\n        &.dropdown.has-active-child {\n          > a {\n            background-color: color-mix(in srgb, #ffffff 90%, var(--c-primary)) !important;\n            color: var(--c-primary) !important;\n\n            .icon-holder {\n              color: var(--c-primary) !important;\n              background-color: color-mix(in srgb, var(--c-primary) 8%, transparent) !important;\n            }\n          }\n        }\n\n        a {\n          &:hover,\n          &:focus {\n            background-color: color-mix(in srgb, #ffffff 90%, var(--c-primary));\n            color: var(--c-primary);\n\n            .icon-holder {\n              color: var(--c-primary);\n              background-color: color-mix(in srgb, var(--c-primary) 8%, transparent);\n            }\n          }\n        }\n      }\n\n      // Dropdown items for light mode\n      > li {\n        &.dropdown {\n          ul.dropdown-menu {\n            > li {\n              &.actived {\n                a {\n                  color: var(--c-primary) !important;\n                  background-color: color-mix(in srgb, #ffffff 85%, var(--c-primary)) !important;\n                }\n              }\n\n              > a {\n                &:hover,\n                &:focus {\n                  background-color: color-mix(in srgb, #ffffff 90%, var(--c-primary));\n                  color: var(--c-primary);\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/components/topbar.scss",
    "content": "@use 'sass:color';\n@use '../settings/baseColors' as *;\n@use '../settings/breakpoints' as *;\n@use '../tools/mixins/mediaQueriesRanges' as *;\n@use '../tools/mixins/clearfix' as *;\n@use '../tools/mixins/placeholder' as *;\n\n// ---------------------------------------------------------\n// @TOC\n\n// + @Topbar\n// + @Collapsed State\n// + @Mobile Responsive Fixes\n\n// ---------------------------------------------------------\n// @Topbar\n// ---------------------------------------------------------\n\n.header {\n  background-color: var(--c-bkg-card);\n  border-bottom: 1px solid var(--c-border);\n  box-shadow: var(--shadow-sm);\n  display: block;\n  margin-bottom: 0;\n  padding: 0;\n  position: fixed;\n  transition: all 0.2s ease;\n  width: calc(100% - #{$offscreen-size});\n  z-index: 800;\n\n  @include to($breakpoint-md) {\n    width: 100%;\n  }\n\n  @include between($breakpoint-md, $breakpoint-xl) {\n    width: calc(100% - #{$collapsed-size});\n  }\n\n  .header-container {\n    @include clearfix;\n\n    height: $header-height;\n\n    .nav-left,\n    .nav-right {\n      list-style: none;\n      margin-bottom: 0;\n      padding-left: 0;\n      position: relative;\n\n      > li {\n        float: left;\n\n        > a {\n          color: var(--c-icon);\n          display: block;\n          line-height: $header-height;\n          min-height: $header-height;\n          padding: 0 15px;\n          transition: all 0.2s ease-in-out;\n\n          i {\n            font-size: 17px;\n            color: var(--c-icon);\n          }\n\n          &:hover,\n          &:focus {\n            color: var(--c-icon-hover);\n            text-decoration: none;\n\n            i {\n              color: var(--c-icon-hover);\n            }\n          }\n\n          @include to($breakpoint-md) {\n            padding: 0 15px;\n          }\n        }\n      }\n\n      .notifications {\n        position: relative;\n\n        .counter {\n          background-color: $default-danger;\n          border-radius: 50px;\n          color: $default-white;\n          font-size: 10px;\n          line-height: 1;\n          padding: 3px 5.5px;\n          position: absolute;\n          right: 6px;\n          top: 12px;\n        }\n\n        .dropdown-menu {\n          min-width: 350px;\n          padding: 0;\n\n          @include to($breakpoint-sm) {\n            max-width: 300px;\n          }\n        }\n      }\n    }\n\n    .dropdown-menu {\n      // display: block;\n      margin: 0;\n      transform-origin: top right;\n      // transform: scale(0, 0);\n      transition: transform 0.15s ease-out;\n\n      .divider {\n        border-bottom: 1px solid $border-color;\n        height: 1px;\n        overflow: hidden;\n      }\n\n      > li {\n        > a {\n          transition: all 0.2s ease-out;\n        }\n      }\n    }\n\n    .show {\n      .dropdown-menu {\n        transform: scale(1, 1);\n      }\n    }\n\n    .nav-left {\n      float: left;\n      margin-left: 15px;\n    }\n\n    .nav-right {\n      float: right;\n\n      .dropdown-menu {\n        left: auto;\n        right: 0;\n\n        > li {\n          width: 100%;\n\n          > a {\n            line-height: 1.5;\n            min-height: auto;\n            padding: 10px 15px;\n          }\n        }\n      }\n    }\n  }\n\n  .search-box {\n    .search-icon-close {\n      display: none;\n    }\n\n    &.active {\n      .search-icon {\n        display: none;\n      }\n\n      .search-icon-close {\n        display: inline-block;\n      }\n    }\n  }\n\n  .search-input {\n    display: none;\n\n    &.active {\n      display: inline-block;\n    }\n\n    input {\n      background-color: transparent;\n      border: 0;\n      box-shadow: none;\n      font-size: 18px;\n      height: 40px;\n      margin-top: 12px;\n      outline: none;\n      padding: 5px;\n\n      @include to($breakpoint-sm) {\n        width: 85px;\n      }\n\n      @include placeholder {\n        color: color.adjust($default-text-color, $lightness: 20%);\n        font-style: italic;\n      }\n    }\n  }\n}\n\n// ---------------------------------------------------------\n// @Mobile Responsive Fixes - AGGRESSIVE APPROACH\n// ---------------------------------------------------------\n\n// Tablet mobile fixes (768px to 991px)\n@include to($breakpoint-md) {\n  .header {\n    .header-container {\n      padding: 0 10px;\n      \n      .nav-left {\n        margin-left: 5px;\n\n        > li > a {\n          padding: 0 8px !important;\n        }\n      }\n\n      .nav-right {\n        margin-right: 5px;\n\n        > li {\n          > a {\n            padding: 0 8px !important;\n            \n            // Hide text in user dropdown on tablet\n            .peer:last-child {\n              display: none;\n            }\n          }\n        }\n\n        // Make theme toggle more compact\n        .theme-toggle {\n          padding: 0 5px !important;\n          \n          .form-check-label {\n            font-size: 9px !important;\n            margin: 0 3px !important;\n          }\n          \n          .form-check-input {\n            width: 1.8rem !important;\n            height: 1rem !important;\n          }\n        }\n      }\n    }\n  }\n}\n\n// Small mobile phones (576px to 767px)\n@include to($breakpoint-sm) {\n  .header {\n    .header-container {\n      height: auto;\n      min-height: $header-height;\n      padding: 0 5px;\n\n      .nav-left {\n        margin-left: 2px;\n\n        > li > a {\n          padding: 0 5px !important;\n        }\n\n        // Hide search toggle on small mobile - make it icon only when active\n        .search-box:not(.active) {\n          display: none;\n        }\n      }\n\n      .nav-right {\n        margin-right: 2px;\n\n        > li {\n          > a {\n            padding: 0 4px !important;\n            \n            // Hide all text content, keep only icons\n            span {\n              display: none;\n            }\n            \n            .peer:last-child {\n              display: none;\n            }\n          }\n        }\n\n        // Ultra-compact theme toggle\n        .theme-toggle {\n          padding: 0 3px !important;\n          \n          .form-check {\n            flex-direction: column;\n            align-items: center;\n            \n            .form-check-label {\n              font-size: 7px !important;\n              margin: 0 !important;\n              line-height: 1 !important;\n              \n              span {\n                display: none !important;\n              }\n            }\n            \n            .form-check-input {\n              width: 1.5rem !important;\n              height: 0.8rem !important;\n              margin: 1px 0 !important;\n            }\n          }\n        }\n      }\n\n      // Full-screen mobile dropdowns\n      .nav-right .dropdown-menu {\n        position: fixed !important;\n        top: $header-height !important;\n        left: 0 !important;\n        right: 0 !important;\n        bottom: 0 !important;\n        width: 100vw !important;\n        height: calc(100vh - #{$header-height}) !important;\n        max-width: none !important;\n        min-width: auto !important;\n        transform: none !important;\n        border-radius: 0 !important;\n        z-index: 9999;\n        overflow-y: auto;\n        \n        // Close button for mobile dropdowns\n        &::before {\n          content: \"✕ Close\";\n          position: sticky;\n          top: 0;\n          display: block;\n          background: var(--c-primary);\n          color: white;\n          text-align: center;\n          padding: 10px;\n          cursor: pointer;\n          font-weight: bold;\n          z-index: 10000;\n        }\n      }\n    }\n  }\n}\n\n// Extra small mobile phones (less than 576px)\n@include to(480px) {\n  .header {\n    .header-container {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      flex-wrap: nowrap;\n      padding: 0 2px;\n\n      .nav-left {\n        flex: 0 0 auto;\n        margin: 0;\n        \n        > li {\n          float: none;\n          display: inline-block;\n          \n          > a {\n            padding: 0 3px !important;\n            font-size: 14px !important;\n          }\n        }\n\n        // Search overlay for tiny screens\n        .search-input.active {\n          position: fixed;\n          top: $header-height;\n          left: 0;\n          right: 0;\n          background: var(--c-bkg-card);\n          border-top: 1px solid var(--c-border);\n          padding: 15px;\n          z-index: 9998;\n          \n          input {\n            width: 100%;\n            padding: 12px;\n            font-size: 16px;\n            border: 1px solid var(--c-border);\n            border-radius: 6px;\n            background: var(--c-bkg-card);\n            color: var(--c-text-base);\n            margin-top: 0;\n            \n            &::placeholder {\n              color: var(--c-text-muted);\n            }\n          }\n        }\n      }\n\n      .nav-right {\n        flex: 0 0 auto;\n        margin: 0;\n        \n        > li {\n          float: none;\n          display: inline-block;\n          \n          > a {\n            padding: 0 2px !important;\n            font-size: 12px !important;\n          }\n        }\n\n        // Minimal theme toggle\n        .theme-toggle {\n          padding: 0 1px !important;\n          \n          .form-check {\n            .form-check-label {\n              display: none !important;\n            }\n            \n            .form-check-input {\n              width: 1.2rem !important;\n              height: 0.7rem !important;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n// ---------------------------------------------------------\n// @Collapsed State\n// ---------------------------------------------------------\n\n.is-collapsed {\n  .header {\n    width: calc(100% - #{$collapsed-size});\n\n    @include to($breakpoint-md) {\n      width: 100%;\n    }\n\n    @include between($breakpoint-md, $breakpoint-xl) {\n      width: calc(100% - #{$offscreen-size});\n    }\n  }\n}\n\n// ---------------------------------------------------------\n// @Dark Mode Topbar\n// ---------------------------------------------------------\n\n[data-theme=\"dark\"] {\n  .header {\n    background-color: var(--c-bkg-card);\n    border-bottom-color: var(--c-border);\n\n    .header-container {\n      .nav-left,\n      .nav-right {\n        > li {\n          > a {\n            color: var(--c-icon);\n\n            i {\n              color: var(--c-icon);\n            }\n\n            &:hover,\n            &:focus {\n              color: var(--c-icon-hover);\n\n              i {\n                color: var(--c-icon-hover);\n              }\n            }\n\n            // Active state for hamburger/search when clicked\n            &:active,\n            &.active {\n              color: var(--c-text-base);\n\n              i {\n                color: var(--c-text-base);\n              }\n            }\n          }\n        }\n      }\n\n      // Search box active state\n      .search-box {\n        &.active {\n          a {\n            color: var(--c-icon-hover);\n\n            i {\n              color: var(--c-icon-hover);\n            }\n          }\n        }\n      }\n\n      // Dropdown menu dark mode\n      .dropdown-menu {\n        background-color: var(--c-bkg-card);\n        border-color: var(--c-border);\n\n        .divider {\n          border-bottom-color: var(--c-border);\n        }\n\n        > li > a {\n          color: var(--c-text-muted);\n\n          &:hover,\n          &:focus {\n            color: var(--c-text-base);\n            background-color: var(--c-bkg-hover);\n          }\n        }\n      }\n    }\n\n    // Search input dark mode\n    .search-input {\n      input {\n        color: var(--c-text-base);\n\n        &::placeholder {\n          color: var(--c-text-muted);\n        }\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/generic/base.scss",
    "content": "@use '../settings/fonts' as *;\n@use '../settings/baseColors' as *;\n@use 'sass:color';\n\nhtml, html a, body {\n  -webkit-font-smoothing: antialiased;\n}\n\na {\n  transition: all 0.3s ease-in-out;\n  text-decoration: none;\n}\n\nbody {\n  font-family: $font-primary;\n  font-size: 14px;\n  color: $default-text-color;\n  line-height: 1.5;\n  letter-spacing: 0.2px;\n  overflow-x: hidden;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-family: $font-secondary;\n  letter-spacing: 0.5px;\n  line-height: 1.5;\n  font-weight: 400;\n\n  a {\n    font-family: $font-secondary;\n  }\n\n  small {\n    font-weight: 300;\n    color: color.adjust($default-dark, $lightness: 5%);\n  }\n}\n\np {\n  font-family: $font-primary;\n  line-height: 1.9;\n}\n\n.lead {\n  font-size: 18px;\n}\n\nul {\n  margin-bottom: 0;\n}\n\na {\n  color: $default-info;\n\n  &:hover,\n  &:focus {\n    text-decoration: none;\n    color: darken($default-info, 10%);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &.text-gray {\n    &:hover,\n    &:focus,\n    &.active {\n      color: $default-dark !important;\n    }\n  }\n}\n\n:focus {\n  outline: none;\n}\n\nhr {\n  border-top: 1px solid $border-color;\n}\n\n\na.btn {\n    color:#fff;\n  }\n\na.btn:hover {\n  color:#fff;\n}\n\n.btn-color {\n  color:#fff;\n}\n\n.btn-color:hover {\n  color:#fff;\n}\n"
  },
  {
    "path": "src/assets/styles/spec/generic/index.scss",
    "content": "@use 'base' as *;\n"
  },
  {
    "path": "src/assets/styles/spec/index.scss",
    "content": "@use 'generic/index' as *;\n@use 'components/index' as *;\n@use 'screens/index' as *;\n@use 'utils/index' as *;\n"
  },
  {
    "path": "src/assets/styles/spec/screens/chat.scss",
    "content": "@use '../settings/baseColors' as *;\n@use '../settings/breakpoints' as *;\n@use '../tools/mixins/mediaQueriesRanges' as *;\n\n#chat-sidebar {\n  width: 250px;\n  height: calc(100vh - #{$header-height} - 60px);\n  overflow: auto;\n\n  @include to($breakpoint-md) {\n    transition: all 0.3s ease-in-out;\n    margin-left: -250px;\n\n    &.open {\n      margin-left: 0;\n    }\n  }\n}\n\n#chat-box {\n  height: calc(100vh - #{$header-height} - 60px);\n  overflow: auto;\n}\n\n// Dark mode chat styles\n[data-theme=\"dark\"] {\n  // Chat sidebar search input\n  input[name=\"chatSearch\"] {\n    background: var(--c-bkg-card);\n    color: var(--c-text-base);\n    border-color: var(--c-border);\n\n    &::placeholder {\n      color: var(--c-text-muted);\n    }\n\n    &:focus {\n      background: var(--c-bkg-card);\n      border-color: var(--c-primary);\n      box-shadow: 0 0 0 0.2rem rgba(var(--c-primary-rgb), 0.25);\n    }\n  }\n\n  // Contact list items\n  .peers.bgc-white {\n    background: var(--c-bkg-card) !important;\n    border-color: var(--c-border) !important;\n\n    &:hover,\n    &.bgcH-grey-50:hover {\n      background: var(--c-bkg-hover) !important;\n    }\n\n    h6 {\n      color: var(--c-text-base);\n    }\n\n    small {\n      // Status colors remain as they are for visual indication\n      &.c-grey-500 {\n        color: var(--c-text-muted) !important;\n      }\n    }\n  }\n\n  // Chat header\n  .peers.bgc-white {\n    background: var(--c-bkg-card) !important;\n\n    h6 {\n      color: var(--c-text-base);\n    }\n\n    i {\n      color: var(--c-text-muted);\n    }\n\n    .c-grey-900 {\n      color: var(--c-text-base) !important;\n\n      &.cH-blue-500:hover {\n        color: var(--c-primary) !important;\n      }\n    }\n  }\n\n  // Chat background area\n  .bgc-grey-200 {\n    background: var(--c-bkg-body) !important;\n  }\n\n  .bgc-grey-100 {\n    background: var(--c-bkg-body) !important;\n  }\n\n  // Chat messages\n  .pY-3.pX-10.bgc-white {\n    background: var(--c-bkg-card) !important;\n    color: var(--c-text-base);\n    border: 1px solid var(--c-border);\n\n    small {\n      color: var(--c-text-muted);\n    }\n\n    span {\n      color: var(--c-text-base);\n    }\n  }\n\n  // Chat input area\n  .bdT.bgc-white {\n    background: var(--c-bkg-card) !important;\n    border-color: var(--c-border) !important;\n\n    .form-control {\n      background: var(--c-bkg-body);\n      border-color: var(--c-border);\n      color: var(--c-text-base);\n\n      &::placeholder {\n        color: var(--c-text-muted);\n      }\n\n      &:focus {\n        background: var(--c-bkg-body);\n        border-color: var(--c-primary);\n        color: var(--c-text-base);\n        box-shadow: 0 0 0 0.2rem rgba(var(--c-primary-rgb), 0.25);\n      }\n    }\n\n    .btn-primary {\n      background: var(--c-primary);\n      border-color: var(--c-primary);\n\n      &:hover {\n        background: var(--c-primary-hover);\n        border-color: var(--c-primary-hover);\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 0.2rem rgba(var(--c-primary-rgb), 0.25);\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/screens/email.scss",
    "content": "@use '../settings/baseColors' as *;\n@use '../settings/breakpoints' as *;\n@use '../tools/mixins/mediaQueriesRanges' as *;\n\n.email-app {\n  .email-side-nav {\n    background: var(--c-bkg-card);\n    position: fixed;\n    border-right: 1px solid var(--c-border);\n    float: left;\n    width: 250px;\n    transition: all 0.3s ease-in-out;\n\n    @include to($breakpoint-md) {\n      z-index: 1;\n      left: -250px;\n    }\n  }\n\n  .email-wrapper {\n    margin: 0;\n    padding: 0;\n    overflow: auto;\n    min-height: 100%;\n    transition: all 0.3s ease-in-out;\n\n    @include to($breakpoint-md) {\n      position: absolute;\n      left: 0;\n      width: 100%;\n      overflow-x: hidden;\n    }\n\n    @include from($breakpoint-md) {\n      margin-left: 250px;\n    }\n\n    .email-list {\n      position: relative;\n      padding: 0;\n      width: 100%;\n      overflow-y: hidden;\n      background-color: var(--c-bkg-card);\n      height: calc(100vh - #{$header-height});\n\n      @include to($breakpoint-md) {\n        max-height: calc(100vh - 65px);\n      }\n\n      @include from($breakpoint-md) {\n        width: 40%;\n        border-right: 1px solid var(--c-border);\n        float: left;\n      }\n    }\n\n    .email-content {\n      float: left;\n      width: 60%;\n      position: relative;\n      padding: 0;\n      background-color: var(--c-bkg-card);\n      // min-height: calc(100vh - #{$header-height});\n\n      &.no-inbox-view {\n        width: 100%;\n      }\n\n      @include to($breakpoint-md) {\n        position: absolute;\n        top: 0;\n        left: 100%;\n        width: 100%;\n        height: 100%;\n        transition: all 0.3s ease-in-out;\n        max-height: calc(100vh - #{$header-height});\n        overflow-y: scroll;\n\n        &.open {\n          left: 0;\n        }\n      }\n    }\n\n      .email-compose {\n        position: relative;\n      .email-compose-body {\n        padding: 30px 20px;\n\n      }\n      }\n    }\n\n\n    &.side-active {\n      .email-side-nav {\n        @include to($breakpoint-md) {\n          left: 0;\n        }\n      }\n\n      .email-wrapper {\n        @include to($breakpoint-md) {\n          left: 250px;\n        }\n      }\n    }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/screens/index.scss",
    "content": "@use 'chat' as *;\n@use 'email' as *;\n"
  },
  {
    "path": "src/assets/styles/spec/settings/baseColors.scss",
    "content": "@use 'sass:color';\n@use 'materialColors' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// ---------------------------------------------------------\n\n// + @Greyscale Colors\n// + @Bootstrap Color System\n// + @Default Colors\n// + @Inverted Colors\n// + @Others\n// + @Header Themes\n// + @Social Networks Colors\n\n// ---------------------------------------------------------\n// @Greyscale Colors\n// ---------------------------------------------------------\n\n// Colors below are ordered from lightest to darkest\n\n$grey-100             : #f9fafb;\n$grey-200             : #f2f3f5;\n$grey-300             : #e6eaf0;\n$grey-400             : #d3d9e3;\n$grey-500             : #b9c2d0;\n$grey-600             : #7c8695;\n$grey-700             : #72777a;\n$grey-800             : #565a5c;\n$grey-900             : #313435;\n\n$grey-colors-alt: (\n  grey-100 : #f9fafb,\n  grey-200 : #f2f3f5,\n  grey-300 : #e6eaf0,\n  grey-400 : #d3d9e3,\n  grey-500 : #b9c2d0,\n  grey-600 : #7c8695,\n  grey-700 : #72777a,\n  grey-800 : #565a5c,\n  grey-900 : #313435,\n);\n\n// ---------------------------------------------------------\n// @Bootstrap Color System\n// ---------------------------------------------------------\n\n$blue   : $md-blue-500;\n$indigo : $md-indigo-500;\n$purple : $md-purple-500;\n$pink   : $md-pink-500;\n$red    : $md-red-500;\n$orange : $md-orange-500;\n$yellow : $md-yellow-500;\n$green  : $md-green-500;\n$teal   : $md-teal-500;\n$cyan   : $md-cyan-500;\n\n// ---------------------------------------------------------\n// @Default Colors\n// ---------------------------------------------------------\n\n$default-danger       : #ff3c7e;\n$default-dark         : #313435;\n$default-grey         : #565a5c;\n$default-info         : #0f9aee;\n$default-primary      : #7774e7;\n$default-success      : #37c936;\n$default-text-color   : #72777a;\n$default-warning      : #fc0;\n$default-white        : #fff;\n\n// ---------------------------------------------------------\n// @Inverted Colors\n// ---------------------------------------------------------\n\n$inverse-danger       : color.adjust($default-danger, $lightness: 35%);\n$inverse-info         : color.adjust($default-info, $lightness: 45%);\n$inverse-primary      : color.adjust($default-primary, $lightness: 30%);\n$inverse-success      : color.adjust($default-success, $lightness: 45%);\n$inverse-warning      : color.adjust($default-warning, $lightness: 45%);\n\n// ---------------------------------------------------------\n// @Others\n// ---------------------------------------------------------\n\n$border-color         : #e6ecf5;\n$collapsed-size       : 70px;\n$header-height        : 65px;\n$offscreen-size       : 280px;\n$side-nav-dark        : #313644;\n$side-nav-dark-border : rgba(120, 130, 140, 0.3);\n$side-nav-dark-font   : #99abb4;\n\n// ---------------------------------------------------------\n// @Header Themes\n// ---------------------------------------------------------\n\n$theme-danger         : #f53f61;\n$theme-dark           : color.adjust($side-nav-dark, $lightness: 10%);\n$theme-info           : $default-info;\n$theme-primary        : $default-primary;\n$theme-success        : color.adjust($default-success, $saturation: -5%);\n"
  },
  {
    "path": "src/assets/styles/spec/settings/borders.scss",
    "content": "// ---------------------------------------------------------\n// @Borders\n// ---------------------------------------------------------\n\n$border-width: 1px;\n$border-color: rgba(0, 0, 0, 0.0625);\n"
  },
  {
    "path": "src/assets/styles/spec/settings/breakpoints.scss",
    "content": "// ---------------------------------------------------------\n// @Breakpoints\n// ---------------------------------------------------------\n\n$breakpoint-xl : 1440px;\n$breakpoint-lg : 1200px;\n$breakpoint-md : 992px;\n$breakpoint-sm : 768px;\n$breakpoint-xs : 0;\n\n$breakpoints: (\n  \"xl\\\\+\" \"screen and (min-width: #{$breakpoint-xl})\",\n  \"lg\\\\+\" \"screen and (min-width: #{$breakpoint-lg})\",\n  \"md\\\\+\" \"screen and (min-width: #{$breakpoint-md})\",\n  \"sm\\\\+\" \"screen and (min-width: #{$breakpoint-sm})\",\n  \"xs\\\\+\" \"screen and (min-width: #{$breakpoint-xs})\",\n\n  \"xl-\" \"screen and (max-width: #{$breakpoint-xl - 1px})\",\n  \"lg-\" \"screen and (max-width: #{$breakpoint-lg - 1px})\",\n  \"md-\" \"screen and (max-width: #{$breakpoint-md - 1px})\",\n  \"sm-\" \"screen and (max-width: #{$breakpoint-sm - 1px})\",\n\n  \"lg\" \"screen and (min-width: #{$breakpoint-lg - 1px}) and (max-width: #{$breakpoint-xl - 1px})\",\n  \"md\" \"screen and (min-width: #{$breakpoint-md - 1px}) and (max-width: #{$breakpoint-lg - 1px})\",\n  \"sm\" \"screen and (min-width: #{$breakpoint-sm - 1px}) and (max-width: #{$breakpoint-md - 1px})\",\n);\n"
  },
  {
    "path": "src/assets/styles/spec/settings/fonts.scss",
    "content": "$font-primary:\n  Roboto, -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n$font-secondary: $font-primary;\n$font-size-base:              0.875rem;\n"
  },
  {
    "path": "src/assets/styles/spec/settings/index.scss",
    "content": "@use 'breakpoints' as *;\n@use 'brand-colors/dist/latest/scss/brand-colors.latest.scss' as *;\n@use 'baseColors' as *;\n@use 'borders' as *;\n"
  },
  {
    "path": "src/assets/styles/spec/settings/materialColors.scss",
    "content": "$md-red-50                : #ffebee;\n$md-red-100               : #ffcdd2;\n$md-red-200               : #ef9a9a;\n$md-red-300               : #e57373;\n$md-red-400               : #ef5350;\n$md-red-500               : #f44336;\n$md-red-600               : #e53935;\n$md-red-700               : #d32f2f;\n$md-red-800               : #c62828;\n$md-red-900               : #b71c1c;\n$md-red-a100              : #ff8a80;\n$md-red-a200              : #ff5252;\n$md-red-a400              : #ff1744;\n$md-red-a700              : #d50000;\n\n$md-pink-50               : #fce4ec;\n$md-pink-100              : #f8bbd0;\n$md-pink-200              : #f48fb1;\n$md-pink-300              : #f06292;\n$md-pink-400              : #ec407a;\n$md-pink-500              : #e91e63;\n$md-pink-600              : #d81b60;\n$md-pink-700              : #c2185b;\n$md-pink-800              : #ad1457;\n$md-pink-900              : #880e4f;\n$md-pink-a100             : #ff80ab;\n$md-pink-a200             : #ff4081;\n$md-pink-a400             : #f50057;\n$md-pink-a700             : #c51162;\n\n$md-purple-50             : #f3e5f5;\n$md-purple-100            : #e1bee7;\n$md-purple-200            : #ce93d8;\n$md-purple-300            : #ba68c8;\n$md-purple-400            : #ab47bc;\n$md-purple-500            : #9c27b0;\n$md-purple-600            : #8e24aa;\n$md-purple-700            : #7b1fa2;\n$md-purple-800            : #6a1b9a;\n$md-purple-900            : #4a148c;\n$md-purple-a100           : #ea80fc;\n$md-purple-a200           : #e040fb;\n$md-purple-a400           : #d500f9;\n$md-purple-a700           : #aa00ff;\n\n$md-deep-purple-50        : #ede7f6;\n$md-deep-purple-100       : #d1c4e9;\n$md-deep-purple-200       : #b39ddb;\n$md-deep-purple-300       : #9575cd;\n$md-deep-purple-400       : #7e57c2;\n$md-deep-purple-500       : #673ab7;\n$md-deep-purple-600       : #5e35b1;\n$md-deep-purple-700       : #512da8;\n$md-deep-purple-800       : #4527a0;\n$md-deep-purple-900       : #311b92;\n$md-deep-purple-a100      : #b388ff;\n$md-deep-purple-a200      : #7c4dff;\n$md-deep-purple-a400      : #651fff;\n$md-deep-purple-a700      : #6200ea;\n\n$md-indigo-50             : #e8eaf6;\n$md-indigo-100            : #c5cae9;\n$md-indigo-200            : #9fa8da;\n$md-indigo-300            : #7986cb;\n$md-indigo-400            : #5c6bc0;\n$md-indigo-500            : #3f51b5;\n$md-indigo-600            : #3949ab;\n$md-indigo-700            : #303f9f;\n$md-indigo-800            : #283593;\n$md-indigo-900            : #1a237e;\n$md-indigo-a100           : #8c9eff;\n$md-indigo-a200           : #536dfe;\n$md-indigo-a400           : #3d5afe;\n$md-indigo-a700           : #304ffe;\n\n$md-blue-50               : #e3f2fd;\n$md-blue-100              : #bbdefb;\n$md-blue-200              : #90caf9;\n$md-blue-300              : #64b5f6;\n$md-blue-400              : #42a5f5;\n$md-blue-500              : #2196f3;\n$md-blue-600              : #1e88e5;\n$md-blue-700              : #1976d2;\n$md-blue-800              : #1565c0;\n$md-blue-900              : #0d47a1;\n$md-blue-a100             : #82b1ff;\n$md-blue-a200             : #448aff;\n$md-blue-a400             : #2979ff;\n$md-blue-a700             : #2962ff;\n\n$md-light-blue-50         : #e1f5fe;\n$md-light-blue-100        : #b3e5fc;\n$md-light-blue-200        : #81d4fa;\n$md-light-blue-300        : #4fc3f7;\n$md-light-blue-400        : #29b6f6;\n$md-light-blue-500        : #03a9f4;\n$md-light-blue-600        : #039be5;\n$md-light-blue-700        : #0288d1;\n$md-light-blue-800        : #0277bd;\n$md-light-blue-900        : #01579b;\n$md-light-blue-a100       : #80d8ff;\n$md-light-blue-a200       : #40c4ff;\n$md-light-blue-a400       : #00b0ff;\n$md-light-blue-a700       : #0091ea;\n\n$md-cyan-50               : #e0f7fa;\n$md-cyan-100              : #b2ebf2;\n$md-cyan-200              : #80deea;\n$md-cyan-300              : #4dd0e1;\n$md-cyan-400              : #26c6da;\n$md-cyan-500              : #00bcd4;\n$md-cyan-600              : #00acc1;\n$md-cyan-700              : #0097a7;\n$md-cyan-800              : #00838f;\n$md-cyan-900              : #006064;\n$md-cyan-a100             : #84ffff;\n$md-cyan-a200             : #18ffff;\n$md-cyan-a400             : #00e5ff;\n$md-cyan-a700             : #00b8d4;\n\n$md-teal-50               : #e0f2f1;\n$md-teal-100              : #b2dfdb;\n$md-teal-200              : #80cbc4;\n$md-teal-300              : #4db6ac;\n$md-teal-400              : #26a69a;\n$md-teal-500              : #009688;\n$md-teal-600              : #00897b;\n$md-teal-700              : #00796b;\n$md-teal-800              : #00695c;\n$md-teal-900              : #004d40;\n$md-teal-a100             : #a7ffeb;\n$md-teal-a200             : #64ffda;\n$md-teal-a400             : #1de9b6;\n$md-teal-a700             : #00bfa5;\n\n$md-green-50              : #e8f5e9;\n$md-green-100             : #c8e6c9;\n$md-green-200             : #a5d6a7;\n$md-green-300             : #81c784;\n$md-green-400             : #66bb6a;\n$md-green-500             : #4caf50;\n$md-green-600             : #43a047;\n$md-green-700             : #388e3c;\n$md-green-800             : #2e7d32;\n$md-green-900             : #1b5e20;\n$md-green-a100            : #b9f6ca;\n$md-green-a200            : #69f0ae;\n$md-green-a400            : #00e676;\n$md-green-a700            : #00c853;\n\n$md-light-green-50        : #f1f8e9;\n$md-light-green-100       : #dcedc8;\n$md-light-green-200       : #c5e1a5;\n$md-light-green-300       : #aed581;\n$md-light-green-400       : #9ccc65;\n$md-light-green-500       : #8bc34a;\n$md-light-green-600       : #7cb342;\n$md-light-green-700       : #689f38;\n$md-light-green-800       : #558b2f;\n$md-light-green-900       : #33691e;\n$md-light-green-a100      : #ccff90;\n$md-light-green-a200      : #b2ff59;\n$md-light-green-a400      : #76ff03;\n$md-light-green-a700      : #64dd17;\n\n$md-lime-50               : #f9fbe7;\n$md-lime-100              : #f0f4c3;\n$md-lime-200              : #e6ee9c;\n$md-lime-300              : #dce775;\n$md-lime-400              : #d4e157;\n$md-lime-500              : #cddc39;\n$md-lime-600              : #c0ca33;\n$md-lime-700              : #afb42b;\n$md-lime-800              : #9e9d24;\n$md-lime-900              : #827717;\n$md-lime-a100             : #f4ff81;\n$md-lime-a200             : #eeff41;\n$md-lime-a400             : #c6ff00;\n$md-lime-a700             : #aeea00;\n\n$md-yellow-50             : #fffde7;\n$md-yellow-100            : #fff9c4;\n$md-yellow-200            : #fff59d;\n$md-yellow-300            : #fff176;\n$md-yellow-400            : #ffee58;\n$md-yellow-500            : #ffeb3b;\n$md-yellow-600            : #fdd835;\n$md-yellow-700            : #fbc02d;\n$md-yellow-800            : #f9a825;\n$md-yellow-900            : #f57f17;\n$md-yellow-a100           : #ffff8d;\n$md-yellow-a200           : #ffff00;\n$md-yellow-a400           : #ffea00;\n$md-yellow-a700           : #ffd600;\n\n$md-amber-50              : #fff8e1;\n$md-amber-100             : #ffecb3;\n$md-amber-200             : #ffe082;\n$md-amber-300             : #ffd54f;\n$md-amber-400             : #ffca28;\n$md-amber-500             : #ffc107;\n$md-amber-600             : #ffb300;\n$md-amber-700             : #ffa000;\n$md-amber-800             : #ff8f00;\n$md-amber-900             : #ff6f00;\n$md-amber-a100            : #ffe57f;\n$md-amber-a200            : #ffd740;\n$md-amber-a400            : #ffc400;\n$md-amber-a700            : #ffab00;\n\n$md-orange-50             : #fff3e0;\n$md-orange-100            : #ffe0b2;\n$md-orange-200            : #ffcc80;\n$md-orange-300            : #ffb74d;\n$md-orange-400            : #ffa726;\n$md-orange-500            : #ff9800;\n$md-orange-600            : #fb8c00;\n$md-orange-700            : #f57c00;\n$md-orange-800            : #ef6c00;\n$md-orange-900            : #e65100;\n$md-orange-a100           : #ffd180;\n$md-orange-a200           : #ffab40;\n$md-orange-a400           : #ff9100;\n$md-orange-a700           : #ff6d00;\n\n$md-deep-orange-50        : #fbe9e7;\n$md-deep-orange-100       : #ffccbc;\n$md-deep-orange-200       : #ffab91;\n$md-deep-orange-300       : #ff8a65;\n$md-deep-orange-400       : #ff7043;\n$md-deep-orange-500       : #ff5722;\n$md-deep-orange-600       : #f4511e;\n$md-deep-orange-700       : #e64a19;\n$md-deep-orange-800       : #d84315;\n$md-deep-orange-900       : #bf360c;\n$md-deep-orange-a100      : #ff9e80;\n$md-deep-orange-a200      : #ff6e40;\n$md-deep-orange-a400      : #ff3d00;\n$md-deep-orange-a700      : #dd2c00;\n\n$md-brown-50              : #efebe9;\n$md-brown-100             : #d7ccc8;\n$md-brown-200             : #bcaaa4;\n$md-brown-300             : #a1887f;\n$md-brown-400             : #8d6e63;\n$md-brown-500             : #795548;\n$md-brown-600             : #6d4c41;\n$md-brown-700             : #5d4037;\n$md-brown-800             : #4e342e;\n$md-brown-900             : #3e2723;\n\n$md-grey-50               : #fafafa;\n$md-grey-100              : #f5f5f5;\n$md-grey-200              : #eeeeee;\n$md-grey-300              : #e0e0e0;\n$md-grey-400              : #bdbdbd;\n$md-grey-500              : #9e9e9e;\n$md-grey-600              : #757575;\n$md-grey-700              : #616161;\n$md-grey-800              : #424242;\n$md-grey-900              : #212121;\n\n$md-blue-grey-50          : #eceff1;\n$md-blue-grey-100         : #cfd8dc;\n$md-blue-grey-200         : #b0bec5;\n$md-blue-grey-300         : #90a4ae;\n$md-blue-grey-400         : #78909c;\n$md-blue-grey-500         : #607d8b;\n$md-blue-grey-600         : #546e7a;\n$md-blue-grey-700         : #455a64;\n$md-blue-grey-800         : #37474f;\n$md-blue-grey-900         : #263238;\n\n$md-dark-text-primary     : rgba(0, 0, 0, 0.87);\n$md-dark-text-secondary   : rgba(0, 0, 0, 0.54);\n$md-dark-text-disabled    : rgba(0, 0, 0, 0.38);\n$md-dark-text-dividers    : rgba(0, 0, 0, 0.12);\n\n$md-light-text-primary    : rgba(255, 255, 255, 1);\n$md-light-text-secondary  : rgba(255, 255, 255, 0.7);\n$md-light-text-disabled   : rgba(255, 255, 255, 0.5);\n$md-light-text-dividers   : rgba(255, 255, 255, 0.12);\n\n$md-dark-icons-active     : rgba(0, 0, 0, 0.54);\n$md-dark-icons-inactive   : rgba(0, 0, 0, 0.38);\n\n$md-light-icons-active    : rgba(255, 255, 255, 1);\n$md-light-icons-inactive  : rgba(255, 255, 255, 0.5);\n\n$md-white                 : #ffffff;\n\n$md-black                 : #000000;\n\n$md-colors: (\n  white                 : #ffffff,\n  red-50                : #ffebee,\n  red-100               : #ffcdd2,\n  red-200               : #ef9a9a,\n  red-300               : #e57373,\n  red-400               : #ef5350,\n  red-500               : #f44336,\n  red-600               : #e53935,\n  red-700               : #d32f2f,\n  red-800               : #c62828,\n  red-900               : #b71c1c,\n  red-a100              : #ff8a80,\n  red-a200              : #ff5252,\n  red-a400              : #ff1744,\n  red-a700              : #d50000,\n  pink-50               : #fce4ec,\n  pink-100              : #f8bbd0,\n  pink-200              : #f48fb1,\n  pink-300              : #f06292,\n  pink-400              : #ec407a,\n  pink-500              : #e91e63,\n  pink-600              : #d81b60,\n  pink-700              : #c2185b,\n  pink-800              : #ad1457,\n  pink-900              : #880e4f,\n  pink-a100             : #ff80ab,\n  pink-a200             : #ff4081,\n  pink-a400             : #f50057,\n  pink-a700             : #c51162,\n  purple-50             : #f3e5f5,\n  purple-100            : #e1bee7,\n  purple-200            : #ce93d8,\n  purple-300            : #ba68c8,\n  purple-400            : #ab47bc,\n  purple-500            : #9c27b0,\n  purple-600            : #8e24aa,\n  purple-700            : #7b1fa2,\n  purple-800            : #6a1b9a,\n  purple-900            : #4a148c,\n  purple-a100           : #ea80fc,\n  purple-a200           : #e040fb,\n  purple-a400           : #d500f9,\n  purple-a700           : #aa00ff,\n  deep-purple-50        : #ede7f6,\n  deep-purple-100       : #d1c4e9,\n  deep-purple-200       : #b39ddb,\n  deep-purple-300       : #9575cd,\n  deep-purple-400       : #7e57c2,\n  deep-purple-500       : #673ab7,\n  deep-purple-600       : #5e35b1,\n  deep-purple-700       : #512da8,\n  deep-purple-800       : #4527a0,\n  deep-purple-900       : #311b92,\n  deep-purple-a100      : #b388ff,\n  deep-purple-a200      : #7c4dff,\n  deep-purple-a400      : #651fff,\n  deep-purple-a700      : #6200ea,\n  indigo-50             : #e8eaf6,\n  indigo-100            : #c5cae9,\n  indigo-200            : #9fa8da,\n  indigo-300            : #7986cb,\n  indigo-400            : #5c6bc0,\n  indigo-500            : #3f51b5,\n  indigo-600            : #3949ab,\n  indigo-700            : #303f9f,\n  indigo-800            : #283593,\n  indigo-900            : #1a237e,\n  indigo-a100           : #8c9eff,\n  indigo-a200           : #536dfe,\n  indigo-a400           : #3d5afe,\n  indigo-a700           : #304ffe,\n  blue-50               : #e3f2fd,\n  blue-100              : #bbdefb,\n  blue-200              : #90caf9,\n  blue-300              : #64b5f6,\n  blue-400              : #42a5f5,\n  blue-500              : #2196f3,\n  blue-600              : #1e88e5,\n  blue-700              : #1976d2,\n  blue-800              : #1565c0,\n  blue-900              : #0d47a1,\n  blue-a100             : #82b1ff,\n  blue-a200             : #448aff,\n  blue-a400             : #2979ff,\n  blue-a700             : #2962ff,\n  light-blue-50         : #e1f5fe,\n  light-blue-100        : #b3e5fc,\n  light-blue-200        : #81d4fa,\n  light-blue-300        : #4fc3f7,\n  light-blue-400        : #29b6f6,\n  light-blue-500        : #03a9f4,\n  light-blue-600        : #039be5,\n  light-blue-700        : #0288d1,\n  light-blue-800        : #0277bd,\n  light-blue-900        : #01579b,\n  light-blue-a100       : #80d8ff,\n  light-blue-a200       : #40c4ff,\n  light-blue-a400       : #00b0ff,\n  light-blue-a700       : #0091ea,\n  cyan-50               : #e0f7fa,\n  cyan-100              : #b2ebf2,\n  cyan-200              : #80deea,\n  cyan-300              : #4dd0e1,\n  cyan-400              : #26c6da,\n  cyan-500              : #00bcd4,\n  cyan-600              : #00acc1,\n  cyan-700              : #0097a7,\n  cyan-800              : #00838f,\n  cyan-900              : #006064,\n  cyan-a100             : #84ffff,\n  cyan-a200             : #18ffff,\n  cyan-a400             : #00e5ff,\n  cyan-a700             : #00b8d4,\n  teal-50               : #e0f2f1,\n  teal-100              : #b2dfdb,\n  teal-200              : #80cbc4,\n  teal-300              : #4db6ac,\n  teal-400              : #26a69a,\n  teal-500              : #009688,\n  teal-600              : #00897b,\n  teal-700              : #00796b,\n  teal-800              : #00695c,\n  teal-900              : #004d40,\n  teal-a100             : #a7ffeb,\n  teal-a200             : #64ffda,\n  teal-a400             : #1de9b6,\n  teal-a700             : #00bfa5,\n  green-50              : #e8f5e9,\n  green-100             : #c8e6c9,\n  green-200             : #a5d6a7,\n  green-300             : #81c784,\n  green-400             : #66bb6a,\n  green-500             : #4caf50,\n  green-600             : #43a047,\n  green-700             : #388e3c,\n  green-800             : #2e7d32,\n  green-900             : #1b5e20,\n  green-a100            : #b9f6ca,\n  green-a200            : #69f0ae,\n  green-a400            : #00e676,\n  green-a700            : #00c853,\n  light-green-50        : #f1f8e9,\n  light-green-100       : #dcedc8,\n  light-green-200       : #c5e1a5,\n  light-green-300       : #aed581,\n  light-green-400       : #9ccc65,\n  light-green-500       : #8bc34a,\n  light-green-600       : #7cb342,\n  light-green-700       : #689f38,\n  light-green-800       : #558b2f,\n  light-green-900       : #33691e,\n  light-green-a100      : #ccff90,\n  light-green-a200      : #b2ff59,\n  light-green-a400      : #76ff03,\n  light-green-a700      : #64dd17,\n  lime-50               : #f9fbe7,\n  lime-100              : #f0f4c3,\n  lime-200              : #e6ee9c,\n  lime-300              : #dce775,\n  lime-400              : #d4e157,\n  lime-500              : #cddc39,\n  lime-600              : #c0ca33,\n  lime-700              : #afb42b,\n  lime-800              : #9e9d24,\n  lime-900              : #827717,\n  lime-a100             : #f4ff81,\n  lime-a200             : #eeff41,\n  lime-a400             : #c6ff00,\n  lime-a700             : #aeea00,\n  yellow-50             : #fffde7,\n  yellow-100            : #fff9c4,\n  yellow-200            : #fff59d,\n  yellow-300            : #fff176,\n  yellow-400            : #ffee58,\n  yellow-500            : #ffeb3b,\n  yellow-600            : #fdd835,\n  yellow-700            : #fbc02d,\n  yellow-800            : #f9a825,\n  yellow-900            : #f57f17,\n  yellow-a100           : #ffff8d,\n  yellow-a200           : #ffff00,\n  yellow-a400           : #ffea00,\n  yellow-a700           : #ffd600,\n  amber-50              : #fff8e1,\n  amber-100             : #ffecb3,\n  amber-200             : #ffe082,\n  amber-300             : #ffd54f,\n  amber-400             : #ffca28,\n  amber-500             : #ffc107,\n  amber-600             : #ffb300,\n  amber-700             : #ffa000,\n  amber-800             : #ff8f00,\n  amber-900             : #ff6f00,\n  amber-a100            : #ffe57f,\n  amber-a200            : #ffd740,\n  amber-a400            : #ffc400,\n  amber-a700            : #ffab00,\n  orange-50             : #fff3e0,\n  orange-100            : #ffe0b2,\n  orange-200            : #ffcc80,\n  orange-300            : #ffb74d,\n  orange-400            : #ffa726,\n  orange-500            : #ff9800,\n  orange-600            : #fb8c00,\n  orange-700            : #f57c00,\n  orange-800            : #ef6c00,\n  orange-900            : #e65100,\n  orange-a100           : #ffd180,\n  orange-a200           : #ffab40,\n  orange-a400           : #ff9100,\n  orange-a700           : #ff6d00,\n  deep-orange-50        : #fbe9e7,\n  deep-orange-100       : #ffccbc,\n  deep-orange-200       : #ffab91,\n  deep-orange-300       : #ff8a65,\n  deep-orange-400       : #ff7043,\n  deep-orange-500       : #ff5722,\n  deep-orange-600       : #f4511e,\n  deep-orange-700       : #e64a19,\n  deep-orange-800       : #d84315,\n  deep-orange-900       : #bf360c,\n  deep-orange-a100      : #ff9e80,\n  deep-orange-a200      : #ff6e40,\n  deep-orange-a400      : #ff3d00,\n  deep-orange-a700      : #dd2c00,\n  brown-50              : #efebe9,\n  brown-100             : #d7ccc8,\n  brown-200             : #bcaaa4,\n  brown-300             : #a1887f,\n  brown-400             : #8d6e63,\n  brown-500             : #795548,\n  brown-600             : #6d4c41,\n  brown-700             : #5d4037,\n  brown-800             : #4e342e,\n  brown-900             : #3e2723,\n  grey-50               : #fafafa,\n  grey-100              : #f5f5f5,\n  grey-200              : #eeeeee,\n  grey-300              : #e0e0e0,\n  grey-400              : #bdbdbd,\n  grey-500              : #9e9e9e,\n  grey-600              : #757575,\n  grey-700              : #616161,\n  grey-800              : #424242,\n  grey-900              : #212121,\n  blue-grey-50          : #eceff1,\n  blue-grey-100         : #cfd8dc,\n  blue-grey-200         : #b0bec5,\n  blue-grey-300         : #90a4ae,\n  blue-grey-400         : #78909c,\n  blue-grey-500         : #607d8b,\n  blue-grey-600         : #546e7a,\n  blue-grey-700         : #455a64,\n  blue-grey-800         : #37474f,\n  blue-grey-900         : #263238,\n);\n"
  },
  {
    "path": "src/assets/styles/spec/tools/index.scss",
    "content": "@use 'mixins/index' as *;\n"
  },
  {
    "path": "src/assets/styles/spec/tools/mixins/clearfix.scss",
    "content": "//----------------------------------------------------------\n// @Clearfix\n//----------------------------------------------------------\n\n@mixin clearfix {\n  &::before,\n  &::after {\n    content: ' ';\n    display: table;\n  }\n\n  &::after {\n    clear: both;\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/tools/mixins/index.scss",
    "content": "@use 'placeholder' as *;\n@use 'clearfix' as *;\n@use 'mediaQueriesRanges' as *;\n"
  },
  {
    "path": "src/assets/styles/spec/tools/mixins/mediaQueriesRanges.scss",
    "content": "// ---------------------------------------------------------\n// @TOC\n// ---------------------------------------------------------\n\n// + @General Media Query\n// + @All Above Media Query\n// + @All Under Media Query\n// + @Between Two Devices Media Query\n\n// ---------------------------------------------------------\n// @General Media Query Mixin\n// ---------------------------------------------------------\n\n// Mixin used for custom rules that don't follow\n// any of the following premade media queries.\n\n@mixin mq($condition) {\n  @media #{$condition} {\n    @content;\n  }\n}\n\n// ---------------------------------------------------------\n// @All Above Media Query Mixin\n// ---------------------------------------------------------\n\n// Mixin used to match certain breakpoint\n// and all devices above it.\n\n@mixin from($breakpoint) {\n  @media screen and (min-width: $breakpoint){\n    @content;\n  }\n}\n\n// ---------------------------------------------------------\n// @All Under Media Query Mixin\n// ---------------------------------------------------------\n\n// Mixin used to match all devices under certain breakpoint.\n\n@mixin to($breakpoint) {\n  @media screen and (max-width: $breakpoint - 1px) {\n    @content;\n  }\n}\n\n// ---------------------------------------------------------\n// @Between Two Devices Media Query Mixin\n// ---------------------------------------------------------\n\n// Mixin used to match the devices between 2 breakpoints.\n\n@mixin between($start, $end){\n  @media screen and (min-width: $start) and (max-width: $end - 1px) {\n    @content;\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/tools/mixins/placeholder.scss",
    "content": "//----------------------------------------------------------\n// @Placeholder\n//----------------------------------------------------------\n\n@mixin placeholder {\n  &::-webkit-input-placeholder { @content; }\n  &:-moz-placeholder { @content; }\n  &::-moz-placeholder { @content; }\n  &:-ms-input-placeholder { @content; }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/utils/colors.scss",
    "content": "@use '../settings/materialColors' as *;\n@use '../settings/baseColors' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// ---------------------------------------------------------\n\n// + @Material Color\n// + @Grey Colors\n\n// ---------------------------------------------------------\n// @Material Color\n// ---------------------------------------------------------\n\n@each $item, $color in $md-colors {\n  .c-#{\"\" + $item},     .cH-#{\"\" + $item}:hover      { color: $color !important; }\n  .bgc-#{\"\" + $item},   .bgcH-#{\"\" + $item}:hover    { background-color: $color !important; }\n  .bdc-#{\"\" + $item},   .bdcH-#{\"\" + $item}:hover    { border-color: $color !important; }\n  .fill-#{\"\" + $item},  .fillH-#{\"\" + $item}:hover   { fill: $color !important; }\n  .str-#{\"\" + $item},   .strH-#{\"\" + $item}:hover    { stroke: $color !important; }\n}\n\n// ---------------------------------------------------------\n// @Grey Colors\n// ---------------------------------------------------------\n\n@each $item, $color in $grey-colors-alt {\n  .c-#{\"\" + $item},     .cH-#{\"\" + $item}:hover      { color: $color !important; }\n  .bgc-#{\"\" + $item},   .bgcH-#{\"\" + $item}:hover    { background-color: $color !important; }\n  .bdc-#{\"\" + $item},   .bdcH-#{\"\" + $item}:hover    { border-color: $color !important; }\n  .fill-#{\"\" + $item},  .fillH-#{\"\" + $item}:hover   { fill: $color !important; }\n  .str-#{\"\" + $item},   .strH-#{\"\" + $item}:hover    { stroke: $color !important; }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/utils/index.scss",
    "content": "@use 'layout/index' as *;\n@use 'colors' as *;\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/helpers/border.scss",
    "content": "@use '../../../settings/baseColors' as colors;\n@use '../../../settings/borders' as borders;\n\n// ---------------------------------------------------------\n// @TOC\n// ---------------------------------------------------------\n\n// + @Quick Border Helpers\n// + @Border Width\n// + @Border Radius\n// + @Border Style\n\n// ---------------------------------------------------------\n// @Quick Border Helpers\n// ---------------------------------------------------------\n\n.bd  { border: #{borders.$border-width} solid #{colors.$border-color} !important; }\n.bdT { border-top: #{borders.$border-width} solid #{colors.$border-color} !important; }\n.bdR { border-right: #{borders.$border-width} solid #{colors.$border-color} !important; }\n.bdB { border-bottom: #{borders.$border-width} solid #{colors.$border-color} !important; }\n.bdL { border-left: #{borders.$border-width} solid #{colors.$border-color} !important; }\n\n// ---------------------------------------------------------\n// @Border Width\n// ---------------------------------------------------------\n\n@for $i from 0 through 5 {\n  .bdw-#{$i}  { border-width: #{$i}px !important; }\n  .bdwT-#{$i} { border-top-width: #{$i}px !important; }\n  .bdwR-#{$i} { border-right-width: #{$i}px !important; }\n  .bdwB-#{$i} { border-bottom-width: #{$i}px !important; }\n  .bdwL-#{$i} { border-left-width: #{$i}px !important; }\n}\n\n// ---------------------------------------------------------\n// @Border Radius\n// ---------------------------------------------------------\n\n@for $i from 0 to 5 {\n  .bdrs-#{$i} { border-radius: #{$i}px !important; }\n\n  .bdrsT-#{$i} {\n    border-top-left-radius: #{$i}px !important;\n    border-top-right-radius: #{$i}px !important;\n  }\n\n  .bdrsR-#{$i} {\n    border-top-right-radius: #{$i}px !important;\n    border-bottom-right-radius: #{$i}px !important;\n  }\n\n  .bdrsB-#{$i} {\n    border-bottom-left-radius: #{$i}px !important;\n    border-bottom-right-radius: #{$i}px !important;\n  }\n\n  .bdrsL-#{$i} {\n    border-top-left-radius: #{$i}px !important;\n    border-bottom-left-radius: #{$i}px !important;\n  }\n}\n\n.bdrs-50p  { border-radius: 50% !important; }\n.bdrs-10em { border-radius: 10em !important; }\n\n// ---------------------------------------------------------\n// @Border Style\n// ---------------------------------------------------------\n\n.bds-n  { border-style: none !important; }\n.bds-s  { border-style: solid !important; }\n.bds-dt { border-style: dotted !important; }\n.bds-ds { border-style: dashed !important; }\n.bds-db { border-style: double !important; }\n.bds-g  { border-style: groove !important; }\n.bds-r  { border-style: ridge !important; }\n.bds-i  { border-style: inset !important; }\n.bds-o  { border-style: outset !important; }\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/helpers/flex.scss",
    "content": "@use '../mixins/generateResponsive' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// ---------------------------------------------------------\n\n// + @Variables\n// + @Flex Wrap\n// + @Flex Direction\n// + @Flex\n// + @Flex Basis\n// + @Flex Grow\n// + @Flex Shrink\n// + @Flex Order\n\n// ---------------------------------------------------------\n// @Variables\n// ---------------------------------------------------------\n\n$responsive: true;\n\n// ---------------------------------------------------------\n// @Display\n// ---------------------------------------------------------\n\n.d-f     { display: flex; }\n.d-if    { display: inline-flex; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .d-f\\@#{$breakpointAlias}     { display: flex; }\n    .d-if\\@#{$breakpointAlias}    { display: inline-flex; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Flex Wrap\n// ---------------------------------------------------------\n\n.fxw-w   { flex-wrap: wrap; }\n.fxw-wr  { flex-wrap: wrap-reverse; }\n.fxw-nw  { flex-wrap: nowrap; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .fxw-w\\@#{$breakpointAlias}   { flex-wrap: wrap; }\n    .fxw-wr\\@#{$breakpointAlias}  { flex-wrap: wrap-reverse; }\n    .fxw-nw\\@#{$breakpointAlias}  { flex-wrap: nowrap; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Flex Direction\n// ---------------------------------------------------------\n\n.fxd-c   { flex-direction: column; }\n.fxd-cr  { flex-direction: column-reverse; }\n.fxd-r   { flex-direction: row; }\n.fxd-rr  { flex-direction: row-reverse; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .fxd-c\\@#{$breakpointAlias}   { flex-direction: column; }\n    .fxd-cr\\@#{$breakpointAlias}  { flex-direction: column-reverse; }\n    .fxd-r\\@#{$breakpointAlias}   { flex-direction: row; }\n    .fxd-rr\\@#{$breakpointAlias}  { flex-direction: row-reverse; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Align Items\n// ---------------------------------------------------------\n\n.ai-fs   { align-items: flex-start; }\n.ai-fe   { align-items: flex-end; }\n.ai-c    { align-items: center; }\n.ai-b    { align-items: baseline; }\n.ai-s    { align-items: stretch; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .ai-fs\\@#{$breakpointAlias}   { align-items: flex-start; }\n    .ai-fe\\@#{$breakpointAlias}   { align-items: flex-end; }\n    .ai-c\\@#{$breakpointAlias}    { align-items: center; }\n    .ai-b\\@#{$breakpointAlias}    { align-items: baseline; }\n    .ai-s\\@#{$breakpointAlias}    { align-items: stretch; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Align Self\n// ---------------------------------------------------------\n\n.as-fs   { align-self: flex-start; }\n.as-fe   { align-self: flex-end; }\n.as-c    { align-self: center; }\n.as-b    { align-self: baseline; }\n.as-s    { align-self: stretch; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .as-fs\\@#{$breakpointAlias}   { align-self: flex-start; }\n    .as-fe\\@#{$breakpointAlias}   { align-self: flex-end; }\n    .as-c\\@#{$breakpointAlias}    { align-self: center; }\n    .as-b\\@#{$breakpointAlias}    { align-self: baseline; }\n    .as-s\\@#{$breakpointAlias}    { align-self: stretch; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Align Content\n// ---------------------------------------------------------\n\n.ac-fs   { align-content: flex-start; }\n.ac-fe   { align-content: flex-end; }\n.ac-c    { align-content: center; }\n.ac-s    { align-content: stretch; }\n.ac-sb   { align-content: space-between; }\n.ac-sa   { align-content: space-around; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .ac-fs\\@#{$breakpointAlias}   { align-content: flex-start; }\n    .ac-fe\\@#{$breakpointAlias}   { align-content: flex-end; }\n    .ac-c\\@#{$breakpointAlias}    { align-content: center; }\n    .ac-s\\@#{$breakpointAlias}    { align-content: stretch; }\n    .ac-sb\\@#{$breakpointAlias}   { align-content: space-between; }\n    .ac-sa\\@#{$breakpointAlias}   { align-content: space-around; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Justify Content\n// ---------------------------------------------------------\n\n.jc-fs   { justify-content: flex-start; }\n.jc-fe   { justify-content: flex-end; }\n.jc-c    { justify-content: center; }\n.jc-sb   { justify-content: space-between; }\n.jc-sa   { justify-content: space-around; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .jc-fs\\@#{$breakpointAlias}   { justify-content: flex-start; }\n    .jc-fe\\@#{$breakpointAlias}   { justify-content: flex-end; }\n    .jc-c\\@#{$breakpointAlias}    { justify-content: center; }\n    .jc-sb\\@#{$breakpointAlias}   { justify-content: space-between; }\n    .jc-sa\\@#{$breakpointAlias}   { justify-content: space-around; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Flex\n// ---------------------------------------------------------\n\n.fx-n    { flex: none; }\n.fx-1    { flex: 1; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .fx-n\\@#{$breakpointAlias}    { flex: none; }\n    .fx-1\\@#{$breakpointAlias}    { flex: 1; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Flex Basis\n// ---------------------------------------------------------\n\n.fxb-a   { flex-basis: auto; }\n.fxb-0   { flex-basis: 0; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .fxb-a\\@#{$breakpointAlias}   { flex-basis: auto; }\n    .fxb-0\\@#{$breakpointAlias}   { flex-basis: 0; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Flex Grow\n// ---------------------------------------------------------\n\n.fxg-1   { flex-grow: 1; }\n.fxg-0   { flex-grow: 0; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .fxg-1\\@#{$breakpointAlias}   { flex-grow: 1; }\n    .fxg-0\\@#{$breakpointAlias}   { flex-grow: 0; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Flex Shrink\n// ---------------------------------------------------------\n\n.fxs-1   { flex-shrink: 1; }\n.fxs-0   { flex-shrink: 0; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .fxs-1\\@#{$breakpointAlias}   { flex-shrink: 1; }\n    .fxs-0\\@#{$breakpointAlias}   { flex-shrink: 0; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Flex Order\n// ---------------------------------------------------------\n\n@for $i from 0 through 12 {\n  .ord-#{$i} { order: $i; }\n\n  @if ($responsive == true) {\n    @include generateResponsive() {\n      .ord-#{$i}\\@#{$breakpointAlias} { order: $i; }\n    }\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/helpers/index.scss",
    "content": "@use 'flex' as *;\n@use 'layout' as *;\n@use 'lists' as *;\n@use 'margin' as *;\n@use 'objects' as *;\n@use 'padding' as *;\n@use 'positions' as *;\n@use 'sizes' as *;\n@use 'typography' as *;\n@use 'border' as *;\n@use 'pseudo' as *;\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/helpers/layout.scss",
    "content": "@use '../mixins/generateResponsive' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// ---------------------------------------------------------\n\n// + @Variables\n// + @Display\n// + @Overflow\n// + @Float\n// + @Vertical Align\n// + @Position\n// + @Z-Index\n\n// ---------------------------------------------------------\n// @Variables\n// ---------------------------------------------------------\n\n$responsive: true;\n\n// ---------------------------------------------------------\n// @Display\n// ---------------------------------------------------------\n\n.d-b          { display: block !important; }\n.d-ib         { display: inline-block !important; }\n.d-i          { display: inline !important; }\n.d-tb         { display: table !important; }\n.d-tbc        { display: table-cell !important; }\n.d-n          { display: none !important; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .d-b\\@#{$breakpointAlias}      { display: block !important; }\n    .d-ib\\@#{$breakpointAlias}     { display: inline-block !important; }\n    .d-i\\@#{$breakpointAlias}      { display: inline !important; }\n    .d-tb\\@#{$breakpointAlias}     { display: table !important; }\n    .d-tbc\\@#{$breakpointAlias}    { display: table-cell !important; }\n    .d-n\\@#{$breakpointAlias}      { display: none !important; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Overflow\n// ---------------------------------------------------------\n\n.ov-h         { overflow: hidden !important; }\n.ov-a         { overflow: auto !important; }\n.ov-s         { overflow: scroll !important; }\n\n.ovY-h        { overflow-y: hidden !important; }\n.ovX-h        { overflow-x: hidden !important; }\n.ovY-a        { overflow-y: auto !important; }\n.ovX-a        { overflow-x: auto !important; }\n.ovY-s        { overflow-y: scroll !important; }\n.ovX-s        { overflow-x: scroll !important; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .ov-h\\@#{$breakpointAlias}     { overflow: hidden !important; }\n    .ov-a\\@#{$breakpointAlias}     { overflow: auto !important; }\n    .ov-s\\@#{$breakpointAlias}     { overflow: scroll !important; }\n\n    .ovY-h\\@#{$breakpointAlias}    { overflow-y: hidden !important; }\n    .ovX-h\\@#{$breakpointAlias}    { overflow-x: hidden !important; }\n    .ovY-a\\@#{$breakpointAlias}    { overflow-y: auto !important; }\n    .ovX-a\\@#{$breakpointAlias}    { overflow-x: auto !important; }\n    .ovY-s\\@#{$breakpointAlias}    { overflow-y: scroll !important; }\n    .ovX-s\\@#{$breakpointAlias}    { overflow-x: scroll !important; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Float\n// ---------------------------------------------------------\n\n.fl-l         { float: left !important; }\n.fl-r         { float: right !important; }\n.fl-n         { float: none !important; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .fl-l\\@#{$breakpointAlias}     { float: left !important; }\n    .fl-r\\@#{$breakpointAlias}     { float: right !important; }\n    .fl-n\\@#{$breakpointAlias}     { float: none !important; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Vertical Align\n// ---------------------------------------------------------\n\n.va-t         { vertical-align: top !important; }\n.va-m         { vertical-align: middle !important; }\n.va-b         { vertical-align: bottom !important; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .va-t\\@#{$breakpointAlias}     { vertical-align: top !important; }\n    .va-m\\@#{$breakpointAlias}     { vertical-align: middle !important; }\n    .va-b\\@#{$breakpointAlias}     { vertical-align: bottom !important; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Position\n// ---------------------------------------------------------\n\n.pos-s        { position: static !important; }\n.pos-st       { position: sticky !important; }\n.pos-r        { position: relative !important; }\n.pos-a        { position: absolute !important; }\n.pos-f        { position: fixed !important; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .pos-s\\@#{$breakpointAlias}    { position: static !important; }\n    .pos-st\\@#{$breakpointAlias}   { position: sticky !important; }\n    .pos-r\\@#{$breakpointAlias}    { position: relative !important; }\n    .pos-a\\@#{$breakpointAlias}    { position: absolute !important; }\n    .pos-f\\@#{$breakpointAlias}    { position: fixed !important; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Z-Index\n// ---------------------------------------------------------\n\n@for $i from 0 through 9 {\n  .z-#{$i} { z-index: ($i * 1000) !important; }\n\n  @if ($responsive == true) {\n    @include generateResponsive() {\n      .z-#{$i}\\@#{$breakpointAlias} { z-index: ($i * 1000) !important; }\n    }\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/helpers/lists.scss",
    "content": "// ---------------------------------------------------------\n// @TOC\n// ---------------------------------------------------------\n\n// + @List Style Position\n// + @List Style Type\n\n// ---------------------------------------------------------\n// @List Style Position\n// ---------------------------------------------------------\n\n.lisp-i { list-style-position: inside; }\n.lisp-o { list-style-position: outside; }\n\n// ---------------------------------------------------------\n// @List Style Type\n// ---------------------------------------------------------\n\n.lis-n  { list-style: none; }\n.list-c { list-style-type: circle; }\n.list-s { list-style-type: square; }\n.list-u { list-style-type: upper-roman; }\n.list-l { list-style-type: lower-alpha; }\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/helpers/margin.scss",
    "content": "@use '../mixins/generateResponsive' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// ---------------------------------------------------------\n\n// + @Variables\n// + @Margin (0 > 4 Step 1)\n// + @Margin (5 > 35 Step 5)\n// + @Margin (40 > 160 Step 10)\n// + @Margin Auto\n\n// ---------------------------------------------------------\n// @Variables\n// ---------------------------------------------------------\n\n$responsive: true;\n\n// ---------------------------------------------------------\n// @Padding (0 > 4 Step 1)\n// ---------------------------------------------------------\n\n@for $i from 0 through 4 {\n  .m-#{$i}  { margin: #{$i}px !important; }\n  .mT-#{$i} { margin-top: #{$i}px !important; }\n  .mR-#{$i} { margin-right: #{$i}px !important; }\n  .mB-#{$i} { margin-bottom: #{$i}px !important; }\n  .mL-#{$i} { margin-left: #{$i}px !important; }\n\n  .mY-#{$i} {\n    margin-top: #{$i}px !important;\n    margin-bottom: #{$i}px !important;\n  }\n\n  .mX-#{$i} {\n    margin-left: #{$i}px !important;\n    margin-right: #{$i}px !important;\n  }\n\n  .m-nv-#{$i}  { margin: -#{$i}px !important; }\n  .mT-nv-#{$i} { margin-top: -#{$i}px !important; }\n  .mR-nv-#{$i} { margin-right: -#{$i}px !important; }\n  .mB-nv-#{$i} { margin-bottom:- #{$i}px !important; }\n  .mL-nv-#{$i} { margin-left: -#{$i}px !important; }\n\n  .mY-nv-#{$i} {\n    margin-top: -#{$i}px !important;\n    margin-bottom: -#{$i}px !important;\n  }\n\n  .mX-nv-#{$i} {\n    margin-left: -#{$i}px !important;\n    margin-right: -#{$i}px !important;\n  }\n\n  @if ($responsive == true) {\n    @include generateResponsive() {\n      .m-#{$i}\\@#{$breakpointAlias}  { margin: #{$i}px !important; }\n      .mT-#{$i}\\@#{$breakpointAlias} { margin-top: #{$i}px !important; }\n      .mR-#{$i}\\@#{$breakpointAlias} { margin-right: #{$i}px !important; }\n      .mB-#{$i}\\@#{$breakpointAlias} { margin-bottom: #{$i}px !important; }\n      .mL-#{$i}\\@#{$breakpointAlias} { margin-left: #{$i}px !important; }\n\n      .mY-#{$i}\\@#{$breakpointAlias} {\n        margin-top: #{$i}px !important;\n        margin-bottom: #{$i}px !important;\n      }\n\n      .mX-#{$i}\\@#{$breakpointAlias} {\n        margin-left: #{$i}px !important;\n        margin-right: #{$i}px !important;\n      }\n\n      .m-nv-#{$i}\\@#{$breakpointAlias}  { margin: -#{$i}px !important; }\n      .mT-nv-#{$i}\\@#{$breakpointAlias} { margin-top: -#{$i}px !important; }\n      .mR-nv-#{$i}\\@#{$breakpointAlias} { margin-right: -#{$i}px !important; }\n      .mB-nv-#{$i}\\@#{$breakpointAlias} { margin-bottom: -#{$i}px !important; }\n      .mL-nv-#{$i}\\@#{$breakpointAlias} { margin-left: -#{$i}px !important; }\n\n      .mY-nv-#{$i}\\@#{$breakpointAlias} {\n        margin-top: -#{$i}px !important;\n        margin-bottom: -#{$i}px !important;\n      }\n\n      .mX-nv-#{$i}\\@#{$breakpointAlias} {\n        margin-left: -#{$i}px !important;\n        margin-right: -#{$i}px !important;\n      }\n    }\n  }\n}\n\n// ---------------------------------------------------------\n// @Padding (5 > 35 Step 5)\n// ---------------------------------------------------------\n\n@for $i from 5 through 35 {\n  @if $i % 5 == 0 {\n    .m-#{$i}  { margin: #{$i}px !important; }\n    .mT-#{$i} { margin-top: #{$i}px !important; }\n    .mR-#{$i} { margin-right: #{$i}px !important; }\n    .mB-#{$i} { margin-bottom: #{$i}px !important; }\n    .mL-#{$i} { margin-left: #{$i}px !important; }\n\n    .mY-#{$i} {\n      margin-top: #{$i}px !important;\n      margin-bottom: #{$i}px !important;\n    }\n\n    .mX-#{$i} {\n      margin-left: #{$i}px !important;\n      margin-right: #{$i}px !important;\n    }\n\n    .m-nv-#{$i}  { margin: -#{$i}px !important; }\n    .mT-nv-#{$i} { margin-top: -#{$i}px !important; }\n    .mR-nv-#{$i} { margin-right: -#{$i}px !important; }\n    .mB-nv-#{$i} { margin-bottom: -#{$i}px !important; }\n    .mL-nv-#{$i} { margin-left: -#{$i}px !important; }\n\n    .mY-nv-#{$i} {\n      margin-top: -#{$i}px !important;\n      margin-bottom: -#{$i}px !important;\n    }\n\n    .mX-nv-#{$i} {\n      margin-left: -#{$i}px !important;\n      margin-right: -#{$i}px !important;\n    }\n\n    @if ($responsive == true) {\n      @include generateResponsive() {\n        .m-#{$i}\\@#{$breakpointAlias}  { margin: #{$i}px !important; }\n        .mT-#{$i}\\@#{$breakpointAlias} { margin-top: #{$i}px !important; }\n        .mR-#{$i}\\@#{$breakpointAlias} { margin-right: #{$i}px !important; }\n        .mB-#{$i}\\@#{$breakpointAlias} { margin-bottom: #{$i}px !important; }\n        .mL-#{$i}\\@#{$breakpointAlias} { margin-left: #{$i}px !important; }\n\n        .mY-#{$i}\\@#{$breakpointAlias} {\n          margin-top: #{$i}px !important;\n          margin-bottom: #{$i}px !important;\n        }\n\n        .mX-#{$i}\\@#{$breakpointAlias} {\n          margin-left: #{$i}px !important;\n          margin-right: #{$i}px !important;\n        }\n\n        .m-nv-#{$i}\\@#{$breakpointAlias}  { margin: -#{$i}px !important; }\n        .mT-nv-#{$i}\\@#{$breakpointAlias} { margin-top: -#{$i}px !important; }\n        .mR-nv-#{$i}\\@#{$breakpointAlias} { margin-right: -#{$i}px !important; }\n        .mB-nv-#{$i}\\@#{$breakpointAlias} { margin-bottom: -#{$i}px !important; }\n        .mL-nv-#{$i}\\@#{$breakpointAlias} { margin-left: -#{$i}px !important; }\n\n        .mY-nv-#{$i}\\@#{$breakpointAlias} {\n          margin-top: -#{$i}px !important;\n          margin-bottom: -#{$i}px !important;\n        }\n\n        .mX-nv-#{$i}\\@#{$breakpointAlias} {\n          margin-left: -#{$i}px !important;\n          margin-right: -#{$i}px !important;\n        }\n      }\n    }\n  }\n}\n\n// ---------------------------------------------------------\n// @Padding (40 > 160 Step 10)\n// ---------------------------------------------------------\n\n@for $i from 40 through 160 {\n  @if $i % 10 == 0 {\n\n    .m-#{$i}  { margin: #{$i}px !important; }\n    .mT-#{$i} { margin-top: #{$i}px !important; }\n    .mR-#{$i} { margin-right: #{$i}px !important; }\n    .mB-#{$i} { margin-bottom: #{$i}px !important; }\n    .mL-#{$i} { margin-left: #{$i}px !important; }\n\n    .mY-#{$i} {\n      margin-top: #{$i}px !important;\n      margin-bottom: #{$i}px !important;\n    }\n\n    .mX-#{$i} {\n      margin-left: #{$i}px !important;\n      margin-right: #{$i}px !important;\n    }\n\n    .m-nv-#{$i}  { margin: -#{$i}px !important; }\n    .mT-nv-#{$i} { margin-top: -#{$i}px !important; }\n    .mR-nv-#{$i} { margin-right: -#{$i}px !important; }\n    .mB-nv-#{$i} { margin-bottom: -#{$i}px !important; }\n    .mL-nv-#{$i} { margin-left: -#{$i}px !important; }\n\n    .mY-nv-#{$i} {\n      margin-top: -#{$i}px !important;\n      margin-bottom: -#{$i}px !important;\n    }\n\n    .mX-nv-#{$i} {\n      margin-left: -#{$i}px !important;\n      margin-right: -#{$i}px !important;\n    }\n\n    @if ($responsive == true) {\n      @include generateResponsive() {\n        .m-#{$i}\\@#{$breakpointAlias}  { margin: #{$i}px !important; }\n        .mT-#{$i}\\@#{$breakpointAlias} { margin-top: #{$i}px !important; }\n        .mR-#{$i}\\@#{$breakpointAlias} { margin-right: #{$i}px !important; }\n        .mB-#{$i}\\@#{$breakpointAlias} { margin-bottom: #{$i}px !important; }\n        .mL-#{$i}\\@#{$breakpointAlias} { margin-left: #{$i}px !important; }\n\n        .mY-#{$i}\\@#{$breakpointAlias} {\n          margin-top: #{$i}px !important;\n          margin-bottom: #{$i}px !important;\n        }\n\n        .mX-#{$i}\\@#{$breakpointAlias} {\n          margin-left: #{$i}px !important;\n          margin-right: #{$i}px !important;\n        }\n\n        .m-nv-#{$i}\\@#{$breakpointAlias}  { margin: -#{$i}px !important; }\n        .mT-nv-#{$i}\\@#{$breakpointAlias} { margin-top: -#{$i}px !important; }\n        .mR-nv-#{$i}\\@#{$breakpointAlias} { margin-right: -#{$i}px !important; }\n        .mB-nv-#{$i}\\@#{$breakpointAlias} { margin-bottom: -#{$i}px !important; }\n        .mL-nv-#{$i}\\@#{$breakpointAlias} { margin-left: -#{$i}px !important; }\n\n        .mY-nv-#{$i}\\@#{$breakpointAlias} {\n          margin-top: -#{$i}px !important;\n          margin-bottom: -#{$i}px !important;\n        }\n\n        .mX-nv-#{$i}\\@#{$breakpointAlias} {\n          margin-left: -#{$i}px !important;\n          margin-right: -#{$i}px !important;\n        }\n      }\n    }\n  }\n}\n\n// ---------------------------------------------------------\n// @Padding Auto\n// ---------------------------------------------------------\n\n.m-a  { margin: auto !important; }\n.mX-a { margin-left: auto !important; margin-right: auto !important; }\n.mT-a { margin-top: auto !important; }\n.mR-a { margin-right: auto !important; }\n.mB-a { margin-bottom: auto !important; }\n.mL-a { margin-left: auto !important; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .m-a\\@#{$breakpointAlias}  { margin: auto !important; }\n    .mX-a\\@#{$breakpointAlias} { margin-left: auto !important; margin-right: auto !important; }\n    .mT-a\\@#{$breakpointAlias} { margin-top: auto !important; }\n    .mR-a\\@#{$breakpointAlias} { margin-right: auto !important; }\n    .mB-a\\@#{$breakpointAlias} { margin-bottom: auto !important; }\n    .mL-a\\@#{$breakpointAlias} { margin-left: auto !important; }\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/helpers/objects.scss",
    "content": "// ---------------------------------------------------------\n// @TOC\n// ---------------------------------------------------------\n\n// + @Background Size\n// + @Background Position\n// + @Background Repeat\n// + @Object Fit\n// + @Resize\n// + @Opacity\n// + @Cursor\n// + @Visibility\n\n// ---------------------------------------------------------\n// @Background Size\n// ---------------------------------------------------------\n\n.bgsz-cv   { background-size: cover; }\n.bgsz-ct   { background-size: contain; }\n.bgsz-full { background-size: 100% 100%; }\n\n// ---------------------------------------------------------\n// @Background Position\n// ---------------------------------------------------------\n\n.bgpX-c    { background-position-x: center; }\n.bgpX-t    { background-position-x: top; }\n.bgpX-r    { background-position-x: right; }\n.bgpX-l    { background-position-x: left; }\n.bgpX-b    { background-position-x: bottom; }\n.bgpY-c    { background-position-y: center; }\n.bgpY-t    { background-position-y: top; }\n.bgpY-r    { background-position-y: right; }\n.bgpY-l    { background-position-y: left; }\n.bgpY-b    { background-position-y: bottom; }\n\n// ---------------------------------------------------------\n// @Background Repeat\n// ---------------------------------------------------------\n\n.bgr-n     { background-repeat: no-repeat; }\n.bgr-y     { background-repeat: repeat-y; }\n.bgr-x     { background-repeat: repeat-x; }\n\n// ---------------------------------------------------------\n// @Object Fit\n// ---------------------------------------------------------\n\n.of-ct     { object-fit: contain; }\n.of-cv     { object-fit: cover; }\n.of-f      { object-fit: fill; }\n.of-n      { object-fit: none; }\n.of-sd     { object-fit: scale-down; }\n\n// ---------------------------------------------------------\n// @Resize\n// ---------------------------------------------------------\n\n.rsz-v     { resize: vertical; }\n.rsz-h     { resize: horizontal; }\n\n// ---------------------------------------------------------\n// @Opacity\n// ---------------------------------------------------------\n\n.op-0      { opacity: 0; }\n.op-10p    { opacity: 0.1; }\n.op-20p    { opacity: 0.2; }\n.op-30p    { opacity: 0.3; }\n.op-40p    { opacity: 0.4; }\n.op-50p    { opacity: 0.5; }\n.op-60p    { opacity: 0.6; }\n.op-70p    { opacity: 0.7; }\n.op-80p    { opacity: 0.8; }\n.op-90p    { opacity: 0.9; }\n.op-100p   { opacity: 1; }\n\n// ---------------------------------------------------------\n// @Cursor\n// ---------------------------------------------------------\n\n.cur-na    { cursor: not-allowed; }\n.cur-p     { cursor: pointer; }\n.cur-a     { cursor: auto; }\n\n// ---------------------------------------------------------\n// @Visibility\n// ---------------------------------------------------------\n\n.vis-v     { visibility: visible; }\n.vis-h     { visibility: hidden; }\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/helpers/padding.scss",
    "content": "@use '../mixins/generateResponsive' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// ---------------------------------------------------------\n\n// + @Variables\n// + @Padding (0 > 4 Step 1)\n// + @Padding (5 > 35 Step 5)\n// + @Padding (40 > 160 Step 10)\n// + @Padding Auto\n\n// ---------------------------------------------------------\n// @Variables\n// ---------------------------------------------------------\n\n$responsive: true;\n\n// ---------------------------------------------------------\n// @Padding (0 > 4 Step 1)\n// ---------------------------------------------------------\n\n@for $i from 0 through 4 {\n  .p-#{$i}  { padding: #{$i}px !important; }\n  .pT-#{$i} { padding-top: #{$i}px !important; }\n  .pR-#{$i} { padding-right: #{$i}px !important; }\n  .pB-#{$i} { padding-bottom: #{$i}px !important; }\n  .pL-#{$i} { padding-left: #{$i}px !important; }\n\n  .pY-#{$i} {\n    padding-top: #{$i}px !important;\n    padding-bottom: #{$i}px !important;\n  }\n\n  .pX-#{$i} {\n    padding-left: #{$i}px !important;\n    padding-right: #{$i}px !important;\n  }\n\n  @if ($responsive == true) {\n    @include generateResponsive() {\n      .p-#{$i}\\@#{$breakpointAlias}  { padding: #{$i}px !important; }\n      .pT-#{$i}\\@#{$breakpointAlias} { padding-top: #{$i}px !important; }\n      .pR-#{$i}\\@#{$breakpointAlias} { padding-right: #{$i}px !important; }\n      .pB-#{$i}\\@#{$breakpointAlias} { padding-bottom: #{$i}px !important; }\n      .pL-#{$i}\\@#{$breakpointAlias} { padding-left: #{$i}px !important; }\n\n      .pY-#{$i}\\@#{$breakpointAlias} {\n        padding-top: #{$i}px !important;\n        padding-bottom: #{$i}px !important;\n      }\n\n      .pX-#{$i}\\@#{$breakpointAlias} {\n        padding-left: #{$i}px !important;\n        padding-right: #{$i}px !important;\n      }\n    }\n  }\n}\n\n// ---------------------------------------------------------\n// @Padding (5 > 35 Step 5)\n// ---------------------------------------------------------\n\n@for $i from 5 through 35 {\n  @if $i % 5 == 0 {\n    .p-#{$i}  { padding: #{$i}px !important; }\n    .pT-#{$i} { padding-top: #{$i}px !important; }\n    .pR-#{$i} { padding-right: #{$i}px !important; }\n    .pB-#{$i} { padding-bottom: #{$i}px !important; }\n    .pL-#{$i} { padding-left: #{$i}px !important; }\n\n    .pY-#{$i} {\n      padding-top: #{$i}px !important;\n      padding-bottom: #{$i}px !important;\n    }\n\n    .pX-#{$i} {\n      padding-left: #{$i}px !important;\n      padding-right: #{$i}px !important;\n    }\n\n    @if ($responsive == true) {\n      @include generateResponsive() {\n        .p-#{$i}\\@#{$breakpointAlias}  { padding: #{$i}px !important; }\n        .pT-#{$i}\\@#{$breakpointAlias} { padding-top: #{$i}px !important; }\n        .pR-#{$i}\\@#{$breakpointAlias} { padding-right: #{$i}px !important; }\n        .pB-#{$i}\\@#{$breakpointAlias} { padding-bottom: #{$i}px !important; }\n        .pL-#{$i}\\@#{$breakpointAlias} { padding-left: #{$i}px !important; }\n\n        .pY-#{$i}\\@#{$breakpointAlias} {\n          padding-top: #{$i}px !important;\n          padding-bottom: #{$i}px !important;\n        }\n\n        .pX-#{$i}\\@#{$breakpointAlias} {\n          padding-left: #{$i}px !important;\n          padding-right: #{$i}px !important;\n        }\n      }\n    }\n  }\n}\n\n// ---------------------------------------------------------\n// @Padding (40 > 160 Step 10)\n// ---------------------------------------------------------\n\n@for $i from 40 through 160 {\n  @if $i % 10 == 0 {\n    .p-#{$i}  { padding: #{$i}px !important; }\n    .pT-#{$i} { padding-top: #{$i}px !important; }\n    .pR-#{$i} { padding-right: #{$i}px !important; }\n    .pB-#{$i} { padding-bottom: #{$i}px !important; }\n    .pL-#{$i} { padding-left: #{$i}px !important; }\n\n    .pY-#{$i} {\n      padding-top: #{$i}px !important;\n      padding-bottom: #{$i}px !important;\n    }\n\n    .pX-#{$i} {\n      padding-left: #{$i}px !important;\n      padding-right: #{$i}px !important;\n    }\n\n    @if ($responsive == true) {\n      @include generateResponsive() {\n        .p-#{$i}\\@#{$breakpointAlias}  { padding: #{$i}px !important; }\n        .pT-#{$i}\\@#{$breakpointAlias} { padding-top: #{$i}px !important; }\n        .pR-#{$i}\\@#{$breakpointAlias} { padding-right: #{$i}px !important; }\n        .pB-#{$i}\\@#{$breakpointAlias} { padding-bottom: #{$i}px !important; }\n        .pL-#{$i}\\@#{$breakpointAlias} { padding-left: #{$i}px !important; }\n\n        .pY-#{$i}\\@#{$breakpointAlias} {\n          padding-top: #{$i}px !important;\n          padding-bottom: #{$i}px !important;\n        }\n\n        .pX-#{$i}\\@#{$breakpointAlias} {\n          padding-left: #{$i}px !important;\n          padding-right: #{$i}px !important;\n        }\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/helpers/positions.scss",
    "content": "@use '../mixins/generateResponsive' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// ---------------------------------------------------------\n\n// + @Variables\n// + @Position (0 > 4 Step 1)\n// + @Position (5 > 35 Step 5)\n// + @Position (40 > 160 Step 10)\n\n// ---------------------------------------------------------\n// @Variables\n// ---------------------------------------------------------\n\n$responsive: true;\n\n// ---------------------------------------------------------\n// @Position (0 > 4 Step 1)\n// ---------------------------------------------------------\n\n@for $i from 0 through 4 {\n  .t-#{$i} { top: #{$i}px; }\n  .r-#{$i} { right: #{$i}px; }\n  .b-#{$i} { bottom: #{$i}px; }\n  .l-#{$i} { left: #{$i}px; }\n\n  @if ($responsive == true) {\n    @include generateResponsive() {\n      .t-#{$i}\\@#{$breakpointAlias} { top: #{$i}px; }\n      .r-#{$i}\\@#{$breakpointAlias} { right: #{$i}px; }\n      .b-#{$i}\\@#{$breakpointAlias} { bottom: #{$i}px; }\n      .l-#{$i}\\@#{$breakpointAlias} { left: #{$i}px; }\n    }\n  }\n}\n\n// ---------------------------------------------------------\n// @Position (5 > 35 Step 5)\n// ---------------------------------------------------------\n\n@for $i from 5 through 35 {\n  @if $i % 5 == 0 {\n    .t-#{$i} { top: #{$i}px; }\n    .r-#{$i} { right: #{$i}px; }\n    .b-#{$i} { bottom: #{$i}px; }\n    .l-#{$i} { left: #{$i}px; }\n\n    @if ($responsive == true) {\n      @include generateResponsive() {\n        .t-#{$i}\\@#{$breakpointAlias} { top: #{$i}px; }\n        .r-#{$i}\\@#{$breakpointAlias} { right: #{$i}px; }\n        .b-#{$i}\\@#{$breakpointAlias} { bottom: #{$i}px; }\n        .l-#{$i}\\@#{$breakpointAlias} { left: #{$i}px; }\n      }\n    }\n  }\n}\n\n// ---------------------------------------------------------\n// @Position (40 > 160 Step 10)\n// ---------------------------------------------------------\n\n@for $i from 40 through 160 {\n  @if $i % 10 == 0 {\n    .t-#{$i} { top: #{$i}px; }\n    .r-#{$i} { right: #{$i}px; }\n    .b-#{$i} { bottom: #{$i}px; }\n    .l-#{$i} { left: #{$i}px; }\n\n    @if ($responsive == true) {\n      @include generateResponsive() {\n        .t-#{$i}\\@#{$breakpointAlias} { top: #{$i}px; }\n        .r-#{$i}\\@#{$breakpointAlias} { right: #{$i}px; }\n        .b-#{$i}\\@#{$breakpointAlias} { bottom: #{$i}px; }\n        .l-#{$i}\\@#{$breakpointAlias} { left: #{$i}px; }\n      }\n    }\n  }\n}\n\n// ---------------------------------------------------------\n// @Position (50%)\n// ---------------------------------------------------------\n\n.tl-50p {\n  top: 50%;\n  left: 50%;\n}\n\n.tr-50p {\n  top: 50%;\n  right: 50%;\n}\n\n.t-50p { top: 50%; }\n.r-50p { right: 50%; }\n.b-50p { bottom: 50%; }\n.l-50p { left: 50%; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .tl-50p\\@#{$breakpointAlias} {\n      top: 50%;\n      left: 50%;\n    }\n\n    .tr-50p\\@#{$breakpointAlias} {\n      top: 50%;\n      right: 50%;\n    }\n\n    .t-50p\\@#{$breakpointAlias} { top: 50%; }\n    .r-50p\\@#{$breakpointAlias} { right: 50%; }\n    .b-50p\\@#{$breakpointAlias} { bottom: 50%; }\n    .l-50p\\@#{$breakpointAlias} { left: 50%; }\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/helpers/pseudo.scss",
    "content": "// ---------------------------------------------------------\n// @Pseudo Elements\n// ---------------------------------------------------------\n\n.no-after::after   { display: none !important; }\n.no-before::before { display: none !important; }\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/helpers/sizes.scss",
    "content": "@use '../mixins/generateResponsive' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// ---------------------------------------------------------\n\n// + @Variables\n// + @Fixed Width\n// + @Relative Width\n// + @Fixed Height\n// + @Max Size\n\n// ---------------------------------------------------------\n// @Variables\n// ---------------------------------------------------------\n\n$responsive: true;\n\n// ---------------------------------------------------------\n// @Fixed Width\n// ---------------------------------------------------------\n\n.w-1\\/4r, .sz-1\\/4r    { width: 0.25rem; }\n.w-1\\/2r, .sz-1\\/2r    { width: 0.5rem; }\n.w-3\\/4r, .sz-3\\/4r    { width: 0.75rem; }\n.w-1r, .sz-1r          { width: 1rem; }\n.w-3\\/2r, .sz-3\\/2r    { width: 1.5rem; }\n.w-2r, .sz-2r          { width: 2rem; }\n.w-5\\/2r, .sz-5\\/2r    { width: 2.5rem; }\n.w-3r, .sz-3r          { width: 3rem; }\n.w-7\\/2r, .sz-7\\/2r    { width: 3.5rem; }\n.w-4r, .sz-4r          { width: 4rem; }\n.w-9\\/2r, .sz-9\\/2r    { width: 4.5rem; }\n.w-5r, .sz-5r          { width: 5rem; }\n.w-11\\/2r, .sz-11\\/2r  { width: 5.5rem; }\n.w-6r, .sz-6r          { width: 6rem; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .w-1\\/4r\\@#{$breakpointAlias}, .sz-1\\/4r\\@#{$breakpointAlias}    { width: 0.25rem; }\n    .w-1\\/2r\\@#{$breakpointAlias}, .sz-1\\/2r\\@#{$breakpointAlias}    { width: 0.5rem; }\n    .w-3\\/4r\\@#{$breakpointAlias}, .sz-3\\/4r\\@#{$breakpointAlias}    { width: 0.75rem; }\n    .w-1r\\@#{$breakpointAlias}, .sz-1r\\@#{$breakpointAlias}          { width: 1rem; }\n    .w-3\\/2r\\@#{$breakpointAlias}, .sz-3\\/2r\\@#{$breakpointAlias}    { width: 1.5rem; }\n    .w-2r\\@#{$breakpointAlias}, .sz-2r\\@#{$breakpointAlias}          { width: 2rem; }\n    .w-5\\/2r\\@#{$breakpointAlias}, .sz-5\\/2r\\@#{$breakpointAlias}    { width: 2.5rem; }\n    .w-3r\\@#{$breakpointAlias}, .sz-3r\\@#{$breakpointAlias}          { width: 3rem; }\n    .w-7\\/2r\\@#{$breakpointAlias}, .sz-7\\/2r\\@#{$breakpointAlias}    { width: 3.5rem; }\n    .w-4r\\@#{$breakpointAlias}, .sz-4r\\@#{$breakpointAlias}          { width: 4rem; }\n    .w-9\\/2r\\@#{$breakpointAlias}, .sz-9\\/2r\\@#{$breakpointAlias}    { width: 4.5rem; }\n    .w-5r\\@#{$breakpointAlias}, .sz-5r\\@#{$breakpointAlias}          { width: 5rem; }\n    .w-11\\/2r\\@#{$breakpointAlias}, .sz-11\\/2r\\@#{$breakpointAlias}  { width: 5.5rem; }\n    .w-6r\\@#{$breakpointAlias}, .sz-6r\\@#{$breakpointAlias}          { width: 6rem; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Relative Width\n// ---------------------------------------------------------\n\n.w-0     { width: 0px; }\n.w-10p   { width: 10%; }\n.w-20p   { width: 20%; }\n.w-30p   { width: 30%; }\n.w-40p   { width: 40%; }\n.w-50p   { width: 50%; }\n.w-60p   { width: 60%; }\n.w-70p   { width: 70%; }\n.w-80p   { width: 80%; }\n.w-90p   { width: 90%; }\n.w-100p  { width: 100%; }\n.w-1px   { width: 1px; }\n.w-a     { width: auto; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .w-0\\@#{$breakpointAlias}     { width: 0px; }\n    .w-10p\\@#{$breakpointAlias}   { width: 10%; }\n    .w-20p\\@#{$breakpointAlias}   { width: 20%; }\n    .w-30p\\@#{$breakpointAlias}   { width: 30%; }\n    .w-40p\\@#{$breakpointAlias}   { width: 40%; }\n    .w-50p\\@#{$breakpointAlias}   { width: 50%; }\n    .w-60p\\@#{$breakpointAlias}   { width: 60%; }\n    .w-70p\\@#{$breakpointAlias}   { width: 70%; }\n    .w-80p\\@#{$breakpointAlias}   { width: 80%; }\n    .w-90p\\@#{$breakpointAlias}   { width: 90%; }\n    .w-100p\\@#{$breakpointAlias}  { width: 100%; }\n    .w-1px\\@#{$breakpointAlias}   { width: 1px; }\n    .w-a\\@#{$breakpointAlias}     { width: auto; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Fixed Height\n// ---------------------------------------------------------\n\n.h-1\\/4r, .sz-1\\/4r    { height: 0.25rem; }\n.h-1\\/2r, .sz-1\\/2r    { height: 0.5rem; }\n.h-3\\/4r, .sz-3\\/4r    { height: 0.75rem; }\n.h-1r, .sz-1r          { height: 1rem; }\n.h-3\\/2r, .sz-3\\/2r    { height: 1.5rem; }\n.h-2r, .sz-2r          { height: 2rem; }\n.h-5\\/2r, .sz-5\\/2r    { height: 2.5rem; }\n.h-3r, .sz-3r          { height: 3rem; }\n.h-7\\/2r, .sz-7\\/2r    { height: 3.5rem; }\n.h-4r, .sz-4r          { height: 4rem; }\n.h-9\\/2r, .sz-9\\/2r    { height: 4.5rem; }\n.h-5r, .sz-5r          { height: 5rem; }\n.h-11\\/2r, .sz-11\\/2r  { height: 5.5rem; }\n.h-6r, .sz-6r          { height: 6rem; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .h-1\\/4r\\@#{$breakpointAlias}, .sz-1\\/4r\\@#{$breakpointAlias}    { height: 0.25rem; }\n    .h-1\\/2r\\@#{$breakpointAlias}, .sz-1\\/2r\\@#{$breakpointAlias}    { height: 0.5rem; }\n    .h-3\\/4r\\@#{$breakpointAlias}, .sz-3\\/4r\\@#{$breakpointAlias}    { height: 0.75rem; }\n    .h-1r\\@#{$breakpointAlias}, .sz-1r\\@#{$breakpointAlias}          { height: 1rem; }\n    .h-3\\/2r\\@#{$breakpointAlias}, .sz-3\\/2r\\@#{$breakpointAlias}    { height: 1.5rem; }\n    .h-2r\\@#{$breakpointAlias}, .sz-2r\\@#{$breakpointAlias}          { height: 2rem; }\n    .h-5\\/2r\\@#{$breakpointAlias}, .sz-5\\/2r\\@#{$breakpointAlias}    { height: 2.5rem; }\n    .h-3r\\@#{$breakpointAlias}, .sz-3r\\@#{$breakpointAlias}          { height: 3rem; }\n    .h-7\\/2r\\@#{$breakpointAlias}, .sz-7\\/2r\\@#{$breakpointAlias}    { height: 3.5rem; }\n    .h-4r\\@#{$breakpointAlias}, .sz-4r\\@#{$breakpointAlias}          { height: 4rem; }\n    .h-9\\/2r\\@#{$breakpointAlias}, .sz-9\\/2r\\@#{$breakpointAlias}    { height: 4.5rem; }\n    .h-5r\\@#{$breakpointAlias}, .sz-5r\\@#{$breakpointAlias}          { height: 5rem; }\n    .h-11\\/2r\\@#{$breakpointAlias}, .sz-11\\/2r\\@#{$breakpointAlias}  { height: 5.5rem; }\n    .h-6r\\@#{$breakpointAlias}, .sz-6r\\@#{$breakpointAlias}          { height: 6rem; }\n  }\n}\n\n.h-0     { height: 0; }\n.h-auto  { height: auto; }\n.h-100p  { height: 100%; }\n.h-100vh { height: 100vh; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .h-0\\@#{$breakpointAlias}     { height: 0; }\n    .h-auto\\@#{$breakpointAlias}  { height: auto; }\n    .h-100p\\@#{$breakpointAlias}  { height: 100%; }\n    .h-100vh\\@#{$breakpointAlias} { height: 100vh; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Max Size\n// ---------------------------------------------------------\n\n.mw-100p { max-width: 100%; }\n.mh-100p { max-height: 100%; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .mw-100p\\@#{$breakpointAlias} { max-width: 100%; }\n    .mh-100p\\@#{$breakpointAlias} { max-height: 100%; }\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/helpers/typography.scss",
    "content": "@use '../mixins/generateResponsive' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// ---------------------------------------------------------\n\n// + @Variables\n// + @Text Align\n// + @Text Transform\n// + @Font Style\n// + @Text Decoration\n// + @White Space\n// + @Word Break\n// + @Word Wrap\n// + @Text Overflow\n// + @Font Size\n// + @Font Weight\n// + @Line Height\n\n// ---------------------------------------------------------\n// @Variables\n// ---------------------------------------------------------\n\n$responsive: true;\n\n// ---------------------------------------------------------\n// @Text Align\n// ---------------------------------------------------------\n\n.ta-c { text-align: center !important; }\n.ta-l { text-align: left !important; }\n.ta-r { text-align: right !important; }\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .ta-c\\@#{$breakpointAlias} { text-align: center !important; }\n    .ta-l\\@#{$breakpointAlias} { text-align: left !important; }\n    .ta-r\\@#{$breakpointAlias} { text-align: right !important; }\n  }\n}\n\n// ---------------------------------------------------------\n// @Text Transform\n// ---------------------------------------------------------\n\n.tt-n { text-transform: none !important; }\n.tt-u { text-transform: uppercase !important; }\n.tt-l { text-transform: lowercase !important; }\n.tt-c { text-transform: capitalize !important; }\n\n// ---------------------------------------------------------\n// @Font Style\n// ---------------------------------------------------------\n\n.fs-i { font-style: italic !important; }\n.fs-o { font-style: oblique !important; }\n\n// ---------------------------------------------------------\n// @Text Decoration\n// ---------------------------------------------------------\n\n.td-n { text-decoration: none !important; }\n.td-o { text-decoration: overline !important; }\n.td-lt { text-decoration: line-through !important; }\n.td-u { text-decoration: underline !important; }\n\n// ---------------------------------------------------------\n// @White Space\n// ---------------------------------------------------------\n\n.whs-nw { white-space: nowrap !important; }\n.whs-p { white-space: pre !important; }\n.whs-n { white-space: normal !important; }\n\n// ---------------------------------------------------------\n// @Word Break\n// ---------------------------------------------------------\n\n.wob-n { word-break: normal !important; }\n.wob-ba { word-break: break-all !important; }\n.wob-k { word-break: keep-all !important; }\n\n// ---------------------------------------------------------\n// @Word Wrap\n// ---------------------------------------------------------\n\n.wow-bw { word-wrap: break-word !important; }\n.wow-n { word-wrap: normal !important; }\n\n// ---------------------------------------------------------\n// @Text Overflow\n// ---------------------------------------------------------\n\n.tov-e { text-overflow: ellipsis !important; }\n\n// ---------------------------------------------------------\n// @Font Size\n// ---------------------------------------------------------\n\n.fsz-xs   { font-size: 0.75rem !important; }\n.fsz-sm   { font-size: 0.87rem !important; }\n.fsz-def  { font-size: 1rem !important; }\n.fsz-md   { font-size: 1.15rem !important; }\n.fsz-lg   { font-size: 1.4rem !important; }\n.fsz-xl   { font-size: 1.7rem !important; }\n\n// ---------------------------------------------------------\n// @Font Weight\n// ---------------------------------------------------------\n\n.fw-100 { font-weight: 100 !important; }\n.fw-200 { font-weight: 200 !important; }\n.fw-300 { font-weight: 300 !important; }\n.fw-400 { font-weight: 400 !important; }\n.fw-500 { font-weight: 500 !important; }\n.fw-600 { font-weight: 600 !important; }\n.fw-700 { font-weight: 700 !important; }\n.fw-800 { font-weight: 800 !important; }\n.fw-900 { font-weight: 900 !important; }\n\n// ---------------------------------------------------------\n// @Line Height\n// ---------------------------------------------------------\n\n.lh-0    { line-height: 0 !important; }\n.lh-1    { line-height: 1 !important; }\n.lh-3\\/2 { line-height: 1.5 !important; }\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/index.scss",
    "content": "@use 'mixins/index' as *;\n@use 'utils/index' as *;\n@use 'helpers/index' as *;\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/mixins/generateResponsive.scss",
    "content": "@use '../../../settings/breakpoints' as *;\n@use 'mediaQueryCondition' as *;\n\n// Initialize global variable to avoid deprecation warning\n$breakpointAlias: null;\n\n// ---------------------------------------------------------\n// @Responsive Suffix Generator\n// ---------------------------------------------------------\n\n// Mixin used to generate responsive suffixes for classes (i.e. m-10@sm+).\n\n\n@mixin generateResponsive() {\n  @each $breakpoint in $breakpoints {\n    $breakpointAlias     : nth($breakpoint, 1) !global;\n    $breakpointCondition : nth($breakpoint, 2);\n\n    @include mediaQueryCondition($breakpointAlias) {\n      @content;\n    }\n\n    $breakpointAlias: null !global;\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/mixins/index.scss",
    "content": "@use 'mediaQueryCondition' as *;\n@use 'generateResponsive' as *;\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/mixins/mediaQueryCondition.scss",
    "content": "@use '../../../settings/breakpoints' as *;\n\n// ---------------------------------------------------------\n// @Media Queries Generator\n// ---------------------------------------------------------\n\n// Mixin used to generate responsive versions of css rules.\n\n@mixin mediaQueryCondition($mq) {\n  $breakpointFound: false;\n\n  @each $breakpoint in $breakpoints {\n    $alias: nth($breakpoint, 1);\n    $condition: nth($breakpoint, 2);\n\n    @if $mq == $alias and $condition {\n      $breakpointFound: true;\n\n      @media #{$condition} {\n        @content;\n      }\n    }\n  }\n\n  @if $breakpointFound == false {\n    @warn \"Oops! Breakpoint ‘#{$mq}’ does not exist \\:\";\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/utils/center.scss",
    "content": "@use '../mixins/generateResponsive' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// ---------------------------------------------------------\n\n// + @Variables\n// + @Centering\n\n// ---------------------------------------------------------\n// @Variables\n// ---------------------------------------------------------\n\n$responsive: true;\n\n// ---------------------------------------------------------\n// @Centering\n// ---------------------------------------------------------\n\n.centerY {\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.centerX {\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.centerXY {\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n@if ($responsive == true) {\n  @include generateResponsive() {\n    .centerY\\@#{$breakpointAlias} {\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .centerX\\@#{$breakpointAlias} {\n      left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .centerXY\\@#{$breakpointAlias} {\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/utils/gap.scss",
    "content": "@use \"sass:math\";\n@use '../mixins/generateResponsive' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// ---------------------------------------------------------\n\n// + @Variables\n// + @Base\n// + @Gap (0 > 4 Step 1)\n// + @Gap (5 > 35 Step 5)\n// + @Gap (40 > 160 Step 10)\n\n// ---------------------------------------------------------\n// @Variables\n// ---------------------------------------------------------\n\n$responsive: true;\n\n// ---------------------------------------------------------\n// @Base\n// ---------------------------------------------------------\n\n[class*='gap'] {\n  width: auto !important;\n  overflow: hidden !important;\n}\n\n// ---------------------------------------------------------\n// @Gap (0 > 4 Step 1)\n// ---------------------------------------------------------\n\n@for $i from 0 through 4 {\n  .gapX-#{$i} {\n    margin-left: #{math.div($i, -2)}px !important;\n    margin-right: #{math.div($i, -2)}px !important;\n\n    & > * {\n      padding-left: #{math.div($i, 2)}px !important;\n      padding-right: #{math.div($i, 2)}px !important;\n    }\n  }\n\n  .gapY-#{$i} {\n    margin-top: #{math.div($i, -2)}px !important;\n    margin-bottom: #{math.div($i, -2)}px !important;\n\n    & > * {\n      padding-top: #{math.div($i, 2)}px !important;\n      padding-bottom: #{math.div($i, 2)}px !important;\n    }\n  }\n\n  .gap-#{$i} {\n    margin: #{math.div($i, -2)}px !important;\n\n    & > * {\n      padding: #{math.div($i, 2)}px !important;\n    }\n  }\n\n  @if ($responsive == true) {\n    @include generateResponsive() {\n      .gapX-#{$i}\\@#{$breakpointAlias} {\n        margin-left: #{math.div($i, -2)}px !important;\n        margin-right: #{math.div($i, -2)}px !important;\n\n        & > * {\n          padding-left: #{math.div($i, 2)}px !important;\n          padding-right: #{math.div($i, 2)}px !important;\n        }\n      }\n\n      .gapY-#{$i}\\@#{$breakpointAlias} {\n        margin-top: #{math.div($i, -2)}px !important;\n        margin-bottom: #{math.div($i, -2)}px !important;\n\n        & > * {\n          padding-top: #{math.div($i, 2)}px !important;\n          padding-bottom: #{math.div($i, 2)}px !important;\n        }\n      }\n\n      .gap-#{$i}\\@#{$breakpointAlias} {\n        margin: #{math.div($i, -2)}px !important;\n\n        & > * {\n          padding: #{math.div($i, 2)}px !important;\n        }\n      }\n    }\n  }\n}\n\n// ---------------------------------------------------------\n// @Gap (5 > 35 Step 5)\n// ---------------------------------------------------------\n\n@for $i from 5 through 35 {\n  @if $i % 5 == 0 {\n    .gapX-#{$i} {\n      margin-left: #{math.div($i, -2)}px !important;\n      margin-right: #{math.div($i, -2)}px !important;\n\n      & > * {\n        padding-left: #{math.div($i, 2)}px !important;\n        padding-right: #{math.div($i, 2)}px !important;\n      }\n    }\n\n    .gapY-#{$i} {\n      margin-top: #{math.div($i, -2)}px !important;\n      margin-bottom: #{math.div($i, -2)}px !important;\n\n      & > * {\n        padding-top: #{math.div($i, 2)}px !important;\n        padding-bottom: #{math.div($i, 2)}px !important;\n      }\n    }\n\n    .gap-#{$i} {\n      margin: #{math.div($i, -2)}px !important;\n\n      & > * {\n        padding: #{math.div($i, 2)}px !important;\n      }\n    }\n\n    @if ($responsive == true) {\n      @include generateResponsive() {\n        .gapX-#{$i}\\@#{$breakpointAlias} {\n          margin-left: #{math.div($i, -2)}px !important;\n          margin-right: #{math.div($i, -2)}px !important;\n\n          & > * {\n            padding-left: #{math.div($i, 2)}px !important;\n            padding-right: #{math.div($i, 2)}px !important;\n          }\n        }\n\n        .gapY-#{$i}\\@#{$breakpointAlias} {\n          margin-top: #{math.div($i, -2)}px !important;\n          margin-bottom: #{math.div($i, -2)}px !important;\n\n          & > * {\n            padding-top: #{math.div($i, 2)}px !important;\n            padding-bottom: #{math.div($i, 2)}px !important;\n          }\n        }\n\n        .gap-#{$i}\\@#{$breakpointAlias} {\n          margin: #{math.div($i, -2)}px !important;\n\n          & > * {\n            padding: #{math.div($i, 2)}px !important;\n          }\n        }\n      }\n    }\n  }\n}\n\n// ---------------------------------------------------------\n// @Gap (40 > 160 Step 10)\n// ---------------------------------------------------------\n\n@for $i from 40 through 160 {\n  @if $i % 10 == 0 {\n    .gapX-#{$i} {\n      margin-left: #{math.div($i, -2)}px !important;\n      margin-right: #{math.div($i, -2)}px !important;\n\n      & > * {\n        padding-left: #{math.div($i, 2)}px !important;\n        padding-right: #{math.div($i, 2)}px !important;\n      }\n    }\n\n    .gapY-#{$i} {\n      margin-top: #{math.div($i, -2)}px !important;\n      margin-bottom: #{math.div($i, -2)}px !important;\n\n      & > * {\n        padding-top: #{math.div($i, 2)}px !important;\n        padding-bottom: #{math.div($i, 2)}px !important;\n      }\n    }\n\n    .gap-#{$i} {\n      margin: #{math.div($i, -2)}px !important;\n\n      & > * {\n        padding: #{math.div($i, 2)}px !important;\n      }\n    }\n\n    @if ($responsive == true) {\n      @include generateResponsive() {\n        .gapX-#{$i}\\@#{$breakpointAlias} {\n          margin-left: #{math.div($i, -2)}px !important;\n          margin-right: #{math.div($i, -2)}px !important;\n\n          & > * {\n            padding-left: #{math.div($i, 2)}px !important;\n            padding-right: #{math.div($i, 2)}px !important;\n          }\n        }\n\n        .gapY-#{$i}\\@#{$breakpointAlias} {\n          margin-top: #{math.div($i, -2)}px !important;\n          margin-bottom: #{math.div($i, -2)}px !important;\n\n          & > * {\n            padding-top: #{math.div($i, 2)}px !important;\n            padding-bottom: #{math.div($i, 2)}px !important;\n          }\n        }\n\n        .gap-#{$i}\\@#{$breakpointAlias} {\n          margin: #{math.div($i, -2)}px !important;\n\n          & > * {\n            padding: #{math.div($i, 2)}px !important;\n          }\n        }\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/utils/index.scss",
    "content": "@use 'center' as *;\n@use 'gap' as *;\n@use 'peers' as *;\n@use 'layers' as *;\n\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/utils/layers.scss",
    "content": ".layers {\n  display: flex;\n  flex-flow: column nowrap;\n  align-items: center;\n}\n"
  },
  {
    "path": "src/assets/styles/spec/utils/layout/utils/peers.scss",
    "content": ".peers {\n  box-sizing: border-box;\n  display: flex !important;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-flow: row wrap;\n  height: auto;\n  max-width: 100%;\n  margin: 0;\n  padding: 0;\n}\n\n.peer {\n  display: block;\n  height: auto;\n  flex: 0 0 auto;\n}\n\n.peer-greed {\n  flex: 1 1 auto;\n  // overflow: hidden;\n}\n\n.peers-greed > .peer,\n.peers-greed > .peers {\n  flex: 1 1 auto;\n}\n\n.peer > img {\n  max-width: none;\n}\n\n.peer-greed > img {\n  max-width: 100%;\n}\n"
  },
  {
    "path": "src/assets/styles/utils/mobile.scss",
    "content": "// Mobile Utility Classes and Fixes\n// This file contains mobile-specific utility classes and responsive fixes\n\n// Mobile text utilities - Only hide theme labels on very small screens\n@media (max-width: 480px) {\n  .theme-toggle .form-check-label {\n    display: none !important;\n  }\n  \n  .theme-toggle {\n    padding: 0 6px !important;\n    height: 60px !important; // Match header height\n    justify-content: center !important;\n    min-height: 60px !important;\n    \n    .form-check {\n      height: 100% !important;\n      \n      .form-check-label {\n        font-size: 11px !important; // Slightly smaller for very small screens\n        font-weight: 500 !important;\n        \n        i {\n          font-size: 14px !important; // Still reasonable for tiny screens\n        }\n      }\n      \n      .form-check-input {\n        margin: 0 6px !important;\n        width: 38px !important; // Bigger than before but not huge for tiny screens\n        height: 22px !important; // Bigger than before but not huge for tiny screens  \n        border-radius: 11px !important;\n        border-width: 2px !important;\n      }\n    }\n  }\n  \n  // Very small screen adjustments\n  .d-none-xs {\n    display: none !important;\n  }\n  \n  .fs-xs {\n    font-size: 10px !important;\n  }\n  \n  .p-xs {\n    padding: 5px !important;\n  }\n  \n  .m-xs {\n    margin: 5px !important;\n  }\n}\n\n// Mobile dropdown improvements\n@media (max-width: 767px) {\n  .dropdown-menu {\n    // Ensure all dropdowns are mobile-friendly\n    &.show {\n      position: fixed !important;\n      top: 65px !important;\n      left: 5px !important;\n      right: 5px !important;\n      width: auto !important;\n      transform: none !important;\n      z-index: 1050;\n      max-height: calc(100vh - 85px);\n      overflow-y: auto;\n    }\n  }\n  \n  // Mobile notification improvements\n  .notifications .dropdown-menu {\n    .scrollable {\n      max-height: 300px;\n      overflow-y: auto;\n    }\n  }\n}\n\n// Mobile header compact mode\n@media (max-width: 991px) {\n  .header .nav-right > li > a {\n    padding: 0 6px !important;\n  }\n  \n  .header .nav-left > li > a {\n    padding: 0 8px !important;\n  }\n}\n\n// Ultra-compact mode for very small screens\n@media (max-width: 480px) {\n  .header .nav-right > li > a {\n    padding: 0 4px !important;\n    font-size: 14px !important;\n  }\n  \n  .header .nav-left > li > a {\n    padding: 0 6px !important;\n  }\n  \n  // Hide search on very small screens when not active\n  .search-box:not(.active) {\n    display: none !important;\n  }\n}\n\n// Mobile-specific spacing utilities\n.mobile-compact {\n  @media (max-width: 767px) {\n    padding: 5px !important;\n    margin: 2px !important;\n  }\n}\n\n.mobile-hidden {\n  @media (max-width: 767px) {\n    display: none !important;\n  }\n}\n\n.mobile-only {\n  display: none !important;\n  \n  @media (max-width: 767px) {\n    display: block !important;\n  }\n}\n\n// Prevent horizontal scroll on mobile\n.mobile-no-scroll {\n  @media (max-width: 767px) {\n    overflow-x: hidden !important;\n  }\n}\n\n// COMPREHENSIVE Mobile Header Fixes\n// Better layout, bigger icons, full-width search, and desktop fixes\n\n// =============================================================================\n// DESKTOP FIXES - Remove top spacing issue\n// =============================================================================\n\n@media screen and (min-width: 768px) {\n  .header {\n    margin-top: 0 !important;\n    top: 0 !important;\n  }\n  \n  .page-container {\n    padding-top: 61px !important; // Standard header height + 1px border\n  }\n  \n  .main-content {\n    margin-top: 0 !important;\n    padding-top: 20px !important;\n  }\n  \n  // DESKTOP THEME TOGGLE - Make sure it's fully visible\n  .theme-toggle {\n    display: flex !important;\n    align-items: center !important;\n    height: 65px !important;\n    padding: 0 15px !important;\n\n    .form-check {\n      margin: 0 !important;\n      display: flex !important;\n      align-items: center !important;\n      \n      .form-check-label {\n        color: var(--c-text-muted) !important;\n        font-size: 11px !important;\n        font-weight: 500 !important;\n        text-transform: uppercase !important;\n        letter-spacing: 0.5px !important;\n        display: inline !important;\n        \n        i {\n          font-size: 12px !important;\n        }\n      }\n\n      .form-check-input {\n        width: 2.5rem !important;\n        height: 1.25rem !important;\n        background-color: var(--c-border) !important;\n        border: 1px solid var(--c-border) !important;\n        cursor: pointer !important;\n        margin: 0 8px !important;\n        \n        &:checked {\n          background-color: var(--c-primary) !important;\n          border-color: var(--c-primary) !important;\n        }\n\n        &:focus {\n          box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--c-primary) 25%, transparent) !important;\n          border-color: var(--c-primary) !important;\n        }\n      }\n    }\n  }\n}\n\n// =============================================================================\n// HEADER NAVIGATION MOBILE FIXES - ENHANCED LAYOUT\n// =============================================================================\n\n// Mobile header fixes with improved spacing and layout\n@media screen and (max-width: 767px) {\n  \n  // Force header to be fixed and proper height\n  .header {\n    position: fixed !important;\n    top: 0 !important;\n    left: 0 !important;\n    right: 0 !important;\n    z-index: 1000 !important;\n    width: 100% !important;\n    height: auto !important;\n    min-height: 60px !important;\n    padding: 0 !important;\n    margin: 0 !important;\n    margin-top: 0 !important; // Ensure no top margin on mobile\n  }\n\n  // Header container - IMPROVED EDGE-TO-EDGE LAYOUT\n  .header .header-container {\n    display: flex !important;\n    align-items: center !important;\n    justify-content: space-between !important;\n    flex-wrap: nowrap !important;\n    padding: 8px 8px !important; // Reduced side padding for more space\n    height: auto !important;\n    min-height: 60px !important;\n    max-height: 60px !important;\n    overflow: visible !important;\n    gap: 12px !important; // Larger gap to push items apart\n  }\n\n  // LEFT SECTION: Logo + Hamburger + Search - PUSHED MORE LEFT\n  .header .nav-left {\n    display: flex !important;\n    align-items: center !important;\n    flex: 1 1 auto !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    float: none !important;\n    max-width: 65% !important; // Increased width\n    gap: 4px !important; // Tighter spacing between left items\n    justify-content: flex-start !important; // Push to left edge\n    \n    // Logo first - positioned at far left\n    &::before {\n      content: \"A\" !important;\n      display: inline-flex !important;\n      align-items: center !important;\n      justify-content: center !important;\n      width: 32px !important;\n      height: 32px !important;\n      background: #007bff !important;\n      color: white !important;\n      border-radius: 6px !important;\n      font-weight: bold !important;\n      font-size: 18px !important;\n      flex-shrink: 0 !important;\n      order: -1 !important;\n      margin-right: 6px !important; // Small margin to separate from hamburger\n    }\n    \n    > li {\n      display: inline-flex !important;\n      align-items: center !important;\n      margin: 0 !important;\n      float: none !important;\n      \n      > a {\n        padding: 8px 6px !important; // Reduced padding for tighter spacing\n        margin: 0 !important;\n        min-height: auto !important;\n        line-height: 1 !important;\n        display: flex !important;\n        align-items: center !important;\n        border-radius: 4px !important;\n        \n        i {\n          font-size: 20px !important;\n          margin: 0 !important;\n        }\n        \n        // Hover state for better UX\n        &:hover {\n          background: rgba(0, 0, 0, 0.05) !important;\n        }\n      }\n      \n      // Sidebar toggle (hamburger)\n      &:first-child > a {\n        padding: 8px 6px !important;\n        \n        i {\n          font-size: 22px !important;\n        }\n      }\n      \n      // Search toggle\n      &.search-box > a {\n        padding: 8px 6px !important;\n        \n        i {\n          font-size: 20px !important;\n        }\n      }\n    }\n    \n    // FULL-WIDTH SEARCH BAR - CLEANER DESIGN\n    .search-input {\n      display: none !important; // Hidden by default\n      position: fixed !important; // Fixed positioning for full control\n      top: 60px !important; // Right below header\n      left: 0 !important;\n      right: 0 !important;\n      background: var(--c-bkg-card) !important;\n      border-bottom: 1px solid var(--c-border) !important;\n      padding: 15px 20px !important; // More padding for better appearance\n      z-index: 9999 !important;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; // Subtle shadow\n      \n      &.active {\n        display: block !important;\n      }\n      \n      input {\n        width: 100% !important;\n        padding: 12px 16px !important; // Better padding\n        font-size: 16px !important;\n        border: 1px solid var(--c-border) !important;\n        border-radius: 8px !important; // Rounded corners\n        background: var(--c-bkg-body) !important;\n        color: var(--c-text-base) !important;\n        margin: 0 !important;\n        outline: none !important;\n        \n        &::placeholder {\n          color: var(--c-text-muted) !important;\n        }\n        \n        &:focus {\n          outline: none !important;\n          border-color: var(--c-primary) !important;\n          box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;\n        }\n      }\n    }\n  }\n\n  // RIGHT SECTION: Notifications + Messages + Theme Toggle + Profile - PERFECT ALIGNMENT\n  .header .nav-right {\n    display: flex !important;\n    align-items: center !important;\n    flex: 0 0 auto !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    float: none !important;\n    flex-wrap: nowrap !important;\n    gap: 4px !important; // Consistent spacing\n    justify-content: flex-end !important; // Push to right edge\n    height: 60px !important; // Match header height exactly\n    \n    > li {\n      display: flex !important;\n      align-items: center !important;\n      justify-content: center !important;\n      margin: 0 !important;\n      padding: 0 !important;\n      float: none !important;\n      flex: 0 0 auto !important;\n      position: relative !important;\n      height: 60px !important; // Force exact height for all items\n      min-height: 60px !important; // Ensure minimum height\n      \n      > a {\n        padding: 0 !important; // NO padding for perfect alignment\n        margin: 0 !important;\n        width: 44px !important; // Fixed width for all nav items\n        height: 44px !important; // Fixed height for all nav items\n        line-height: 1 !important;\n        display: flex !important;\n        align-items: center !important; // Perfect vertical centering\n        justify-content: center !important; // Perfect horizontal centering\n        position: relative !important;\n        border-radius: 50% !important; // Circular touch targets\n        background: transparent !important;\n        transition: all 0.2s ease !important; // Smooth transitions\n        \n        i {\n          font-size: 20px !important; // Consistent icon size for all nav items\n          margin: 0 !important;\n          display: block !important;\n          line-height: 1 !important;\n          text-align: center !important;\n        }\n        \n        // Hide text content, keep only icons\n        span:not(.counter) {\n          display: none !important;\n        }\n        \n        // Hide user avatar text\n        .peer:last-child {\n          display: none !important;\n        }\n        \n        // Hover state - subtle and theme-consistent\n        &:hover {\n          background: var(--c-grey-100) !important;\n          transform: scale(1.05) !important;\n          transition: all 0.2s ease !important;\n        }\n      }\n      \n      // User dropdown - special styling for avatar\n      &:last-child > a {\n        .peer {\n          &:first-child {\n            margin-right: 0 !important;\n            display: flex !important;\n            align-items: center !important;\n            justify-content: center !important;\n          }\n          \n          img {\n            width: 36px !important;\n            height: 36px !important;\n            max-width: 36px !important;\n            max-height: 36px !important;\n            border-radius: 50% !important;\n            object-fit: cover !important;\n          }\n        }\n      }\n    }\n    \n    // NOTIFICATION COUNTERS - CORRECTLY ANCHORED\n    > li {\n      position: relative !important; // This is the anchor\n\n      .counter {\n        position: absolute !important;\n        top: 10px !important;\n        right: 10px !important;\n        z-index: 10 !important;\n        \n        // The design of the counter itself is inherited\n      }\n    }\n    \n    // Theme toggle - perfectly aligned with other nav icons\n    .theme-toggle {\n      padding: 0 !important;\n      display: flex !important;\n      align-items: center !important;\n      justify-content: center !important;\n      height: 60px !important; // Match header height exactly\n      min-height: 60px !important; // Force exact height\n      width: 44px !important; // Same width as other nav items\n      \n      .form-check {\n        margin: 0 !important;\n        padding: 0 !important;\n        align-items: center !important;\n        justify-content: center !important;\n        display: flex !important;\n        height: 44px !important; // Same height as other nav items\n        width: 44px !important; // Same width as other nav items\n        border-radius: 50% !important; // Match other nav items\n        position: relative !important;\n        \n        .form-check-label {\n          display: none !important; // Hide labels on mobile for consistency\n        }\n        \n        .form-check-input {\n          width: 28px !important; // Smaller switch to fit in circular area\n          height: 16px !important; // Smaller switch to fit in circular area  \n          margin: 0 !important; // No margin for perfect centering\n          flex-shrink: 0 !important;\n          border-radius: 8px !important; // Proportional border radius\n          border-width: 1px !important; // Standard border\n          position: absolute !important;\n          top: 50% !important;\n          left: 50% !important;\n          transform: translate(-50%, -50%) !important; // Perfect centering\n        }\n        \n        // Hover state to match other nav items\n        &:hover {\n          background: var(--c-grey-100) !important;\n          transform: scale(1.05) !important;\n          transition: all 0.2s ease !important;\n        }\n      }\n    }\n  }\n\n  // Full-screen mobile dropdowns\n  .header .nav-right .dropdown-menu {\n    position: fixed !important;\n    top: 60px !important;\n    left: 0 !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    width: 100vw !important;\n    height: calc(100vh - 60px) !important;\n    max-width: none !important;\n    min-width: auto !important;\n    transform: none !important;\n    border-radius: 0 !important;\n    z-index: 9999 !important;\n    overflow-y: auto !important;\n    border: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    \n    // Mobile close button\n    &::before {\n      content: \"✕ Close\" !important;\n      position: sticky !important;\n      top: 0 !important;\n      display: block !important;\n      background: var(--c-primary) !important;\n      color: white !important;\n      text-align: center !important;\n      padding: 15px !important;\n      cursor: pointer !important;\n      font-weight: bold !important;\n      z-index: 10000 !important;\n      font-size: 16px !important;\n    }\n    \n    // UNIFIED EMAIL/NOTIFICATION MOBILE LAYOUT\n    .peers {\n      padding: 15px 20px !important;\n      flex-wrap: wrap !important;\n      align-items: flex-start !important;\n      \n      .peer {\n        max-width: 100% !important;\n        \n        img {\n          width: 40px !important;\n          height: 40px !important;\n          margin-right: 12px !important;\n          flex-shrink: 0 !important;\n        }\n        \n        &.peer-greed {\n          flex: 1 !important;\n          min-width: 0 !important;\n          \n          // NOTIFICATIONS STYLE - Direct content (span > fw-500 + c-grey-600, then p > small)\n          > span {\n            display: block !important;\n            margin-bottom: 4px !important;\n            \n            .fw-500 {\n              font-size: 14px !important;\n              font-weight: 600 !important;\n              margin: 0 !important;\n              color: var(--c-text-base) !important;\n              display: inline !important;\n            }\n            \n            .c-grey-600 {\n              font-size: 13px !important;\n              color: var(--c-text-muted) !important;\n              line-height: 1.4 !important;\n              display: inline !important;\n            }\n          }\n          \n          > p {\n            margin: 0 !important;\n            \n            small {\n              font-size: 12px !important;\n              color: var(--c-text-muted) !important;\n            }\n          }\n          \n          // EMAILS STYLE - Match notifications exactly \n          > div {\n            // Completely restructure emails to match notification layout\n            display: block !important;\n            \n            .peers {\n              display: inline !important; // Make name and action on same line\n              margin: 0 !important;\n              \n              .peer {\n                &:first-child {\n                  // Name section\n                  p {\n                    font-size: 14px !important;\n                    font-weight: 600 !important;\n                    margin: 0 !important;\n                    color: var(--c-text-base) !important;\n                    display: inline !important;\n                  }\n                  \n                  // Add action text after name\n                  &::after {\n                    content: \" sent you a message\" !important;\n                    font-size: 13px !important;\n                    color: var(--c-text-muted) !important;\n                    font-weight: normal !important;\n                  }\n                }\n                \n                &:last-child {\n                  // Move timestamp to its own line below (like notifications)\n                  display: block !important;\n                  margin-top: 2px !important;\n                  \n                  small {\n                    font-size: 12px !important;\n                    color: var(--c-text-muted) !important;\n                    display: block !important;\n                  }\n                }\n              }\n            }\n            \n            // Hide the email preview text completely to match notifications\n            > .c-grey-600,\n            .c-grey-600.fsz-sm {\n              display: none !important;\n            }\n          }\n        }\n      }\n    }\n    \n    // Header items in dropdown\n    .pX-20 {\n      padding-left: 20px !important;\n      padding-right: 20px !important;\n      \n      .fw-600 {\n        font-size: 16px !important;\n        font-weight: 600 !important;\n      }\n    }\n    \n    // Footer links in dropdown\n    .ta-c {\n      padding: 15px 20px !important;\n      \n      a {\n        font-size: 14px !important;\n        font-weight: 500 !important;\n      }\n    }\n  }\n}\n\n// Extra small screens - refined adjustments\n@media screen and (max-width: 479px) {\n  .header .header-container {\n    padding: 8px 5px !important; // Even less padding for tiny screens\n    gap: 8px !important;\n  }\n  \n  .header .nav-left {\n    max-width: 60% !important;\n    gap: 2px !important; // Even tighter spacing\n    \n    &::before {\n      width: 28px !important;\n      height: 28px !important;\n      font-size: 16px !important;\n      margin-right: 4px !important;\n    }\n    \n    > li > a {\n      padding: 8px 4px !important;\n      \n      i {\n        font-size: 18px !important;\n      }\n    }\n  }\n  \n  .header .nav-right {\n    gap: 1px !important; // Minimal spacing\n    \n    > li > a {\n      padding: 8px 4px !important;\n      \n      i {\n        font-size: 18px !important; // Slightly smaller for tiny screens\n      }\n    }\n    \n    .theme-toggle .form-check-input {\n      width: 28px !important;\n      height: 16px !important;\n    }\n  }\n  \n  // Full-width search bar on tiny screens\n  .header .nav-left .search-input {\n    padding: 12px 15px !important;\n    \n    input {\n      padding: 10px 12px !important;\n      font-size: 16px !important; // Prevent zoom on iOS\n    }\n  }\n}\n\n// =============================================================================\n// FOOTER OVERLAP FIXES - MAINTAINING PREVIOUS FIXES\n// =============================================================================\n\n// Global layout fixes\nhtml, body {\n  height: 100% !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  overflow-x: hidden !important;\n}\n\n// Page container - force flexbox layout\n.page-container {\n  display: flex !important;\n  flex-direction: column !important;\n  min-height: 100vh !important;\n  margin: 0 !important;\n  padding-top: 60px !important;\n}\n\n// Main content - flexible\n.main-content {\n  flex: 1 0 auto !important;\n  padding: 20px 10px 40px !important;\n  margin: 0 !important;\n  min-height: 0 !important;\n  overflow-x: hidden !important;\n}\n\n// Footer - fixed to bottom\nfooter {\n  flex: 0 0 auto !important;\n  margin-top: auto !important;\n  padding: 15px 10px !important;\n  background: var(--c-bkg-card) !important;\n  border-top: 1px solid var(--c-border) !important;\n  text-align: center !important;\n  font-size: 11px !important;\n  line-height: 1.3 !important;\n  z-index: 10 !important;\n  position: relative !important;\n  width: 100% !important;\n  clear: both !important;\n  \n  // CRITICAL: Override lh-0 class that causes overlap\n  &.lh-0 {\n    line-height: 1.3 !important; // Force proper line height\n  }\n}\n\n@media screen and (max-width: 767px) {\n  .page-container {\n    padding-left: 0 !important;\n    min-height: 100vh !important; // Ensure full height\n    position: relative !important; // Ensure positioning context\n  }\n  \n  .main-content {\n    padding: 15px 8px 60px !important; // Increased bottom padding for footer space\n    margin-bottom: 0 !important;\n    width: 100% !important;\n    box-sizing: border-box !important;\n  }\n  \n      footer {\n      position: relative !important; // Ensure footer stays in flow\n      width: 100% !important;\n      padding: 15px 10px !important; // Increased padding for better spacing\n      font-size: 11px !important; // Slightly larger for readability\n      line-height: 1.4 !important; // Better line height for mobile\n      background: var(--c-bkg-card) !important;\n      border-top: 1px solid var(--c-border) !important;\n      margin-top: auto !important;\n      box-sizing: border-box !important;\n      \n      // CRITICAL MOBILE FIXES: Override all conflicting utility classes\n      &.lh-0 {\n        line-height: 1.4 !important; // Override line-height: 0 that causes overlap\n      }\n      \n      &.p-30 {\n        padding: 15px 10px !important; // Override desktop padding\n      }\n      \n      &.fsz-sm {\n        font-size: 11px !important; // Ensure readable font size on mobile\n      }\n    \n    span {\n      display: block !important; // Force block for better wrapping\n      word-wrap: break-word !important;\n      max-width: 100% !important;\n      text-align: center !important;\n      line-height: 1.4 !important;\n      \n      // Handle long text better\n      hyphens: auto !important;\n      word-break: break-word !important;\n      \n      a {\n        color: var(--c-primary) !important;\n        text-decoration: none !important;\n        display: inline !important; // Keep link inline within text\n        \n        &:hover {\n          text-decoration: underline !important;\n        }\n      }\n    }\n  }\n}\n\n@media screen and (max-width: 479px) {\n  .main-content {\n    padding: 10px 8px 50px !important; // Adequate bottom space for footer\n  }\n  \n      footer {\n      padding: 12px 8px !important;\n      font-size: 10px !important;\n      line-height: 1.5 !important; // Better readability on small screens\n      \n      // Override utility classes for small screens\n      &.lh-0 {\n        line-height: 1.5 !important; // Override line-height: 0\n      }\n      \n      &.p-30 {\n        padding: 12px 8px !important; // Override desktop padding\n      }\n      \n      &.fsz-sm {\n        font-size: 10px !important; // Ensure readable font size\n      }\n      \n      span {\n        display: block !important;\n        margin: 0 !important; // Remove extra margins\n        padding: 0 !important;\n        text-align: center !important;\n        \n        // Split long copyright text into multiple lines if needed\n        word-spacing: normal !important;\n        letter-spacing: normal !important;\n        \n        // Ensure links are readable\n        a {\n          display: inline !important;\n          white-space: nowrap !important; // Keep \"Colorlib\" as one word\n        }\n      }\n    }\n}\n\n// Additional mobile footer fixes\n@media screen and (max-width: 360px) {\n  footer {\n    font-size: 9px !important;\n    padding: 10px 5px !important;\n    \n    // Override utility classes for extra small screens  \n    &.lh-0 {\n      line-height: 1.6 !important; // Even better line height for tiny screens\n    }\n    \n    &.p-30 {\n      padding: 10px 5px !important; // Override desktop padding\n    }\n    \n    &.fsz-sm {\n      font-size: 9px !important; // Readable font size for tiny screens\n    }\n    \n    span {\n      line-height: 1.6 !important; // Ensure good readability\n      \n      // For very small screens, ensure text doesn't overlap\n      word-break: break-word !important;\n      overflow-wrap: break-word !important;\n      \n      // Ensure links are readable\n      a {\n        font-weight: bold !important;\n        color: var(--c-primary) !important;\n      }\n    }\n  }\n}\n\n// =============================================================================\n// UTILITY CLASSES FOR MOBILE\n// =============================================================================\n\n// Prevent body scroll when mobile menus are open\nbody.mobile-menu-open {\n  overflow: hidden !important;\n  position: fixed !important;\n  width: 100% !important;\n}\n\n// Emergency fixes for any remaining issues\n@media screen and (max-width: 767px) {\n  // Ensure dropdowns don't break layout\n  .dropdown-menu.show {\n    position: fixed !important;\n  }\n  \n  // Prevent content overflow\n  .row {\n    margin-left: 0 !important;\n    margin-right: 0 !important;\n  }\n  \n  [class*=\"col-\"] {\n    padding-left: 5px !important;\n    padding-right: 5px !important;\n  }\n  \n  // Hide on mobile utility\n  .d-none-mobile {\n    display: none !important;\n  }\n  \n  // Force no horizontal scroll\n  * {\n    max-width: 100% !important;\n    box-sizing: border-box !important;\n  }\n} "
  },
  {
    "path": "src/assets/styles/utils/theme.css",
    "content": ":root {\n  /* Modern light theme - soft blue-gray tones */\n  --c-bkg-body: #f0f4f8;\n  --c-bkg-card: #ffffff;\n  --c-bkg-sidebar: #ffffff;\n  --c-bkg-hover: #f8fafc;\n\n  --c-text-base: #1e293b;\n  --c-text-muted: #64748b;\n  --c-text-light: #94a3b8;\n\n  /* Icon colors - modern muted tones */\n  --c-icon: #64748b;\n  --c-icon-hover: #6366f1;\n  --c-icon-active: #4f46e5;\n  --c-icon-muted: #94a3b8;\n\n  /* Modern border with subtle blue tint */\n  --c-border: #e2e8f0;\n  --c-border-light: #f1f5f9;\n\n  /* Refined brand colors - modern indigo */\n  --c-primary: #6366f1;\n  --c-primary-light: #818cf8;\n  --c-primary-dark: #4f46e5;\n  --c-success: #10b981;\n  --c-warning: #f59e0b;\n  --c-danger: #ef4444;\n  --c-info: #0ea5e9;\n\n  /* Modern shadows */\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);\n  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);\n\n  /* Border radius */\n  --radius-sm: 6px;\n  --radius-md: 10px;\n  --radius-lg: 14px;\n  --radius-xl: 20px;\n\n  /* Vector map colors */\n  --vmap-bg-color: #ffffff;\n  --vmap-border-color: #ffffff;\n  --vmap-region-color: #e4ecef;\n  --vmap-marker-fill: #ffffff;\n  --vmap-marker-stroke: #000000;\n  --vmap-hover-color: #ffffff;\n  --vmap-selected-color: #c9dfaf;\n  --vmap-scale-start: #03a9f3;\n  --vmap-scale-end: #02a7f1;\n  --vmap-scale-light: #b6d6ff;\n  --vmap-scale-dark: #005ace;\n\n  /* Skycons */\n  --skycons-color: #ff6849;\n\n  /* Sparkline colors - more vibrant */\n  --sparkline-success: #10b981;\n  --sparkline-purple: #8b5cf6;\n  --sparkline-info: #0ea5e9;\n  --sparkline-danger: #ef4444;\n  --sparkline-light: #a5b4fc;\n\n  /* Loader */\n  --loader-bg: #ffffff;\n  --spinner-bg: #333333;\n\n  /* Google Maps */\n  --gmap-landscape-hue: #FFBB00;\n  --gmap-highway-hue: #FFC200;\n  --gmap-road-hue: #FF0300;\n  --gmap-water-hue: #0078FF;\n  --gmap-poi-hue: #00FF6A;\n}\n\n[data-theme=\"dark\"] {\n  /* Modern dark theme - refined dark slate */\n  --c-bkg-body: #0f172a;\n  --c-bkg-card: #1e293b;\n  --c-bkg-sidebar: #1e293b;\n  --c-bkg-hover: #334155;\n\n  --c-text-base: #f1f5f9;\n  --c-text-muted: #94a3b8;\n  --c-text-light: #64748b;\n\n  /* Icon colors - dark theme */\n  --c-icon: #94a3b8;\n  --c-icon-hover: #a5b4fc;\n  --c-icon-active: #818cf8;\n  --c-icon-muted: #64748b;\n\n  --c-border: #334155;\n  --c-border-light: #475569;\n\n  /* Same primary for consistency, adjusted for dark */\n  --c-primary: #818cf8;\n  --c-primary-light: #a5b4fc;\n  --c-primary-dark: #6366f1;\n  --c-success: #34d399;\n  --c-warning: #fbbf24;\n  --c-danger: #f87171;\n  --c-info: #38bdf8;\n\n  /* Dark mode shadows */\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);\n  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);\n\n  /* Vector map colors - dark theme */\n  --vmap-bg-color: #1e293b;\n  --vmap-border-color: #334155;\n  --vmap-region-color: #334155;\n  --vmap-marker-fill: #f1f5f9;\n  --vmap-marker-stroke: #94a3b8;\n  --vmap-hover-color: #0f172a;\n  --vmap-selected-color: #475569;\n  --vmap-scale-start: #6366f1;\n  --vmap-scale-end: #4f46e5;\n  --vmap-scale-light: #4338ca;\n  --vmap-scale-dark: #a5b4fc;\n\n  /* Skycons - dark theme */\n  --skycons-color: #fb923c;\n\n  /* Sparkline colors - dark theme */\n  --sparkline-success: #34d399;\n  --sparkline-purple: #a78bfa;\n  --sparkline-info: #38bdf8;\n  --sparkline-danger: #f87171;\n  --sparkline-light: #a5b4fc;\n\n  /* Loader - dark theme */\n  --loader-bg: #0f172a;\n  --spinner-bg: #f1f5f9;\n\n  /* Google Maps - dark theme */\n  --gmap-landscape-hue: #D4AC0D;\n  --gmap-highway-hue: #E6AC00;\n  --gmap-road-hue: #CC2900;\n  --gmap-water-hue: #1B4F72;\n  --gmap-poi-hue: #148F77;\n}\n"
  },
  {
    "path": "src/assets/styles/vendor/datepicker.scss",
    "content": "@use 'sass:color';\n@use '../spec/settings/baseColors' as *;\n@use '../spec/settings/breakpoints' as *;\n@use '../spec/tools/mixins/mediaQueriesRanges' as *;\n\n.datepicker {\n  border-radius: 0;\n  padding: 25px;\n  box-shadow: none;\n  border: 1px solid $border-color;\n\n  table {\n    tr {\n      th,\n      td {\n        border-radius: 0;\n        width: 40px;\n        height: 35px;\n      }\n\n      td {\n        transition: all 0.2s ease-in-out;\n\n        span {\n          border-radius: 0;\n        }\n      }\n    }\n  }\n}\n\n.datepicker table tr td span.active:active,\n.datepicker table tr td span.active:hover:active,\n.datepicker table tr td span.active.disabled:active,\n.datepicker table tr td span.active.disabled:hover:active,\n.datepicker table tr td span.active.active,\n.datepicker table tr td span.active:hover.active,\n.datepicker table tr td span.active.disabled.active,\n.datepicker table tr td span.active.disabled:hover.active,\n.datepicker table tr td span.active.active:hover,\n.datepicker table tr td span.active:hover.active:hover,\n.datepicker table tr td.active:active,\n.datepicker table tr td.active.highlighted:active,\n.datepicker table tr td.active.active,\n.datepicker table tr td.active.highlighted.active,\n.datepicker table tr td.active:active:hover,\n.datepicker table tr td.active.highlighted:active:hover,\n.datepicker table tr td.active.active:hover,\n.datepicker table tr td.active.highlighted.active:hover,\n.datepicker table tr td.active:active:focus,\n.datepicker table tr td.active.highlighted:active:focus,\n.datepicker table tr td.active.active:focus,\n.datepicker table tr td.active.highlighted.active:focus,\n.datepicker table tr td.active:active.focus,\n.datepicker table tr td.active.highlighted:active.focus,\n.datepicker table tr td.active.active.focus,\n.datepicker table tr td.active.highlighted.active.focus {\n  color: $default-white;\n  background-color: $default-primary;\n  border-color: transparent;\n}\n\n.datepicker table tr td span:hover,\n.datepicker table tr td span.focused {\n  background: $default-primary;\n  color: #fff;\n}\n\n.datepicker table tr td.day:hover,\n.datepicker table tr td.focused {\n  background: $default-primary;\n  color: #fff;\n  cursor: pointer;\n}\n\n.datepicker .datepicker-switch:hover,\n.datepicker .prev:hover,\n.datepicker .next:hover,\n.datepicker tfoot tr th:hover {\n  background: $default-primary;\n  color: #fff;\n  cursor: pointer;\n}\n\n.datepicker-inline {\n  width: 330px;\n}\n\n.daterangepicker {\n  border-radius: 0;\n  padding: 30px;\n  box-shadow: none;\n  border: 1px solid $border-color;\n\n  .input-mini {\n    border-radius: 0;\n    margin-bottom: 20px;\n    height: 40px;\n    padding: 0 6px 0 35px;\n\n    &.active {\n      border-radius: 0;\n      border-color: color.adjust($default-info, $lightness: 20%);\n    }\n  }\n\n  .daterangepicker_input {\n    i {\n      position: absolute;\n      left: 10px;\n      top: 13px;\n    }\n  }\n\n  td,\n  th {\n    border-radius: 0;\n    width: 40px;\n    height: 35px;\n\n    &.available{\n      &:hover{\n        background: $default-primary;\n        color: #fff;\n      }\n    }\n  }\n\n  td {\n    &.in-range {\n      background-color: transparent;\n      color: $default-primary;\n    }\n\n    &.active {\n      background-color: $default-primary;\n      border-color: transparent;\n      color: #fff;\n\n      &:hover {\n        background-color: $default-primary;\n        border-color: transparent;\n        color: #fff;\n      }\n    }\n\n    &.start-date {\n      border-radius: 0;\n\n      &.end-date {\n        border-radius: 0;\n      }\n    }\n\n    &.end-date {\n      border-radius: 0;\n    }\n  }\n\n  select {\n    &.hourselect,\n    &.minuteselect,\n    &.secondselect,\n    &.ampmselect {\n      border: 1px solid $border-color;\n      min-height: 30px;\n    }\n  }\n\n  .calendar-time {\n    i {\n      top: 8px;\n      left: 35px;\n    }\n  }\n\n  @include from($breakpoint-sm) {\n    .calendar {\n      margin-right: 20px !important;\n    }\n  }\n}\n\n"
  },
  {
    "path": "src/assets/styles/vendor/font-awesome.css",
    "content": "/*!\n *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome\n *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)\n */\n/* FONT PATH\n * -------------------------- */\n@font-face {\n  font-family: 'FontAwesome';\n  src: url('../static/fonts/icons/fontawesome/fontawesome-webfont.eot?v=4.7.0');\n  src: url('../static/fonts/icons/fontawesome/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../static/fonts/icons/fontawesome/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../static/fonts/icons/fontawesome/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../static/fonts/icons/fontawesome/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../static/fonts/icons/fontawesome/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');\n  font-weight: normal;\n  font-style: normal;\n}\n.fa {\n  display: inline-block;\n  font: normal normal normal 14px/1 FontAwesome;\n  font-size: inherit;\n  text-rendering: auto;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n/* makes the font 33% larger relative to the icon container */\n.fa-lg {\n  font-size: 1.33333333em;\n  line-height: 0.75em;\n  vertical-align: -15%;\n}\n.fa-2x {\n  font-size: 2em;\n}\n.fa-3x {\n  font-size: 3em;\n}\n.fa-4x {\n  font-size: 4em;\n}\n.fa-5x {\n  font-size: 5em;\n}\n.fa-fw {\n  width: 1.28571429em;\n  text-align: center;\n}\n.fa-ul {\n  padding-left: 0;\n  margin-left: 2.14285714em;\n  list-style-type: none;\n}\n.fa-ul > li {\n  position: relative;\n}\n.fa-li {\n  position: absolute;\n  left: -2.14285714em;\n  width: 2.14285714em;\n  top: 0.14285714em;\n  text-align: center;\n}\n.fa-li.fa-lg {\n  left: -1.85714286em;\n}\n.fa-border {\n  padding: .2em .25em .15em;\n  border: solid 0.08em #eeeeee;\n  border-radius: .1em;\n}\n.fa-pull-left {\n  float: left;\n}\n.fa-pull-right {\n  float: right;\n}\n.fa.fa-pull-left {\n  margin-right: .3em;\n}\n.fa.fa-pull-right {\n  margin-left: .3em;\n}\n/* Deprecated as of 4.4.0 */\n.pull-right {\n  float: right;\n}\n.pull-left {\n  float: left;\n}\n.fa.pull-left {\n  margin-right: .3em;\n}\n.fa.pull-right {\n  margin-left: .3em;\n}\n.fa-spin {\n  -webkit-animation: fa-spin 2s infinite linear;\n  animation: fa-spin 2s infinite linear;\n}\n.fa-pulse {\n  -webkit-animation: fa-spin 1s infinite steps(8);\n  animation: fa-spin 1s infinite steps(8);\n}\n@-webkit-keyframes fa-spin {\n  0% {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  100% {\n    -webkit-transform: rotate(359deg);\n    transform: rotate(359deg);\n  }\n}\n@keyframes fa-spin {\n  0% {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  100% {\n    -webkit-transform: rotate(359deg);\n    transform: rotate(359deg);\n  }\n}\n.fa-rotate-90 {\n  -ms-filter: \"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)\";\n  -webkit-transform: rotate(90deg);\n  -ms-transform: rotate(90deg);\n  transform: rotate(90deg);\n}\n.fa-rotate-180 {\n  -ms-filter: \"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)\";\n  -webkit-transform: rotate(180deg);\n  -ms-transform: rotate(180deg);\n  transform: rotate(180deg);\n}\n.fa-rotate-270 {\n  -ms-filter: \"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)\";\n  -webkit-transform: rotate(270deg);\n  -ms-transform: rotate(270deg);\n  transform: rotate(270deg);\n}\n.fa-flip-horizontal {\n  -ms-filter: \"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)\";\n  -webkit-transform: scale(-1, 1);\n  -ms-transform: scale(-1, 1);\n  transform: scale(-1, 1);\n}\n.fa-flip-vertical {\n  -ms-filter: \"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)\";\n  -webkit-transform: scale(1, -1);\n  -ms-transform: scale(1, -1);\n  transform: scale(1, -1);\n}\n:root .fa-rotate-90,\n:root .fa-rotate-180,\n:root .fa-rotate-270,\n:root .fa-flip-horizontal,\n:root .fa-flip-vertical {\n  filter: none;\n}\n.fa-stack {\n  position: relative;\n  display: inline-block;\n  width: 2em;\n  height: 2em;\n  line-height: 2em;\n  vertical-align: middle;\n}\n.fa-stack-1x,\n.fa-stack-2x {\n  position: absolute;\n  left: 0;\n  width: 100%;\n  text-align: center;\n}\n.fa-stack-1x {\n  line-height: inherit;\n}\n.fa-stack-2x {\n  font-size: 2em;\n}\n.fa-inverse {\n  color: #ffffff;\n}\n/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen\n   readers do not read off random characters that represent icons */\n.fa-glass:before {\n  content: \"\\f000\";\n}\n.fa-music:before {\n  content: \"\\f001\";\n}\n.fa-search:before {\n  content: \"\\f002\";\n}\n.fa-envelope-o:before {\n  content: \"\\f003\";\n}\n.fa-heart:before {\n  content: \"\\f004\";\n}\n.fa-star:before {\n  content: \"\\f005\";\n}\n.fa-star-o:before {\n  content: \"\\f006\";\n}\n.fa-user:before {\n  content: \"\\f007\";\n}\n.fa-film:before {\n  content: \"\\f008\";\n}\n.fa-th-large:before {\n  content: \"\\f009\";\n}\n.fa-th:before {\n  content: \"\\f00a\";\n}\n.fa-th-list:before {\n  content: \"\\f00b\";\n}\n.fa-check:before {\n  content: \"\\f00c\";\n}\n.fa-remove:before,\n.fa-close:before,\n.fa-times:before {\n  content: \"\\f00d\";\n}\n.fa-search-plus:before {\n  content: \"\\f00e\";\n}\n.fa-search-minus:before {\n  content: \"\\f010\";\n}\n.fa-power-off:before {\n  content: \"\\f011\";\n}\n.fa-signal:before {\n  content: \"\\f012\";\n}\n.fa-gear:before,\n.fa-cog:before {\n  content: \"\\f013\";\n}\n.fa-trash-o:before {\n  content: \"\\f014\";\n}\n.fa-home:before {\n  content: \"\\f015\";\n}\n.fa-file-o:before {\n  content: \"\\f016\";\n}\n.fa-clock-o:before {\n  content: \"\\f017\";\n}\n.fa-road:before {\n  content: \"\\f018\";\n}\n.fa-download:before {\n  content: \"\\f019\";\n}\n.fa-arrow-circle-o-down:before {\n  content: \"\\f01a\";\n}\n.fa-arrow-circle-o-up:before {\n  content: \"\\f01b\";\n}\n.fa-inbox:before {\n  content: \"\\f01c\";\n}\n.fa-play-circle-o:before {\n  content: \"\\f01d\";\n}\n.fa-rotate-right:before,\n.fa-repeat:before {\n  content: \"\\f01e\";\n}\n.fa-refresh:before {\n  content: \"\\f021\";\n}\n.fa-list-alt:before {\n  content: \"\\f022\";\n}\n.fa-lock:before {\n  content: \"\\f023\";\n}\n.fa-flag:before {\n  content: \"\\f024\";\n}\n.fa-headphones:before {\n  content: \"\\f025\";\n}\n.fa-volume-off:before {\n  content: \"\\f026\";\n}\n.fa-volume-down:before {\n  content: \"\\f027\";\n}\n.fa-volume-up:before {\n  content: \"\\f028\";\n}\n.fa-qrcode:before {\n  content: \"\\f029\";\n}\n.fa-barcode:before {\n  content: \"\\f02a\";\n}\n.fa-tag:before {\n  content: \"\\f02b\";\n}\n.fa-tags:before {\n  content: \"\\f02c\";\n}\n.fa-book:before {\n  content: \"\\f02d\";\n}\n.fa-bookmark:before {\n  content: \"\\f02e\";\n}\n.fa-print:before {\n  content: \"\\f02f\";\n}\n.fa-camera:before {\n  content: \"\\f030\";\n}\n.fa-font:before {\n  content: \"\\f031\";\n}\n.fa-bold:before {\n  content: \"\\f032\";\n}\n.fa-italic:before {\n  content: \"\\f033\";\n}\n.fa-text-height:before {\n  content: \"\\f034\";\n}\n.fa-text-width:before {\n  content: \"\\f035\";\n}\n.fa-align-left:before {\n  content: \"\\f036\";\n}\n.fa-align-center:before {\n  content: \"\\f037\";\n}\n.fa-align-right:before {\n  content: \"\\f038\";\n}\n.fa-align-justify:before {\n  content: \"\\f039\";\n}\n.fa-list:before {\n  content: \"\\f03a\";\n}\n.fa-dedent:before,\n.fa-outdent:before {\n  content: \"\\f03b\";\n}\n.fa-indent:before {\n  content: \"\\f03c\";\n}\n.fa-video-camera:before {\n  content: \"\\f03d\";\n}\n.fa-photo:before,\n.fa-image:before,\n.fa-picture-o:before {\n  content: \"\\f03e\";\n}\n.fa-pencil:before {\n  content: \"\\f040\";\n}\n.fa-map-marker:before {\n  content: \"\\f041\";\n}\n.fa-adjust:before {\n  content: \"\\f042\";\n}\n.fa-tint:before {\n  content: \"\\f043\";\n}\n.fa-edit:before,\n.fa-pencil-square-o:before {\n  content: \"\\f044\";\n}\n.fa-share-square-o:before {\n  content: \"\\f045\";\n}\n.fa-check-square-o:before {\n  content: \"\\f046\";\n}\n.fa-arrows:before {\n  content: \"\\f047\";\n}\n.fa-step-backward:before {\n  content: \"\\f048\";\n}\n.fa-fast-backward:before {\n  content: \"\\f049\";\n}\n.fa-backward:before {\n  content: \"\\f04a\";\n}\n.fa-play:before {\n  content: \"\\f04b\";\n}\n.fa-pause:before {\n  content: \"\\f04c\";\n}\n.fa-stop:before {\n  content: \"\\f04d\";\n}\n.fa-forward:before {\n  content: \"\\f04e\";\n}\n.fa-fast-forward:before {\n  content: \"\\f050\";\n}\n.fa-step-forward:before {\n  content: \"\\f051\";\n}\n.fa-eject:before {\n  content: \"\\f052\";\n}\n.fa-chevron-left:before {\n  content: \"\\f053\";\n}\n.fa-chevron-right:before {\n  content: \"\\f054\";\n}\n.fa-plus-circle:before {\n  content: \"\\f055\";\n}\n.fa-minus-circle:before {\n  content: \"\\f056\";\n}\n.fa-times-circle:before {\n  content: \"\\f057\";\n}\n.fa-check-circle:before {\n  content: \"\\f058\";\n}\n.fa-question-circle:before {\n  content: \"\\f059\";\n}\n.fa-info-circle:before {\n  content: \"\\f05a\";\n}\n.fa-crosshairs:before {\n  content: \"\\f05b\";\n}\n.fa-times-circle-o:before {\n  content: \"\\f05c\";\n}\n.fa-check-circle-o:before {\n  content: \"\\f05d\";\n}\n.fa-ban:before {\n  content: \"\\f05e\";\n}\n.fa-arrow-left:before {\n  content: \"\\f060\";\n}\n.fa-arrow-right:before {\n  content: \"\\f061\";\n}\n.fa-arrow-up:before {\n  content: \"\\f062\";\n}\n.fa-arrow-down:before {\n  content: \"\\f063\";\n}\n.fa-mail-forward:before,\n.fa-share:before {\n  content: \"\\f064\";\n}\n.fa-expand:before {\n  content: \"\\f065\";\n}\n.fa-compress:before {\n  content: \"\\f066\";\n}\n.fa-plus:before {\n  content: \"\\f067\";\n}\n.fa-minus:before {\n  content: \"\\f068\";\n}\n.fa-asterisk:before {\n  content: \"\\f069\";\n}\n.fa-exclamation-circle:before {\n  content: \"\\f06a\";\n}\n.fa-gift:before {\n  content: \"\\f06b\";\n}\n.fa-leaf:before {\n  content: \"\\f06c\";\n}\n.fa-fire:before {\n  content: \"\\f06d\";\n}\n.fa-eye:before {\n  content: \"\\f06e\";\n}\n.fa-eye-slash:before {\n  content: \"\\f070\";\n}\n.fa-warning:before,\n.fa-exclamation-triangle:before {\n  content: \"\\f071\";\n}\n.fa-plane:before {\n  content: \"\\f072\";\n}\n.fa-calendar:before {\n  content: \"\\f073\";\n}\n.fa-random:before {\n  content: \"\\f074\";\n}\n.fa-comment:before {\n  content: \"\\f075\";\n}\n.fa-magnet:before {\n  content: \"\\f076\";\n}\n.fa-chevron-up:before {\n  content: \"\\f077\";\n}\n.fa-chevron-down:before {\n  content: \"\\f078\";\n}\n.fa-retweet:before {\n  content: \"\\f079\";\n}\n.fa-shopping-cart:before {\n  content: \"\\f07a\";\n}\n.fa-folder:before {\n  content: \"\\f07b\";\n}\n.fa-folder-open:before {\n  content: \"\\f07c\";\n}\n.fa-arrows-v:before {\n  content: \"\\f07d\";\n}\n.fa-arrows-h:before {\n  content: \"\\f07e\";\n}\n.fa-bar-chart-o:before,\n.fa-bar-chart:before {\n  content: \"\\f080\";\n}\n.fa-twitter-square:before {\n  content: \"\\f081\";\n}\n.fa-facebook-square:before {\n  content: \"\\f082\";\n}\n.fa-camera-retro:before {\n  content: \"\\f083\";\n}\n.fa-key:before {\n  content: \"\\f084\";\n}\n.fa-gears:before,\n.fa-cogs:before {\n  content: \"\\f085\";\n}\n.fa-comments:before {\n  content: \"\\f086\";\n}\n.fa-thumbs-o-up:before {\n  content: \"\\f087\";\n}\n.fa-thumbs-o-down:before {\n  content: \"\\f088\";\n}\n.fa-star-half:before {\n  content: \"\\f089\";\n}\n.fa-heart-o:before {\n  content: \"\\f08a\";\n}\n.fa-sign-out:before {\n  content: \"\\f08b\";\n}\n.fa-linkedin-square:before {\n  content: \"\\f08c\";\n}\n.fa-thumb-tack:before {\n  content: \"\\f08d\";\n}\n.fa-external-link:before {\n  content: \"\\f08e\";\n}\n.fa-sign-in:before {\n  content: \"\\f090\";\n}\n.fa-trophy:before {\n  content: \"\\f091\";\n}\n.fa-github-square:before {\n  content: \"\\f092\";\n}\n.fa-upload:before {\n  content: \"\\f093\";\n}\n.fa-lemon-o:before {\n  content: \"\\f094\";\n}\n.fa-phone:before {\n  content: \"\\f095\";\n}\n.fa-square-o:before {\n  content: \"\\f096\";\n}\n.fa-bookmark-o:before {\n  content: \"\\f097\";\n}\n.fa-phone-square:before {\n  content: \"\\f098\";\n}\n.fa-twitter:before {\n  content: \"\\f099\";\n}\n.fa-facebook-f:before,\n.fa-facebook:before {\n  content: \"\\f09a\";\n}\n.fa-github:before {\n  content: \"\\f09b\";\n}\n.fa-unlock:before {\n  content: \"\\f09c\";\n}\n.fa-credit-card:before {\n  content: \"\\f09d\";\n}\n.fa-feed:before,\n.fa-rss:before {\n  content: \"\\f09e\";\n}\n.fa-hdd-o:before {\n  content: \"\\f0a0\";\n}\n.fa-bullhorn:before {\n  content: \"\\f0a1\";\n}\n.fa-bell:before {\n  content: \"\\f0f3\";\n}\n.fa-certificate:before {\n  content: \"\\f0a3\";\n}\n.fa-hand-o-right:before {\n  content: \"\\f0a4\";\n}\n.fa-hand-o-left:before {\n  content: \"\\f0a5\";\n}\n.fa-hand-o-up:before {\n  content: \"\\f0a6\";\n}\n.fa-hand-o-down:before {\n  content: \"\\f0a7\";\n}\n.fa-arrow-circle-left:before {\n  content: \"\\f0a8\";\n}\n.fa-arrow-circle-right:before {\n  content: \"\\f0a9\";\n}\n.fa-arrow-circle-up:before {\n  content: \"\\f0aa\";\n}\n.fa-arrow-circle-down:before {\n  content: \"\\f0ab\";\n}\n.fa-globe:before {\n  content: \"\\f0ac\";\n}\n.fa-wrench:before {\n  content: \"\\f0ad\";\n}\n.fa-tasks:before {\n  content: \"\\f0ae\";\n}\n.fa-filter:before {\n  content: \"\\f0b0\";\n}\n.fa-briefcase:before {\n  content: \"\\f0b1\";\n}\n.fa-arrows-alt:before {\n  content: \"\\f0b2\";\n}\n.fa-group:before,\n.fa-users:before {\n  content: \"\\f0c0\";\n}\n.fa-chain:before,\n.fa-link:before {\n  content: \"\\f0c1\";\n}\n.fa-cloud:before {\n  content: \"\\f0c2\";\n}\n.fa-flask:before {\n  content: \"\\f0c3\";\n}\n.fa-cut:before,\n.fa-scissors:before {\n  content: \"\\f0c4\";\n}\n.fa-copy:before,\n.fa-files-o:before {\n  content: \"\\f0c5\";\n}\n.fa-paperclip:before {\n  content: \"\\f0c6\";\n}\n.fa-save:before,\n.fa-floppy-o:before {\n  content: \"\\f0c7\";\n}\n.fa-square:before {\n  content: \"\\f0c8\";\n}\n.fa-navicon:before,\n.fa-reorder:before,\n.fa-bars:before {\n  content: \"\\f0c9\";\n}\n.fa-list-ul:before {\n  content: \"\\f0ca\";\n}\n.fa-list-ol:before {\n  content: \"\\f0cb\";\n}\n.fa-strikethrough:before {\n  content: \"\\f0cc\";\n}\n.fa-underline:before {\n  content: \"\\f0cd\";\n}\n.fa-table:before {\n  content: \"\\f0ce\";\n}\n.fa-magic:before {\n  content: \"\\f0d0\";\n}\n.fa-truck:before {\n  content: \"\\f0d1\";\n}\n.fa-pinterest:before {\n  content: \"\\f0d2\";\n}\n.fa-pinterest-square:before {\n  content: \"\\f0d3\";\n}\n.fa-google-plus-square:before {\n  content: \"\\f0d4\";\n}\n.fa-google-plus:before {\n  content: \"\\f0d5\";\n}\n.fa-money:before {\n  content: \"\\f0d6\";\n}\n.fa-caret-down:before {\n  content: \"\\f0d7\";\n}\n.fa-caret-up:before {\n  content: \"\\f0d8\";\n}\n.fa-caret-left:before {\n  content: \"\\f0d9\";\n}\n.fa-caret-right:before {\n  content: \"\\f0da\";\n}\n.fa-columns:before {\n  content: \"\\f0db\";\n}\n.fa-unsorted:before,\n.fa-sort:before {\n  content: \"\\f0dc\";\n}\n.fa-sort-down:before,\n.fa-sort-desc:before {\n  content: \"\\f0dd\";\n}\n.fa-sort-up:before,\n.fa-sort-asc:before {\n  content: \"\\f0de\";\n}\n.fa-envelope:before {\n  content: \"\\f0e0\";\n}\n.fa-linkedin:before {\n  content: \"\\f0e1\";\n}\n.fa-rotate-left:before,\n.fa-undo:before {\n  content: \"\\f0e2\";\n}\n.fa-legal:before,\n.fa-gavel:before {\n  content: \"\\f0e3\";\n}\n.fa-dashboard:before,\n.fa-tachometer:before {\n  content: \"\\f0e4\";\n}\n.fa-comment-o:before {\n  content: \"\\f0e5\";\n}\n.fa-comments-o:before {\n  content: \"\\f0e6\";\n}\n.fa-flash:before,\n.fa-bolt:before {\n  content: \"\\f0e7\";\n}\n.fa-sitemap:before {\n  content: \"\\f0e8\";\n}\n.fa-umbrella:before {\n  content: \"\\f0e9\";\n}\n.fa-paste:before,\n.fa-clipboard:before {\n  content: \"\\f0ea\";\n}\n.fa-lightbulb-o:before {\n  content: \"\\f0eb\";\n}\n.fa-exchange:before {\n  content: \"\\f0ec\";\n}\n.fa-cloud-download:before {\n  content: \"\\f0ed\";\n}\n.fa-cloud-upload:before {\n  content: \"\\f0ee\";\n}\n.fa-user-md:before {\n  content: \"\\f0f0\";\n}\n.fa-stethoscope:before {\n  content: \"\\f0f1\";\n}\n.fa-suitcase:before {\n  content: \"\\f0f2\";\n}\n.fa-bell-o:before {\n  content: \"\\f0a2\";\n}\n.fa-coffee:before {\n  content: \"\\f0f4\";\n}\n.fa-cutlery:before {\n  content: \"\\f0f5\";\n}\n.fa-file-text-o:before {\n  content: \"\\f0f6\";\n}\n.fa-building-o:before {\n  content: \"\\f0f7\";\n}\n.fa-hospital-o:before {\n  content: \"\\f0f8\";\n}\n.fa-ambulance:before {\n  content: \"\\f0f9\";\n}\n.fa-medkit:before {\n  content: \"\\f0fa\";\n}\n.fa-fighter-jet:before {\n  content: \"\\f0fb\";\n}\n.fa-beer:before {\n  content: \"\\f0fc\";\n}\n.fa-h-square:before {\n  content: \"\\f0fd\";\n}\n.fa-plus-square:before {\n  content: \"\\f0fe\";\n}\n.fa-angle-double-left:before {\n  content: \"\\f100\";\n}\n.fa-angle-double-right:before {\n  content: \"\\f101\";\n}\n.fa-angle-double-up:before {\n  content: \"\\f102\";\n}\n.fa-angle-double-down:before {\n  content: \"\\f103\";\n}\n.fa-angle-left:before {\n  content: \"\\f104\";\n}\n.fa-angle-right:before {\n  content: \"\\f105\";\n}\n.fa-angle-up:before {\n  content: \"\\f106\";\n}\n.fa-angle-down:before {\n  content: \"\\f107\";\n}\n.fa-desktop:before {\n  content: \"\\f108\";\n}\n.fa-laptop:before {\n  content: \"\\f109\";\n}\n.fa-tablet:before {\n  content: \"\\f10a\";\n}\n.fa-mobile-phone:before,\n.fa-mobile:before {\n  content: \"\\f10b\";\n}\n.fa-circle-o:before {\n  content: \"\\f10c\";\n}\n.fa-quote-left:before {\n  content: \"\\f10d\";\n}\n.fa-quote-right:before {\n  content: \"\\f10e\";\n}\n.fa-spinner:before {\n  content: \"\\f110\";\n}\n.fa-circle:before {\n  content: \"\\f111\";\n}\n.fa-mail-reply:before,\n.fa-reply:before {\n  content: \"\\f112\";\n}\n.fa-github-alt:before {\n  content: \"\\f113\";\n}\n.fa-folder-o:before {\n  content: \"\\f114\";\n}\n.fa-folder-open-o:before {\n  content: \"\\f115\";\n}\n.fa-smile-o:before {\n  content: \"\\f118\";\n}\n.fa-frown-o:before {\n  content: \"\\f119\";\n}\n.fa-meh-o:before {\n  content: \"\\f11a\";\n}\n.fa-gamepad:before {\n  content: \"\\f11b\";\n}\n.fa-keyboard-o:before {\n  content: \"\\f11c\";\n}\n.fa-flag-o:before {\n  content: \"\\f11d\";\n}\n.fa-flag-checkered:before {\n  content: \"\\f11e\";\n}\n.fa-terminal:before {\n  content: \"\\f120\";\n}\n.fa-code:before {\n  content: \"\\f121\";\n}\n.fa-mail-reply-all:before,\n.fa-reply-all:before {\n  content: \"\\f122\";\n}\n.fa-star-half-empty:before,\n.fa-star-half-full:before,\n.fa-star-half-o:before {\n  content: \"\\f123\";\n}\n.fa-location-arrow:before {\n  content: \"\\f124\";\n}\n.fa-crop:before {\n  content: \"\\f125\";\n}\n.fa-code-fork:before {\n  content: \"\\f126\";\n}\n.fa-unlink:before,\n.fa-chain-broken:before {\n  content: \"\\f127\";\n}\n.fa-question:before {\n  content: \"\\f128\";\n}\n.fa-info:before {\n  content: \"\\f129\";\n}\n.fa-exclamation:before {\n  content: \"\\f12a\";\n}\n.fa-superscript:before {\n  content: \"\\f12b\";\n}\n.fa-subscript:before {\n  content: \"\\f12c\";\n}\n.fa-eraser:before {\n  content: \"\\f12d\";\n}\n.fa-puzzle-piece:before {\n  content: \"\\f12e\";\n}\n.fa-microphone:before {\n  content: \"\\f130\";\n}\n.fa-microphone-slash:before {\n  content: \"\\f131\";\n}\n.fa-shield:before {\n  content: \"\\f132\";\n}\n.fa-calendar-o:before {\n  content: \"\\f133\";\n}\n.fa-fire-extinguisher:before {\n  content: \"\\f134\";\n}\n.fa-rocket:before {\n  content: \"\\f135\";\n}\n.fa-maxcdn:before {\n  content: \"\\f136\";\n}\n.fa-chevron-circle-left:before {\n  content: \"\\f137\";\n}\n.fa-chevron-circle-right:before {\n  content: \"\\f138\";\n}\n.fa-chevron-circle-up:before {\n  content: \"\\f139\";\n}\n.fa-chevron-circle-down:before {\n  content: \"\\f13a\";\n}\n.fa-html5:before {\n  content: \"\\f13b\";\n}\n.fa-css3:before {\n  content: \"\\f13c\";\n}\n.fa-anchor:before {\n  content: \"\\f13d\";\n}\n.fa-unlock-alt:before {\n  content: \"\\f13e\";\n}\n.fa-bullseye:before {\n  content: \"\\f140\";\n}\n.fa-ellipsis-h:before {\n  content: \"\\f141\";\n}\n.fa-ellipsis-v:before {\n  content: \"\\f142\";\n}\n.fa-rss-square:before {\n  content: \"\\f143\";\n}\n.fa-play-circle:before {\n  content: \"\\f144\";\n}\n.fa-ticket:before {\n  content: \"\\f145\";\n}\n.fa-minus-square:before {\n  content: \"\\f146\";\n}\n.fa-minus-square-o:before {\n  content: \"\\f147\";\n}\n.fa-level-up:before {\n  content: \"\\f148\";\n}\n.fa-level-down:before {\n  content: \"\\f149\";\n}\n.fa-check-square:before {\n  content: \"\\f14a\";\n}\n.fa-pencil-square:before {\n  content: \"\\f14b\";\n}\n.fa-external-link-square:before {\n  content: \"\\f14c\";\n}\n.fa-share-square:before {\n  content: \"\\f14d\";\n}\n.fa-compass:before {\n  content: \"\\f14e\";\n}\n.fa-toggle-down:before,\n.fa-caret-square-o-down:before {\n  content: \"\\f150\";\n}\n.fa-toggle-up:before,\n.fa-caret-square-o-up:before {\n  content: \"\\f151\";\n}\n.fa-toggle-right:before,\n.fa-caret-square-o-right:before {\n  content: \"\\f152\";\n}\n.fa-euro:before,\n.fa-eur:before {\n  content: \"\\f153\";\n}\n.fa-gbp:before {\n  content: \"\\f154\";\n}\n.fa-dollar:before,\n.fa-usd:before {\n  content: \"\\f155\";\n}\n.fa-rupee:before,\n.fa-inr:before {\n  content: \"\\f156\";\n}\n.fa-cny:before,\n.fa-rmb:before,\n.fa-yen:before,\n.fa-jpy:before {\n  content: \"\\f157\";\n}\n.fa-ruble:before,\n.fa-rouble:before,\n.fa-rub:before {\n  content: \"\\f158\";\n}\n.fa-won:before,\n.fa-krw:before {\n  content: \"\\f159\";\n}\n.fa-bitcoin:before,\n.fa-btc:before {\n  content: \"\\f15a\";\n}\n.fa-file:before {\n  content: \"\\f15b\";\n}\n.fa-file-text:before {\n  content: \"\\f15c\";\n}\n.fa-sort-alpha-asc:before {\n  content: \"\\f15d\";\n}\n.fa-sort-alpha-desc:before {\n  content: \"\\f15e\";\n}\n.fa-sort-amount-asc:before {\n  content: \"\\f160\";\n}\n.fa-sort-amount-desc:before {\n  content: \"\\f161\";\n}\n.fa-sort-numeric-asc:before {\n  content: \"\\f162\";\n}\n.fa-sort-numeric-desc:before {\n  content: \"\\f163\";\n}\n.fa-thumbs-up:before {\n  content: \"\\f164\";\n}\n.fa-thumbs-down:before {\n  content: \"\\f165\";\n}\n.fa-youtube-square:before {\n  content: \"\\f166\";\n}\n.fa-youtube:before {\n  content: \"\\f167\";\n}\n.fa-xing:before {\n  content: \"\\f168\";\n}\n.fa-xing-square:before {\n  content: \"\\f169\";\n}\n.fa-youtube-play:before {\n  content: \"\\f16a\";\n}\n.fa-dropbox:before {\n  content: \"\\f16b\";\n}\n.fa-stack-overflow:before {\n  content: \"\\f16c\";\n}\n.fa-instagram:before {\n  content: \"\\f16d\";\n}\n.fa-flickr:before {\n  content: \"\\f16e\";\n}\n.fa-adn:before {\n  content: \"\\f170\";\n}\n.fa-bitbucket:before {\n  content: \"\\f171\";\n}\n.fa-bitbucket-square:before {\n  content: \"\\f172\";\n}\n.fa-tumblr:before {\n  content: \"\\f173\";\n}\n.fa-tumblr-square:before {\n  content: \"\\f174\";\n}\n.fa-long-arrow-down:before {\n  content: \"\\f175\";\n}\n.fa-long-arrow-up:before {\n  content: \"\\f176\";\n}\n.fa-long-arrow-left:before {\n  content: \"\\f177\";\n}\n.fa-long-arrow-right:before {\n  content: \"\\f178\";\n}\n.fa-apple:before {\n  content: \"\\f179\";\n}\n.fa-windows:before {\n  content: \"\\f17a\";\n}\n.fa-android:before {\n  content: \"\\f17b\";\n}\n.fa-linux:before {\n  content: \"\\f17c\";\n}\n.fa-dribbble:before {\n  content: \"\\f17d\";\n}\n.fa-skype:before {\n  content: \"\\f17e\";\n}\n.fa-foursquare:before {\n  content: \"\\f180\";\n}\n.fa-trello:before {\n  content: \"\\f181\";\n}\n.fa-female:before {\n  content: \"\\f182\";\n}\n.fa-male:before {\n  content: \"\\f183\";\n}\n.fa-gittip:before,\n.fa-gratipay:before {\n  content: \"\\f184\";\n}\n.fa-sun-o:before {\n  content: \"\\f185\";\n}\n.fa-moon-o:before {\n  content: \"\\f186\";\n}\n.fa-archive:before {\n  content: \"\\f187\";\n}\n.fa-bug:before {\n  content: \"\\f188\";\n}\n.fa-vk:before {\n  content: \"\\f189\";\n}\n.fa-weibo:before {\n  content: \"\\f18a\";\n}\n.fa-renren:before {\n  content: \"\\f18b\";\n}\n.fa-pagelines:before {\n  content: \"\\f18c\";\n}\n.fa-stack-exchange:before {\n  content: \"\\f18d\";\n}\n.fa-arrow-circle-o-right:before {\n  content: \"\\f18e\";\n}\n.fa-arrow-circle-o-left:before {\n  content: \"\\f190\";\n}\n.fa-toggle-left:before,\n.fa-caret-square-o-left:before {\n  content: \"\\f191\";\n}\n.fa-dot-circle-o:before {\n  content: \"\\f192\";\n}\n.fa-wheelchair:before {\n  content: \"\\f193\";\n}\n.fa-vimeo-square:before {\n  content: \"\\f194\";\n}\n.fa-turkish-lira:before,\n.fa-try:before {\n  content: \"\\f195\";\n}\n.fa-plus-square-o:before {\n  content: \"\\f196\";\n}\n.fa-space-shuttle:before {\n  content: \"\\f197\";\n}\n.fa-slack:before {\n  content: \"\\f198\";\n}\n.fa-envelope-square:before {\n  content: \"\\f199\";\n}\n.fa-wordpress:before {\n  content: \"\\f19a\";\n}\n.fa-openid:before {\n  content: \"\\f19b\";\n}\n.fa-institution:before,\n.fa-bank:before,\n.fa-university:before {\n  content: \"\\f19c\";\n}\n.fa-mortar-board:before,\n.fa-graduation-cap:before {\n  content: \"\\f19d\";\n}\n.fa-yahoo:before {\n  content: \"\\f19e\";\n}\n.fa-google:before {\n  content: \"\\f1a0\";\n}\n.fa-reddit:before {\n  content: \"\\f1a1\";\n}\n.fa-reddit-square:before {\n  content: \"\\f1a2\";\n}\n.fa-stumbleupon-circle:before {\n  content: \"\\f1a3\";\n}\n.fa-stumbleupon:before {\n  content: \"\\f1a4\";\n}\n.fa-delicious:before {\n  content: \"\\f1a5\";\n}\n.fa-digg:before {\n  content: \"\\f1a6\";\n}\n.fa-pied-piper-pp:before {\n  content: \"\\f1a7\";\n}\n.fa-pied-piper-alt:before {\n  content: \"\\f1a8\";\n}\n.fa-drupal:before {\n  content: \"\\f1a9\";\n}\n.fa-joomla:before {\n  content: \"\\f1aa\";\n}\n.fa-language:before {\n  content: \"\\f1ab\";\n}\n.fa-fax:before {\n  content: \"\\f1ac\";\n}\n.fa-building:before {\n  content: \"\\f1ad\";\n}\n.fa-child:before {\n  content: \"\\f1ae\";\n}\n.fa-paw:before {\n  content: \"\\f1b0\";\n}\n.fa-spoon:before {\n  content: \"\\f1b1\";\n}\n.fa-cube:before {\n  content: \"\\f1b2\";\n}\n.fa-cubes:before {\n  content: \"\\f1b3\";\n}\n.fa-behance:before {\n  content: \"\\f1b4\";\n}\n.fa-behance-square:before {\n  content: \"\\f1b5\";\n}\n.fa-steam:before {\n  content: \"\\f1b6\";\n}\n.fa-steam-square:before {\n  content: \"\\f1b7\";\n}\n.fa-recycle:before {\n  content: \"\\f1b8\";\n}\n.fa-automobile:before,\n.fa-car:before {\n  content: \"\\f1b9\";\n}\n.fa-cab:before,\n.fa-taxi:before {\n  content: \"\\f1ba\";\n}\n.fa-tree:before {\n  content: \"\\f1bb\";\n}\n.fa-spotify:before {\n  content: \"\\f1bc\";\n}\n.fa-deviantart:before {\n  content: \"\\f1bd\";\n}\n.fa-soundcloud:before {\n  content: \"\\f1be\";\n}\n.fa-database:before {\n  content: \"\\f1c0\";\n}\n.fa-file-pdf-o:before {\n  content: \"\\f1c1\";\n}\n.fa-file-word-o:before {\n  content: \"\\f1c2\";\n}\n.fa-file-excel-o:before {\n  content: \"\\f1c3\";\n}\n.fa-file-powerpoint-o:before {\n  content: \"\\f1c4\";\n}\n.fa-file-photo-o:before,\n.fa-file-picture-o:before,\n.fa-file-image-o:before {\n  content: \"\\f1c5\";\n}\n.fa-file-zip-o:before,\n.fa-file-archive-o:before {\n  content: \"\\f1c6\";\n}\n.fa-file-sound-o:before,\n.fa-file-audio-o:before {\n  content: \"\\f1c7\";\n}\n.fa-file-movie-o:before,\n.fa-file-video-o:before {\n  content: \"\\f1c8\";\n}\n.fa-file-code-o:before {\n  content: \"\\f1c9\";\n}\n.fa-vine:before {\n  content: \"\\f1ca\";\n}\n.fa-codepen:before {\n  content: \"\\f1cb\";\n}\n.fa-jsfiddle:before {\n  content: \"\\f1cc\";\n}\n.fa-life-bouy:before,\n.fa-life-buoy:before,\n.fa-life-saver:before,\n.fa-support:before,\n.fa-life-ring:before {\n  content: \"\\f1cd\";\n}\n.fa-circle-o-notch:before {\n  content: \"\\f1ce\";\n}\n.fa-ra:before,\n.fa-resistance:before,\n.fa-rebel:before {\n  content: \"\\f1d0\";\n}\n.fa-ge:before,\n.fa-empire:before {\n  content: \"\\f1d1\";\n}\n.fa-git-square:before {\n  content: \"\\f1d2\";\n}\n.fa-git:before {\n  content: \"\\f1d3\";\n}\n.fa-y-combinator-square:before,\n.fa-yc-square:before,\n.fa-hacker-news:before {\n  content: \"\\f1d4\";\n}\n.fa-tencent-weibo:before {\n  content: \"\\f1d5\";\n}\n.fa-qq:before {\n  content: \"\\f1d6\";\n}\n.fa-wechat:before,\n.fa-weixin:before {\n  content: \"\\f1d7\";\n}\n.fa-send:before,\n.fa-paper-plane:before {\n  content: \"\\f1d8\";\n}\n.fa-send-o:before,\n.fa-paper-plane-o:before {\n  content: \"\\f1d9\";\n}\n.fa-history:before {\n  content: \"\\f1da\";\n}\n.fa-circle-thin:before {\n  content: \"\\f1db\";\n}\n.fa-header:before {\n  content: \"\\f1dc\";\n}\n.fa-paragraph:before {\n  content: \"\\f1dd\";\n}\n.fa-sliders:before {\n  content: \"\\f1de\";\n}\n.fa-share-alt:before {\n  content: \"\\f1e0\";\n}\n.fa-share-alt-square:before {\n  content: \"\\f1e1\";\n}\n.fa-bomb:before {\n  content: \"\\f1e2\";\n}\n.fa-soccer-ball-o:before,\n.fa-futbol-o:before {\n  content: \"\\f1e3\";\n}\n.fa-tty:before {\n  content: \"\\f1e4\";\n}\n.fa-binoculars:before {\n  content: \"\\f1e5\";\n}\n.fa-plug:before {\n  content: \"\\f1e6\";\n}\n.fa-slideshare:before {\n  content: \"\\f1e7\";\n}\n.fa-twitch:before {\n  content: \"\\f1e8\";\n}\n.fa-yelp:before {\n  content: \"\\f1e9\";\n}\n.fa-newspaper-o:before {\n  content: \"\\f1ea\";\n}\n.fa-wifi:before {\n  content: \"\\f1eb\";\n}\n.fa-calculator:before {\n  content: \"\\f1ec\";\n}\n.fa-paypal:before {\n  content: \"\\f1ed\";\n}\n.fa-google-wallet:before {\n  content: \"\\f1ee\";\n}\n.fa-cc-visa:before {\n  content: \"\\f1f0\";\n}\n.fa-cc-mastercard:before {\n  content: \"\\f1f1\";\n}\n.fa-cc-discover:before {\n  content: \"\\f1f2\";\n}\n.fa-cc-amex:before {\n  content: \"\\f1f3\";\n}\n.fa-cc-paypal:before {\n  content: \"\\f1f4\";\n}\n.fa-cc-stripe:before {\n  content: \"\\f1f5\";\n}\n.fa-bell-slash:before {\n  content: \"\\f1f6\";\n}\n.fa-bell-slash-o:before {\n  content: \"\\f1f7\";\n}\n.fa-trash:before {\n  content: \"\\f1f8\";\n}\n.fa-copyright:before {\n  content: \"\\f1f9\";\n}\n.fa-at:before {\n  content: \"\\f1fa\";\n}\n.fa-eyedropper:before {\n  content: \"\\f1fb\";\n}\n.fa-paint-brush:before {\n  content: \"\\f1fc\";\n}\n.fa-birthday-cake:before {\n  content: \"\\f1fd\";\n}\n.fa-area-chart:before {\n  content: \"\\f1fe\";\n}\n.fa-pie-chart:before {\n  content: \"\\f200\";\n}\n.fa-line-chart:before {\n  content: \"\\f201\";\n}\n.fa-lastfm:before {\n  content: \"\\f202\";\n}\n.fa-lastfm-square:before {\n  content: \"\\f203\";\n}\n.fa-toggle-off:before {\n  content: \"\\f204\";\n}\n.fa-toggle-on:before {\n  content: \"\\f205\";\n}\n.fa-bicycle:before {\n  content: \"\\f206\";\n}\n.fa-bus:before {\n  content: \"\\f207\";\n}\n.fa-ioxhost:before {\n  content: \"\\f208\";\n}\n.fa-angellist:before {\n  content: \"\\f209\";\n}\n.fa-cc:before {\n  content: \"\\f20a\";\n}\n.fa-shekel:before,\n.fa-sheqel:before,\n.fa-ils:before {\n  content: \"\\f20b\";\n}\n.fa-meanpath:before {\n  content: \"\\f20c\";\n}\n.fa-buysellads:before {\n  content: \"\\f20d\";\n}\n.fa-connectdevelop:before {\n  content: \"\\f20e\";\n}\n.fa-dashcube:before {\n  content: \"\\f210\";\n}\n.fa-forumbee:before {\n  content: \"\\f211\";\n}\n.fa-leanpub:before {\n  content: \"\\f212\";\n}\n.fa-sellsy:before {\n  content: \"\\f213\";\n}\n.fa-shirtsinbulk:before {\n  content: \"\\f214\";\n}\n.fa-simplybuilt:before {\n  content: \"\\f215\";\n}\n.fa-skyatlas:before {\n  content: \"\\f216\";\n}\n.fa-cart-plus:before {\n  content: \"\\f217\";\n}\n.fa-cart-arrow-down:before {\n  content: \"\\f218\";\n}\n.fa-diamond:before {\n  content: \"\\f219\";\n}\n.fa-ship:before {\n  content: \"\\f21a\";\n}\n.fa-user-secret:before {\n  content: \"\\f21b\";\n}\n.fa-motorcycle:before {\n  content: \"\\f21c\";\n}\n.fa-street-view:before {\n  content: \"\\f21d\";\n}\n.fa-heartbeat:before {\n  content: \"\\f21e\";\n}\n.fa-venus:before {\n  content: \"\\f221\";\n}\n.fa-mars:before {\n  content: \"\\f222\";\n}\n.fa-mercury:before {\n  content: \"\\f223\";\n}\n.fa-intersex:before,\n.fa-transgender:before {\n  content: \"\\f224\";\n}\n.fa-transgender-alt:before {\n  content: \"\\f225\";\n}\n.fa-venus-double:before {\n  content: \"\\f226\";\n}\n.fa-mars-double:before {\n  content: \"\\f227\";\n}\n.fa-venus-mars:before {\n  content: \"\\f228\";\n}\n.fa-mars-stroke:before {\n  content: \"\\f229\";\n}\n.fa-mars-stroke-v:before {\n  content: \"\\f22a\";\n}\n.fa-mars-stroke-h:before {\n  content: \"\\f22b\";\n}\n.fa-neuter:before {\n  content: \"\\f22c\";\n}\n.fa-genderless:before {\n  content: \"\\f22d\";\n}\n.fa-facebook-official:before {\n  content: \"\\f230\";\n}\n.fa-pinterest-p:before {\n  content: \"\\f231\";\n}\n.fa-whatsapp:before {\n  content: \"\\f232\";\n}\n.fa-server:before {\n  content: \"\\f233\";\n}\n.fa-user-plus:before {\n  content: \"\\f234\";\n}\n.fa-user-times:before {\n  content: \"\\f235\";\n}\n.fa-hotel:before,\n.fa-bed:before {\n  content: \"\\f236\";\n}\n.fa-viacoin:before {\n  content: \"\\f237\";\n}\n.fa-train:before {\n  content: \"\\f238\";\n}\n.fa-subway:before {\n  content: \"\\f239\";\n}\n.fa-medium:before {\n  content: \"\\f23a\";\n}\n.fa-yc:before,\n.fa-y-combinator:before {\n  content: \"\\f23b\";\n}\n.fa-optin-monster:before {\n  content: \"\\f23c\";\n}\n.fa-opencart:before {\n  content: \"\\f23d\";\n}\n.fa-expeditedssl:before {\n  content: \"\\f23e\";\n}\n.fa-battery-4:before,\n.fa-battery:before,\n.fa-battery-full:before {\n  content: \"\\f240\";\n}\n.fa-battery-3:before,\n.fa-battery-three-quarters:before {\n  content: \"\\f241\";\n}\n.fa-battery-2:before,\n.fa-battery-half:before {\n  content: \"\\f242\";\n}\n.fa-battery-1:before,\n.fa-battery-quarter:before {\n  content: \"\\f243\";\n}\n.fa-battery-0:before,\n.fa-battery-empty:before {\n  content: \"\\f244\";\n}\n.fa-mouse-pointer:before {\n  content: \"\\f245\";\n}\n.fa-i-cursor:before {\n  content: \"\\f246\";\n}\n.fa-object-group:before {\n  content: \"\\f247\";\n}\n.fa-object-ungroup:before {\n  content: \"\\f248\";\n}\n.fa-sticky-note:before {\n  content: \"\\f249\";\n}\n.fa-sticky-note-o:before {\n  content: \"\\f24a\";\n}\n.fa-cc-jcb:before {\n  content: \"\\f24b\";\n}\n.fa-cc-diners-club:before {\n  content: \"\\f24c\";\n}\n.fa-clone:before {\n  content: \"\\f24d\";\n}\n.fa-balance-scale:before {\n  content: \"\\f24e\";\n}\n.fa-hourglass-o:before {\n  content: \"\\f250\";\n}\n.fa-hourglass-1:before,\n.fa-hourglass-start:before {\n  content: \"\\f251\";\n}\n.fa-hourglass-2:before,\n.fa-hourglass-half:before {\n  content: \"\\f252\";\n}\n.fa-hourglass-3:before,\n.fa-hourglass-end:before {\n  content: \"\\f253\";\n}\n.fa-hourglass:before {\n  content: \"\\f254\";\n}\n.fa-hand-grab-o:before,\n.fa-hand-rock-o:before {\n  content: \"\\f255\";\n}\n.fa-hand-stop-o:before,\n.fa-hand-paper-o:before {\n  content: \"\\f256\";\n}\n.fa-hand-scissors-o:before {\n  content: \"\\f257\";\n}\n.fa-hand-lizard-o:before {\n  content: \"\\f258\";\n}\n.fa-hand-spock-o:before {\n  content: \"\\f259\";\n}\n.fa-hand-pointer-o:before {\n  content: \"\\f25a\";\n}\n.fa-hand-peace-o:before {\n  content: \"\\f25b\";\n}\n.fa-trademark:before {\n  content: \"\\f25c\";\n}\n.fa-registered:before {\n  content: \"\\f25d\";\n}\n.fa-creative-commons:before {\n  content: \"\\f25e\";\n}\n.fa-gg:before {\n  content: \"\\f260\";\n}\n.fa-gg-circle:before {\n  content: \"\\f261\";\n}\n.fa-tripadvisor:before {\n  content: \"\\f262\";\n}\n.fa-odnoklassniki:before {\n  content: \"\\f263\";\n}\n.fa-odnoklassniki-square:before {\n  content: \"\\f264\";\n}\n.fa-get-pocket:before {\n  content: \"\\f265\";\n}\n.fa-wikipedia-w:before {\n  content: \"\\f266\";\n}\n.fa-safari:before {\n  content: \"\\f267\";\n}\n.fa-chrome:before {\n  content: \"\\f268\";\n}\n.fa-firefox:before {\n  content: \"\\f269\";\n}\n.fa-opera:before {\n  content: \"\\f26a\";\n}\n.fa-internet-explorer:before {\n  content: \"\\f26b\";\n}\n.fa-tv:before,\n.fa-television:before {\n  content: \"\\f26c\";\n}\n.fa-contao:before {\n  content: \"\\f26d\";\n}\n.fa-500px:before {\n  content: \"\\f26e\";\n}\n.fa-amazon:before {\n  content: \"\\f270\";\n}\n.fa-calendar-plus-o:before {\n  content: \"\\f271\";\n}\n.fa-calendar-minus-o:before {\n  content: \"\\f272\";\n}\n.fa-calendar-times-o:before {\n  content: \"\\f273\";\n}\n.fa-calendar-check-o:before {\n  content: \"\\f274\";\n}\n.fa-industry:before {\n  content: \"\\f275\";\n}\n.fa-map-pin:before {\n  content: \"\\f276\";\n}\n.fa-map-signs:before {\n  content: \"\\f277\";\n}\n.fa-map-o:before {\n  content: \"\\f278\";\n}\n.fa-map:before {\n  content: \"\\f279\";\n}\n.fa-commenting:before {\n  content: \"\\f27a\";\n}\n.fa-commenting-o:before {\n  content: \"\\f27b\";\n}\n.fa-houzz:before {\n  content: \"\\f27c\";\n}\n.fa-vimeo:before {\n  content: \"\\f27d\";\n}\n.fa-black-tie:before {\n  content: \"\\f27e\";\n}\n.fa-fonticons:before {\n  content: \"\\f280\";\n}\n.fa-reddit-alien:before {\n  content: \"\\f281\";\n}\n.fa-edge:before {\n  content: \"\\f282\";\n}\n.fa-credit-card-alt:before {\n  content: \"\\f283\";\n}\n.fa-codiepie:before {\n  content: \"\\f284\";\n}\n.fa-modx:before {\n  content: \"\\f285\";\n}\n.fa-fort-awesome:before {\n  content: \"\\f286\";\n}\n.fa-usb:before {\n  content: \"\\f287\";\n}\n.fa-product-hunt:before {\n  content: \"\\f288\";\n}\n.fa-mixcloud:before {\n  content: \"\\f289\";\n}\n.fa-scribd:before {\n  content: \"\\f28a\";\n}\n.fa-pause-circle:before {\n  content: \"\\f28b\";\n}\n.fa-pause-circle-o:before {\n  content: \"\\f28c\";\n}\n.fa-stop-circle:before {\n  content: \"\\f28d\";\n}\n.fa-stop-circle-o:before {\n  content: \"\\f28e\";\n}\n.fa-shopping-bag:before {\n  content: \"\\f290\";\n}\n.fa-shopping-basket:before {\n  content: \"\\f291\";\n}\n.fa-hashtag:before {\n  content: \"\\f292\";\n}\n.fa-bluetooth:before {\n  content: \"\\f293\";\n}\n.fa-bluetooth-b:before {\n  content: \"\\f294\";\n}\n.fa-percent:before {\n  content: \"\\f295\";\n}\n.fa-gitlab:before {\n  content: \"\\f296\";\n}\n.fa-wpbeginner:before {\n  content: \"\\f297\";\n}\n.fa-wpforms:before {\n  content: \"\\f298\";\n}\n.fa-envira:before {\n  content: \"\\f299\";\n}\n.fa-universal-access:before {\n  content: \"\\f29a\";\n}\n.fa-wheelchair-alt:before {\n  content: \"\\f29b\";\n}\n.fa-question-circle-o:before {\n  content: \"\\f29c\";\n}\n.fa-blind:before {\n  content: \"\\f29d\";\n}\n.fa-audio-description:before {\n  content: \"\\f29e\";\n}\n.fa-volume-control-phone:before {\n  content: \"\\f2a0\";\n}\n.fa-braille:before {\n  content: \"\\f2a1\";\n}\n.fa-assistive-listening-systems:before {\n  content: \"\\f2a2\";\n}\n.fa-asl-interpreting:before,\n.fa-american-sign-language-interpreting:before {\n  content: \"\\f2a3\";\n}\n.fa-deafness:before,\n.fa-hard-of-hearing:before,\n.fa-deaf:before {\n  content: \"\\f2a4\";\n}\n.fa-glide:before {\n  content: \"\\f2a5\";\n}\n.fa-glide-g:before {\n  content: \"\\f2a6\";\n}\n.fa-signing:before,\n.fa-sign-language:before {\n  content: \"\\f2a7\";\n}\n.fa-low-vision:before {\n  content: \"\\f2a8\";\n}\n.fa-viadeo:before {\n  content: \"\\f2a9\";\n}\n.fa-viadeo-square:before {\n  content: \"\\f2aa\";\n}\n.fa-snapchat:before {\n  content: \"\\f2ab\";\n}\n.fa-snapchat-ghost:before {\n  content: \"\\f2ac\";\n}\n.fa-snapchat-square:before {\n  content: \"\\f2ad\";\n}\n.fa-pied-piper:before {\n  content: \"\\f2ae\";\n}\n.fa-first-order:before {\n  content: \"\\f2b0\";\n}\n.fa-yoast:before {\n  content: \"\\f2b1\";\n}\n.fa-themeisle:before {\n  content: \"\\f2b2\";\n}\n.fa-google-plus-circle:before,\n.fa-google-plus-official:before {\n  content: \"\\f2b3\";\n}\n.fa-fa:before,\n.fa-font-awesome:before {\n  content: \"\\f2b4\";\n}\n.fa-handshake-o:before {\n  content: \"\\f2b5\";\n}\n.fa-envelope-open:before {\n  content: \"\\f2b6\";\n}\n.fa-envelope-open-o:before {\n  content: \"\\f2b7\";\n}\n.fa-linode:before {\n  content: \"\\f2b8\";\n}\n.fa-address-book:before {\n  content: \"\\f2b9\";\n}\n.fa-address-book-o:before {\n  content: \"\\f2ba\";\n}\n.fa-vcard:before,\n.fa-address-card:before {\n  content: \"\\f2bb\";\n}\n.fa-vcard-o:before,\n.fa-address-card-o:before {\n  content: \"\\f2bc\";\n}\n.fa-user-circle:before {\n  content: \"\\f2bd\";\n}\n.fa-user-circle-o:before {\n  content: \"\\f2be\";\n}\n.fa-user-o:before {\n  content: \"\\f2c0\";\n}\n.fa-id-badge:before {\n  content: \"\\f2c1\";\n}\n.fa-drivers-license:before,\n.fa-id-card:before {\n  content: \"\\f2c2\";\n}\n.fa-drivers-license-o:before,\n.fa-id-card-o:before {\n  content: \"\\f2c3\";\n}\n.fa-quora:before {\n  content: \"\\f2c4\";\n}\n.fa-free-code-camp:before {\n  content: \"\\f2c5\";\n}\n.fa-telegram:before {\n  content: \"\\f2c6\";\n}\n.fa-thermometer-4:before,\n.fa-thermometer:before,\n.fa-thermometer-full:before {\n  content: \"\\f2c7\";\n}\n.fa-thermometer-3:before,\n.fa-thermometer-three-quarters:before {\n  content: \"\\f2c8\";\n}\n.fa-thermometer-2:before,\n.fa-thermometer-half:before {\n  content: \"\\f2c9\";\n}\n.fa-thermometer-1:before,\n.fa-thermometer-quarter:before {\n  content: \"\\f2ca\";\n}\n.fa-thermometer-0:before,\n.fa-thermometer-empty:before {\n  content: \"\\f2cb\";\n}\n.fa-shower:before {\n  content: \"\\f2cc\";\n}\n.fa-bathtub:before,\n.fa-s15:before,\n.fa-bath:before {\n  content: \"\\f2cd\";\n}\n.fa-podcast:before {\n  content: \"\\f2ce\";\n}\n.fa-window-maximize:before {\n  content: \"\\f2d0\";\n}\n.fa-window-minimize:before {\n  content: \"\\f2d1\";\n}\n.fa-window-restore:before {\n  content: \"\\f2d2\";\n}\n.fa-times-rectangle:before,\n.fa-window-close:before {\n  content: \"\\f2d3\";\n}\n.fa-times-rectangle-o:before,\n.fa-window-close-o:before {\n  content: \"\\f2d4\";\n}\n.fa-bandcamp:before {\n  content: \"\\f2d5\";\n}\n.fa-grav:before {\n  content: \"\\f2d6\";\n}\n.fa-etsy:before {\n  content: \"\\f2d7\";\n}\n.fa-imdb:before {\n  content: \"\\f2d8\";\n}\n.fa-ravelry:before {\n  content: \"\\f2d9\";\n}\n.fa-eercast:before {\n  content: \"\\f2da\";\n}\n.fa-microchip:before {\n  content: \"\\f2db\";\n}\n.fa-snowflake-o:before {\n  content: \"\\f2dc\";\n}\n.fa-superpowers:before {\n  content: \"\\f2dd\";\n}\n.fa-wpexplorer:before {\n  content: \"\\f2de\";\n}\n.fa-meetup:before {\n  content: \"\\f2e0\";\n}\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.sr-only-focusable:active,\n.sr-only-focusable:focus {\n  position: static;\n  width: auto;\n  height: auto;\n  margin: 0;\n  overflow: visible;\n  clip: auto;\n}\n"
  },
  {
    "path": "src/assets/styles/vendor/fullcalendar.scss",
    "content": "@use '../spec/settings/baseColors' as *;\n\n.fc {\n  background-color: var(--c-bkg-card) !important;\n  border: 1px solid var(--c-border) !important;\n  color: var(--c-text-base) !important;\n\n  // All table elements within the calendar\n  table {\n    background-color: var(--c-bkg-card) !important;\n    border-color: var(--c-border) !important;\n  }\n\n  th {\n    text-align: center;\n    padding: 15px;\n    background-color: var(--c-bkg-card) !important;\n    color: var(--c-text-base) !important;\n    font-size: 12px;\n    text-transform: uppercase;\n    border-right-width: 0;\n    border-left-width: 0;\n    border-color: var(--c-border) !important;\n  }\n\n  td {\n    background-color: var(--c-bkg-card) !important;\n    border-color: var(--c-border) !important;\n    color: var(--c-text-base) !important;\n  }\n\n  button {\n    background-color: var(--c-bkg-card) !important;\n    background-image: none;\n    height: 37px;\n    padding: 0 15px;\n    color: var(--c-text-base) !important;\n    border-color: var(--c-border) !important;\n\n    &.fc-state-default {\n      border-color: var(--c-border) !important;\n      box-shadow: none;\n      background-color: var(--c-bkg-card) !important;\n      color: var(--c-text-base) !important;\n    }\n\n    &.fc-state-active {\n      box-shadow: none;\n      background-color: var(--c-primary) !important;\n      color: white !important;\n      border-color: var(--c-primary) !important;\n    }\n\n    &:hover {\n      background-color: color-mix(in srgb, var(--c-bkg-card) 85%, var(--c-border)) !important;\n      border-color: var(--c-border) !important;\n      color: var(--c-text-base) !important;\n    }\n  }\n\n  // Calendar header/toolbar\n  .fc-head {\n    background-color: var(--c-bkg-card) !important;\n    border-color: var(--c-border) !important;\n  }\n\n  .fc-head-container {\n    background-color: var(--c-bkg-card) !important;\n    border-color: var(--c-border) !important;\n  }\n\n  // Calendar body\n  .fc-body {\n    background-color: var(--c-bkg-card) !important;\n    border-color: var(--c-border) !important;\n  }\n\n  // Individual day cells\n  .fc-day {\n    background-color: var(--c-bkg-card) !important;\n    border-color: var(--c-border) !important;\n    \n    &:hover {\n      background-color: color-mix(in srgb, var(--c-bkg-card) 90%, var(--c-border)) !important;\n    }\n  }\n\n  // Week cells\n  .fc-week {\n    background-color: var(--c-bkg-card) !important;\n    border-color: var(--c-border) !important;\n  }\n\n  // All grid elements\n  .fc-widget-header,\n  .fc-widget-content {\n    border-color: var(--c-border) !important;\n    background-color: var(--c-bkg-card) !important;\n  }\n}\n\n.fc-toolbar {\n  padding: 20px 20px 0;\n  background-color: var(--c-bkg-card) !important;\n}\n\n.fc-view,\n.fc-view > table {\n  background-color: var(--c-bkg-card) !important;\n  border-color: var(--c-border) !important;\n}\n\n.fc-basic-view td.fc-day-number,\n.fc-basic-view td.fc-week-number span {\n  padding: 7px 15px;\n  color: var(--c-text-base) !important;\n}\n\n.fc-unthemed {\n  background-color: var(--c-bkg-card) !important;\n  \n  .fc-content,\n  .fc-divider,\n  .fc-popover,\n  .fc-row,\n  tbody,\n  td,\n  th,\n  thead {\n    border-color: var(--c-border) !important;\n    background-color: var(--c-bkg-card) !important;\n  }\n\n  .fc-today {\n    background-color: color-mix(in srgb, var(--c-primary) 10%, var(--c-bkg-card)) !important;\n  }\n\n  .fc-popover {\n    background: var(--c-bkg-card) !important;\n    color: var(--c-text-base) !important;\n    border-color: var(--c-border) !important;\n  }\n\n  // Other month dates (faded)\n  .fc-other-month {\n    .fc-day-number {\n      color: var(--c-text-muted) !important;\n    }\n  }\n\n  // Weekend styling\n  .fc-sun,\n  .fc-sat {\n    background-color: color-mix(in srgb, var(--c-bkg-card) 95%, var(--c-border)) !important;\n  }\n}\n\n.fc-basic-view {\n  background-color: var(--c-bkg-card) !important;\n  \n  .fc-day-number {\n    color: var(--c-text-base) !important;\n\n    &.fc-today {\n      background-color: var(--c-primary) !important;\n      color: white !important;\n      display: inline-block;\n      float: right;\n      border-radius: 50%;\n      padding: 6px 8px;\n      line-height: 1;\n      margin: 4px 4px 0 0;\n    }\n  }\n\n  .fc-day-header {\n    background-color: var(--c-bkg-card) !important;\n    color: var(--c-text-base) !important;\n    border-color: var(--c-border) !important;\n  }\n}\n\n.fc-event-container {\n  .fc-event {\n    border-radius: 3px;\n    border: 0;\n    background-color: var(--c-primary) !important;\n    color: white !important;\n    font-size: 12px;\n    line-height: 2.5;\n    padding: 0 15px;\n\n    &:hover {\n      background-color: var(--c-primary-hover) !important;\n      opacity: 0.9;\n    }\n  }\n\n  .fc-day-grid-event {\n    margin: 1px 5px 5px;\n  }\n}\n\n// Comprehensive border fix for all calendar elements\n.fc * {\n  border-color: var(--c-border) !important;\n}\n\n// Fix for any remaining border inconsistencies\n.fc .fc-grid,\n.fc .fc-grid table,\n.fc .fc-grid tr,\n.fc .fc-grid td,\n.fc .fc-grid th {\n  border-color: var(--c-border) !important;\n  background-color: var(--c-bkg-card) !important;\n}\n"
  },
  {
    "path": "src/assets/styles/vendor/index.scss",
    "content": "@use 'perfect-scrollbar/css/perfect-scrollbar' as *;\n@use 'themify-icons' as *;\n@use 'font-awesome' as *;\n@use 'perfectScrollbar' as *;\n@use 'sparkline' as *;\n@use 'jquery.datatables' as *;\n@use 'fullcalendar' as *;\n@use 'datepicker' as *;\n"
  },
  {
    "path": "src/assets/styles/vendor/jquery.datatables.scss",
    "content": "@use '../spec/settings/baseColors' as *;\n@use '../spec/settings/breakpoints' as *;\n@use '../spec/tools/mixins/mediaQueriesRanges' as *;\n\ntable {\n  &.dataTable {\n    background: var(--c-bkg-card);\n    color: var(--c-text-base);\n    \n    &.no-footer {\n      border-bottom: 1px solid var(--c-border);\n      margin-bottom: 20px;\n    }\n    \n    thead th {\n      background: var(--c-bkg-card);\n      color: var(--c-text-base);\n      border-color: var(--c-border);\n    }\n    \n    tbody td {\n      background: var(--c-bkg-card);\n      color: var(--c-text-base);\n      border-color: var(--c-border);\n    }\n    \n    tbody tr:nth-child(even) td {\n      background: color-mix(in srgb, var(--c-bkg-card) 95%, var(--c-border));\n    }\n    \n    tbody tr:hover td {\n      background: color-mix(in srgb, var(--c-bkg-card) 90%, var(--c-border)) !important;\n    }\n  }\n}\n\n.sorting_asc {\n  &:focus {\n    outline: none;\n  }\n}\n\n.dataTables_wrapper {\n  overflow: hidden;\n  padding-bottom: 5px;\n\n  .dataTables_length{\n    color: var(--c-text-base);\n    float: left;\n\n    @include to($breakpoint-sm) {\n      text-align: left;\n    }\n\n    select {\n      border: 1px solid var(--c-border);\n      border-radius: 2px;\n      box-shadow: none;\n      height: 35px;\n      font-size: 14px;\n      padding: 5px;\n      margin-left: 5px;\n      margin-right: 5px;\n      color: var(--c-text-base);\n      background: var(--c-bkg-card);\n      transition: all 0.2s ease-in;\n    }\n  }\n\n  .dataTables_filter {\n    color: var(--c-text-base);\n    float: right;\n\n    @include to($breakpoint-sm) {\n      text-align: left;\n    }\n\n    input {\n      border: 1px solid var(--c-border);\n      border-radius: 2px;\n      box-shadow: none;\n      height: 35px;\n      font-size: 14px;\n      margin-left: 15px;\n      padding: 5px;\n      color: var(--c-text-base);\n      background: var(--c-bkg-card);\n      transition: all 0.2s ease-in;\n      \n      &::placeholder {\n        color: var(--c-text-muted);\n      }\n    }\n  }\n\n  .dataTables_info {\n    color: var(--c-text-base);\n    float: left;\n  }\n\n  .dataTables_processing {\n    color: var(--c-text-base);\n  }\n\n  .dataTables_paginate {\n    color: var(--c-text-base);\n    float: right;\n\n    .paginate_button {\n      color: var(--c-text-base) !important;\n      padding: 6px 12px;\n      border-radius: 2px;\n      margin-right: 10px;\n      transition: all 0.2s ease-in-out;\n      text-decoration: none;\n      background: var(--c-bkg-card);\n      border: 1px solid var(--c-border);\n\n      &.next,\n      &.previous,\n      &.first,\n      &.last {\n        border-radius: 2px;\n        text-decoration: none;\n\n        &:hover,\n        &:focus {\n          color: #fff !important;\n          background: var(--c-primary);\n        }\n\n        &.disabled {\n          opacity: 0.4;\n          pointer-events: none;\n        }\n      }\n\n      &:hover {\n        color: #fff !important;\n        background: var(--c-primary);\n        border-color: var(--c-primary);\n      }\n\n      &.current {\n        color: #fff !important;\n        background: var(--c-primary);\n        border-color: var(--c-primary);\n\n        &:hover {\n          color: #fff !important;\n          background: var(--c-primary);\n        }\n      }\n    }\n  }\n\n  .status {\n    width: 5px;\n    height: 5px;\n  }\n}\n\n"
  },
  {
    "path": "src/assets/styles/vendor/perfectScrollbar.scss",
    "content": ".ps__rail-y {\n  right: 0 !important;\n  left: auto !important;\n}\n"
  },
  {
    "path": "src/assets/styles/vendor/sparkline.scss",
    "content": "#jqstooltip {\n  width: auto !important;\n  height: auto !important;\n  padding: 5px 10px !important;\n  border-radius: 2px !important;\n}\n"
  },
  {
    "path": "src/assets/styles/vendor/themify-icons.css",
    "content": "@font-face {\n\tfont-family: 'themify';\n\tsrc:url('../static/fonts/icons/themify/themify.eot?-fvbane');\n\tsrc:url('../static/fonts/icons/themify/themify.eot?#iefix-fvbane') format('embedded-opentype'),\n\t\turl('../static/fonts/icons/themify/themify.woff?-fvbane') format('woff'),\n\t\turl('../static/fonts/icons/themify/themify.ttf?-fvbane') format('truetype'),\n\t\turl('../static/fonts/icons/themify/themify.svg?-fvbane#themify') format('svg');\n\tfont-weight: normal;\n\tfont-style: normal;\n}\n\n[class^=\"ti-\"], [class*=\" ti-\"] {\n\tfont-family: 'themify';\n\tspeak: none;\n\tfont-style: normal;\n\tfont-weight: normal;\n\tfont-variant: normal;\n\ttext-transform: none;\n\tline-height: 1;\n\n\t/* Better Font Rendering =========== */\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n}\n\n.ti-wand:before {\n\tcontent: \"\\e600\";\n}\n.ti-volume:before {\n\tcontent: \"\\e601\";\n}\n.ti-user:before {\n\tcontent: \"\\e602\";\n}\n.ti-unlock:before {\n\tcontent: \"\\e603\";\n}\n.ti-unlink:before {\n\tcontent: \"\\e604\";\n}\n.ti-trash:before {\n\tcontent: \"\\e605\";\n}\n.ti-thought:before {\n\tcontent: \"\\e606\";\n}\n.ti-target:before {\n\tcontent: \"\\e607\";\n}\n.ti-tag:before {\n\tcontent: \"\\e608\";\n}\n.ti-tablet:before {\n\tcontent: \"\\e609\";\n}\n.ti-star:before {\n\tcontent: \"\\e60a\";\n}\n.ti-spray:before {\n\tcontent: \"\\e60b\";\n}\n.ti-signal:before {\n\tcontent: \"\\e60c\";\n}\n.ti-shopping-cart:before {\n\tcontent: \"\\e60d\";\n}\n.ti-shopping-cart-full:before {\n\tcontent: \"\\e60e\";\n}\n.ti-settings:before {\n\tcontent: \"\\e60f\";\n}\n.ti-search:before {\n\tcontent: \"\\e610\";\n}\n.ti-zoom-in:before {\n\tcontent: \"\\e611\";\n}\n.ti-zoom-out:before {\n\tcontent: \"\\e612\";\n}\n.ti-cut:before {\n\tcontent: \"\\e613\";\n}\n.ti-ruler:before {\n\tcontent: \"\\e614\";\n}\n.ti-ruler-pencil:before {\n\tcontent: \"\\e615\";\n}\n.ti-ruler-alt:before {\n\tcontent: \"\\e616\";\n}\n.ti-bookmark:before {\n\tcontent: \"\\e617\";\n}\n.ti-bookmark-alt:before {\n\tcontent: \"\\e618\";\n}\n.ti-reload:before {\n\tcontent: \"\\e619\";\n}\n.ti-plus:before {\n\tcontent: \"\\e61a\";\n}\n.ti-pin:before {\n\tcontent: \"\\e61b\";\n}\n.ti-pencil:before {\n\tcontent: \"\\e61c\";\n}\n.ti-pencil-alt:before {\n\tcontent: \"\\e61d\";\n}\n.ti-paint-roller:before {\n\tcontent: \"\\e61e\";\n}\n.ti-paint-bucket:before {\n\tcontent: \"\\e61f\";\n}\n.ti-na:before {\n\tcontent: \"\\e620\";\n}\n.ti-mobile:before {\n\tcontent: \"\\e621\";\n}\n.ti-minus:before {\n\tcontent: \"\\e622\";\n}\n.ti-medall:before {\n\tcontent: \"\\e623\";\n}\n.ti-medall-alt:before {\n\tcontent: \"\\e624\";\n}\n.ti-marker:before {\n\tcontent: \"\\e625\";\n}\n.ti-marker-alt:before {\n\tcontent: \"\\e626\";\n}\n.ti-arrow-up:before {\n\tcontent: \"\\e627\";\n}\n.ti-arrow-right:before {\n\tcontent: \"\\e628\";\n}\n.ti-arrow-left:before {\n\tcontent: \"\\e629\";\n}\n.ti-arrow-down:before {\n\tcontent: \"\\e62a\";\n}\n.ti-lock:before {\n\tcontent: \"\\e62b\";\n}\n.ti-location-arrow:before {\n\tcontent: \"\\e62c\";\n}\n.ti-link:before {\n\tcontent: \"\\e62d\";\n}\n.ti-layout:before {\n\tcontent: \"\\e62e\";\n}\n.ti-layers:before {\n\tcontent: \"\\e62f\";\n}\n.ti-layers-alt:before {\n\tcontent: \"\\e630\";\n}\n.ti-key:before {\n\tcontent: \"\\e631\";\n}\n.ti-import:before {\n\tcontent: \"\\e632\";\n}\n.ti-image:before {\n\tcontent: \"\\e633\";\n}\n.ti-heart:before {\n\tcontent: \"\\e634\";\n}\n.ti-heart-broken:before {\n\tcontent: \"\\e635\";\n}\n.ti-hand-stop:before {\n\tcontent: \"\\e636\";\n}\n.ti-hand-open:before {\n\tcontent: \"\\e637\";\n}\n.ti-hand-drag:before {\n\tcontent: \"\\e638\";\n}\n.ti-folder:before {\n\tcontent: \"\\e639\";\n}\n.ti-flag:before {\n\tcontent: \"\\e63a\";\n}\n.ti-flag-alt:before {\n\tcontent: \"\\e63b\";\n}\n.ti-flag-alt-2:before {\n\tcontent: \"\\e63c\";\n}\n.ti-eye:before {\n\tcontent: \"\\e63d\";\n}\n.ti-export:before {\n\tcontent: \"\\e63e\";\n}\n.ti-exchange-vertical:before {\n\tcontent: \"\\e63f\";\n}\n.ti-desktop:before {\n\tcontent: \"\\e640\";\n}\n.ti-cup:before {\n\tcontent: \"\\e641\";\n}\n.ti-crown:before {\n\tcontent: \"\\e642\";\n}\n.ti-comments:before {\n\tcontent: \"\\e643\";\n}\n.ti-comment:before {\n\tcontent: \"\\e644\";\n}\n.ti-comment-alt:before {\n\tcontent: \"\\e645\";\n}\n.ti-close:before {\n\tcontent: \"\\e646\";\n}\n.ti-clip:before {\n\tcontent: \"\\e647\";\n}\n.ti-angle-up:before {\n\tcontent: \"\\e648\";\n}\n.ti-angle-right:before {\n\tcontent: \"\\e649\";\n}\n.ti-angle-left:before {\n\tcontent: \"\\e64a\";\n}\n.ti-angle-down:before {\n\tcontent: \"\\e64b\";\n}\n.ti-check:before {\n\tcontent: \"\\e64c\";\n}\n.ti-check-box:before {\n\tcontent: \"\\e64d\";\n}\n.ti-camera:before {\n\tcontent: \"\\e64e\";\n}\n.ti-announcement:before {\n\tcontent: \"\\e64f\";\n}\n.ti-brush:before {\n\tcontent: \"\\e650\";\n}\n.ti-briefcase:before {\n\tcontent: \"\\e651\";\n}\n.ti-bolt:before {\n\tcontent: \"\\e652\";\n}\n.ti-bolt-alt:before {\n\tcontent: \"\\e653\";\n}\n.ti-blackboard:before {\n\tcontent: \"\\e654\";\n}\n.ti-bag:before {\n\tcontent: \"\\e655\";\n}\n.ti-move:before {\n\tcontent: \"\\e656\";\n}\n.ti-arrows-vertical:before {\n\tcontent: \"\\e657\";\n}\n.ti-arrows-horizontal:before {\n\tcontent: \"\\e658\";\n}\n.ti-fullscreen:before {\n\tcontent: \"\\e659\";\n}\n.ti-arrow-top-right:before {\n\tcontent: \"\\e65a\";\n}\n.ti-arrow-top-left:before {\n\tcontent: \"\\e65b\";\n}\n.ti-arrow-circle-up:before {\n\tcontent: \"\\e65c\";\n}\n.ti-arrow-circle-right:before {\n\tcontent: \"\\e65d\";\n}\n.ti-arrow-circle-left:before {\n\tcontent: \"\\e65e\";\n}\n.ti-arrow-circle-down:before {\n\tcontent: \"\\e65f\";\n}\n.ti-angle-double-up:before {\n\tcontent: \"\\e660\";\n}\n.ti-angle-double-right:before {\n\tcontent: \"\\e661\";\n}\n.ti-angle-double-left:before {\n\tcontent: \"\\e662\";\n}\n.ti-angle-double-down:before {\n\tcontent: \"\\e663\";\n}\n.ti-zip:before {\n\tcontent: \"\\e664\";\n}\n.ti-world:before {\n\tcontent: \"\\e665\";\n}\n.ti-wheelchair:before {\n\tcontent: \"\\e666\";\n}\n.ti-view-list:before {\n\tcontent: \"\\e667\";\n}\n.ti-view-list-alt:before {\n\tcontent: \"\\e668\";\n}\n.ti-view-grid:before {\n\tcontent: \"\\e669\";\n}\n.ti-uppercase:before {\n\tcontent: \"\\e66a\";\n}\n.ti-upload:before {\n\tcontent: \"\\e66b\";\n}\n.ti-underline:before {\n\tcontent: \"\\e66c\";\n}\n.ti-truck:before {\n\tcontent: \"\\e66d\";\n}\n.ti-timer:before {\n\tcontent: \"\\e66e\";\n}\n.ti-ticket:before {\n\tcontent: \"\\e66f\";\n}\n.ti-thumb-up:before {\n\tcontent: \"\\e670\";\n}\n.ti-thumb-down:before {\n\tcontent: \"\\e671\";\n}\n.ti-text:before {\n\tcontent: \"\\e672\";\n}\n.ti-stats-up:before {\n\tcontent: \"\\e673\";\n}\n.ti-stats-down:before {\n\tcontent: \"\\e674\";\n}\n.ti-split-v:before {\n\tcontent: \"\\e675\";\n}\n.ti-split-h:before {\n\tcontent: \"\\e676\";\n}\n.ti-smallcap:before {\n\tcontent: \"\\e677\";\n}\n.ti-shine:before {\n\tcontent: \"\\e678\";\n}\n.ti-shift-right:before {\n\tcontent: \"\\e679\";\n}\n.ti-shift-left:before {\n\tcontent: \"\\e67a\";\n}\n.ti-shield:before {\n\tcontent: \"\\e67b\";\n}\n.ti-notepad:before {\n\tcontent: \"\\e67c\";\n}\n.ti-server:before {\n\tcontent: \"\\e67d\";\n}\n.ti-quote-right:before {\n\tcontent: \"\\e67e\";\n}\n.ti-quote-left:before {\n\tcontent: \"\\e67f\";\n}\n.ti-pulse:before {\n\tcontent: \"\\e680\";\n}\n.ti-printer:before {\n\tcontent: \"\\e681\";\n}\n.ti-power-off:before {\n\tcontent: \"\\e682\";\n}\n.ti-plug:before {\n\tcontent: \"\\e683\";\n}\n.ti-pie-chart:before {\n\tcontent: \"\\e684\";\n}\n.ti-paragraph:before {\n\tcontent: \"\\e685\";\n}\n.ti-panel:before {\n\tcontent: \"\\e686\";\n}\n.ti-package:before {\n\tcontent: \"\\e687\";\n}\n.ti-music:before {\n\tcontent: \"\\e688\";\n}\n.ti-music-alt:before {\n\tcontent: \"\\e689\";\n}\n.ti-mouse:before {\n\tcontent: \"\\e68a\";\n}\n.ti-mouse-alt:before {\n\tcontent: \"\\e68b\";\n}\n.ti-money:before {\n\tcontent: \"\\e68c\";\n}\n.ti-microphone:before {\n\tcontent: \"\\e68d\";\n}\n.ti-menu:before {\n\tcontent: \"\\e68e\";\n}\n.ti-menu-alt:before {\n\tcontent: \"\\e68f\";\n}\n.ti-map:before {\n\tcontent: \"\\e690\";\n}\n.ti-map-alt:before {\n\tcontent: \"\\e691\";\n}\n.ti-loop:before {\n\tcontent: \"\\e692\";\n}\n.ti-location-pin:before {\n\tcontent: \"\\e693\";\n}\n.ti-list:before {\n\tcontent: \"\\e694\";\n}\n.ti-light-bulb:before {\n\tcontent: \"\\e695\";\n}\n.ti-Italic:before {\n\tcontent: \"\\e696\";\n}\n.ti-info:before {\n\tcontent: \"\\e697\";\n}\n.ti-infinite:before {\n\tcontent: \"\\e698\";\n}\n.ti-id-badge:before {\n\tcontent: \"\\e699\";\n}\n.ti-hummer:before {\n\tcontent: \"\\e69a\";\n}\n.ti-home:before {\n\tcontent: \"\\e69b\";\n}\n.ti-help:before {\n\tcontent: \"\\e69c\";\n}\n.ti-headphone:before {\n\tcontent: \"\\e69d\";\n}\n.ti-harddrives:before {\n\tcontent: \"\\e69e\";\n}\n.ti-harddrive:before {\n\tcontent: \"\\e69f\";\n}\n.ti-gift:before {\n\tcontent: \"\\e6a0\";\n}\n.ti-game:before {\n\tcontent: \"\\e6a1\";\n}\n.ti-filter:before {\n\tcontent: \"\\e6a2\";\n}\n.ti-files:before {\n\tcontent: \"\\e6a3\";\n}\n.ti-file:before {\n\tcontent: \"\\e6a4\";\n}\n.ti-eraser:before {\n\tcontent: \"\\e6a5\";\n}\n.ti-envelope:before {\n\tcontent: \"\\e6a6\";\n}\n.ti-download:before {\n\tcontent: \"\\e6a7\";\n}\n.ti-direction:before {\n\tcontent: \"\\e6a8\";\n}\n.ti-direction-alt:before {\n\tcontent: \"\\e6a9\";\n}\n.ti-dashboard:before {\n\tcontent: \"\\e6aa\";\n}\n.ti-control-stop:before {\n\tcontent: \"\\e6ab\";\n}\n.ti-control-shuffle:before {\n\tcontent: \"\\e6ac\";\n}\n.ti-control-play:before {\n\tcontent: \"\\e6ad\";\n}\n.ti-control-pause:before {\n\tcontent: \"\\e6ae\";\n}\n.ti-control-forward:before {\n\tcontent: \"\\e6af\";\n}\n.ti-control-backward:before {\n\tcontent: \"\\e6b0\";\n}\n.ti-cloud:before {\n\tcontent: \"\\e6b1\";\n}\n.ti-cloud-up:before {\n\tcontent: \"\\e6b2\";\n}\n.ti-cloud-down:before {\n\tcontent: \"\\e6b3\";\n}\n.ti-clipboard:before {\n\tcontent: \"\\e6b4\";\n}\n.ti-car:before {\n\tcontent: \"\\e6b5\";\n}\n.ti-calendar:before {\n\tcontent: \"\\e6b6\";\n}\n.ti-book:before {\n\tcontent: \"\\e6b7\";\n}\n.ti-bell:before {\n\tcontent: \"\\e6b8\";\n}\n.ti-basketball:before {\n\tcontent: \"\\e6b9\";\n}\n.ti-bar-chart:before {\n\tcontent: \"\\e6ba\";\n}\n.ti-bar-chart-alt:before {\n\tcontent: \"\\e6bb\";\n}\n.ti-back-right:before {\n\tcontent: \"\\e6bc\";\n}\n.ti-back-left:before {\n\tcontent: \"\\e6bd\";\n}\n.ti-arrows-corner:before {\n\tcontent: \"\\e6be\";\n}\n.ti-archive:before {\n\tcontent: \"\\e6bf\";\n}\n.ti-anchor:before {\n\tcontent: \"\\e6c0\";\n}\n.ti-align-right:before {\n\tcontent: \"\\e6c1\";\n}\n.ti-align-left:before {\n\tcontent: \"\\e6c2\";\n}\n.ti-align-justify:before {\n\tcontent: \"\\e6c3\";\n}\n.ti-align-center:before {\n\tcontent: \"\\e6c4\";\n}\n.ti-alert:before {\n\tcontent: \"\\e6c5\";\n}\n.ti-alarm-clock:before {\n\tcontent: \"\\e6c6\";\n}\n.ti-agenda:before {\n\tcontent: \"\\e6c7\";\n}\n.ti-write:before {\n\tcontent: \"\\e6c8\";\n}\n.ti-window:before {\n\tcontent: \"\\e6c9\";\n}\n.ti-widgetized:before {\n\tcontent: \"\\e6ca\";\n}\n.ti-widget:before {\n\tcontent: \"\\e6cb\";\n}\n.ti-widget-alt:before {\n\tcontent: \"\\e6cc\";\n}\n.ti-wallet:before {\n\tcontent: \"\\e6cd\";\n}\n.ti-video-clapper:before {\n\tcontent: \"\\e6ce\";\n}\n.ti-video-camera:before {\n\tcontent: \"\\e6cf\";\n}\n.ti-vector:before {\n\tcontent: \"\\e6d0\";\n}\n.ti-themify-logo:before {\n\tcontent: \"\\e6d1\";\n}\n.ti-themify-favicon:before {\n\tcontent: \"\\e6d2\";\n}\n.ti-themify-favicon-alt:before {\n\tcontent: \"\\e6d3\";\n}\n.ti-support:before {\n\tcontent: \"\\e6d4\";\n}\n.ti-stamp:before {\n\tcontent: \"\\e6d5\";\n}\n.ti-split-v-alt:before {\n\tcontent: \"\\e6d6\";\n}\n.ti-slice:before {\n\tcontent: \"\\e6d7\";\n}\n.ti-shortcode:before {\n\tcontent: \"\\e6d8\";\n}\n.ti-shift-right-alt:before {\n\tcontent: \"\\e6d9\";\n}\n.ti-shift-left-alt:before {\n\tcontent: \"\\e6da\";\n}\n.ti-ruler-alt-2:before {\n\tcontent: \"\\e6db\";\n}\n.ti-receipt:before {\n\tcontent: \"\\e6dc\";\n}\n.ti-pin2:before {\n\tcontent: \"\\e6dd\";\n}\n.ti-pin-alt:before {\n\tcontent: \"\\e6de\";\n}\n.ti-pencil-alt2:before {\n\tcontent: \"\\e6df\";\n}\n.ti-palette:before {\n\tcontent: \"\\e6e0\";\n}\n.ti-more:before {\n\tcontent: \"\\e6e1\";\n}\n.ti-more-alt:before {\n\tcontent: \"\\e6e2\";\n}\n.ti-microphone-alt:before {\n\tcontent: \"\\e6e3\";\n}\n.ti-magnet:before {\n\tcontent: \"\\e6e4\";\n}\n.ti-line-double:before {\n\tcontent: \"\\e6e5\";\n}\n.ti-line-dotted:before {\n\tcontent: \"\\e6e6\";\n}\n.ti-line-dashed:before {\n\tcontent: \"\\e6e7\";\n}\n.ti-layout-width-full:before {\n\tcontent: \"\\e6e8\";\n}\n.ti-layout-width-default:before {\n\tcontent: \"\\e6e9\";\n}\n.ti-layout-width-default-alt:before {\n\tcontent: \"\\e6ea\";\n}\n.ti-layout-tab:before {\n\tcontent: \"\\e6eb\";\n}\n.ti-layout-tab-window:before {\n\tcontent: \"\\e6ec\";\n}\n.ti-layout-tab-v:before {\n\tcontent: \"\\e6ed\";\n}\n.ti-layout-tab-min:before {\n\tcontent: \"\\e6ee\";\n}\n.ti-layout-slider:before {\n\tcontent: \"\\e6ef\";\n}\n.ti-layout-slider-alt:before {\n\tcontent: \"\\e6f0\";\n}\n.ti-layout-sidebar-right:before {\n\tcontent: \"\\e6f1\";\n}\n.ti-layout-sidebar-none:before {\n\tcontent: \"\\e6f2\";\n}\n.ti-layout-sidebar-left:before {\n\tcontent: \"\\e6f3\";\n}\n.ti-layout-placeholder:before {\n\tcontent: \"\\e6f4\";\n}\n.ti-layout-menu:before {\n\tcontent: \"\\e6f5\";\n}\n.ti-layout-menu-v:before {\n\tcontent: \"\\e6f6\";\n}\n.ti-layout-menu-separated:before {\n\tcontent: \"\\e6f7\";\n}\n.ti-layout-menu-full:before {\n\tcontent: \"\\e6f8\";\n}\n.ti-layout-media-right-alt:before {\n\tcontent: \"\\e6f9\";\n}\n.ti-layout-media-right:before {\n\tcontent: \"\\e6fa\";\n}\n.ti-layout-media-overlay:before {\n\tcontent: \"\\e6fb\";\n}\n.ti-layout-media-overlay-alt:before {\n\tcontent: \"\\e6fc\";\n}\n.ti-layout-media-overlay-alt-2:before {\n\tcontent: \"\\e6fd\";\n}\n.ti-layout-media-left-alt:before {\n\tcontent: \"\\e6fe\";\n}\n.ti-layout-media-left:before {\n\tcontent: \"\\e6ff\";\n}\n.ti-layout-media-center-alt:before {\n\tcontent: \"\\e700\";\n}\n.ti-layout-media-center:before {\n\tcontent: \"\\e701\";\n}\n.ti-layout-list-thumb:before {\n\tcontent: \"\\e702\";\n}\n.ti-layout-list-thumb-alt:before {\n\tcontent: \"\\e703\";\n}\n.ti-layout-list-post:before {\n\tcontent: \"\\e704\";\n}\n.ti-layout-list-large-image:before {\n\tcontent: \"\\e705\";\n}\n.ti-layout-line-solid:before {\n\tcontent: \"\\e706\";\n}\n.ti-layout-grid4:before {\n\tcontent: \"\\e707\";\n}\n.ti-layout-grid3:before {\n\tcontent: \"\\e708\";\n}\n.ti-layout-grid2:before {\n\tcontent: \"\\e709\";\n}\n.ti-layout-grid2-thumb:before {\n\tcontent: \"\\e70a\";\n}\n.ti-layout-cta-right:before {\n\tcontent: \"\\e70b\";\n}\n.ti-layout-cta-left:before {\n\tcontent: \"\\e70c\";\n}\n.ti-layout-cta-center:before {\n\tcontent: \"\\e70d\";\n}\n.ti-layout-cta-btn-right:before {\n\tcontent: \"\\e70e\";\n}\n.ti-layout-cta-btn-left:before {\n\tcontent: \"\\e70f\";\n}\n.ti-layout-column4:before {\n\tcontent: \"\\e710\";\n}\n.ti-layout-column3:before {\n\tcontent: \"\\e711\";\n}\n.ti-layout-column2:before {\n\tcontent: \"\\e712\";\n}\n.ti-layout-accordion-separated:before {\n\tcontent: \"\\e713\";\n}\n.ti-layout-accordion-merged:before {\n\tcontent: \"\\e714\";\n}\n.ti-layout-accordion-list:before {\n\tcontent: \"\\e715\";\n}\n.ti-ink-pen:before {\n\tcontent: \"\\e716\";\n}\n.ti-info-alt:before {\n\tcontent: \"\\e717\";\n}\n.ti-help-alt:before {\n\tcontent: \"\\e718\";\n}\n.ti-headphone-alt:before {\n\tcontent: \"\\e719\";\n}\n.ti-hand-point-up:before {\n\tcontent: \"\\e71a\";\n}\n.ti-hand-point-right:before {\n\tcontent: \"\\e71b\";\n}\n.ti-hand-point-left:before {\n\tcontent: \"\\e71c\";\n}\n.ti-hand-point-down:before {\n\tcontent: \"\\e71d\";\n}\n.ti-gallery:before {\n\tcontent: \"\\e71e\";\n}\n.ti-face-smile:before {\n\tcontent: \"\\e71f\";\n}\n.ti-face-sad:before {\n\tcontent: \"\\e720\";\n}\n.ti-credit-card:before {\n\tcontent: \"\\e721\";\n}\n.ti-control-skip-forward:before {\n\tcontent: \"\\e722\";\n}\n.ti-control-skip-backward:before {\n\tcontent: \"\\e723\";\n}\n.ti-control-record:before {\n\tcontent: \"\\e724\";\n}\n.ti-control-eject:before {\n\tcontent: \"\\e725\";\n}\n.ti-comments-smiley:before {\n\tcontent: \"\\e726\";\n}\n.ti-brush-alt:before {\n\tcontent: \"\\e727\";\n}\n.ti-youtube:before {\n\tcontent: \"\\e728\";\n}\n.ti-vimeo:before {\n\tcontent: \"\\e729\";\n}\n.ti-twitter:before {\n\tcontent: \"\\e72a\";\n}\n.ti-time:before {\n\tcontent: \"\\e72b\";\n}\n.ti-tumblr:before {\n\tcontent: \"\\e72c\";\n}\n.ti-skype:before {\n\tcontent: \"\\e72d\";\n}\n.ti-share:before {\n\tcontent: \"\\e72e\";\n}\n.ti-share-alt:before {\n\tcontent: \"\\e72f\";\n}\n.ti-rocket:before {\n\tcontent: \"\\e730\";\n}\n.ti-pinterest:before {\n\tcontent: \"\\e731\";\n}\n.ti-new-window:before {\n\tcontent: \"\\e732\";\n}\n.ti-microsoft:before {\n\tcontent: \"\\e733\";\n}\n.ti-list-ol:before {\n\tcontent: \"\\e734\";\n}\n.ti-linkedin:before {\n\tcontent: \"\\e735\";\n}\n.ti-layout-sidebar-2:before {\n\tcontent: \"\\e736\";\n}\n.ti-layout-grid4-alt:before {\n\tcontent: \"\\e737\";\n}\n.ti-layout-grid3-alt:before {\n\tcontent: \"\\e738\";\n}\n.ti-layout-grid2-alt:before {\n\tcontent: \"\\e739\";\n}\n.ti-layout-column4-alt:before {\n\tcontent: \"\\e73a\";\n}\n.ti-layout-column3-alt:before {\n\tcontent: \"\\e73b\";\n}\n.ti-layout-column2-alt:before {\n\tcontent: \"\\e73c\";\n}\n.ti-instagram:before {\n\tcontent: \"\\e73d\";\n}\n.ti-google:before {\n\tcontent: \"\\e73e\";\n}\n.ti-github:before {\n\tcontent: \"\\e73f\";\n}\n.ti-flickr:before {\n\tcontent: \"\\e740\";\n}\n.ti-facebook:before {\n\tcontent: \"\\e741\";\n}\n.ti-dropbox:before {\n\tcontent: \"\\e742\";\n}\n.ti-dribbble:before {\n\tcontent: \"\\e743\";\n}\n.ti-apple:before {\n\tcontent: \"\\e744\";\n}\n.ti-android:before {\n\tcontent: \"\\e745\";\n}\n.ti-save:before {\n\tcontent: \"\\e746\";\n}\n.ti-save-alt:before {\n\tcontent: \"\\e747\";\n}\n.ti-yahoo:before {\n\tcontent: \"\\e748\";\n}\n.ti-wordpress:before {\n\tcontent: \"\\e749\";\n}\n.ti-vimeo-alt:before {\n\tcontent: \"\\e74a\";\n}\n.ti-twitter-alt:before {\n\tcontent: \"\\e74b\";\n}\n.ti-tumblr-alt:before {\n\tcontent: \"\\e74c\";\n}\n.ti-trello:before {\n\tcontent: \"\\e74d\";\n}\n.ti-stack-overflow:before {\n\tcontent: \"\\e74e\";\n}\n.ti-soundcloud:before {\n\tcontent: \"\\e74f\";\n}\n.ti-sharethis:before {\n\tcontent: \"\\e750\";\n}\n.ti-sharethis-alt:before {\n\tcontent: \"\\e751\";\n}\n.ti-reddit:before {\n\tcontent: \"\\e752\";\n}\n.ti-pinterest-alt:before {\n\tcontent: \"\\e753\";\n}\n.ti-microsoft-alt:before {\n\tcontent: \"\\e754\";\n}\n.ti-linux:before {\n\tcontent: \"\\e755\";\n}\n.ti-jsfiddle:before {\n\tcontent: \"\\e756\";\n}\n.ti-joomla:before {\n\tcontent: \"\\e757\";\n}\n.ti-html5:before {\n\tcontent: \"\\e758\";\n}\n.ti-flickr-alt:before {\n\tcontent: \"\\e759\";\n}\n.ti-email:before {\n\tcontent: \"\\e75a\";\n}\n.ti-drupal:before {\n\tcontent: \"\\e75b\";\n}\n.ti-dropbox-alt:before {\n\tcontent: \"\\e75c\";\n}\n.ti-css3:before {\n\tcontent: \"\\e75d\";\n}\n.ti-rss:before {\n\tcontent: \"\\e75e\";\n}\n.ti-rss-alt:before {\n\tcontent: \"\\e75f\";\n}\n"
  },
  {
    "path": "src/basic-table.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <title>Basic Table</title>\n    <style>\n      #loader {\n        transition: all 0.3s ease-in-out;\n        opacity: 1;\n        visibility: visible;\n        position: fixed;\n        height: 100vh;\n        width: 100%;\n        background: #fff;\n        z-index: 90000;\n      }\n\n      #loader.fadeOut {\n        opacity: 0;\n        visibility: hidden;\n      }\n\n\n\n      .spinner {\n        width: 40px;\n        height: 40px;\n        position: absolute;\n        top: calc(50% - 20px);\n        left: calc(50% - 20px);\n        background-color: #333;\n        border-radius: 100%;\n        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;\n        animation: sk-scaleout 1.0s infinite ease-in-out;\n      }\n\n      @-webkit-keyframes sk-scaleout {\n        0% { -webkit-transform: scale(0) }\n        100% {\n          -webkit-transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n\n      @keyframes sk-scaleout {\n        0% {\n          -webkit-transform: scale(0);\n          transform: scale(0);\n        } 100% {\n          -webkit-transform: scale(1.0);\n          transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n    </style>\n  </head>\n  <body class=\"app\">\n    <!-- @TOC -->\n    <!-- =================================================== -->\n    <!--\n      + @Page Loader\n      + @App Content\n          - #Left Sidebar\n              > $Sidebar Header\n              > $Sidebar Menu\n\n          - #Main\n              > $Topbar\n              > $App Screen Content\n    -->\n\n    <!-- @Page Loader -->\n    <!-- =================================================== -->\n    <div id='loader'>\n      <div class=\"spinner\"></div>\n    </div>\n\n    <script>\n      window.addEventListener('load', function load() {\n        const loader = document.getElementById('loader');\n        setTimeout(function() {\n          loader.classList.add('fadeOut');\n        }, 300);\n      });\n    </script>\n\n    <!-- @App Content -->\n    <!-- =================================================== -->\n    <div>\n      <!-- #Left Sidebar ==================== -->\n      <div class=\"sidebar\">\n        <div class=\"sidebar-inner\">\n          <!-- ### $Sidebar Header ### -->\n          <div class=\"sidebar-logo\">\n            <div class=\"peers ai-c fxw-nw\">\n              <div class=\"peer peer-greed\">\n                <a class=\"sidebar-link td-n\" href=\"index.html\">\n                  <div class=\"peers ai-c fxw-nw\">\n                    <div class=\"peer\">\n                      <div class=\"logo\">\n                        <img src=\"assets/static/images/logo.svg\" alt=\"\">\n                      </div>\n                    </div>\n                    <div class=\"peer peer-greed\">\n                      <h5 class=\"lh-1 mB-0 logo-text\">Adminator</h5>\n                    </div>\n                  </div>\n                </a>\n              </div>\n              <div class=\"peer\">\n                <div class=\"mobile-toggle sidebar-toggle\">\n                  <a href=\"\" class=\"td-n\">\n                    <i class=\"ti-arrow-circle-left\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- ### $Sidebar Menu ### -->\n          <ul class=\"sidebar-menu scrollable pos-r\">\n            <li class=\"nav-item mT-30\">\n              <a class=\"sidebar-link\" href=\"index.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-home\"></i>\n                </span>\n                <span class=\"title\">Dashboard</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"sidebar-link\" href=\"https://dashboardpack.com/?utm_source=adminator&utm_medium=sidebar&utm_campaign=go_pro\" target=\"_blank\" rel=\"noopener\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-purple-500 ti-crown\"></i>\n                </span>\n                <span class=\"title\">Go Pro <span class=\"badge bg-primary ms-2\">PRO</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"email.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-brown-500 ti-email\"></i>\n                </span>\n                <span class=\"title\">Email</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"compose.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-share\"></i>\n                </span>\n                <span class=\"title\">Compose</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"calendar.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-orange-500 ti-calendar\"></i>\n                </span>\n                <span class=\"title\">Calendar <span class=\"badge bg-danger ms-2\">HOT</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"chat.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-purple-500 ti-comment-alt\"></i>\n                </span>\n                <span class=\"title\">Chat</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"charts.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-indigo-500 ti-bar-chart\"></i>\n                </span>\n                <span class=\"title\">Charts <span class=\"badge bg-success ms-2\">NEW</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"forms.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-light-blue-500 ti-pencil\"></i>\n                </span>\n                <span class=\"title\">Forms</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"sidebar-link\" href=\"ui.html\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-pink-500 ti-palette\"></i>\n                  </span>\n                <span class=\"title\">UI Elements</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-orange-500 ti-layout-list-thumb\"></i>\n                </span>\n                <span class=\"title\">Tables</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"basic-table.html\">Basic Table</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"datatable.html\">Data Table <span class=\"badge bg-success ms-1\">NEW</span></a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-purple-500 ti-map\"></i>\n                  </span>\n                <span class=\"title\">Maps</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a href=\"google-maps.html\">Google Map</a>\n                </li>\n                <li>\n                  <a href=\"vector-maps.html\">Vector Map</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-red-500 ti-files\"></i>\n                  </span>\n                <span class=\"title\">Pages</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                  <li>\n                      <a class='sidebar-link' href=\"blank.html\">Blank</a>\n                    </li>\n                <li>\n                  <a class='sidebar-link' href=\"404.html\">404</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"500.html\">500</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signin.html\">Sign In</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signup.html\">Sign Up</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-teal-500 ti-view-list-alt\"></i>\n                </span>\n                <span class=\"title\">Multiple Levels</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                  </a>\n                </li>\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                    <span class=\"arrow\">\n                      <i class=\"ti-angle-right\"></i>\n                    </span>\n                  </a>\n                  <ul class=\"dropdown-menu\">\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                  </ul>\n                </li>\n              </ul>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <!-- #Main ============================ -->\n      <div class=\"page-container\">\n        <!-- ### $Topbar ### -->\n        <div class=\"header navbar\">\n          <div class=\"header-container\">\n            <ul class=\"nav-left\">\n              <li>\n                <a id='sidebar-toggle' class=\"sidebar-toggle\" href=\"javascript:void(0);\">\n                  <i class=\"ti-menu\"></i>\n                </a>\n              </li>\n              <li class=\"search-box\">\n                <a class=\"search-toggle no-pdd-right\" href=\"javascript:void(0);\">\n                  <i class=\"search-icon ti-search pdd-right-10\"></i>\n                  <i class=\"search-icon-close ti-close pdd-right-10\"></i>\n                </a>\n              </li>\n              <li class=\"search-input\">\n                <input class=\"form-control\" type=\"text\" placeholder=\"Search...\">\n              </li>\n            </ul>\n            <ul class=\"nav-right\">\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-red\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-bell\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-bell pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Notifications</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">John Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">post</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">5 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Moo Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">cover image</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">7 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Lee Doe</span>\n                              <span class=\"c-grey-600\">commented on your <span class=\"text-dark\">video</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">10 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Notifications <i class=\"ti-angle-right fsz-xs mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-blue\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-email\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-email pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Emails</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">John Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">5 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Moo Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">15 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Lee Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">25 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"email.html\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Email <i class=\"fs-xs ti-angle-right ms-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"dropdown\">\n                <a href=\"\" class=\"dropdown-toggle no-after peers fxw-nw ai-c lh-1\" data-bs-toggle=\"dropdown\">\n                  <div class=\"peer mR-10\">\n                    <img class=\"w-2r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/10.jpg\" alt=\"\">\n                  </div>\n                  <div class=\"peer\">\n                    <span class=\"fsz-sm c-grey-900\">John Doe</span>\n                  </div>\n                </a>\n                <ul class=\"dropdown-menu fsz-sm\">\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-settings mR-10\"></i>\n                      <span>Setting</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-user mR-10\"></i>\n                      <span>Profile</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"email.html\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-email mR-10\"></i>\n                      <span>Messages</span>\n                    </a>\n                  </li>\n                  <li role=\"separator\" class=\"divider\"></li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-power-off mR-10\"></i>\n                      <span>Logout</span>\n                    </a>\n                  </li>\n                </ul>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <!-- ### $App Screen Content ### -->\n        <main class='main-content bgc-grey-100'>\n          <div id='mainContent'>\n            <div class=\"container-fluid\">\n              <h4 class=\"c-grey-900 mT-10 mB-30\">Basic Tables</h4>\n              <div class=\"row\">\n                <div class=\"col-md-12\">\n                  <div class=\"bgc-white bd bdrs-3 p-20 mB-20\">\n                    <h4 class=\"c-grey-900 mB-20\">Simple Table</h4>\n                    <p>Using the most basic table markup, here's how <code class=\"highlighter-rouge\">.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 5</strong>, meaning any nested tables will be styled in the same manner as the parent.</p>\n                    <table class=\"table\">\n                      <thead>\n                        <tr>\n                          <th scope=\"col\">#</th>\n                          <th scope=\"col\">First Name</th>\n                          <th scope=\"col\">Last Name</th>\n                          <th scope=\"col\">Username</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        <tr>\n                          <th scope=\"row\">1</th>\n                          <td>Mark</td>\n                          <td>Otto</td>\n                          <td>@mdo</td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">2</th>\n                          <td>Jacob</td>\n                          <td>Thornton</td>\n                          <td>@fat</td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">3</th>\n                          <td>Larry</td>\n                          <td>the Bird</td>\n                          <td>@twitter</td>\n                        </tr>\n                      </tbody>\n                    </table>\n                  </div>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-md-12\">\n                  <div class=\"bgc-white bd bdrs-3 p-20 mB-20\">\n                    <h4 class=\"c-grey-900 mB-20\">Table head options</h4>\n                    <p>Similar to tables and dark tables, use the modifier classes <code class=\"highlighter-rouge\">.table-light</code> or <code class=\"highlighter-rouge\">.table-dark</code> to make <code class=\"highlighter-rouge\">&lt;thead&gt;</code>s appear light or dark gray.</p>\n                    <table class=\"table\">\n                      <thead class=\"table-dark\">\n                        <tr>\n                          <th scope=\"col\">#</th>\n                          <th scope=\"col\">First Name</th>\n                          <th scope=\"col\">Last Name</th>\n                          <th scope=\"col\">Username</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        <tr>\n                          <th scope=\"row\">1</th>\n                          <td>Mark</td>\n                          <td>Otto</td>\n                          <td>@mdo</td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">2</th>\n                          <td>Jacob</td>\n                          <td>Thornton</td>\n                          <td>@fat</td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">3</th>\n                          <td>Larry</td>\n                          <td>the Bird</td>\n                          <td>@twitter</td>\n                        </tr>\n                      </tbody>\n                    </table>\n                  </div>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-md-12\">\n                  <div class=\"bgc-white bd bdrs-3 p-20 mB-20\">\n                    <h4 class=\"c-grey-900 mB-20\">Striped rows</h4>\n                    <p>Use <code class=\"highlighter-rouge\">.table-striped</code> to add zebra-striping to any table row within the <code class=\"highlighter-rouge\">&lt;tbody&gt;</code>.</p>\n                    <table class=\"table table-striped\">\n                      <thead>\n                        <tr>\n                          <th scope=\"col\">#</th>\n                          <th scope=\"col\">First Name</th>\n                          <th scope=\"col\">Last Name</th>\n                          <th scope=\"col\">Username</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        <tr>\n                          <th scope=\"row\">1</th>\n                          <td>Mark</td>\n                          <td>Otto</td>\n                          <td>@mdo</td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">2</th>\n                          <td>Jacob</td>\n                          <td>Thornton</td>\n                          <td>@fat</td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">3</th>\n                          <td>Larry</td>\n                          <td>the Bird</td>\n                          <td>@twitter</td>\n                        </tr>\n                      </tbody>\n                    </table>\n                  </div>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-md-12\">\n                  <div class=\"bgc-white bd bdrs-3 p-20 mB-20\">\n                    <h4 class=\"c-grey-900 mB-20\">Bordered table</h4>\n                    <p>Add <code class=\"highlighter-rouge\">.table-bordered</code> for borders on all sides of the table and cells.</p>\n                    <table class=\"table table-bordered\">\n                      <thead>\n                        <tr>\n                          <th scope=\"col\">#</th>\n                          <th scope=\"col\">First Name</th>\n                          <th scope=\"col\">Last Name</th>\n                          <th scope=\"col\">Username</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        <tr>\n                          <th scope=\"row\">1</th>\n                          <td>Mark</td>\n                          <td>Otto</td>\n                          <td>@mdo</td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">2</th>\n                          <td>Mark</td>\n                          <td>Otto</td>\n                          <td>@TwBootstrap</td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">3</th>\n                          <td>Jacob</td>\n                          <td>Thornton</td>\n                          <td>@fat</td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">4</th>\n                          <td colspan=\"2\">Larry the Bird</td>\n                          <td>@twitter</td>\n                        </tr>\n                      </tbody>\n                    </table>\n                  </div>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-md-12\">\n                  <div class=\"bgc-white bd bdrs-3 p-20\">\n                    <h4 class=\"c-grey-900 mB-20\">Hoverable rows</h4>\n                    <p>Add <code class=\"highlighter-rouge\">.table-hover</code> to enable a hover state on table rows within a <code class=\"highlighter-rouge\">&lt;tbody&gt;</code>.</p>\n                    <table class=\"table table-hover\">\n                      <thead>\n                        <tr>\n                          <th scope=\"col\">#</th>\n                          <th scope=\"col\">First Name</th>\n                          <th scope=\"col\">Last Name</th>\n                          <th scope=\"col\">Username</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        <tr>\n                          <th scope=\"row\">1</th>\n                          <td>Mark</td>\n                          <td>Otto</td>\n                          <td>@mdo</td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">2</th>\n                          <td>Jacob</td>\n                          <td>Thornton</td>\n                          <td>@fat</td>\n                        </tr>\n                        <tr>\n                          <th scope=\"row\">3</th>\n                          <td colspan=\"2\">Larry the Bird</td>\n                          <td>@twitter</td>\n                        </tr>\n                      </tbody>\n                    </table>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </main>\n\n        <!-- ### $App Screen Footer ### -->\n        <footer class=\"bdT ta-c p-30 lh-0 fsz-sm c-grey-600\">\n          <span>Copyright © 2026 Designed by <a href=\"https://colorlib.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" title=\"Colorlib\">Colorlib</a>. All rights reserved.</span>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "src/blank.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <title>Blank</title>\n    <style>\n      #loader {\n        transition: all 0.3s ease-in-out;\n        opacity: 1;\n        visibility: visible;\n        position: fixed;\n        height: 100vh;\n        width: 100%;\n        background: #fff;\n        z-index: 90000;\n      }\n\n      #loader.fadeOut {\n        opacity: 0;\n        visibility: hidden;\n      }\n\n\n\n      .spinner {\n        width: 40px;\n        height: 40px;\n        position: absolute;\n        top: calc(50% - 20px);\n        left: calc(50% - 20px);\n        background-color: #333;\n        border-radius: 100%;\n        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;\n        animation: sk-scaleout 1.0s infinite ease-in-out;\n      }\n\n      @-webkit-keyframes sk-scaleout {\n        0% { -webkit-transform: scale(0) }\n        100% {\n          -webkit-transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n\n      @keyframes sk-scaleout {\n        0% {\n          -webkit-transform: scale(0);\n          transform: scale(0);\n        } 100% {\n          -webkit-transform: scale(1.0);\n          transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n    </style>\n  </head>\n  <body class=\"app\">\n    <!-- @TOC -->\n    <!-- =================================================== -->\n    <!--\n      + @Page Loader\n      + @App Content\n          - #Left Sidebar\n              > $Sidebar Header\n              > $Sidebar Menu\n\n          - #Main\n              > $Topbar\n              > $App Screen Content\n    -->\n\n    <!-- @Page Loader -->\n    <!-- =================================================== -->\n    <div id='loader'>\n      <div class=\"spinner\"></div>\n    </div>\n\n    <script>\n      window.addEventListener('load', function load() {\n        const loader = document.getElementById('loader');\n        setTimeout(function() {\n            loader.classList.add('fadeOut');\n        }, 300);\n      });\n    </script>\n\n    <!-- @App Content -->\n    <!-- =================================================== -->\n    <div>\n      <!-- #Left Sidebar ==================== -->\n      <div class=\"sidebar\">\n        <div class=\"sidebar-inner\">\n          <!-- ### $Sidebar Header ### -->\n          <div class=\"sidebar-logo\">\n            <div class=\"peers ai-c fxw-nw\">\n              <div class=\"peer peer-greed\">\n                <a class=\"sidebar-link td-n\" href=\"index.html\">\n                  <div class=\"peers ai-c fxw-nw\">\n                    <div class=\"peer\">\n                      <div class=\"logo\">\n                        <img src=\"assets/static/images/logo.svg\" alt=\"\">\n                      </div>\n                    </div>\n                    <div class=\"peer peer-greed\">\n                      <h5 class=\"lh-1 mB-0 logo-text\">Adminator</h5>\n                    </div>\n                  </div>\n                </a>\n              </div>\n              <div class=\"peer\">\n                <div class=\"mobile-toggle sidebar-toggle\">\n                  <a href=\"\" class=\"td-n\">\n                    <i class=\"ti-arrow-circle-left\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- ### $Sidebar Menu ### -->\n          <ul class=\"sidebar-menu scrollable pos-r\">\n            <li class=\"nav-item mT-30\">\n              <a class=\"sidebar-link\" href=\"index.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-home\"></i>\n                </span>\n                <span class=\"title\">Dashboard</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"sidebar-link\" href=\"https://dashboardpack.com/?utm_source=adminator&utm_medium=sidebar&utm_campaign=go_pro\" target=\"_blank\" rel=\"noopener\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-purple-500 ti-crown\"></i>\n                </span>\n                <span class=\"title\">Go Pro <span class=\"badge bg-primary ms-2\">PRO</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"email.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-brown-500 ti-email\"></i>\n                </span>\n                <span class=\"title\">Email</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"compose.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-share\"></i>\n                </span>\n                <span class=\"title\">Compose</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"calendar.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-orange-500 ti-calendar\"></i>\n                </span>\n                <span class=\"title\">Calendar <span class=\"badge bg-danger ms-2\">HOT</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"chat.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-purple-500 ti-comment-alt\"></i>\n                </span>\n                <span class=\"title\">Chat</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"charts.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-indigo-500 ti-bar-chart\"></i>\n                </span>\n                <span class=\"title\">Charts <span class=\"badge bg-success ms-2\">NEW</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"forms.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-light-blue-500 ti-pencil\"></i>\n                </span>\n                <span class=\"title\">Forms</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"sidebar-link\" href=\"ui.html\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-pink-500 ti-palette\"></i>\n                  </span>\n                <span class=\"title\">UI Elements</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-orange-500 ti-layout-list-thumb\"></i>\n                </span>\n                <span class=\"title\">Tables</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"basic-table.html\">Basic Table</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"datatable.html\">Data Table <span class=\"badge bg-success ms-1\">NEW</span></a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-purple-500 ti-map\"></i>\n                  </span>\n                <span class=\"title\">Maps</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a href=\"google-maps.html\">Google Map</a>\n                </li>\n                <li>\n                  <a href=\"vector-maps.html\">Vector Map</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-red-500 ti-files\"></i>\n                  </span>\n                <span class=\"title\">Pages</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">                                \n                <li>\n                  <a class='sidebar-link' href=\"blank.html\">Blank</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"404.html\">404</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"500.html\">500</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signin.html\">Sign In</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signup.html\">Sign Up</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-teal-500 ti-view-list-alt\"></i>\n                </span>\n                <span class=\"title\">Multiple Levels</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                  </a>\n                </li>\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                    <span class=\"arrow\">\n                      <i class=\"ti-angle-right\"></i>\n                    </span>\n                  </a>\n                  <ul class=\"dropdown-menu\">\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                  </ul>\n                </li>\n              </ul>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <!-- #Main ============================ -->\n      <div class=\"page-container\">\n        <!-- ### $Topbar ### -->\n        <div class=\"header navbar\">\n          <div class=\"header-container\">\n            <ul class=\"nav-left\">\n              <li>\n                <a id='sidebar-toggle' class=\"sidebar-toggle\" href=\"javascript:void(0);\">\n                  <i class=\"ti-menu\"></i>\n                </a>\n              </li>\n              <li class=\"search-box\">\n                <a class=\"search-toggle no-pdd-right\" href=\"javascript:void(0);\">\n                  <i class=\"search-icon ti-search pdd-right-10\"></i>\n                  <i class=\"search-icon-close ti-close pdd-right-10\"></i>\n                </a>\n              </li>\n              <li class=\"search-input\">\n                <input class=\"form-control\" type=\"text\" placeholder=\"Search...\">\n              </li>\n            </ul>\n            <ul class=\"nav-right\">\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-red\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" id=\"dropdownMenuLink\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\n                  <i class=\"ti-bell\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuLink\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-bell pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Notifications</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">John Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">post</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">5 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Moo Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">cover image</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">7 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Lee Doe</span>\n                              <span class=\"c-grey-600\">commented on your <span class=\"text-dark\">video</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">10 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Notifications <i class=\"ti-angle-right fsz-xs mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-blue\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" id=\"dropdownMenuLink\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\n                  <i class=\"ti-email\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuLink\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-email pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Emails</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">John Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">5 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Moo Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">15 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Lee Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">25 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"email.html\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Email <i class=\"fs-xs ti-angle-right mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"dropdown\">\n                <a href=\"\" class=\"dropdown-toggle no-after peers fxw-nw ai-c lh-1\" id=\"dropdownMenuLink\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\n                  <div class=\"peer mR-10\">\n                    <img class=\"w-2r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/10.jpg\" alt=\"\">\n                  </div>\n                  <div class=\"peer\">\n                    <span class=\"fsz-sm c-grey-900\">John Doe</span>\n                  </div>\n                </a>\n                <ul class=\"dropdown-menu fsz-sm\" aria-labelledby=\"dropdownMenuLink\">\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-settings mR-10\"></i>\n                      <span>Setting</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-user mR-10\"></i>\n                      <span>Profile</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"email.html\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-email mR-10\"></i>\n                      <span>Messages</span>\n                    </a>\n                  </li>\n                  <li role=\"separator\" class=\"divider\"></li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-power-off mR-10\"></i>\n                      <span>Logout</span>\n                    </a>\n                  </li>\n                </ul>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <!-- ### $App Screen Content ### -->\n        <main class='main-content bgc-grey-100'>\n          <div id='mainContent'>\n            <div class=\"full-container\">\n\n\n            </div>\n          </div>\n        </main>\n\n        <!-- ### $App Screen Footer ### -->\n        <footer class=\"bdT ta-c p-30 lh-0 fsz-sm c-grey-600\">\n          <span>Copyright © 2026 Designed by <a href=\"https://colorlib.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" title=\"Colorlib\">Colorlib</a>. All rights reserved.</span>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "src/buttons.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <title></title>\n  </head>\n  <body class=\"app\">\n    <!-- @TOC -->\n    <!-- =================================================== -->\n    <!--\n      + @Page Loader\n      + @App Content\n          - #Left Sidebar\n              > $Sidebar Header\n              > $Sidebar Menu\n\n          - #Main\n              > $Topbar\n              > $App Screen Content\n    -->\n\n    <!-- @Page Loader -->\n    <!-- =================================================== -->\n    <div id='loader' class=\"pos-f h-100vh w-100 bgc-deep-purple-50 z-9\">\n      <div class=\"spinner\"></div>\n    </div>\n\n    <script>\n      window.addEventListener('load', function load() {\n        const loader = document.getElementById('loader');\n        setTimeout(function() {\n          loader.classList.add('fadeOut');\n        }, 3000);\n      });\n    </script>\n\n    <!-- @App Content -->\n    <!-- =================================================== -->\n    <div>\n      <!-- #Left Sidebar ==================== -->\n      <div class=\"sidebar\">\n        <div class=\"sidebar-inner\">\n          <!-- ### $Sidebar Header ### -->\n          <div class=\"sidebar-logo\">\n            <div class=\"peers ai-c fxw-nw\">\n              <div class=\"peer peer-greed\">\n                <a class=\"sidebar-link td-n\" href=\"index.html\">\n                  <div class=\"peers ai-c fxw-nw\">\n                    <div class=\"peer\">\n                      <div class=\"logo\">\n                        <img src=\"assets/static/images/logo.svg\" alt=\"\">\n                      </div>\n                    </div>\n                    <div class=\"peer peer-greed\">\n                      <h5 class=\"lh-1 mB-0 logo-text\">Adminator</h5>\n                    </div>\n                  </div>\n                </a>\n              </div>\n              <div class=\"peer\">\n                <div class=\"mobile-toggle sidebar-toggle\">\n                  <a href=\"\" class=\"td-n\">\n                    <i class=\"ti-arrow-circle-left\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- ### $Sidebar Menu ### -->\n          <ul class=\"sidebar-menu scrollable pos-r\">\n            <li class=\"nav-item mT-30\">\n              <a class=\"sidebar-link\" href=\"index.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-home\"></i>\n                </span>\n                <span class=\"title\">Dashboard</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"sidebar-link\" href=\"https://dashboardpack.com/?utm_source=adminator&utm_medium=sidebar&utm_campaign=go_pro\" target=\"_blank\" rel=\"noopener\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-purple-500 ti-crown\"></i>\n                </span>\n                <span class=\"title\">Go Pro <span class=\"badge bg-primary ms-2\">PRO</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"email.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-brown-500 ti-email\"></i>\n                </span>\n                <span class=\"title\">Email</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"compose.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-share\"></i>\n                </span>\n                <span class=\"title\">Compose</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"calendar.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-orange-500 ti-calendar\"></i>\n                </span>\n                <span class=\"title\">Calendar <span class=\"badge bg-danger ms-2\">HOT</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"chat.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-purple-500 ti-comment-alt\"></i>\n                </span>\n                <span class=\"title\">Chat</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"charts.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-indigo-500 ti-bar-chart\"></i>\n                </span>\n                <span class=\"title\">Charts <span class=\"badge bg-success ms-2\">NEW</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"forms.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-light-blue-500 ti-pencil\"></i>\n                </span>\n                <span class=\"title\">Forms</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"sidebar-link\" href=\"ui.html\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-pink-500 ti-palette\"></i>\n                  </span>\n                <span class=\"title\">UI Elements</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-orange-500 ti-layout-list-thumb\"></i>\n                </span>\n                <span class=\"title\">Tables</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"basic-table.html\">Basic Table</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"datatable.html\">Data Table <span class=\"badge bg-success ms-1\">NEW</span></a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-purple-500 ti-map\"></i>\n                  </span>\n                <span class=\"title\">Maps</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a href=\"google-maps.html\">Google Map</a>\n                </li>\n                <li>\n                  <a href=\"vector-maps.html\">Vector Map</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-red-500 ti-files\"></i>\n                  </span>\n                <span class=\"title\">Pages</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"blank.html\">Blank</a>\n                </li>                \n                <li>\n                  <a class='sidebar-link' href=\"404.html\">404</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"500.html\">500</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signin.html\">Sign In</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signup.html\">Sign Up</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-teal-500 ti-view-list-alt\"></i>\n                </span>\n                <span class=\"title\">Multiple Levels</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                  </a>\n                </li>\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                    <span class=\"arrow\">\n                      <i class=\"ti-angle-right\"></i>\n                    </span>\n                  </a>\n                  <ul class=\"dropdown-menu\">\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                  </ul>\n                </li>\n              </ul>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <!-- #Main ============================ -->\n      <div class=\"page-container\">\n        <!-- ### $Topbar ### -->\n        <div class=\"header navbar\">\n          <div class=\"header-container\">\n            <ul class=\"nav-left\">\n              <li>\n                <a id='sidebar-toggle' class=\"sidebar-toggle\" href=\"javascript:void(0);\">\n                  <i class=\"ti-menu\"></i>\n                </a>\n              </li>\n              <li class=\"search-box\">\n                <a class=\"search-toggle no-pdd-right\" href=\"javascript:void(0);\">\n                  <i class=\"search-icon ti-search pdd-right-10\"></i>\n                  <i class=\"search-icon-close ti-close pdd-right-10\"></i>\n                </a>\n              </li>\n              <li class=\"search-input\">\n                <input class=\"form-control\" type=\"text\" placeholder=\"Search...\">\n              </li>\n            </ul>\n            <ul class=\"nav-right\">\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-red\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-bell\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-bell pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Notifications</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">John Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">post</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">5 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Moo Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">cover image</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">7 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Lee Doe</span>\n                              <span class=\"c-grey-600\">commented on your <span class=\"text-dark\">video</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">10 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Notifications <i class=\"ti-angle-right fsz-xs mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-blue\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-email\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-email pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Emails</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">John Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">5 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Moo Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">15 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Lee Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">25 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"email.html\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Email <i class=\"fs-xs ti-angle-right mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"dropdown\">\n                <a href=\"\" class=\"dropdown-toggle no-after peers fxw-nw ai-c lh-1\" data-bs-toggle=\"dropdown\">\n                  <div class=\"peer me-10\">\n                    <img class=\"w-2r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/10.jpg\" alt=\"\">\n                  </div>\n                  <div class=\"peer\">\n                    <span class=\"fsz-sm c-grey-900\">John Doe</span>\n                  </div>\n                </a>\n                <ul class=\"dropdown-menu fsz-sm\">\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-settings mR-10\"></i>\n                      <span>Setting</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-user mR-10\"></i>\n                      <span>Profile</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"email.html\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-email mR-10\"></i>\n                      <span>Messages</span>\n                    </a>\n                  </li>\n                  <li role=\"separator\" class=\"divider\"></li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-power-off mR-10\"></i>\n                      <span>Logout</span>\n                    </a>\n                  </li>\n                </ul>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <!-- ### $App Screen Content ### -->\n        <main class='main-content bgc-grey-100'>\n          <div id='mainContent'></div>\n        </main>\n\n        <!-- ### $App Screen Footer ### -->\n        <footer class=\"bdT ta-c p-30 lh-0 fsz-sm c-grey-600\">\n          <span>Copyright © 2026 Designed by <a href=\"https://colorlib.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" title=\"Colorlib\">Colorlib</a>. All rights reserved.</span>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "src/calendar.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <title>Calendar</title>\n    <style>\n      #loader {\n        transition: all 0.3s ease-in-out;\n        opacity: 1;\n        visibility: visible;\n        position: fixed;\n        height: 100vh;\n        width: 100%;\n        background: #fff;\n        z-index: 90000;\n      }\n\n      #loader.fadeOut {\n        opacity: 0;\n        visibility: hidden;\n      }\n\n\n\n      .spinner {\n        width: 40px;\n        height: 40px;\n        position: absolute;\n        top: calc(50% - 20px);\n        left: calc(50% - 20px);\n        background-color: #333;\n        border-radius: 100%;\n        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;\n        animation: sk-scaleout 1.0s infinite ease-in-out;\n      }\n\n      @-webkit-keyframes sk-scaleout {\n        0% { -webkit-transform: scale(0) }\n        100% {\n          -webkit-transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n\n      @keyframes sk-scaleout {\n        0% {\n          -webkit-transform: scale(0);\n          transform: scale(0);\n        } 100% {\n          -webkit-transform: scale(1.0);\n          transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n    </style>\n  </head>\n  <body class=\"app\">\n    <!-- @TOC -->\n    <!-- =================================================== -->\n    <!--\n      + @Page Loader\n      + @App Content\n          - #Left Sidebar\n              > $Sidebar Header\n              > $Sidebar Menu\n\n          - #Main\n              > $Topbar\n              > $App Screen Content\n    -->\n\n    <!-- @Page Loader -->\n    <!-- =================================================== -->\n    <div id='loader'>\n      <div class=\"spinner\"></div>\n    </div>\n\n    <script>\n      window.addEventListener('load', function load() {\n        const loader = document.getElementById('loader');\n        setTimeout(function() {\n          loader.classList.add('fadeOut');\n        }, 300);\n      });\n    </script>\n\n    <!-- @App Content -->\n    <!-- =================================================== -->\n    <div>\n      <!-- #Left Sidebar ==================== -->\n      <div class=\"sidebar\">\n        <div class=\"sidebar-inner\">\n          <!-- ### $Sidebar Header ### -->\n          <div class=\"sidebar-logo\">\n            <div class=\"peers ai-c fxw-nw\">\n              <div class=\"peer peer-greed\">\n                <a class=\"sidebar-link td-n\" href=\"index.html\">\n                  <div class=\"peers ai-c fxw-nw\">\n                    <div class=\"peer\">\n                      <div class=\"logo\">\n                        <img src=\"assets/static/images/logo.svg\" alt=\"\">\n                      </div>\n                    </div>\n                    <div class=\"peer peer-greed\">\n                      <h5 class=\"lh-1 mB-0 logo-text\">Adminator</h5>\n                    </div>\n                  </div>\n                </a>\n              </div>\n              <div class=\"peer\">\n                <div class=\"mobile-toggle sidebar-toggle\">\n                  <a href=\"\" class=\"td-n\">\n                    <i class=\"ti-arrow-circle-left\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- ### $Sidebar Menu ### -->\n          <ul class=\"sidebar-menu scrollable pos-r\">\n            <li class=\"nav-item mT-30\">\n              <a class=\"sidebar-link\" href=\"index.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-home\"></i>\n                </span>\n                <span class=\"title\">Dashboard</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"sidebar-link\" href=\"https://dashboardpack.com/?utm_source=adminator&utm_medium=sidebar&utm_campaign=go_pro\" target=\"_blank\" rel=\"noopener\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-purple-500 ti-crown\"></i>\n                </span>\n                <span class=\"title\">Go Pro <span class=\"badge bg-primary ms-2\">PRO</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"email.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-brown-500 ti-email\"></i>\n                </span>\n                <span class=\"title\">Email</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"compose.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-share\"></i>\n                </span>\n                <span class=\"title\">Compose</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"calendar.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-orange-500 ti-calendar\"></i>\n                </span>\n                <span class=\"title\">Calendar <span class=\"badge bg-danger ms-2\">HOT</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"chat.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-purple-500 ti-comment-alt\"></i>\n                </span>\n                <span class=\"title\">Chat</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"charts.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-indigo-500 ti-bar-chart\"></i>\n                </span>\n                <span class=\"title\">Charts <span class=\"badge bg-success ms-2\">NEW</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"forms.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-light-blue-500 ti-pencil\"></i>\n                </span>\n                <span class=\"title\">Forms</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"sidebar-link\" href=\"ui.html\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-pink-500 ti-palette\"></i>\n                  </span>\n                <span class=\"title\">UI Elements</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-orange-500 ti-layout-list-thumb\"></i>\n                </span>\n                <span class=\"title\">Tables</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"basic-table.html\">Basic Table</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"datatable.html\">Data Table <span class=\"badge bg-success ms-1\">NEW</span></a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-purple-500 ti-map\"></i>\n                  </span>\n                <span class=\"title\">Maps</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a href=\"google-maps.html\">Google Map</a>\n                </li>\n                <li>\n                  <a href=\"vector-maps.html\">Vector Map</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-red-500 ti-files\"></i>\n                  </span>\n                <span class=\"title\">Pages</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"blank.html\">Blank</a>\n                </li> \n                <li>\n                  <a class='sidebar-link' href=\"404.html\">404</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"500.html\">500</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signin.html\">Sign In</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signup.html\">Sign Up</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-teal-500 ti-view-list-alt\"></i>\n                </span>\n                <span class=\"title\">Multiple Levels</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                  </a>\n                </li>\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                    <span class=\"arrow\">\n                      <i class=\"ti-angle-right\"></i>\n                    </span>\n                  </a>\n                  <ul class=\"dropdown-menu\">\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                  </ul>\n                </li>\n              </ul>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <!-- #Main ============================ -->\n      <div class=\"page-container\">\n        <!-- ### $Topbar ### -->\n        <div class=\"header navbar\">\n          <div class=\"header-container\">\n            <ul class=\"nav-left\">\n              <li>\n                <a id='sidebar-toggle' class=\"sidebar-toggle\" href=\"javascript:void(0);\">\n                  <i class=\"ti-menu\"></i>\n                </a>\n              </li>\n              <li class=\"search-box\">\n                <a class=\"search-toggle no-pdd-right\" href=\"javascript:void(0);\">\n                  <i class=\"search-icon ti-search pdd-right-10\"></i>\n                  <i class=\"search-icon-close ti-close pdd-right-10\"></i>\n                </a>\n              </li>\n              <li class=\"search-input\">\n                <input class=\"form-control\" type=\"text\" placeholder=\"Search...\">\n              </li>\n            </ul>\n            <ul class=\"nav-right\">\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-red\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-bell\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-bell pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Notifications</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">John Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">post</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">5 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Moo Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">cover image</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">7 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Lee Doe</span>\n                              <span class=\"c-grey-600\">commented on your <span class=\"text-dark\">video</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">10 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Notifications <i class=\"ti-angle-right fsz-xs mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-blue\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-email\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-email pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Emails</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">John Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">5 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Moo Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">15 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Lee Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">25 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"email.html\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Email <i class=\"fs-xs ti-angle-right mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"dropdown\">\n                <a href=\"\" class=\"dropdown-toggle no-after peers fxw-nw ai-c lh-1\" data-bs-toggle=\"dropdown\">\n                  <div class=\"peer mR-10\">\n                    <img class=\"w-2r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/10.jpg\" alt=\"\">\n                  </div>\n                  <div class=\"peer\">\n                    <span class=\"fsz-sm c-grey-900\">John Doe</span>\n                  </div>\n                </a>\n                <ul class=\"dropdown-menu fsz-sm\">\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-settings mR-10\"></i>\n                      <span>Setting</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-user mR-10\"></i>\n                      <span>Profile</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"email.html\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-email mR-10\"></i>\n                      <span>Messages</span>\n                    </a>\n                  </li>\n                  <li role=\"separator\" class=\"divider\"></li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-power-off mR-10\"></i>\n                      <span>Logout</span>\n                    </a>\n                  </li>\n                </ul>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <!-- ### $App Screen Content ### -->\n        <main class='main-content bgc-grey-100'>\n          <div id='mainContent'>\n            <div class=\"container-fluid\">\n              <div class=\"row\">\n                <div class=\"col-md-4\">\n                  <div class=\"bdrs-3 ov-h bgc-white bd\">\n                    <div class=\"bgc-deep-purple-500 ta-c p-30\">\n                      <h1 class=\"fw-300 mB-5 lh-1 c-white\">01<span class=\"fsz-def\">st</span></h1>\n                      <h3 class=\"c-white\">Monday</h3>\n                    </div>\n                    <div class=\"pos-r\">\n                      <button type=\"button\" class=\"mT-nv-50 pos-a r-10 t-2 btn cur-p bdrs-50p p-0 w-3r h-3r btn-warning\">\n                        <i class=\"ti-plus\"></i>\n                      </button>\n                      <ul class=\"m-0 p-0 mT-20\">\n                        <li class=\"bdB peers ai-c jc-sb fxw-nw\">\n                          <a class=\"td-n p-20 peers fxw-nw me-20 peer-greed c-grey-900\" href=\"javascript:void(0);\" data-bs-toggle=\"modal\" data-bs-target=\"#calendar-edit\">\n                            <div class=\"peer mR-15\">\n                              <i class=\"fa fa-fw fa-clock-o c-red-500\"></i>\n                            </div>\n                            <div class=\"peer\">\n                              <span class=\"fw-600\">All Day Event</span>\n                              <div class=\"c-grey-600\">\n                                <span class=\"c-grey-700\">Nov 01 - </span>\n                                <i>Website Development</i>\n                              </div>\n                            </div>\n                          </a>\n                          <div class=\"peers mR-15\">\n                            <div class=\"peer\">\n                              <a href=\"\" class=\"td-n c-deep-purple-500 cH-blue-500 fsz-md p-5\">\n                                <i class=\"ti-pencil\"></i>\n                              </a>\n                            </div>\n                            <div class=\"peer\">\n                              <a href=\"\" class=\"td-n c-red-500 cH-blue-500 fsz-md p-5\">\n                                <i class=\"ti-trash\"></i>\n                              </a>\n                            </div>\n                          </div>\n                        </li>\n                        <li class=\"bdB peers ai-c jc-sb fxw-nw\">\n                          <a class=\"td-n p-20 peers fxw-nw me-20 peer-greed c-grey-900\" href=\"javascript:void(0);\" data-bs-toggle=\"modal\" data-bs-target=\"#calendar-edit\">\n                            <div class=\"peer mR-15\">\n                              <i class=\"fa fa-fw fa-clock-o c-blue-500\"></i>\n                            </div>\n                            <div class=\"peer\">\n                              <span class=\"fw-600\">All Day Event</span>\n                              <div class=\"c-grey-600\">\n                                <span class=\"c-grey-700\">Nov 01 - </span>\n                                <i>Website Development</i>\n                              </div>\n                            </div>\n                          </a>\n                          <div class=\"peers mR-15\">\n                            <div class=\"peer\">\n                              <a href=\"\" class=\"td-n c-deep-purple-500 cH-blue-500 fsz-md p-5\">\n                                <i class=\"ti-pencil\"></i>\n                              </a>\n                            </div>\n                            <div class=\"peer\">\n                              <a href=\"\" class=\"td-n c-red-500 cH-blue-500 fsz-md p-5\">\n                                <i class=\"ti-trash\"></i>\n                              </a>\n                            </div>\n                          </div>\n                        </li>\n                        <li class=\"bdB peers ai-c jc-sb fxw-nw\">\n                          <a class=\"td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900\" href=\"javascript:void(0);\" data-bs-toggle=\"modal\" data-bs-target=\"#calendar-edit\">\n                            <div class=\"peer mR-15\">\n                              <i class=\"fa fa-fw fa-clock-o c-indigo-500\"></i>\n                            </div>\n                            <div class=\"peer\">\n                              <span class=\"fw-600\">All Day Event</span>\n                              <div class=\"c-grey-600\">\n                                <span class=\"c-grey-700\">Nov 01 - </span>\n                                <i>Website Development</i>\n                              </div>\n                            </div>\n                          </a>\n                          <div class=\"peers mR-15\">\n                            <div class=\"peer\">\n                              <a href=\"\" class=\"td-n c-deep-purple-500 cH-blue-500 fsz-md p-5\">\n                                <i class=\"ti-pencil\"></i>\n                              </a>\n                            </div>\n                            <div class=\"peer\">\n                              <a href=\"\" class=\"td-n c-red-500 cH-blue-500 fsz-md p-5\">\n                                <i class=\"ti-trash\"></i>\n                              </a>\n                            </div>\n                          </div>\n                        </li>\n                        <li class=\"bdB peers ai-c jc-sb fxw-nw\">\n                          <a class=\"td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900\" href=\"javascript:void(0);\" data-bs-toggle=\"modal\" data-bs-target=\"#calendar-edit\">\n                            <div class=\"peer mR-15\">\n                              <i class=\"fa fa-fw fa-clock-o c-green-500\"></i>\n                            </div>\n                            <div class=\"peer\">\n                              <span class=\"fw-600\">All Day Event</span>\n                              <div class=\"c-grey-600\">\n                                <span class=\"c-grey-700\">Nov 01 - </span>\n                                <i>Website Development</i>\n                              </div>\n                            </div>\n                          </a>\n                          <div class=\"peers mR-15\">\n                            <div class=\"peer\">\n                              <a href=\"\" class=\"td-n c-deep-purple-500 cH-blue-500 fsz-md p-5\">\n                                <i class=\"ti-pencil\"></i>\n                              </a>\n                            </div>\n                            <div class=\"peer\">\n                              <a href=\"\" class=\"td-n c-red-500 cH-blue-500 fsz-md p-5\">\n                                <i class=\"ti-trash\"></i>\n                              </a>\n                            </div>\n                          </div>\n                        </li>\n                      </ul>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"col-md-8\">\n                  <div id='calendar'></div>\n                </div>\n              </div>\n              <div class=\"modal fade\" id=\"calendar-edit\">\n                <div class=\"modal-dialog\" role=\"document\">\n                  <div class=\"modal-content\">\n                    <div class=\"bd p-15\">\n                      <h5 class=\"m-0\">Add Event</h5>\n                    </div>\n                    <div class=\"modal-body\">\n                      <form>\n                        <div class=\"mb-3\">\n                          <label class=\"form-label fw-500\">Event title</label>\n                          <input class=\"form-control bdc-grey-200\">\n                        </div>\n                        <div class=\"row\">\n                          <div class=\"col-md-6\">\n                            <label class=\"fw-500 form-label\">Start</label>\n                            <div class=\"timepicker-input input-icon mb-3\">\n                              <div class=\"input-group\">\n                                <div class=\"input-group-text bgc-white bd bdwR-0\">\n                                  <i class=\"ti-calendar\"></i>\n                                </div>\n                                <input type=\"text\" class=\"form-control bdc-grey-200 start-date\" placeholder=\"Start Date\">\n                              </div>\n                            </div>\n                          </div>\n                          <div class=\"col-md-6\">\n                            <label class=\"fw-500 form-label\">End</label>\n                            <div class=\"timepicker-input input-icon mb-3\">\n                              <div class=\"input-group\">\n                                <div class=\"input-group-text bgc-white bd bdwR-0\">\n                                  <i class=\"ti-calendar\"></i>\n                                </div>\n                                <input type=\"text\" class=\"form-control bdc-grey-200 end-date\" placeholder=\"End Date\">\n                              </div>\n                            </div>\n                          </div>\n                        </div>\n                        <div class=\"mb-3\">\n                          <label class=\"fw-500 form-label\">Event title</label>\n                          <textarea class=\"form-control bdc-grey-200\" rows='5'></textarea>\n                        </div>\n                        <div class=\"text-end\">\n                          <button class=\"btn btn-primary cur-p btn-color\" data-dismiss=\"modal\">Done</button>\n                        </div>\n                      </form>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </main>\n\n        <!-- ### $App Screen Footer ### -->\n        <footer class=\"bdT ta-c p-30 lh-0 fsz-sm c-grey-600\">\n          <span>Copyright © 2026 Designed by <a href=\"https://colorlib.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" title=\"Colorlib\">Colorlib</a>. All rights reserved.</span>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "src/charts.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <title>Charts</title>\n    <style>\n      #loader {\n        transition: all 0.3s ease-in-out;\n        opacity: 1;\n        visibility: visible;\n        position: fixed;\n        height: 100vh;\n        width: 100%;\n        background: #fff;\n        z-index: 90000;\n      }\n\n      #loader.fadeOut {\n        opacity: 0;\n        visibility: hidden;\n      }\n\n\n\n      .spinner {\n        width: 40px;\n        height: 40px;\n        position: absolute;\n        top: calc(50% - 20px);\n        left: calc(50% - 20px);\n        background-color: #333;\n        border-radius: 100%;\n        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;\n        animation: sk-scaleout 1.0s infinite ease-in-out;\n      }\n\n      @-webkit-keyframes sk-scaleout {\n        0% { -webkit-transform: scale(0) }\n        100% {\n          -webkit-transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n\n      @keyframes sk-scaleout {\n        0% {\n          -webkit-transform: scale(0);\n          transform: scale(0);\n        } 100% {\n          -webkit-transform: scale(1.0);\n          transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n    </style>\n  </head>\n  <body class=\"app\">\n    <!-- @TOC -->\n    <!-- =================================================== -->\n    <!--\n      + @Page Loader\n      + @App Content\n          - #Left Sidebar\n              > $Sidebar Header\n              > $Sidebar Menu\n\n          - #Main\n              > $Topbar\n              > $App Screen Content\n    -->\n\n    <!-- @Page Loader -->\n    <!-- =================================================== -->\n    <div id='loader'>\n      <div class=\"spinner\"></div>\n    </div>\n\n    <script>\n      window.addEventListener('load', function load() {\n        const loader = document.getElementById('loader');\n        setTimeout(function() {\n          loader.classList.add('fadeOut');\n        }, 300);\n      });\n    </script>\n\n    <!-- @App Content -->\n    <!-- =================================================== -->\n    <div>\n      <!-- #Left Sidebar ==================== -->\n      <div class=\"sidebar\">\n        <div class=\"sidebar-inner\">\n          <!-- ### $Sidebar Header ### -->\n          <div class=\"sidebar-logo\">\n            <div class=\"peers ai-c fxw-nw\">\n              <div class=\"peer peer-greed\">\n                <a class=\"sidebar-link td-n\" href=\"index.html\">\n                  <div class=\"peers ai-c fxw-nw\">\n                    <div class=\"peer\">\n                      <div class=\"logo\">\n                        <img src=\"assets/static/images/logo.svg\" alt=\"\">\n                      </div>\n                    </div>\n                    <div class=\"peer peer-greed\">\n                      <h5 class=\"lh-1 mB-0 logo-text\">Adminator</h5>\n                    </div>\n                  </div>\n                </a>\n              </div>\n              <div class=\"peer\">\n                <div class=\"mobile-toggle sidebar-toggle\">\n                  <a href=\"\" class=\"td-n\">\n                    <i class=\"ti-arrow-circle-left\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- ### $Sidebar Menu ### -->\n          <ul class=\"sidebar-menu scrollable pos-r\">\n            <li class=\"nav-item mT-30\">\n              <a class=\"sidebar-link\" href=\"index.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-home\"></i>\n                </span>\n                <span class=\"title\">Dashboard</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"sidebar-link\" href=\"https://dashboardpack.com/?utm_source=adminator&utm_medium=sidebar&utm_campaign=go_pro\" target=\"_blank\" rel=\"noopener\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-purple-500 ti-crown\"></i>\n                </span>\n                <span class=\"title\">Go Pro <span class=\"badge bg-primary ms-2\">PRO</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"email.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-brown-500 ti-email\"></i>\n                </span>\n                <span class=\"title\">Email</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"compose.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-share\"></i>\n                </span>\n                <span class=\"title\">Compose</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"calendar.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-orange-500 ti-calendar\"></i>\n                </span>\n                <span class=\"title\">Calendar <span class=\"badge bg-danger ms-2\">HOT</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"chat.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-purple-500 ti-comment-alt\"></i>\n                </span>\n                <span class=\"title\">Chat</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"charts.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-indigo-500 ti-bar-chart\"></i>\n                </span>\n                <span class=\"title\">Charts <span class=\"badge bg-success ms-2\">NEW</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"forms.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-light-blue-500 ti-pencil\"></i>\n                </span>\n                <span class=\"title\">Forms</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"sidebar-link\" href=\"ui.html\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-pink-500 ti-palette\"></i>\n                  </span>\n                <span class=\"title\">UI Elements</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-orange-500 ti-layout-list-thumb\"></i>\n                </span>\n                <span class=\"title\">Tables</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"basic-table.html\">Basic Table</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"datatable.html\">Data Table <span class=\"badge bg-success ms-1\">NEW</span></a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-purple-500 ti-map\"></i>\n                  </span>\n                <span class=\"title\">Maps</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a href=\"google-maps.html\">Google Map</a>\n                </li>\n                <li>\n                  <a href=\"vector-maps.html\">Vector Map</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-red-500 ti-files\"></i>\n                  </span>\n                <span class=\"title\">Pages</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"blank.html\">Blank</a>\n                </li>                 \n                <li>\n                  <a class='sidebar-link' href=\"404.html\">404</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"500.html\">500</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signin.html\">Sign In</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signup.html\">Sign Up</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-teal-500 ti-view-list-alt\"></i>\n                </span>\n                <span class=\"title\">Multiple Levels</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                  </a>\n                </li>\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                    <span class=\"arrow\">\n                      <i class=\"ti-angle-right\"></i>\n                    </span>\n                  </a>\n                  <ul class=\"dropdown-menu\">\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                  </ul>\n                </li>\n              </ul>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <!-- #Main ============================ -->\n      <div class=\"page-container\">\n        <!-- ### $Topbar ### -->\n        <div class=\"header navbar\">\n          <div class=\"header-container\">\n            <ul class=\"nav-left\">\n              <li>\n                <a id='sidebar-toggle' class=\"sidebar-toggle\" href=\"javascript:void(0);\">\n                  <i class=\"ti-menu\"></i>\n                </a>\n              </li>\n              <li class=\"search-box\">\n                <a class=\"search-toggle no-pdd-right\" href=\"javascript:void(0);\">\n                  <i class=\"search-icon ti-search pdd-right-10\"></i>\n                  <i class=\"search-icon-close ti-close pdd-right-10\"></i>\n                </a>\n              </li>\n              <li class=\"search-input\">\n                <input class=\"form-control\" type=\"text\" placeholder=\"Search...\">\n              </li>\n            </ul>\n            <ul class=\"nav-right\">\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-red\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-bell\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-bell pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Notifications</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">John Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">post</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">5 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Moo Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">cover image</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">7 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Lee Doe</span>\n                              <span class=\"c-grey-600\">commented on your <span class=\"text-dark\">video</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">10 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Notifications <i class=\"ti-angle-right fsz-xs mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-blue\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-email\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-email pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Emails</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">John Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">5 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Moo Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">15 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Lee Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">25 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"email.html\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Email <i class=\"fs-xs ti-angle-right mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"dropdown\">\n                <a href=\"\" class=\"dropdown-toggle no-after peers fxw-nw ai-c lh-1\" data-bs-toggle=\"dropdown\">\n                  <div class=\"peer mR-10\">\n                    <img class=\"w-2r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/10.jpg\" alt=\"\">\n                  </div>\n                  <div class=\"peer\">\n                    <span class=\"fsz-sm c-grey-900\">John Doe</span>\n                  </div>\n                </a>\n                <ul class=\"dropdown-menu fsz-sm\">\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-settings mR-10\"></i>\n                      <span>Setting</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-user mR-10\"></i>\n                      <span>Profile</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"email.html\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-email mR-10\"></i>\n                      <span>Messages</span>\n                    </a>\n                  </li>\n                  <li role=\"separator\" class=\"divider\"></li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-power-off mR-10\"></i>\n                      <span>Logout</span>\n                    </a>\n                  </li>\n                </ul>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <!-- ### $App Screen Content ### -->\n        <main class='main-content bgc-grey-100'>\n          <div id='mainContent'>\n            <div class=\"row gap-20 masonry pos-r\">\n              <div class=\"masonry-sizer col-md-6 pos-a\"></div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Line Chart</h6>\n                  <div class=\"mT-30\">\n                    <canvas id=\"line-chart\" height=\"220\"></canvas>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Area Chart</h6>\n                  <div class=\"mT-30\">\n                    <canvas id=\"area-chart\" height=\"220\"></canvas>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Scatter Chart</h6>\n                  <div class=\"mT-30\">\n                    <canvas id=\"scatter-chart\" height=\"220\"></canvas>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Bar Chart</h6>\n                  <div class=\"mT-30\">\n                    <canvas id=\"bar-chart\" height=\"220\"></canvas>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">jQuery Sparkline</h6>\n                  <div class=\"mT-30\">\n                    <div class=\"peers ai-c jc-sb fxw-nw bdB pY-15\">\n                      <div class=\"peer\">\n                        <span>Spark Line</span>\n                      </div>\n                      <div class=\"peer\">\n                        <span class=\"sparkline\">&nbsp;</span>\n                      </div>\n                    </div>\n                    <div class=\"peers ai-c jc-sb fxw-nw bdB pY-15\">\n                      <div class=\"peer\">\n                        <span>Spark Bar</span>\n                      </div>\n                      <div class=\"peer\">\n                        <span class=\"sparkbar\">&nbsp;</span>\n                      </div>\n                    </div>\n                    <div class=\"peers ai-c jc-sb fxw-nw bdB pY-15\">\n                      <div class=\"peer\">\n                        <span>Spark Tristate</span>\n                      </div>\n                      <div class=\"peer\">\n                        <span class=\"sparktri\">&nbsp;</span>\n                      </div>\n                    </div>\n                    <div class=\"peers ai-c jc-sb fxw-nw bdB pY-15\">\n                      <div class=\"peer\">\n                        <span>Spark Discrete</span>\n                      </div>\n                      <div class=\"peer\">\n                        <span class=\"sparkdisc\">&nbsp;</span>\n                      </div>\n                    </div>\n                    <div class=\"peers ai-c jc-sb fxw-nw bdB pY-15\">\n                      <div class=\"peer\">\n                        <span>Spark Bullet</span>\n                      </div>\n                      <div class=\"peer\">\n                        <span class=\"sparkbull\">&nbsp;</span>\n                      </div>\n                    </div>\n                    <div class=\"peers ai-c jc-sb fxw-nw pT-15\">\n                      <div class=\"peer\">\n                        <span>Spark Box</span>\n                      </div>\n                      <div class=\"peer\">\n                        <span class=\"sparkbox\">&nbsp;</span>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Doughnut Chart</h6>\n                  <div class=\"mT-30\">\n                    <canvas id=\"doughnut-chart\" height=\"220\"></canvas>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Polar Area Chart</h6>\n                  <div class=\"mT-30\">\n                    <canvas id=\"polar-chart\" height=\"220\"></canvas>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Radar Chart</h6>\n                  <div class=\"mT-30\">\n                    <canvas id=\"radar-chart\" height=\"220\"></canvas>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Mixed Chart</h6>\n                  <div class=\"mT-30\">\n                    <canvas id=\"mixed-chart\" height=\"220\"></canvas>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Bubble Chart</h6>\n                  <div class=\"mT-30\">\n                    <canvas id=\"bubble-chart\" height=\"220\"></canvas>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Easy Pie Charts</h6>\n                  <div class=\"mT-30\">\n                    <div class=\"peers mT-20 fxw-nw@lg+ jc-sb ta-c gap-10\">\n                      <div class=\"peer\">\n                        <div class=\"easy-pie-chart\" data-size='80' data-percent=\"75\" data-bar-color='#f44336'>\n                          <span></span>\n                        </div>\n                        <h6 class=\"fsz-sm\">New Users</h6>\n                      </div>\n                      <div class=\"peer\">\n                        <div class=\"easy-pie-chart\" data-size='80' data-percent=\"50\" data-bar-color='#2196f3'>\n                          <span></span>\n                        </div>\n                        <h6 class=\"fsz-sm\">New Purchases</h6>\n                      </div>\n                      <div class=\"peer\">\n                        <div class=\"easy-pie-chart\" data-size='80' data-percent=\"65\" data-bar-color='#f44336'>\n                          <span></span>\n                        </div>\n                        <h6 class=\"fsz-sm\">New Customers</h6>\n                      </div>\n                      <div class=\"peer\">\n                        <div class=\"easy-pie-chart\" data-size='80' data-percent=\"90\" data-bar-color='#ff9800'>\n                          <span></span>\n                        </div>\n                        <h6 class=\"fsz-sm\">Bounce Rate</h6>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </main>\n\n        <!-- ### $App Screen Footer ### -->\n        <footer class=\"bdT ta-c p-30 lh-0 fsz-sm c-grey-600\">\n          <span>Copyright © 2026 Designed by <a href=\"https://colorlib.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" title=\"Colorlib\">Colorlib</a>. All rights reserved.</span>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "src/chat.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <title>Chat</title>\n    <style>\n      #loader {\n        transition: all 0.3s ease-in-out;\n        opacity: 1;\n        visibility: visible;\n        position: fixed;\n        height: 100vh;\n        width: 100%;\n        background: #fff;\n        z-index: 90000;\n      }\n\n      #loader.fadeOut {\n        opacity: 0;\n        visibility: hidden;\n      }\n\n\n\n      .spinner {\n        width: 40px;\n        height: 40px;\n        position: absolute;\n        top: calc(50% - 20px);\n        left: calc(50% - 20px);\n        background-color: #333;\n        border-radius: 100%;\n        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;\n        animation: sk-scaleout 1.0s infinite ease-in-out;\n      }\n\n      @-webkit-keyframes sk-scaleout {\n        0% { -webkit-transform: scale(0) }\n        100% {\n          -webkit-transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n\n      @keyframes sk-scaleout {\n        0% {\n          -webkit-transform: scale(0);\n          transform: scale(0);\n        } 100% {\n          -webkit-transform: scale(1.0);\n          transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n    </style>\n  </head>\n  <body class=\"app\">\n    <!-- @TOC -->\n    <!-- =================================================== -->\n    <!--\n      + @Page Loader\n      + @App Content\n          - #Left Sidebar\n              > $Sidebar Header\n              > $Sidebar Menu\n\n          - #Main\n              > $Topbar\n              > $App Screen Content\n    -->\n\n    <!-- @Page Loader -->\n    <!-- =================================================== -->\n    <div id='loader'>\n      <div class=\"spinner\"></div>\n    </div>\n\n    <script>\n      window.addEventListener('load', function load() {\n        const loader = document.getElementById('loader');\n        setTimeout(function() {\n          loader.classList.add('fadeOut');\n        }, 300);\n      });\n    </script>\n\n    <!-- @App Content -->\n    <!-- =================================================== -->\n    <div>\n      <!-- #Left Sidebar ==================== -->\n      <div class=\"sidebar\">\n        <div class=\"sidebar-inner\">\n          <!-- ### $Sidebar Header ### -->\n          <div class=\"sidebar-logo\">\n            <div class=\"peers ai-c fxw-nw\">\n              <div class=\"peer peer-greed\">\n                <a class=\"sidebar-link td-n\" href=\"index.html\">\n                  <div class=\"peers ai-c fxw-nw\">\n                    <div class=\"peer\">\n                      <div class=\"logo\">\n                        <img src=\"assets/static/images/logo.svg\" alt=\"\">\n                      </div>\n                    </div>\n                    <div class=\"peer peer-greed\">\n                      <h5 class=\"lh-1 mB-0 logo-text\">Adminator</h5>\n                    </div>\n                  </div>\n                </a>\n              </div>\n              <div class=\"peer\">\n                <div class=\"mobile-toggle sidebar-toggle\">\n                  <a href=\"\" class=\"td-n\">\n                    <i class=\"ti-arrow-circle-left\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- ### $Sidebar Menu ### -->\n          <ul class=\"sidebar-menu scrollable pos-r\">\n            <li class=\"nav-item mT-30\">\n              <a class=\"sidebar-link\" href=\"index.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-home\"></i>\n                </span>\n                <span class=\"title\">Dashboard</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"sidebar-link\" href=\"https://dashboardpack.com/?utm_source=adminator&utm_medium=sidebar&utm_campaign=go_pro\" target=\"_blank\" rel=\"noopener\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-purple-500 ti-crown\"></i>\n                </span>\n                <span class=\"title\">Go Pro <span class=\"badge bg-primary ms-2\">PRO</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"email.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-brown-500 ti-email\"></i>\n                </span>\n                <span class=\"title\">Email</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"compose.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-share\"></i>\n                </span>\n                <span class=\"title\">Compose</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"calendar.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-orange-500 ti-calendar\"></i>\n                </span>\n                <span class=\"title\">Calendar <span class=\"badge bg-danger ms-2\">HOT</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"chat.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-purple-500 ti-comment-alt\"></i>\n                </span>\n                <span class=\"title\">Chat</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"charts.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-indigo-500 ti-bar-chart\"></i>\n                </span>\n                <span class=\"title\">Charts <span class=\"badge bg-success ms-2\">NEW</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"forms.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-light-blue-500 ti-pencil\"></i>\n                </span>\n                <span class=\"title\">Forms</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"sidebar-link\" href=\"ui.html\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-pink-500 ti-palette\"></i>\n                  </span>\n                <span class=\"title\">UI Elements</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-orange-500 ti-layout-list-thumb\"></i>\n                </span>\n                <span class=\"title\">Tables</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"basic-table.html\">Basic Table</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"datatable.html\">Data Table <span class=\"badge bg-success ms-1\">NEW</span></a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-purple-500 ti-map\"></i>\n                  </span>\n                <span class=\"title\">Maps</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a href=\"google-maps.html\">Google Map</a>\n                </li>\n                <li>\n                  <a href=\"vector-maps.html\">Vector Map</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-red-500 ti-files\"></i>\n                  </span>\n                <span class=\"title\">Pages</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"blank.html\">Blank</a>\n                </li> \n                <li>\n                  <a class='sidebar-link' href=\"404.html\">404</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"500.html\">500</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signin.html\">Sign In</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signup.html\">Sign Up</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-teal-500 ti-view-list-alt\"></i>\n                </span>\n                <span class=\"title\">Multiple Levels</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                  </a>\n                </li>\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                    <span class=\"arrow\">\n                      <i class=\"ti-angle-right\"></i>\n                    </span>\n                  </a>\n                  <ul class=\"dropdown-menu\">\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                  </ul>\n                </li>\n              </ul>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <!-- #Main ============================ -->\n      <div class=\"page-container\">\n        <!-- ### $Topbar ### -->\n        <div class=\"header navbar\">\n          <div class=\"header-container\">\n            <ul class=\"nav-left\">\n              <li>\n                <a id='sidebar-toggle' class=\"sidebar-toggle\" href=\"javascript:void(0);\">\n                  <i class=\"ti-menu\"></i>\n                </a>\n              </li>\n              <li class=\"search-box\">\n                <a class=\"search-toggle no-pdd-right\" href=\"javascript:void(0);\">\n                  <i class=\"search-icon ti-search pdd-right-10\"></i>\n                  <i class=\"search-icon-close ti-close pdd-right-10\"></i>\n                </a>\n              </li>\n              <li class=\"search-input\">\n                <input class=\"form-control\" type=\"text\" placeholder=\"Search...\">\n              </li>\n            </ul>\n            <ul class=\"nav-right\">\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-red\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-bell\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-bell pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Notifications</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">John Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">post</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">5 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Moo Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">cover image</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">7 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Lee Doe</span>\n                              <span class=\"c-grey-600\">commented on your <span class=\"text-dark\">video</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">10 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Notifications <i class=\"ti-angle-right fsz-xs mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-blue\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-email\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-email pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Emails</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">John Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">5 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Moo Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">15 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Lee Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">25 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"email.html\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Email <i class=\"fs-xs ti-angle-right mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"dropdown\">\n                <a href=\"\" class=\"dropdown-toggle no-after peers fxw-nw ai-c lh-1\" data-bs-toggle=\"dropdown\">\n                  <div class=\"peer mR-10\">\n                    <img class=\"w-2r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/10.jpg\" alt=\"\">\n                  </div>\n                  <div class=\"peer\">\n                    <span class=\"fsz-sm c-grey-900\">John Doe</span>\n                  </div>\n                </a>\n                <ul class=\"dropdown-menu fsz-sm\">\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-settings mR-10\"></i>\n                      <span>Setting</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-user mR-10\"></i>\n                      <span>Profile</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"email.html\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-email mR-10\"></i>\n                      <span>Messages</span>\n                    </a>\n                  </li>\n                  <li role=\"separator\" class=\"divider\"></li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-power-off mR-10\"></i>\n                      <span>Logout</span>\n                    </a>\n                  </li>\n                </ul>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <!-- ### $App Screen Content ### -->\n        <main class='main-content bgc-grey-100'>\n          <div id='mainContent'>\n            <div class=\"full-container\">\n              <div class=\"peers fxw-nw pos-r\">\n                <!-- Sidebar -->\n                <div class=\"peer bdR\" id=\"chat-sidebar\">\n                  <div class=\"layers h-100\">\n                    <!-- Search -->\n                    <div class=\"bdB layer w-100\">\n                      <input type=\"text\" placeholder=\"Search contacts...\" name=\"chatSearch\" class=\"form-constrol p-15 bdrs-0 w-100 bdw-0\">\n                    </div>\n\n                    <!-- List -->\n                    <div class=\"layer w-100 fxg-1 scrollable pos-r\">\n                      <div class=\"peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p\">\n                        <div class=\"peer\">\n                          <img src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\" class=\"w-3r h-3r bdrs-50p\">\n                        </div>\n                        <div class=\"peer peer-greed pL-20\">\n                          <h6 class=\"mB-0 lh-1 fw-400\">John Doe</h6>\n                          <small class=\"lh-1 c-green-500\">Online</small>\n                        </div>\n                      </div>\n                      <div class=\"peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p\">\n                        <div class=\"peer\">\n                          <img src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\" class=\"w-3r h-3r bdrs-50p\">\n                        </div>\n                        <div class=\"peer peer-greed pL-20\">\n                          <h6 class=\"mB-0 lh-1 fw-400\">Moo Doe</h6>\n                          <small class=\"lh-1 c-amber-500\">Away</small>\n                        </div>\n                      </div>\n                      <div class=\"peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p\">\n                        <div class=\"peer\">\n                          <img src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\" class=\"w-3r h-3r bdrs-50p\">\n                        </div>\n                        <div class=\"peer peer-greed pL-20\">\n                          <h6 class=\"mB-0 lh-1 fw-400\">Adam Jones</h6>\n                          <small class=\"lh-1 c-grey-500\">Offline</small>\n                        </div>\n                      </div>\n                      <div class=\"peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p\">\n                        <div class=\"peer\">\n                          <img src=\"https://randomuser.me/api/portraits/men/4.jpg\" alt=\"\" class=\"w-3r h-3r bdrs-50p\">\n                        </div>\n                        <div class=\"peer peer-greed pL-20\">\n                          <h6 class=\"mB-0 lh-1 fw-400\">Mizo Doe</h6>\n                          <small class=\"lh-1 c-red-500\">Busy</small>\n                        </div>\n                      </div>\n                      <div class=\"peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p\">\n                        <div class=\"peer\">\n                          <img src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\" class=\"w-3r h-3r bdrs-50p\">\n                        </div>\n                        <div class=\"peer peer-greed pL-20\">\n                          <h6 class=\"mB-0 lh-1 fw-400\">John Doe</h6>\n                          <small class=\"lh-1 c-green-500\">Online</small>\n                        </div>\n                      </div>\n                      <div class=\"peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p\">\n                        <div class=\"peer\">\n                          <img src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\" class=\"w-3r h-3r bdrs-50p\">\n                        </div>\n                        <div class=\"peer peer-greed pL-20\">\n                          <h6 class=\"mB-0 lh-1 fw-400\">Moo Doe</h6>\n                          <small class=\"lh-1 c-amber-500\">Away</small>\n                        </div>\n                      </div>\n                      <div class=\"peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p\">\n                        <div class=\"peer\">\n                          <img src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\" class=\"w-3r h-3r bdrs-50p\">\n                        </div>\n                        <div class=\"peer peer-greed pL-20\">\n                          <h6 class=\"mB-0 lh-1 fw-400\">Adam Jones</h6>\n                          <small class=\"lh-1 c-grey-500\">Offline</small>\n                        </div>\n                      </div>\n                      <div class=\"peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p\">\n                        <div class=\"peer\">\n                          <img src=\"https://randomuser.me/api/portraits/men/4.jpg\" alt=\"\" class=\"w-3r h-3r bdrs-50p\">\n                        </div>\n                        <div class=\"peer peer-greed pL-20\">\n                          <h6 class=\"mB-0 lh-1 fw-400\">Mizo Doe</h6>\n                          <small class=\"lh-1 c-red-500\">Busy</small>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Chat Box -->\n                <div class=\"peer peer-greed\" id='chat-box'>\n                  <div class=\"layers h-100\">\n                    <div class=\"layer w-100\">\n                      <!-- Header -->\n                      <div class=\"peers fxw-nw jc-sb ai-c pY-20 pX-30 bgc-white\">\n                        <div class=\"peers ai-c\">\n                          <div class=\"peer d-n@md+\">\n                            <a href=\"\" title=\"\" id='chat-sidebar-toggle' class=\"td-n c-grey-900 cH-blue-500 mR-30\">\n                              <i class=\"ti-menu\"></i>\n                            </a>\n                          </div>\n                          <div class=\"peer mR-20\">\n                            <img src=\"https://randomuser.me/api/portraits/men/12.jpg\" alt=\"\" class=\"w-3r h-3r bdrs-50p\">\n                          </div>\n                          <div class=\"peer\">\n                            <h6 class=\"lh-1 mB-0\">John Doe</h6>\n                            <i class=\"fsz-sm lh-1\">Typing...</i>\n                          </div>\n                        </div>\n                        <div class=\"peers\">\n                          <a href=\"\" class=\"peer td-n c-grey-900 cH-blue-500 fsz-md mR-30\" title=\"\">\n                            <i class=\"ti-video-camera\"></i>\n                          </a>\n                          <a href=\"\" class=\"peer td-n c-grey-900 cH-blue-500 fsz-md mR-30\" title=\"\">\n                            <i class=\"ti-headphone\"></i>\n                          </a>\n                          <a href=\"\" class=\"peer td-n c-grey-900 cH-blue-500 fsz-md\" title=\"\">\n                            <i class=\"ti-more\"></i>\n                          </a>\n                        </div>\n                      </div>\n                    </div>\n                    <div class=\"layer w-100 fxg-1 bgc-grey-200 scrollable pos-r\">\n                      <!-- Chat Box -->\n                      <div class=\"p-20 gapY-15\">\n                        <!-- Chat Conversation -->\n                        <div class=\"peers fxw-nw\">\n                          <div class=\"peer mR-20\">\n                            <img class=\"w-2r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/11.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div class=\"layers ai-fs gapY-5\">\n                              <div class=\"layer\">\n                                <div class=\"peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2\">\n                                  <div class=\"peer mR-10\">\n                                    <small>10:00 AM</small>\n                                  </div>\n                                  <div class=\"peer-greed\">\n                                    <span>Lorem Ipsum is simply dummy text of</span>\n                                  </div>\n                                </div>\n                              </div>\n                              <div class=\"layer\">\n                                <div class=\"peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2\">\n                                  <div class=\"peer mR-10\">\n                                    <small>10:00 AM</small>\n                                  </div>\n                                  <div class=\"peer-greed\">\n                                    <span>the printing and typesetting industry.</span>\n                                  </div>\n                                </div>\n                              </div>\n                              <div class=\"layer\">\n                                <div class=\"peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2\">\n                                  <div class=\"peer mR-10\">\n                                    <small>10:00 AM</small>\n                                  </div>\n                                  <div class=\"peer-greed\">\n                                    <span>Lorem Ipsum has been the industry's</span>\n                                  </div>\n                                </div>\n                              </div>\n                            </div>\n                          </div>\n                        </div>\n\n                        <!-- Chat Conversation -->\n                        <div class=\"peers fxw-nw ai-fe\">\n                          <div class=\"peer ord-1 mL-20\">\n                            <img class=\"w-2r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/12.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed ord-0\">\n                            <div class=\"layers ai-fe gapY-10\">\n                              <div class=\"layer\">\n                                <div class=\"peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2\">\n                                  <div class=\"peer mL-10 ord-1\">\n                                    <small>10:00 AM</small>\n                                  </div>\n                                  <div class=\"peer-greed ord-0\">\n                                    <span>Heloo</span>\n                                  </div>\n                                </div>\n                              </div>\n                              <div class=\"layer\">\n                                <div class=\"peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2\">\n                                  <div class=\"peer mL-10 ord-1\">\n                                    <small>10:00 AM</small>\n                                  </div>\n                                  <div class=\"peer-greed ord-0\">\n                                    <span>??</span>\n                                  </div>\n                              </div>\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                    </div>\n                    <div class=\"layer w-100\">\n                      <!-- Chat Send -->\n                      <div class=\"p-20 bdT bgc-white\">\n                        <div class=\"pos-r\">\n                          <input type=\"text\" class=\"form-control bdrs-10em m-0\" placeholder=\"Say something...\">\n                          <button type=\"button\" class=\"btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1 btn-color\">\n                            <i class=\"fa fa-paper-plane-o\"></i>\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </main>\n\n        <!-- ### $App Screen Footer ### -->\n        <footer class=\"bdT ta-c p-30 lh-0 fsz-sm c-grey-600\">\n          <span>Copyright © 2026 Designed by <a href=\"https://colorlib.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" title=\"Colorlib\">Colorlib</a>. All rights reserved.</span>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "src/compose.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <title>Compose</title>\n    <style>\n      #loader {\n        transition: all 0.3s ease-in-out;\n        opacity: 1;\n        visibility: visible;\n        position: fixed;\n        height: 100vh;\n        width: 100%;\n        background: #fff;\n        z-index: 90000;\n      }\n\n      #loader.fadeOut {\n        opacity: 0;\n        visibility: hidden;\n      }\n\n\n\n      .spinner {\n        width: 40px;\n        height: 40px;\n        position: absolute;\n        top: calc(50% - 20px);\n        left: calc(50% - 20px);\n        background-color: #333;\n        border-radius: 100%;\n        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;\n        animation: sk-scaleout 1.0s infinite ease-in-out;\n      }\n\n      @-webkit-keyframes sk-scaleout {\n        0% { -webkit-transform: scale(0) }\n        100% {\n          -webkit-transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n\n      @keyframes sk-scaleout {\n        0% {\n          -webkit-transform: scale(0);\n          transform: scale(0);\n        } 100% {\n          -webkit-transform: scale(1.0);\n          transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n    </style>\n  </head>\n  <body class=\"app\">\n    <!-- @TOC -->\n    <!-- =================================================== -->\n    <!--\n      + @Page Loader\n      + @App Content\n          - #Left Sidebar\n              > $Sidebar Header\n              > $Sidebar Menu\n\n          - #Main\n              > $Topbar\n              > $App Screen Content\n    -->\n\n    <!-- @Page Loader -->\n    <!-- =================================================== -->\n    <div id='loader'>\n      <div class=\"spinner\"></div>\n    </div>\n\n    <script>\n      window.addEventListener('load', function load() {\n        const loader = document.getElementById('loader');\n        setTimeout(function() {\n          loader.classList.add('fadeOut');\n        }, 300);\n      });\n    </script>\n\n    <!-- @App Content -->\n    <!-- =================================================== -->\n    <div>\n      <!-- #Left Sidebar ==================== -->\n      <div class=\"sidebar\">\n        <div class=\"sidebar-inner\">\n          <!-- ### $Sidebar Header ### -->\n          <div class=\"sidebar-logo\">\n            <div class=\"peers ai-c fxw-nw\">\n              <div class=\"peer peer-greed\">\n                <a class=\"sidebar-link td-n\" href=\"index.html\">\n                  <div class=\"peers ai-c fxw-nw\">\n                    <div class=\"peer\">\n                      <div class=\"logo\">\n                        <img src=\"assets/static/images/logo.svg\" alt=\"\">\n                      </div>\n                    </div>\n                    <div class=\"peer peer-greed\">\n                      <h5 class=\"lh-1 mB-0 logo-text\">Adminator</h5>\n                    </div>\n                  </div>\n                </a>\n              </div>\n              <div class=\"peer\">\n                <div class=\"mobile-toggle sidebar-toggle\">\n                  <a href=\"\" class=\"td-n\">\n                    <i class=\"ti-arrow-circle-left\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- ### $Sidebar Menu ### -->\n          <ul class=\"sidebar-menu scrollable pos-r\">\n            <li class=\"nav-item mT-30\">\n              <a class=\"sidebar-link\" href=\"index.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-home\"></i>\n                </span>\n                <span class=\"title\">Dashboard</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"sidebar-link\" href=\"https://dashboardpack.com/?utm_source=adminator&utm_medium=sidebar&utm_campaign=go_pro\" target=\"_blank\" rel=\"noopener\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-purple-500 ti-crown\"></i>\n                </span>\n                <span class=\"title\">Go Pro <span class=\"badge bg-primary ms-2\">PRO</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"email.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-brown-500 ti-email\"></i>\n                </span>\n                <span class=\"title\">Email</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"compose.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-share\"></i>\n                </span>\n                <span class=\"title\">Compose</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"calendar.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-orange-500 ti-calendar\"></i>\n                </span>\n                <span class=\"title\">Calendar <span class=\"badge bg-danger ms-2\">HOT</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"chat.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-purple-500 ti-comment-alt\"></i>\n                </span>\n                <span class=\"title\">Chat</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"charts.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-indigo-500 ti-bar-chart\"></i>\n                </span>\n                <span class=\"title\">Charts <span class=\"badge bg-success ms-2\">NEW</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"forms.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-light-blue-500 ti-pencil\"></i>\n                </span>\n                <span class=\"title\">Forms</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"sidebar-link\" href=\"ui.html\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-pink-500 ti-palette\"></i>\n                  </span>\n                <span class=\"title\">UI Elements</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-orange-500 ti-layout-list-thumb\"></i>\n                </span>\n                <span class=\"title\">Tables</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"basic-table.html\">Basic Table</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"datatable.html\">Data Table <span class=\"badge bg-success ms-1\">NEW</span></a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-purple-500 ti-map\"></i>\n                  </span>\n                <span class=\"title\">Maps</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a href=\"google-maps.html\">Google Map</a>\n                </li>\n                <li>\n                  <a href=\"vector-maps.html\">Vector Map</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-red-500 ti-files\"></i>\n                  </span>\n                <span class=\"title\">Pages</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"blank.html\">Blank</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"404.html\">404</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"500.html\">500</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signin.html\">Sign In</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signup.html\">Sign Up</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-teal-500 ti-view-list-alt\"></i>\n                </span>\n                <span class=\"title\">Multiple Levels</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                  </a>\n                </li>\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                    <span class=\"arrow\">\n                      <i class=\"ti-angle-right\"></i>\n                    </span>\n                  </a>\n                  <ul class=\"dropdown-menu\">\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                  </ul>\n                </li>\n              </ul>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <!-- #Main ============================ -->\n      <div class=\"page-container\">\n        <!-- ### $Topbar ### -->\n        <div class=\"header navbar\">\n          <div class=\"header-container\">\n            <ul class=\"nav-left\">\n              <li>\n                <a id='sidebar-toggle' class=\"sidebar-toggle\" href=\"javascript:void(0);\">\n                  <i class=\"ti-menu\"></i>\n                </a>\n              </li>\n              <li class=\"search-box\">\n                <a class=\"search-toggle no-pdd-right\" href=\"javascript:void(0);\">\n                  <i class=\"search-icon ti-search pdd-right-10\"></i>\n                  <i class=\"search-icon-close ti-close pdd-right-10\"></i>\n                </a>\n              </li>\n              <li class=\"search-input\">\n                <input class=\"form-control\" type=\"text\" placeholder=\"Search...\">\n              </li>\n            </ul>\n            <ul class=\"nav-right\">\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-red\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-bell\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-bell pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Notifications</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">John Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">post</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">5 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Moo Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">cover image</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">7 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Lee Doe</span>\n                              <span class=\"c-grey-600\">commented on your <span class=\"text-dark\">video</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">10 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Notifications <i class=\"ti-angle-right fsz-xs mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-blue\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-email\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-email pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Emails</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">John Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">5 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Moo Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">15 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Lee Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">25 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"email.html\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Email <i class=\"fs-xs ti-angle-right mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"dropdown\">\n                <a href=\"\" class=\"dropdown-toggle no-after peers fxw-nw ai-c lh-1\" data-bs-toggle=\"dropdown\">\n                  <div class=\"peer mR-10\">\n                    <img class=\"w-2r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/10.jpg\" alt=\"\">\n                  </div>\n                  <div class=\"peer\">\n                    <span class=\"fsz-sm c-grey-900\">John Doe</span>\n                  </div>\n                </a>\n                <ul class=\"dropdown-menu fsz-sm\">\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-settings mR-10\"></i>\n                      <span>Setting</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-user mR-10\"></i>\n                      <span>Profile</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"email.html\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-email mR-10\"></i>\n                      <span>Messages</span>\n                    </a>\n                  </li>\n                  <li role=\"separator\" class=\"divider\"></li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-power-off mR-10\"></i>\n                      <span>Logout</span>\n                    </a>\n                  </li>\n                </ul>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <!-- ### $App Screen Content ### -->\n        <main class='main-content bgc-grey-100'>\n          <div id='mainContent'>\n            <div class=\"full-container\">\n              <div class=\"email-app\">\n              <div class=\"email-side-nav remain-height ov-h\">\n                <div class=\"h-100 layers\">\n                  <div class=\"p-20 bgc-grey-100 layer w-100\">\n                    <a href=\"compose.html\" class=\"btn btn-danger d-grid\">New Message</a>\n                  </div>\n                  <div class=\"scrollable pos-r bdT layer w-100 fxg-1\">\n                    <ul class=\"p-20 nav flex-column\">\n                      <li class=\"nav-item\">\n                        <a href=\"javascript:void(0)\" class=\"nav-link c-grey-800 cH-blue-500 actived\">\n                          <div class=\"peers ai-c jc-sb\">\n                            <div class=\"peer peer-greed\">\n                              <i class=\"mR-10 ti-email\"></i>\n                              <span>Inbox</span>\n                            </div>\n                            <div class=\"peer\">\n                              <span class=\"badge rounded-pill bgc-deep-purple-50 c-deep-purple-700\">+99</span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li class=\"nav-item\">\n                        <a href=\"\" class=\"nav-link c-grey-800 cH-blue-500\">\n                          <div class=\"peers ai-c jc-sb\">\n                            <div class=\"peer peer-greed\">\n                              <i class=\"mR-10 ti-share\"></i>\n                              <span>Sent</span>\n                            </div>\n                            <div class=\"peer\">\n                              <span class=\"badge rounded-pill bgc-green-50 c-green-700\">12</span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li class=\"nav-item\">\n                        <a href=\"\" class=\"nav-link c-grey-800 cH-blue-500\">\n                          <div class=\"peers ai-c jc-sb\">\n                            <div class=\"peer peer-greed\">\n                              <i class=\"mR-10 ti-star\"></i>\n                              <span>Important</span>\n                            </div>\n                            <div class=\"peer\">\n                              <span class=\"badge rounded-pill bgc-blue-50 c-blue-700\">3</span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li class=\"nav-item\">\n                        <a href=\"\" class=\"nav-link c-grey-800 cH-blue-500\">\n                          <div class=\"peers ai-c jc-sb\">\n                            <div class=\"peer peer-greed\">\n                              <i class=\"mR-10 ti-file\"></i>\n                              <span>Drafts</span>\n                            </div>\n                            <div class=\"peer\">\n                              <span class=\"badge rounded-pill bgc-amber-50 c-amber-700\">5</span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li class=\"nav-item\">\n                        <a href=\"\" class=\"nav-link c-grey-800 cH-blue-500\">\n                          <div class=\"peers ai-c jc-sb\">\n                            <div class=\"peer peer-greed\">\n                              <i class=\"mR-10 ti-alert\"></i>\n                              <span>Spam</span>\n                            </div>\n                            <div class=\"peer\">\n                              <span class=\"badge rounded-pill bgc-red-50 c-red-700\">1</span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li class=\"nav-item\">\n                        <a href=\"\" class=\"nav-link c-grey-800 cH-blue-500\">\n                          <div class=\"peers ai-c jc-sb\">\n                            <div class=\"peer peer-greed\">\n                              <i class=\"mR-10 ti-trash\"></i>\n                              <span>Trash</span>\n                            </div>\n                            <div class=\"peer\">\n                              <span class=\"badge rounded-pill bgc-red-50 c-red-700\">+99</span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </div>\n                </div>\n              </div>\n              <div class=\"email-wrapper row remain-height pos-r scrollable bgc-white\">\n                <div class=\"email-content open no-inbox-view\">\n                  <div class=\"email-compose\">\n                    <div class=\"d-n@md+ p-20\">\n                      <a class=\"email-side-toggle c-grey-900 cH-blue-500 td-n\" href=\"javascript:void(0)\">\n                        <i class=\"ti-menu\"></i>\n                      </a>\n                    </div>\n                    <form class=\"email-compose-body\">\n                      <h4 class=\"c-grey-900 mB-20\">Send Message</h4>\n                      <div class=\"send-header\">\n                        <div class=\"mb-3\">\n                          <input type=\"text\" class='form-control' placeholder=\"To\">\n                        </div>\n                        <div class=\"mb-3\">\n                          <input type=\"text\" class='form-control' placeholder=\"CC\">\n                        </div>\n                        <div class=\"mb-3\">\n                          <input class=\"form-control\" placeholder=\"Email Subject\">\n                        </div>\n                        <div class=\"mb-3\">\n                          <textarea name=\"compose\" class=\"form-control\" placeholder=\"Say Hi...\" rows='10'></textarea>\n                        </div>\n                      </div>\n                      <div id=\"compose-area\"></div>\n                      <div class=\"text-end mrg-top-30\">\n                        <button class=\"btn btn-danger btn-color\">Send</button>\n                      </div>\n                    </form>\n                  </div>\n                </div>\n              </div>\n              </div>\n            </div>\n          </div>\n        </main>\n\n        <!-- ### $App Screen Footer ### -->\n        <footer class=\"bdT ta-c p-30 lh-0 fsz-sm c-grey-600\">\n          <span>Copyright © 2026 Designed by <a href=\"https://colorlib.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" title=\"Colorlib\">Colorlib</a>. All rights reserved.</span>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "src/datatable.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <title>Data Tables</title>\n    <link href=\"https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css\"  rel=\"stylesheet\">\n    <style>\n      #loader {\n        transition: all 0.3s ease-in-out;\n        opacity: 1;\n        visibility: visible;\n        position: fixed;\n        height: 100vh;\n        width: 100%;\n        background: #fff;\n        z-index: 90000;\n      }\n\n      #loader.fadeOut {\n        opacity: 0;\n        visibility: hidden;\n      }\n\n\n\n      .spinner {\n        width: 40px;\n        height: 40px;\n        position: absolute;\n        top: calc(50% - 20px);\n        left: calc(50% - 20px);\n        background-color: #333;\n        border-radius: 100%;\n        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;\n        animation: sk-scaleout 1.0s infinite ease-in-out;\n      }\n\n      @-webkit-keyframes sk-scaleout {\n        0% { -webkit-transform: scale(0) }\n        100% {\n          -webkit-transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n\n      @keyframes sk-scaleout {\n        0% {\n          -webkit-transform: scale(0);\n          transform: scale(0);\n        } 100% {\n          -webkit-transform: scale(1.0);\n          transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n    </style>\n  </head>\n  <body class=\"app\">\n    <!-- @TOC -->\n    <!-- =================================================== -->\n    <!--\n      + @Page Loader\n      + @App Content\n          - #Left Sidebar\n              > $Sidebar Header\n              > $Sidebar Menu\n\n          - #Main\n              > $Topbar\n              > $App Screen Content\n    -->\n\n    <!-- @Page Loader -->\n    <!-- =================================================== -->\n    <div id='loader'>\n      <div class=\"spinner\"></div>\n    </div>\n\n    <script>\n      window.addEventListener('load', function load() {\n        const loader = document.getElementById('loader');\n        setTimeout(function() {\n          loader.classList.add('fadeOut');\n        }, 300);\n      });\n    </script>\n\n    <!-- @App Content -->\n    <!-- =================================================== -->\n    <div>\n      <!-- #Left Sidebar ==================== -->\n      <div class=\"sidebar\">\n        <div class=\"sidebar-inner\">\n          <!-- ### $Sidebar Header ### -->\n          <div class=\"sidebar-logo\">\n            <div class=\"peers ai-c fxw-nw\">\n              <div class=\"peer peer-greed\">\n                <a class=\"sidebar-link td-n\" href=\"/\">\n                  <div class=\"peers ai-c fxw-nw\">\n                    <div class=\"peer\">\n                      <div class=\"logo\">\n                        <img src=\"assets/static/images/logo.svg\" alt=\"\">\n                      </div>\n                    </div>\n                    <div class=\"peer peer-greed\">\n                      <h5 class=\"lh-1 mB-0 logo-text\">Adminator</h5>\n                    </div>\n                  </div>\n                </a>\n              </div>\n              <div class=\"peer\">\n                <div class=\"mobile-toggle sidebar-toggle\">\n                  <a href=\"\" class=\"td-n\">\n                    <i class=\"ti-arrow-circle-left\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- ### $Sidebar Menu ### -->\n          <ul class=\"sidebar-menu scrollable pos-r\">\n            <li class=\"nav-item mT-30\">\n              <a class=\"sidebar-link\" href=\"index.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-home\"></i>\n                </span>\n                <span class=\"title\">Dashboard</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"sidebar-link\" href=\"https://dashboardpack.com/?utm_source=adminator&utm_medium=sidebar&utm_campaign=go_pro\" target=\"_blank\" rel=\"noopener\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-purple-500 ti-crown\"></i>\n                </span>\n                <span class=\"title\">Go Pro <span class=\"badge bg-primary ms-2\">PRO</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"email.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-brown-500 ti-email\"></i>\n                </span>\n                <span class=\"title\">Email</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"compose.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-share\"></i>\n                </span>\n                <span class=\"title\">Compose</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"calendar.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-orange-500 ti-calendar\"></i>\n                </span>\n                <span class=\"title\">Calendar <span class=\"badge bg-danger ms-2\">HOT</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"chat.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-purple-500 ti-comment-alt\"></i>\n                </span>\n                <span class=\"title\">Chat</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"charts.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-indigo-500 ti-bar-chart\"></i>\n                </span>\n                <span class=\"title\">Charts <span class=\"badge bg-success ms-2\">NEW</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"forms.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-light-blue-500 ti-pencil\"></i>\n                </span>\n                <span class=\"title\">Forms</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"sidebar-link\" href=\"ui.html\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-pink-500 ti-palette\"></i>\n                  </span>\n                <span class=\"title\">UI Elements</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-orange-500 ti-layout-list-thumb\"></i>\n                </span>\n                <span class=\"title\">Tables</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"basic-table.html\">Basic Table</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"datatable.html\">Data Table <span class=\"badge bg-success ms-1\">NEW</span></a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-purple-500 ti-map\"></i>\n                  </span>\n                <span class=\"title\">Maps</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a href=\"google-maps.html\">Google Map</a>\n                </li>\n                <li>\n                  <a href=\"vector-maps.html\">Vector Map</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-red-500 ti-files\"></i>\n                  </span>\n                <span class=\"title\">Pages</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"blank.html\">Blank</a>\n                </li> \n                <li>\n                  <a class='sidebar-link' href=\"404.html\">404</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"500.html\">500</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signin.html\">Sign In</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signup.html\">Sign Up</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-teal-500 ti-view-list-alt\"></i>\n                </span>\n                <span class=\"title\">Multiple Levels</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                  </a>\n                </li>\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                    <span class=\"arrow\">\n                      <i class=\"ti-angle-right\"></i>\n                    </span>\n                  </a>\n                  <ul class=\"dropdown-menu\">\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                  </ul>\n                </li>\n              </ul>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <!-- #Main ============================ -->\n      <div class=\"page-container\">\n        <!-- ### $Topbar ### -->\n        <div class=\"header navbar\">\n          <div class=\"header-container\">\n            <ul class=\"nav-left\">\n              <li>\n                <a id='sidebar-toggle' class=\"sidebar-toggle\" href=\"javascript:void(0);\">\n                  <i class=\"ti-menu\"></i>\n                </a>\n              </li>\n              <li class=\"search-box\">\n                <a class=\"search-toggle no-pdd-right\" href=\"javascript:void(0);\">\n                  <i class=\"search-icon ti-search pdd-right-10\"></i>\n                  <i class=\"search-icon-close ti-close pdd-right-10\"></i>\n                </a>\n              </li>\n              <li class=\"search-input\">\n                <input class=\"form-control\" type=\"text\" placeholder=\"Search...\">\n              </li>\n            </ul>\n            <ul class=\"nav-right\">\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-red\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-bell\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-bell pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Notifications</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">John Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">post</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">5 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Moo Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">cover image</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">7 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Lee Doe</span>\n                              <span class=\"c-grey-600\">commented on your <span class=\"text-dark\">video</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">10 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Notifications <i class=\"ti-angle-right fsz-xs mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-blue\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-email\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-email pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Emails</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">John Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">5 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Moo Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">15 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Lee Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">25 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"email.html\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Email <i class=\"fs-xs ti-angle-right mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"dropdown\">\n                <a href=\"\" class=\"dropdown-toggle no-after peers fxw-nw ai-c lh-1\" data-bs-toggle=\"dropdown\">\n                  <div class=\"peer mR-10\">\n                    <img class=\"w-2r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/10.jpg\" alt=\"\">\n                  </div>\n                  <div class=\"peer\">\n                    <span class=\"fsz-sm c-grey-900\">John Doe</span>\n                  </div>\n                </a>\n                <ul class=\"dropdown-menu fsz-sm\">\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-settings mR-10\"></i>\n                      <span>Setting</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-user mR-10\"></i>\n                      <span>Profile</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"email.html\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-email mR-10\"></i>\n                      <span>Messages</span>\n                    </a>\n                  </li>\n                  <li role=\"separator\" class=\"divider\"></li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-power-off mR-10\"></i>\n                      <span>Logout</span>\n                    </a>\n                  </li>\n                </ul>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <!-- ### $App Screen Content ### -->\n        <main class='main-content bgc-grey-100'>\n          <div id='mainContent'>\n            <div class=\"container-fluid\">\n              <h4 class=\"c-grey-900 mT-10 mB-30\">Data Tables</h4>\n              <div class=\"row\">\n                <div class=\"col-md-12\">\n                  <div class=\"bgc-white bd bdrs-3 p-20 mB-20\">\n                    <h4 class=\"c-grey-900 mB-20\">Bootstrap Data Table</h4>\n                    <table id=\"dataTable\" class=\"table table-striped table-bordered\" cellspacing=\"0\" width=\"100%\">\n                        <thead>\n                          <tr>\n                            <th>Name</th>\n                            <th>Position</th>\n                            <th>Office</th>\n                            <th>Age</th>\n                            <th>Start date</th>\n                            <th>Salary</th>\n                          </tr>\n                        </thead>\n                        <tfoot>\n                          <tr>\n                            <th>Name</th>\n                            <th>Position</th>\n                            <th>Office</th>\n                            <th>Age</th>\n                            <th>Start date</th>\n                            <th>Salary</th>\n                          </tr>\n                        </tfoot>\n                        <tbody>\n                          <tr>\n                            <td>Tiger Nixon</td>\n                            <td>System Architect</td>\n                            <td>Edinburgh</td>\n                            <td>61</td>\n                            <td>2011/04/25</td>\n                            <td>$320,800</td>\n                          </tr>\n                          <tr>\n                            <td>Garrett Winters</td>\n                            <td>Accountant</td>\n                            <td>Tokyo</td>\n                            <td>63</td>\n                            <td>2011/07/25</td>\n                            <td>$170,750</td>\n                          </tr>\n                          <tr>\n                            <td>Ashton Cox</td>\n                            <td>Junior Technical Author</td>\n                            <td>San Francisco</td>\n                            <td>66</td>\n                            <td>2009/01/12</td>\n                            <td>$86,000</td>\n                          </tr>\n                          <tr>\n                            <td>Cedric Kelly</td>\n                            <td>Senior Javascript Developer</td>\n                            <td>Edinburgh</td>\n                            <td>22</td>\n                            <td>2012/03/29</td>\n                            <td>$433,060</td>\n                          </tr>\n                          <tr>\n                            <td>Airi Satou</td>\n                            <td>Accountant</td>\n                            <td>Tokyo</td>\n                            <td>33</td>\n                            <td>2008/11/28</td>\n                            <td>$162,700</td>\n                          </tr>\n                          <tr>\n                            <td>Brielle Williamson</td>\n                            <td>Integration Specialist</td>\n                            <td>New York</td>\n                            <td>61</td>\n                            <td>2012/12/02</td>\n                            <td>$372,000</td>\n                          </tr>\n                          <tr>\n                            <td>Herrod Chandler</td>\n                            <td>Sales Assistant</td>\n                            <td>San Francisco</td>\n                            <td>59</td>\n                            <td>2012/08/06</td>\n                            <td>$137,500</td>\n                          </tr>\n                          <tr>\n                            <td>Rhona Davidson</td>\n                            <td>Integration Specialist</td>\n                            <td>Tokyo</td>\n                            <td>55</td>\n                            <td>2010/10/14</td>\n                            <td>$327,900</td>\n                          </tr>\n                          <tr>\n                            <td>Colleen Hurst</td>\n                            <td>Javascript Developer</td>\n                            <td>San Francisco</td>\n                            <td>39</td>\n                            <td>2009/09/15</td>\n                            <td>$205,500</td>\n                          </tr>\n                          <tr>\n                            <td>Sonya Frost</td>\n                            <td>Software Engineer</td>\n                            <td>Edinburgh</td>\n                            <td>23</td>\n                            <td>2008/12/13</td>\n                            <td>$103,600</td>\n                          </tr>\n                          <tr>\n                            <td>Jena Gaines</td>\n                            <td>Office Manager</td>\n                            <td>London</td>\n                            <td>30</td>\n                            <td>2008/12/19</td>\n                            <td>$90,560</td>\n                          </tr>\n                          <tr>\n                            <td>Quinn Flynn</td>\n                            <td>Support Lead</td>\n                            <td>Edinburgh</td>\n                            <td>22</td>\n                            <td>2013/03/03</td>\n                            <td>$342,000</td>\n                          </tr>\n                          <tr>\n                            <td>Charde Marshall</td>\n                            <td>Regional Director</td>\n                            <td>San Francisco</td>\n                            <td>36</td>\n                            <td>2008/10/16</td>\n                            <td>$470,600</td>\n                          </tr>\n                          <tr>\n                            <td>Haley Kennedy</td>\n                            <td>Senior Marketing Designer</td>\n                            <td>London</td>\n                            <td>43</td>\n                            <td>2012/12/18</td>\n                            <td>$313,500</td>\n                          </tr>\n                          <tr>\n                            <td>Tatyana Fitzpatrick</td>\n                            <td>Regional Director</td>\n                            <td>London</td>\n                            <td>19</td>\n                            <td>2010/03/17</td>\n                            <td>$385,750</td>\n                          </tr>\n                          <tr>\n                            <td>Michael Silva</td>\n                            <td>Marketing Designer</td>\n                            <td>London</td>\n                            <td>66</td>\n                            <td>2012/11/27</td>\n                            <td>$198,500</td>\n                          </tr>\n                          <tr>\n                            <td>Paul Byrd</td>\n                            <td>Chief Financial Officer (CFO)</td>\n                            <td>New York</td>\n                            <td>64</td>\n                            <td>2010/06/09</td>\n                            <td>$725,000</td>\n                          </tr>\n                          <tr>\n                            <td>Gloria Little</td>\n                            <td>Systems Administrator</td>\n                            <td>New York</td>\n                            <td>59</td>\n                            <td>2009/04/10</td>\n                            <td>$237,500</td>\n                          </tr>\n                          <tr>\n                            <td>Bradley Greer</td>\n                            <td>Software Engineer</td>\n                            <td>London</td>\n                            <td>41</td>\n                            <td>2012/10/13</td>\n                            <td>$132,000</td>\n                          </tr>\n                          <tr>\n                            <td>Dai Rios</td>\n                            <td>Personnel Lead</td>\n                            <td>Edinburgh</td>\n                            <td>35</td>\n                            <td>2012/09/26</td>\n                            <td>$217,500</td>\n                          </tr>\n                          <tr>\n                            <td>Jenette Caldwell</td>\n                            <td>Development Lead</td>\n                            <td>New York</td>\n                            <td>30</td>\n                            <td>2011/09/03</td>\n                            <td>$345,000</td>\n                          </tr>\n                          <tr>\n                            <td>Yuri Berry</td>\n                            <td>Chief Marketing Officer (CMO)</td>\n                            <td>New York</td>\n                            <td>40</td>\n                            <td>2009/06/25</td>\n                            <td>$675,000</td>\n                          </tr>\n                          <tr>\n                            <td>Caesar Vance</td>\n                            <td>Pre-Sales Support</td>\n                            <td>New York</td>\n                            <td>21</td>\n                            <td>2011/12/12</td>\n                            <td>$106,450</td>\n                          </tr>\n                          <tr>\n                            <td>Doris Wilder</td>\n                            <td>Sales Assistant</td>\n                            <td>Sidney</td>\n                            <td>23</td>\n                            <td>2010/09/20</td>\n                            <td>$85,600</td>\n                          </tr>\n                          <tr>\n                            <td>Angelica Ramos</td>\n                            <td>Chief Executive Officer (CEO)</td>\n                            <td>London</td>\n                            <td>47</td>\n                            <td>2009/10/09</td>\n                            <td>$1,200,000</td>\n                          </tr>\n                          <tr>\n                            <td>Gavin Joyce</td>\n                            <td>Developer</td>\n                            <td>Edinburgh</td>\n                            <td>42</td>\n                            <td>2010/12/22</td>\n                            <td>$92,575</td>\n                          </tr>\n                          <tr>\n                            <td>Jennifer Chang</td>\n                            <td>Regional Director</td>\n                            <td>Singapore</td>\n                            <td>28</td>\n                            <td>2010/11/14</td>\n                            <td>$357,650</td>\n                          </tr>\n                          <tr>\n                            <td>Brenden Wagner</td>\n                            <td>Software Engineer</td>\n                            <td>San Francisco</td>\n                            <td>28</td>\n                            <td>2011/06/07</td>\n                            <td>$206,850</td>\n                          </tr>\n                          <tr>\n                            <td>Fiona Green</td>\n                            <td>Chief Operating Officer (COO)</td>\n                            <td>San Francisco</td>\n                            <td>48</td>\n                            <td>2010/03/11</td>\n                            <td>$850,000</td>\n                          </tr>\n                          <tr>\n                            <td>Shou Itou</td>\n                            <td>Regional Marketing</td>\n                            <td>Tokyo</td>\n                            <td>20</td>\n                            <td>2011/08/14</td>\n                            <td>$163,000</td>\n                          </tr>\n                          <tr>\n                            <td>Michelle House</td>\n                            <td>Integration Specialist</td>\n                            <td>Sidney</td>\n                            <td>37</td>\n                            <td>2011/06/02</td>\n                            <td>$95,400</td>\n                          </tr>\n                          <tr>\n                            <td>Suki Burks</td>\n                            <td>Developer</td>\n                            <td>London</td>\n                            <td>53</td>\n                            <td>2009/10/22</td>\n                            <td>$114,500</td>\n                          </tr>\n                          <tr>\n                            <td>Prescott Bartlett</td>\n                            <td>Technical Author</td>\n                            <td>London</td>\n                            <td>27</td>\n                            <td>2011/05/07</td>\n                            <td>$145,000</td>\n                          </tr>\n                          <tr>\n                            <td>Gavin Cortez</td>\n                            <td>Team Leader</td>\n                            <td>San Francisco</td>\n                            <td>22</td>\n                            <td>2008/10/26</td>\n                            <td>$235,500</td>\n                          </tr>\n                          <tr>\n                            <td>Martena Mccray</td>\n                            <td>Post-Sales support</td>\n                            <td>Edinburgh</td>\n                            <td>46</td>\n                            <td>2011/03/09</td>\n                            <td>$324,050</td>\n                          </tr>\n                          <tr>\n                            <td>Unity Butler</td>\n                            <td>Marketing Designer</td>\n                            <td>San Francisco</td>\n                            <td>47</td>\n                            <td>2009/12/09</td>\n                            <td>$85,675</td>\n                          </tr>\n                          <tr>\n                            <td>Howard Hatfield</td>\n                            <td>Office Manager</td>\n                            <td>San Francisco</td>\n                            <td>51</td>\n                            <td>2008/12/16</td>\n                            <td>$164,500</td>\n                          </tr>\n                          <tr>\n                            <td>Hope Fuentes</td>\n                            <td>Secretary</td>\n                            <td>San Francisco</td>\n                            <td>41</td>\n                            <td>2010/02/12</td>\n                            <td>$109,850</td>\n                          </tr>\n                          <tr>\n                            <td>Vivian Harrell</td>\n                            <td>Financial Controller</td>\n                            <td>San Francisco</td>\n                            <td>62</td>\n                            <td>2009/02/14</td>\n                            <td>$452,500</td>\n                          </tr>\n                          <tr>\n                            <td>Timothy Mooney</td>\n                            <td>Office Manager</td>\n                            <td>London</td>\n                            <td>37</td>\n                            <td>2008/12/11</td>\n                            <td>$136,200</td>\n                          </tr>\n                          <tr>\n                            <td>Jackson Bradshaw</td>\n                            <td>Director</td>\n                            <td>New York</td>\n                            <td>65</td>\n                            <td>2008/09/26</td>\n                            <td>$645,750</td>\n                          </tr>\n                          <tr>\n                            <td>Olivia Liang</td>\n                            <td>Support Engineer</td>\n                            <td>Singapore</td>\n                            <td>64</td>\n                            <td>2011/02/03</td>\n                            <td>$234,500</td>\n                          </tr>\n                          <tr>\n                            <td>Bruno Nash</td>\n                            <td>Software Engineer</td>\n                            <td>London</td>\n                            <td>38</td>\n                            <td>2011/05/03</td>\n                            <td>$163,500</td>\n                          </tr>\n                          <tr>\n                            <td>Sakura Yamamoto</td>\n                            <td>Support Engineer</td>\n                            <td>Tokyo</td>\n                            <td>37</td>\n                            <td>2009/08/19</td>\n                            <td>$139,575</td>\n                          </tr>\n                          <tr>\n                            <td>Thor Walton</td>\n                            <td>Developer</td>\n                            <td>New York</td>\n                            <td>61</td>\n                            <td>2013/08/11</td>\n                            <td>$98,540</td>\n                          </tr>\n                          <tr>\n                            <td>Finn Camacho</td>\n                            <td>Support Engineer</td>\n                            <td>San Francisco</td>\n                            <td>47</td>\n                            <td>2009/07/07</td>\n                            <td>$87,500</td>\n                          </tr>\n                          <tr>\n                            <td>Serge Baldwin</td>\n                            <td>Data Coordinator</td>\n                            <td>Singapore</td>\n                            <td>64</td>\n                            <td>2012/04/09</td>\n                            <td>$138,575</td>\n                          </tr>\n                          <tr>\n                            <td>Zenaida Frank</td>\n                            <td>Software Engineer</td>\n                            <td>New York</td>\n                            <td>63</td>\n                            <td>2010/01/04</td>\n                            <td>$125,250</td>\n                          </tr>\n                          <tr>\n                            <td>Zorita Serrano</td>\n                            <td>Software Engineer</td>\n                            <td>San Francisco</td>\n                            <td>56</td>\n                            <td>2012/06/01</td>\n                            <td>$115,000</td>\n                          </tr>\n                          <tr>\n                            <td>Jennifer Acosta</td>\n                            <td>Junior Javascript Developer</td>\n                            <td>Edinburgh</td>\n                            <td>43</td>\n                            <td>2013/02/01</td>\n                            <td>$75,650</td>\n                          </tr>\n                          <tr>\n                            <td>Cara Stevens</td>\n                            <td>Sales Assistant</td>\n                            <td>New York</td>\n                            <td>46</td>\n                            <td>2011/12/06</td>\n                            <td>$145,600</td>\n                          </tr>\n                          <tr>\n                            <td>Hermione Butler</td>\n                            <td>Regional Director</td>\n                            <td>London</td>\n                            <td>47</td>\n                            <td>2011/03/21</td>\n                            <td>$356,250</td>\n                          </tr>\n                          <tr>\n                            <td>Lael Greer</td>\n                            <td>Systems Administrator</td>\n                            <td>London</td>\n                            <td>21</td>\n                            <td>2009/02/27</td>\n                            <td>$103,500</td>\n                          </tr>\n                          <tr>\n                            <td>Jonas Alexander</td>\n                            <td>Developer</td>\n                            <td>San Francisco</td>\n                            <td>30</td>\n                            <td>2010/07/14</td>\n                            <td>$86,500</td>\n                          </tr>\n                          <tr>\n                            <td>Shad Decker</td>\n                            <td>Regional Director</td>\n                            <td>Edinburgh</td>\n                            <td>51</td>\n                            <td>2008/11/13</td>\n                            <td>$183,000</td>\n                          </tr>\n                          <tr>\n                            <td>Michael Bruce</td>\n                            <td>Javascript Developer</td>\n                            <td>Singapore</td>\n                            <td>29</td>\n                            <td>2011/06/27</td>\n                            <td>$183,000</td>\n                          </tr>\n                          <tr>\n                            <td>Donna Snider</td>\n                            <td>Customer Support</td>\n                            <td>New York</td>\n                            <td>27</td>\n                            <td>2011/01/25</td>\n                            <td>$112,000</td>\n                          </tr>\n                        </tbody>\n                      </table>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </main>\n\n        <!-- ### $App Screen Footer ### -->\n        <footer class=\"bdT ta-c p-30 lh-0 fsz-sm c-grey-600\">\n          <span>Copyright © 2026 Designed by <a href=\"https://colorlib.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" title=\"Colorlib\">Colorlib</a>. All rights reserved.</span>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "src/email.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <title>Email</title>\n    <style>\n      #loader {\n        transition: all 0.3s ease-in-out;\n        opacity: 1;\n        visibility: visible;\n        position: fixed;\n        height: 100vh;\n        width: 100%;\n        background: #fff;\n        z-index: 90000;\n      }\n\n      #loader.fadeOut {\n        opacity: 0;\n        visibility: hidden;\n      }\n\n\n\n      .spinner {\n        width: 40px;\n        height: 40px;\n        position: absolute;\n        top: calc(50% - 20px);\n        left: calc(50% - 20px);\n        background-color: #333;\n        border-radius: 100%;\n        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;\n        animation: sk-scaleout 1.0s infinite ease-in-out;\n      }\n\n      @-webkit-keyframes sk-scaleout {\n        0% { -webkit-transform: scale(0) }\n        100% {\n          -webkit-transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n\n      @keyframes sk-scaleout {\n        0% {\n          -webkit-transform: scale(0);\n          transform: scale(0);\n        } 100% {\n          -webkit-transform: scale(1.0);\n          transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n    </style>\n  </head>\n  <body class=\"app\">\n    <!-- @TOC -->\n    <!-- =================================================== -->\n    <!--\n      + @Page Loader\n      + @App Content\n          - #Left Sidebar\n              > $Sidebar Header\n              > $Sidebar Menu\n\n          - #Main\n              > $Topbar\n              > $App Screen Content\n    -->\n\n    <!-- @Page Loader -->\n    <!-- =================================================== -->\n    <div id='loader'>\n      <div class=\"spinner\"></div>\n    </div>\n\n    <script>\n      window.addEventListener('load', function load() {\n        const loader = document.getElementById('loader');\n        setTimeout(function() {\n          loader.classList.add('fadeOut');\n        }, 300);\n      });\n    </script>\n\n    <!-- @App Content -->\n    <!-- =================================================== -->\n    <div>\n      <!-- #Left Sidebar ==================== -->\n      <div class=\"sidebar\">\n        <div class=\"sidebar-inner\">\n          <!-- ### $Sidebar Header ### -->\n          <div class=\"sidebar-logo\">\n            <div class=\"peers ai-c fxw-nw\">\n              <div class=\"peer peer-greed\">\n                <a class=\"sidebar-link td-n\" href=\"index.html\">\n                  <div class=\"peers ai-c fxw-nw\">\n                    <div class=\"peer\">\n                      <div class=\"logo\">\n                        <img src=\"assets/static/images/logo.svg\" alt=\"\">\n                      </div>\n                    </div>\n                    <div class=\"peer peer-greed\">\n                      <h5 class=\"lh-1 mB-0 logo-text\">Adminator</h5>\n                    </div>\n                  </div>\n                </a>\n              </div>\n              <div class=\"peer\">\n                <div class=\"mobile-toggle sidebar-toggle\">\n                  <a href=\"\" class=\"td-n\">\n                    <i class=\"ti-arrow-circle-left\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- ### $Sidebar Menu ### -->\n          <ul class=\"sidebar-menu scrollable pos-r\">\n            <li class=\"nav-item mT-30\">\n              <a class=\"sidebar-link\" href=\"index.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-home\"></i>\n                </span>\n                <span class=\"title\">Dashboard</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"sidebar-link\" href=\"https://dashboardpack.com/?utm_source=adminator&utm_medium=sidebar&utm_campaign=go_pro\" target=\"_blank\" rel=\"noopener\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-purple-500 ti-crown\"></i>\n                </span>\n                <span class=\"title\">Go Pro <span class=\"badge bg-primary ms-2\">PRO</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"email.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-brown-500 ti-email\"></i>\n                </span>\n                <span class=\"title\">Email</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"compose.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-share\"></i>\n                </span>\n                <span class=\"title\">Compose</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"calendar.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-orange-500 ti-calendar\"></i>\n                </span>\n                <span class=\"title\">Calendar <span class=\"badge bg-danger ms-2\">HOT</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"chat.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-purple-500 ti-comment-alt\"></i>\n                </span>\n                <span class=\"title\">Chat</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"charts.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-indigo-500 ti-bar-chart\"></i>\n                </span>\n                <span class=\"title\">Charts <span class=\"badge bg-success ms-2\">NEW</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"forms.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-light-blue-500 ti-pencil\"></i>\n                </span>\n                <span class=\"title\">Forms</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"sidebar-link\" href=\"ui.html\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-pink-500 ti-palette\"></i>\n                  </span>\n                <span class=\"title\">UI Elements</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-orange-500 ti-layout-list-thumb\"></i>\n                </span>\n                <span class=\"title\">Tables</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"basic-table.html\">Basic Table</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"datatable.html\">Data Table <span class=\"badge bg-success ms-1\">NEW</span></a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-purple-500 ti-map\"></i>\n                  </span>\n                <span class=\"title\">Maps</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a href=\"google-maps.html\">Google Map</a>\n                </li>\n                <li>\n                  <a href=\"vector-maps.html\">Vector Map</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-red-500 ti-files\"></i>\n                  </span>\n                <span class=\"title\">Pages</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"blank.html\">Blank</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"404.html\">404</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"500.html\">500</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signin.html\">Sign In</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signup.html\">Sign Up</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-teal-500 ti-view-list-alt\"></i>\n                </span>\n                <span class=\"title\">Multiple Levels</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                  </a>\n                </li>\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                    <span class=\"arrow\">\n                      <i class=\"ti-angle-right\"></i>\n                    </span>\n                  </a>\n                  <ul class=\"dropdown-menu\">\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                  </ul>\n                </li>\n              </ul>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <!-- #Main ============================ -->\n      <div class=\"page-container\">\n        <!-- ### $Topbar ### -->\n        <div class=\"header navbar\">\n          <div class=\"header-container\">\n            <ul class=\"nav-left\">\n              <li>\n                <a id='sidebar-toggle' class=\"sidebar-toggle\" href=\"javascript:void(0);\">\n                  <i class=\"ti-menu\"></i>\n                </a>\n              </li>\n              <li class=\"search-box\">\n                <a class=\"search-toggle no-pdd-right\" href=\"javascript:void(0);\">\n                  <i class=\"search-icon ti-search pdd-right-10\"></i>\n                  <i class=\"search-icon-close ti-close pdd-right-10\"></i>\n                </a>\n              </li>\n              <li class=\"search-input\">\n                <input class=\"form-control\" type=\"text\" placeholder=\"Search...\">\n              </li>\n            </ul>\n            <ul class=\"nav-right\">\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-red\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-bell\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-bell pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Notifications</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">John Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">post</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">5 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Moo Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">cover image</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">7 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Lee Doe</span>\n                              <span class=\"c-grey-600\">commented on your <span class=\"text-dark\">video</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">10 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Notifications <i class=\"ti-angle-right fsz-xs mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-blue\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-email\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-email pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Emails</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">John Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">5 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Moo Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">15 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Lee Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">25 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"email.html\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Email <i class=\"fs-xs ti-angle-right mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"dropdown\">\n                <a href=\"\" class=\"dropdown-toggle no-after peers fxw-nw ai-c lh-1\" data-bs-toggle=\"dropdown\">\n                  <div class=\"peer mR-10\">\n                    <img class=\"w-2r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/10.jpg\" alt=\"\">\n                  </div>\n                  <div class=\"peer\">\n                    <span class=\"fsz-sm c-grey-900\">John Doe</span>\n                  </div>\n                </a>\n                <ul class=\"dropdown-menu fsz-sm\">\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-settings mR-10\"></i>\n                      <span>Setting</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-user mR-10\"></i>\n                      <span>Profile</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"email.html\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-email mR-10\"></i>\n                      <span>Messages</span>\n                    </a>\n                  </li>\n                  <li role=\"separator\" class=\"divider\"></li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-power-off mR-10\"></i>\n                      <span>Logout</span>\n                    </a>\n                  </li>\n                </ul>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <!-- ### $App Screen Content ### -->\n        <main class='main-content bgc-grey-100'>\n          <div id='mainContent'>\n            <div class=\"full-container\">\n              <div class=\"email-app\">\n                <div class=\"email-side-nav remain-height ov-h\">\n                  <div class=\"h-100 layers\">\n                    <div class=\"p-20 bgc-grey-100 layer w-100\">\n                      <a href=\"compose.html\" class=\"btn btn-danger d-grid\">New Message</a>\n                    </div>\n                    <div class=\"scrollable pos-r bdT layer w-100 fxg-1\">\n                      <ul class=\"p-20 nav flex-column\">\n                        <li class=\"nav-item\">\n                          <a href=\"javascript:void(0)\" class=\"nav-link c-grey-800 cH-blue-500 actived\">\n                            <div class=\"peers ai-c jc-sb\">\n                              <div class=\"peer peer-greed\">\n                                <i class=\"mR-10 ti-email\"></i>\n                                <span>Inbox</span>\n                              </div>\n                              <div class=\"peer\">\n                                <span class=\"badge rounded-pill bgc-deep-purple-50 c-deep-purple-700\">+99</span>\n                              </div>\n                            </div>\n                          </a>\n                        </li>\n                        <li class=\"nav-item\">\n                          <a href=\"\" class=\"nav-link c-grey-800 cH-blue-500\">\n                            <div class=\"peers ai-c jc-sb\">\n                              <div class=\"peer peer-greed\">\n                                <i class=\"mR-10 ti-share\"></i>\n                                <span>Sent</span>\n                              </div>\n                              <div class=\"peer\">\n                                <span class=\"badge rounded-pill bgc-green-50 c-green-700\">12</span>\n                              </div>\n                            </div>\n                          </a>\n                        </li>\n                        <li class=\"nav-item\">\n                          <a href=\"\" class=\"nav-link c-grey-800 cH-blue-500\">\n                            <div class=\"peers ai-c jc-sb\">\n                              <div class=\"peer peer-greed\">\n                                <i class=\"mR-10 ti-star\"></i>\n                                <span>Important</span>\n                              </div>\n                              <div class=\"peer\">\n                                <span class=\"badge rounded-pill bgc-blue-50 c-blue-700\">3</span>\n                              </div>\n                            </div>\n                          </a>\n                        </li>\n                        <li class=\"nav-item\">\n                          <a href=\"\" class=\"nav-link c-grey-800 cH-blue-500\">\n                            <div class=\"peers ai-c jc-sb\">\n                              <div class=\"peer peer-greed\">\n                                <i class=\"mR-10 ti-file\"></i>\n                                <span>Drafts</span>\n                              </div>\n                              <div class=\"peer\">\n                                <span class=\"badge rounded-pill bgc-amber-50 c-amber-700\">5</span>\n                              </div>\n                            </div>\n                          </a>\n                        </li>\n                        <li class=\"nav-item\">\n                          <a href=\"\" class=\"nav-link c-grey-800 cH-blue-500\">\n                            <div class=\"peers ai-c jc-sb\">\n                              <div class=\"peer peer-greed\">\n                                <i class=\"mR-10 ti-alert\"></i>\n                                <span>Spam</span>\n                              </div>\n                              <div class=\"peer\">\n                                <span class=\"badge rounded-pill bgc-red-50 c-red-700\">1</span>\n                              </div>\n                            </div>\n                          </a>\n                        </li>\n                        <li class=\"nav-item\">\n                          <a href=\"\" class=\"nav-link c-grey-800 cH-blue-500\">\n                            <div class=\"peers ai-c jc-sb\">\n                              <div class=\"peer peer-greed\">\n                                <i class=\"mR-10 ti-trash\"></i>\n                                <span>Trash</span>\n                              </div>\n                              <div class=\"peer\">\n                                <span class=\"badge rounded-pill bgc-red-50 c-red-700\">+99</span>\n                              </div>\n                            </div>\n                          </a>\n                        </li>\n                      </ul>\n                    </div>\n                  </div>\n                </div>\n              <div class=\"email-wrapper row remain-height bgc-white ov-h\">\n                <div class=\"email-list h-100 layers\">\n                  <div class=\"layer w-100\">\n                    <div class=\"bgc-grey-100 peers ai-c jc-sb p-20 fxw-nw\">\n                      <div class=\"peer\">\n                        <div class=\"btn-group\" role=\"group\">\n                          <button type=\"button\" class=\"email-side-toggle d-n@md+ btn bgc-white bdrs-2 mR-3 cur-p\">\n                            <i class=\"ti-menu\"></i>\n                          </button>\n                          <button type=\"button\" class=\"btn bgc-white bdrs-2 mR-3 cur-p\">\n                            <i class=\"ti-folder\"></i>\n                          </button>\n                          <button type=\"button\" class=\"btn bgc-white bdrs-2 mR-3 cur-p\">\n                            <i class=\"ti-tag\"></i>\n                          </button>\n                          <div class=\"btn-group\" role=\"group\">\n                            <button id=\"btnGroupDrop1\" type=\"button\" class=\"btn cur-p bgc-white no-after dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                              <i class=\"ti-more-alt\"></i>\n                            </button>\n                            <ul class=\"dropdown-menu fsz-sm\" aria-labelledby=\"btnGroupDrop1\">\n                              <li>\n                                <a href=\"\" class=\"d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700\">\n                                  <i class=\"ti-trash mR-10\"></i>\n                                  <span>Delete</span>\n                                </a>\n                              </li>\n                              <li>\n                                <a href=\"\" class=\"d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700\">\n                                  <i class=\"ti-alert mR-10\"></i>\n                                  <span>Mark as Spam</span>\n                                </a>\n                              </li>\n                              <li>\n                                <a href=\"\" class=\"d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700\">\n                                  <i class=\"ti-star mR-10\"></i>\n                                  <span>Star</span>\n                                </a>\n                              </li>\n                            </ul>\n                          </div>\n                        </div>\n                      </div>\n                      <div class=\"peer\">\n                        <div class=\"btn-group\" role=\"group\">\n                          <button type=\"button\" class=\"fsz-xs btn bgc-white bdrs-2 mR-3 cur-p\">\n                            <i class=\"ti-angle-left\"></i>\n                          </button>\n                          <button type=\"button\" class=\"fsz-xs btn bgc-white bdrs-2 mR-3 cur-p\">\n                            <i class=\"ti-angle-right\"></i>\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"layer w-100\">\n                    <div class=\"bdT bdB\">\n                      <input type=\"text\" class=\"form-control m-0 bdw-0 pY-15 pX-20\" placeholder=\"Search...\">\n                    </div>\n                  </div>\n                  <div class=\"layer w-100 fxg-1 scrollable pos-r\">\n                    <div class=\"\">\n                      <div class=\"email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p\">\n                        <div class=\"peer mR-10\">\n                          <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                            <input type=\"checkbox\" id=\"inputCall1\" name=\"inputCheckboxesCall\" class=\"peer\">\n                            <label for=\"inputCall1\" class=\"form-label peers peer-greed js-sb ai-c\"></label>\n                          </div>\n                        </div>\n                        <div class=\"peer peer-greed ov-h\">\n                          <div class=\"peers ai-c\">\n                            <div class=\"peer peer-greed\">\n                              <h6>John Doe</h6>\n                            </div>\n                            <div class=\"peer\">\n                              <small>1 min ago</small>\n                            </div>\n                          </div>\n                          <h5 class=\"fsz-def tt-c c-grey-900\">title goes here</h5>\n                          <span class=\"whs-nw w-100 ov-h tov-e d-b\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>\n                        </div>\n                      </div>\n                      <div class=\"email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p\">\n                        <div class=\"peer mR-10\">\n                          <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                            <input type=\"checkbox\" id=\"inputCall1\" name=\"inputCheckboxesCall\" class=\"peer\">\n                            <label for=\"inputCall1\" class=\"form-label peers peer-greed js-sb ai-c\"></label>\n                          </div>\n                        </div>\n                        <div class=\"peer peer-greed ov-h\">\n                          <div class=\"peers ai-c\">\n                            <div class=\"peer peer-greed\">\n                              <h6>John Doe</h6>\n                            </div>\n                            <div class=\"peer\">\n                              <small>1 min ago</small>\n                            </div>\n                          </div>\n                          <h5 class=\"fsz-def tt-c c-grey-900\">title goes here</h5>\n                          <span class=\"whs-nw w-100 ov-h tov-e d-b\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>\n                        </div>\n                      </div>\n                      <div class=\"email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p\">\n                        <div class=\"peer mR-10\">\n                          <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                            <input type=\"checkbox\" id=\"inputCall1\" name=\"inputCheckboxesCall\" class=\"peer\">\n                            <label for=\"inputCall1\" class=\"form-label peers peer-greed js-sb ai-c\"></label>\n                          </div>\n                        </div>\n                        <div class=\"peer peer-greed ov-h\">\n                          <div class=\"peers ai-c\">\n                            <div class=\"peer peer-greed\">\n                              <h6>John Doe</h6>\n                            </div>\n                            <div class=\"peer\">\n                              <small>1 min ago</small>\n                            </div>\n                          </div>\n                          <h5 class=\"fsz-def tt-c c-grey-900\">title goes here</h5>\n                          <span class=\"whs-nw w-100 ov-h tov-e d-b\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>\n                        </div>\n                      </div>\n                      <div class=\"email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p\">\n                        <div class=\"peer mR-10\">\n                          <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                            <input type=\"checkbox\" id=\"inputCall1\" name=\"inputCheckboxesCall\" class=\"peer\">\n                            <label for=\"inputCall1\" class=\"form-label peers peer-greed js-sb ai-c\"></label>\n                          </div>\n                        </div>\n                        <div class=\"peer peer-greed ov-h\">\n                          <div class=\"peers ai-c\">\n                            <div class=\"peer peer-greed\">\n                              <h6>John Doe</h6>\n                            </div>\n                            <div class=\"peer\">\n                              <small>1 min ago</small>\n                            </div>\n                          </div>\n                          <h5 class=\"fsz-def tt-c c-grey-900\">title goes here</h5>\n                          <span class=\"whs-nw w-100 ov-h tov-e d-b\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>\n                        </div>\n                      </div>\n                      <div class=\"email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p\">\n                        <div class=\"peer mR-10\">\n                          <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                            <input type=\"checkbox\" id=\"inputCall1\" name=\"inputCheckboxesCall\" class=\"peer\">\n                            <label for=\"inputCall1\" class=\"form-label peers peer-greed js-sb ai-c\"></label>\n                          </div>\n                        </div>\n                        <div class=\"peer peer-greed ov-h\">\n                          <div class=\"peers ai-c\">\n                            <div class=\"peer peer-greed\">\n                              <h6>John Doe</h6>\n                            </div>\n                            <div class=\"peer\">\n                              <small>1 min ago</small>\n                            </div>\n                          </div>\n                          <h5 class=\"fsz-def tt-c c-grey-900\">title goes here</h5>\n                          <span class=\"whs-nw w-100 ov-h tov-e d-b\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>\n                        </div>\n                      </div>\n                      <div class=\"email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p\">\n                        <div class=\"peer mR-10\">\n                          <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                            <input type=\"checkbox\" id=\"inputCall1\" name=\"inputCheckboxesCall\" class=\"peer\">\n                            <label for=\"inputCall1\" class=\"form-label peers peer-greed js-sb ai-c\"></label>\n                          </div>\n                        </div>\n                        <div class=\"peer peer-greed ov-h\">\n                          <div class=\"peers ai-c\">\n                            <div class=\"peer peer-greed\">\n                              <h6>John Doe</h6>\n                            </div>\n                            <div class=\"peer\">\n                              <small>1 min ago</small>\n                            </div>\n                          </div>\n                          <h5 class=\"fsz-def tt-c c-grey-900\">title goes here</h5>\n                          <span class=\"whs-nw w-100 ov-h tov-e d-b\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>\n                        </div>\n                      </div>\n                      <div class=\"email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p\">\n                        <div class=\"peer mR-10\">\n                          <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                            <input type=\"checkbox\" id=\"inputCall1\" name=\"inputCheckboxesCall\" class=\"peer\">\n                            <label for=\"inputCall1\" class=\"form-label peers peer-greed js-sb ai-c\"></label>\n                          </div>\n                        </div>\n                        <div class=\"peer peer-greed ov-h\">\n                          <div class=\"peers ai-c\">\n                            <div class=\"peer peer-greed\">\n                              <h6>John Doe</h6>\n                            </div>\n                            <div class=\"peer\">\n                              <small>1 min ago</small>\n                            </div>\n                          </div>\n                          <h5 class=\"fsz-def tt-c c-grey-900\">title goes here</h5>\n                          <span class=\"whs-nw w-100 ov-h tov-e d-b\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>\n                        </div>\n                      </div>\n                      <div class=\"email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p\">\n                        <div class=\"peer mR-10\">\n                          <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                            <input type=\"checkbox\" id=\"inputCall1\" name=\"inputCheckboxesCall\" class=\"peer\">\n                            <label for=\"inputCall1\" class=\"form-label peers peer-greed js-sb ai-c\"></label>\n                          </div>\n                        </div>\n                        <div class=\"peer peer-greed ov-h\">\n                          <div class=\"peers ai-c\">\n                            <div class=\"peer peer-greed\">\n                              <h6>John Doe</h6>\n                            </div>\n                            <div class=\"peer\">\n                              <small>1 min ago</small>\n                            </div>\n                          </div>\n                          <h5 class=\"fsz-def tt-c c-grey-900\">title goes here</h5>\n                          <span class=\"whs-nw w-100 ov-h tov-e d-b\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>\n                        </div>\n                      </div>\n                      <div class=\"email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p\">\n                        <div class=\"peer mR-10\">\n                          <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                            <input type=\"checkbox\" id=\"inputCall1\" name=\"inputCheckboxesCall\" class=\"peer\">\n                            <label for=\"inputCall1\" class=\"form-label peers peer-greed js-sb ai-c\"></label>\n                          </div>\n                        </div>\n                        <div class=\"peer peer-greed ov-h\">\n                          <div class=\"peers ai-c\">\n                            <div class=\"peer peer-greed\">\n                              <h6>John Doe</h6>\n                            </div>\n                            <div class=\"peer\">\n                              <small>1 min ago</small>\n                            </div>\n                          </div>\n                          <h5 class=\"fsz-def tt-c c-grey-900\">title goes here</h5>\n                          <span class=\"whs-nw w-100 ov-h tov-e d-b\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>\n                        </div>\n                      </div>\n                      <div class=\"email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p\">\n                        <div class=\"peer mR-10\">\n                          <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                            <input type=\"checkbox\" id=\"inputCall1\" name=\"inputCheckboxesCall\" class=\"peer\">\n                            <label for=\"inputCall1\" class=\"form-label peers peer-greed js-sb ai-c\"></label>\n                          </div>\n                        </div>\n                        <div class=\"peer peer-greed ov-h\">\n                          <div class=\"peers ai-c\">\n                            <div class=\"peer peer-greed\">\n                              <h6>John Doe</h6>\n                            </div>\n                            <div class=\"peer\">\n                              <small>1 min ago</small>\n                            </div>\n                          </div>\n                          <h5 class=\"fsz-def tt-c c-grey-900\">title goes here</h5>\n                          <span class=\"whs-nw w-100 ov-h tov-e d-b\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>\n                        </div>\n                      </div>\n                      <div class=\"email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p\">\n                        <div class=\"peer mR-10\">\n                          <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                            <input type=\"checkbox\" id=\"inputCall1\" name=\"inputCheckboxesCall\" class=\"peer\">\n                            <label for=\"inputCall1\" class=\"form-label peers peer-greed js-sb ai-c\"></label>\n                          </div>\n                        </div>\n                        <div class=\"peer peer-greed ov-h\">\n                          <div class=\"peers ai-c\">\n                            <div class=\"peer peer-greed\">\n                              <h6>John Doe</h6>\n                            </div>\n                            <div class=\"peer\">\n                              <small>1 min ago</small>\n                            </div>\n                          </div>\n                          <h5 class=\"fsz-def tt-c c-grey-900\">title goes here</h5>\n                          <span class=\"whs-nw w-100 ov-h tov-e d-b\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"email-content h-100\">\n                  <div class=\"h-100 scrollable pos-r\">\n                    <div class=\"bgc-grey-100 peers ai-c jc-sb p-20 fxw-nw d-n@md+\">\n                      <div class=\"peer\">\n                        <div class=\"btn-group\" role=\"group\">\n                          <button type=\"button\" class=\"back-to-mailbox btn bgc-white bdrs-2 mR-3 cur-p\">\n                            <i class=\"ti-angle-left\"></i>\n                          </button>\n                          <button type=\"button\" class=\"btn bgc-white bdrs-2 mR-3 cur-p\">\n                            <i class=\"ti-folder\"></i>\n                          </button>\n                          <button type=\"button\" class=\"btn bgc-white bdrs-2 mR-3 cur-p\">\n                            <i class=\"ti-tag\"></i>\n                          </button>\n                          <div class=\"btn-group\" role=\"group\">\n                            <button id=\"btnGroupDrop1\" type=\"button\" class=\"btn cur-p bgc-white no-after dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                              <i class=\"ti-more-alt\"></i>\n                            </button>\n                            <ul class=\"dropdown-menu fsz-sm\" aria-labelledby=\"btnGroupDrop1\">\n                              <li>\n                                <a href=\"\" class=\"d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700\">\n                                  <i class=\"ti-trash mR-10\"></i>\n                                  <span>Delete</span>\n                                </a>\n                              </li>\n                              <li>\n                                <a href=\"\" class=\"d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700\">\n                                  <i class=\"ti-alert mR-10\"></i>\n                                  <span>Mark as Spam</span>\n                                </a>\n                              </li>\n                              <li>\n                                <a href=\"\" class=\"d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700\">\n                                  <i class=\"ti-star mR-10\"></i>\n                                  <span>Star</span>\n                                </a>\n                              </li>\n                            </ul>\n                          </div>\n                        </div>\n                      </div>\n                      <div class=\"peer\">\n                        <div class=\"btn-group\" role=\"group\">\n                          <button type=\"button\" class=\"fsz-xs btn bgc-white bdrs-2 mR-3 cur-p\">\n                            <i class=\"ti-angle-left\"></i>\n                          </button>\n                          <button type=\"button\" class=\"fsz-xs btn bgc-white bdrs-2 mR-3 cur-p\">\n                            <i class=\"ti-angle-right\"></i>\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                    <div class=\"email-content-wrapper\">\n                      <!-- Header -->\n                      <div class=\"peers ai-c jc-sb pX-40 pY-30\">\n                        <div class=\"peers peer-greed\">\n                          <div class=\"peer mR-20\">\n                            <img class=\"bdrs-50p w-3r h-3r\" alt=\"\" src=\"https://randomuser.me/api/portraits/men/11.jpg\">\n                          </div>\n                          <div class=\"peer\">\n                            <small>Nov, 02 2024</small>\n                            <h5 class=\"c-grey-900 mB-5\">John Doe</h5>\n                            <span>To: email@gmail.com</span>\n                          </div>\n                        </div>\n                        <div class=\"peer\">\n                          <a href=\"\" class=\"btn btn-danger bdrs-50p p-15 lh-0\">\n                            <i class=\"fa fa-reply\"></i>\n                          </a>\n                        </div>\n                      </div>\n\n                      <!-- Content -->\n                      <div class=\"bdT pX-40 pY-30\">\n                        <h4>Title of this email goes here</h4>\n                        <p>\n                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n                          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n                          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n                          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n                          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n                          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n                        </p>\n                        <p>\n                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n                          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n                          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n                        </p>\n                        <p>\n                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n                          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              </div>\n            </div>\n          </div>\n        </main>\n\n        <!-- ### $App Screen Footer ### -->\n        <footer class=\"bdT ta-c p-30 lh-0 fsz-sm c-grey-600\">\n          <span>Copyright © 2026 Designed by <a href=\"https://colorlib.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" title=\"Colorlib\">Colorlib</a>. All rights reserved.</span>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "src/forms.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <title>Forms</title>\n    <style>\n      #loader {\n        transition: all 0.3s ease-in-out;\n        opacity: 1;\n        visibility: visible;\n        position: fixed;\n        height: 100vh;\n        width: 100%;\n        background: #fff;\n        z-index: 90000;\n      }\n\n      #loader.fadeOut {\n        opacity: 0;\n        visibility: hidden;\n      }\n\n\n\n      .spinner {\n        width: 40px;\n        height: 40px;\n        position: absolute;\n        top: calc(50% - 20px);\n        left: calc(50% - 20px);\n        background-color: #333;\n        border-radius: 100%;\n        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;\n        animation: sk-scaleout 1.0s infinite ease-in-out;\n      }\n\n      @-webkit-keyframes sk-scaleout {\n        0% { -webkit-transform: scale(0) }\n        100% {\n          -webkit-transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n\n      @keyframes sk-scaleout {\n        0% {\n          -webkit-transform: scale(0);\n          transform: scale(0);\n        } 100% {\n          -webkit-transform: scale(1.0);\n          transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n    </style>\n  </head>\n  <body class=\"app\">\n    <!-- @TOC -->\n    <!-- =================================================== -->\n    <!--\n      + @Page Loader\n      + @App Content\n          - #Left Sidebar\n              > $Sidebar Header\n              > $Sidebar Menu\n\n          - #Main\n              > $Topbar\n              > $App Screen Content\n    -->\n\n    <!-- @Page Loader -->\n    <!-- =================================================== -->\n    <div id='loader'>\n      <div class=\"spinner\"></div>\n    </div>\n\n    <script>\n      window.addEventListener('load', function load() {\n        const loader = document.getElementById('loader');\n        setTimeout(function() {\n          loader.classList.add('fadeOut');\n        }, 300);\n      });\n    </script>\n\n    <!-- @App Content -->\n    <!-- =================================================== -->\n    <div>\n      <!-- #Left Sidebar ==================== -->\n      <div class=\"sidebar\">\n        <div class=\"sidebar-inner\">\n          <!-- ### $Sidebar Header ### -->\n          <div class=\"sidebar-logo\">\n            <div class=\"peers ai-c fxw-nw\">\n              <div class=\"peer peer-greed\">\n                <a class=\"sidebar-link td-n\" href=\"index.html\">\n                  <div class=\"peers ai-c fxw-nw\">\n                    <div class=\"peer\">\n                      <div class=\"logo\">\n                        <img src=\"assets/static/images/logo.svg\" alt=\"\">\n                      </div>\n                    </div>\n                    <div class=\"peer peer-greed\">\n                      <h5 class=\"lh-1 mB-0 logo-text\">Adminator</h5>\n                    </div>\n                  </div>\n                </a>\n              </div>\n              <div class=\"peer\">\n                <div class=\"mobile-toggle sidebar-toggle\">\n                  <a href=\"\" class=\"td-n\">\n                    <i class=\"ti-arrow-circle-left\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- ### $Sidebar Menu ### -->\n          <ul class=\"sidebar-menu scrollable pos-r\">\n            <li class=\"nav-item mT-30\">\n              <a class=\"sidebar-link\" href=\"index.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-home\"></i>\n                </span>\n                <span class=\"title\">Dashboard</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"sidebar-link\" href=\"https://dashboardpack.com/?utm_source=adminator&utm_medium=sidebar&utm_campaign=go_pro\" target=\"_blank\" rel=\"noopener\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-purple-500 ti-crown\"></i>\n                </span>\n                <span class=\"title\">Go Pro <span class=\"badge bg-primary ms-2\">PRO</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"email.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-brown-500 ti-email\"></i>\n                </span>\n                <span class=\"title\">Email</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"compose.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-share\"></i>\n                </span>\n                <span class=\"title\">Compose</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"calendar.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-orange-500 ti-calendar\"></i>\n                </span>\n                <span class=\"title\">Calendar <span class=\"badge bg-danger ms-2\">HOT</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"chat.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-purple-500 ti-comment-alt\"></i>\n                </span>\n                <span class=\"title\">Chat</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"charts.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-indigo-500 ti-bar-chart\"></i>\n                </span>\n                <span class=\"title\">Charts <span class=\"badge bg-success ms-2\">NEW</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"forms.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-light-blue-500 ti-pencil\"></i>\n                </span>\n                <span class=\"title\">Forms</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"sidebar-link\" href=\"ui.html\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-pink-500 ti-palette\"></i>\n                  </span>\n                <span class=\"title\">UI Elements</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-orange-500 ti-layout-list-thumb\"></i>\n                </span>\n                <span class=\"title\">Tables</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"basic-table.html\">Basic Table</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"datatable.html\">Data Table <span class=\"badge bg-success ms-1\">NEW</span></a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-purple-500 ti-map\"></i>\n                  </span>\n                <span class=\"title\">Maps</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a href=\"google-maps.html\">Google Map</a>\n                </li>\n                <li>\n                  <a href=\"vector-maps.html\">Vector Map</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-red-500 ti-files\"></i>\n                  </span>\n                <span class=\"title\">Pages</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"blank.html\">Blank</a>\n                </li>                 \n                <li>\n                  <a class='sidebar-link' href=\"404.html\">404</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"500.html\">500</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signin.html\">Sign In</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signup.html\">Sign Up</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-teal-500 ti-view-list-alt\"></i>\n                </span>\n                <span class=\"title\">Multiple Levels</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                  </a>\n                </li>\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                    <span class=\"arrow\">\n                      <i class=\"ti-angle-right\"></i>\n                    </span>\n                  </a>\n                  <ul class=\"dropdown-menu\">\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                  </ul>\n                </li>\n              </ul>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <!-- #Main ============================ -->\n      <div class=\"page-container\">\n        <!-- ### $Topbar ### -->\n        <div class=\"header navbar\">\n          <div class=\"header-container\">\n            <ul class=\"nav-left\">\n              <li>\n                <a id='sidebar-toggle' class=\"sidebar-toggle\" href=\"javascript:void(0);\">\n                  <i class=\"ti-menu\"></i>\n                </a>\n              </li>\n              <li class=\"search-box\">\n                <a class=\"search-toggle no-pdd-right\" href=\"javascript:void(0);\">\n                  <i class=\"search-icon ti-search pdd-right-10\"></i>\n                  <i class=\"search-icon-close ti-close pdd-right-10\"></i>\n                </a>\n              </li>\n              <li class=\"search-input\">\n                <input class=\"form-control\" type=\"text\" placeholder=\"Search...\">\n              </li>\n            </ul>\n            <ul class=\"nav-right\">\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-red\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-bell\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-bell pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Notifications</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">John Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">post</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">5 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Moo Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">cover image</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">7 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Lee Doe</span>\n                              <span class=\"c-grey-600\">commented on your <span class=\"text-dark\">video</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">10 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Notifications <i class=\"ti-angle-right fsz-xs mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-blue\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-email\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-email pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Emails</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">John Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">5 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Moo Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">15 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Lee Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">25 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"email.html\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Email <i class=\"fs-xs ti-angle-right mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"dropdown\">\n                <a href=\"\" class=\"dropdown-toggle no-after peers fxw-nw ai-c lh-1\" data-bs-toggle=\"dropdown\">\n                  <div class=\"peer mR-10\">\n                    <img class=\"w-2r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/10.jpg\" alt=\"\">\n                  </div>\n                  <div class=\"peer\">\n                    <span class=\"fsz-sm c-grey-900\">John Doe</span>\n                  </div>\n                </a>\n                <ul class=\"dropdown-menu fsz-sm\">\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-settings mR-10\"></i>\n                      <span>Setting</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-user mR-10\"></i>\n                      <span>Profile</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"email.html\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-email mR-10\"></i>\n                      <span>Messages</span>\n                    </a>\n                  </li>\n                  <li role=\"separator\" class=\"divider\"></li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-power-off mR-10\"></i>\n                      <span>Logout</span>\n                    </a>\n                  </li>\n                </ul>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <!-- ### $App Screen Content ### -->\n        <main class='main-content bgc-grey-100'>\n          <div id='mainContent'>\n            <div class=\"row gap-20 masonry pos-r\">\n              <div class=\"masonry-sizer col-md-6\"></div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Basic Form</h6>\n                  <div class=\"mT-30\">\n                    <form>\n                      <div class=\"mb-3\">\n                        <label class=\"form-label\" for=\"exampleInputEmail1\">Email address</label>\n                        <input type=\"email\" class=\"form-control\" id=\"exampleInputEmail1\" aria-describedby=\"emailHelp\" placeholder=\"Enter email\">\n                        <small id=\"emailHelp\" class=\"text-muted\">We'll never share your email with anyone else.</small>\n                      </div>\n                      <div class=\"mb-3\">\n                        <label class=\"form-label\" for=\"exampleInputPassword1\">Password</label>\n                        <input type=\"password\" class=\"form-control\" id=\"exampleInputPassword1\" placeholder=\"Password\">\n                      </div>\n                      <div class=\"checkbox checkbox-circle checkbox-info peers ai-c mB-15\">\n                        <input type=\"checkbox\" id=\"inputCall1\" name=\"inputCheckboxesCall\" class=\"peer\">\n                        <label for=\"inputCall1\" class=\"form-label peers peer-greed js-sb ai-c\">\n                          <span class=\"peer peer-greed\">Call John for Dinner</span>\n                        </label>\n                      </div>\n                      <button type=\"submit\" class=\"btn btn-primary btn-color\">Submit</button>\n                    </form>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Complex Form Layout</h6>\n                  <div class=\"mT-30\">\n                    <form>\n                      <div class=\"row\">\n                        <div class=\"mb-3 col-md-6\">\n                          <label class=\"form-label\" for=\"inputEmail4\">Email</label>\n                          <input type=\"email\" class=\"form-control\" id=\"inputEmail4\" placeholder=\"Email\">\n                        </div>\n                        <div class=\"mb-3 col-md-6\">\n                          <label class=\"form-label\" for=\"inputPassword4\">Password</label>\n                          <input type=\"password\" class=\"form-control\" id=\"inputPassword4\" placeholder=\"Password\">\n                        </div>\n                      </div>\n                      <div class=\"mb-3\">\n                        <label class=\"form-label\" for=\"inputAddress\">Address</label>\n                        <input type=\"text\" class=\"form-control\" id=\"inputAddress\" placeholder=\"1234 Main St\">\n                      </div>\n                      <div class=\"mb-3\">\n                        <label class=\"form-label\" for=\"inputAddress2\">Address 2</label>\n                        <input type=\"text\" class=\"form-control\" id=\"inputAddress2\" placeholder=\"Apartment, studio, or floor\">\n                      </div>\n                      <div class=\"row\">\n                        <div class=\"mb-3 col-md-6\">\n                          <label class=\"form-label\" for=\"inputCity\">City</label>\n                          <input type=\"text\" class=\"form-control\" id=\"inputCity\">\n                        </div>\n                        <div class=\"mb-3 col-md-4\">\n                          <label class=\"form-label\" for=\"inputState\">State</label>\n                          <select id=\"inputState\" class=\"form-control\">\n                            <option selected>Choose...</option>\n                            <option>...</option>\n                          </select>\n                        </div>\n                        <div class=\"mb-3 col-md-2\">\n                          <label class=\"form-label\" for=\"inputZip\">Zip</label>\n                          <input type=\"text\" class=\"form-control\" id=\"inputZip\">\n                        </div>\n                      </div>\n                      <div class=\"row\">\n                        <div class=\"mb-3 col-md-6\">\n                          <label class=\"form-label fw-500\">Birthdate</label>\n                          <div class=\"timepicker-input input-icon mb-3\">\n                            <div class=\"input-group\">\n                              <div class=\"input-group-text bgc-white bd bdwR-0\">\n                                <i class=\"ti-calendar\"></i>\n                              </div>\n                              <input type=\"text\" class=\"form-control bdc-grey-200 start-date\" placeholder=\"Select Date\">\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                      <div class=\"mb-3\">\n                        <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                          <input type=\"checkbox\" id=\"inputCall2\" name=\"inputCheckboxesCall\" class=\"peer\">\n                          <label for=\"inputCall2\" class=\"form-label peers peer-greed js-sb ai-c\">\n                            <span class=\"peer peer-greed\">Call John for Dinner</span>\n                          </label>\n                        </div>\n                      </div>\n                      <button type=\"submit\" class=\"btn btn-primary btn-color\">Sign in</button>\n                    </form>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Horizontal Form</h6>\n                  <div class=\"mT-30\">\n                    <form>\n                      <div class=\"mb-3 row\">\n                        <label for=\"inputEmail3\" class=\"form-label col-sm-2 col-form-label\">Email</label>\n                        <div class=\"col-sm-10\">\n                          <input type=\"email\" class=\"form-control\" id=\"inputEmail3\" placeholder=\"Email\">\n                        </div>\n                      </div>\n                      <div class=\"mb-3 row\">\n                        <label for=\"inputPassword3\" class=\"form-label col-sm-2 col-form-label\">Password</label>\n                        <div class=\"col-sm-10\">\n                          <input type=\"password\" class=\"form-control\" id=\"inputPassword3\" placeholder=\"Password\">\n                        </div>\n                      </div>\n                      <fieldset class=\"mb-3\">\n                        <div class=\"row\">\n                          <legend class=\"col-form-legend col-sm-2\">Radios</legend>\n                          <div class=\"col-sm-10\">\n                            <div class=\"form-check\">\n                              <label class=\"form-label form-check-label\">\n                                <input class=\"form-check-input\" type=\"radio\" name=\"gridRadios\" id=\"gridRadios1\" value=\"option1\" checked>\n                                Option one is this and that&mdash;be sure to include why it's great\n                              </label>\n                            </div>\n                            <div class=\"form-check\">\n                              <label class=\"form-label form-check-label\">\n                                <input class=\"form-check-input\" type=\"radio\" name=\"gridRadios\" id=\"gridRadios2\" value=\"option2\">\n                                Option two can be something else and selecting it will deselect option one\n                              </label>\n                            </div>\n                            <div class=\"form-check disabled\">\n                              <label class=\"form-label form-check-label\">\n                                <input class=\"form-check-input\" type=\"radio\" name=\"gridRadios\" id=\"gridRadios3\" value=\"option3\" disabled>\n                                Option three is disabled\n                              </label>\n                            </div>\n                          </div>\n                        </div>\n                      </fieldset>\n                      <div class=\"mb-3 row\">\n                        <div class=\"col-sm-2\">Checkbox</div>\n                        <div class=\"col-sm-10\">\n                          <div class=\"form-check\">\n                            <label class=\"form-label form-check-label\">\n                              <input class=\"form-check-input\" type=\"checkbox\"> Check me out\n                            </label>\n                          </div>\n                        </div>\n                      </div>\n                      <div class=\"mb-3 row\">\n                        <div class=\"col-sm-10\">\n                          <button type=\"submit\" class=\"btn btn-primary btn-color\">Sign in</button>\n                        </div>\n                      </div>\n                    </form>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Disabled Forms</h6>\n                  <div class=\"mT-30\">\n                    <form>\n                      <fieldset disabled>\n                        <div class=\"mb-3\">\n                          <label class=\"form-label\" for=\"disabledTextInput\">Disabled input</label>\n                          <input type=\"text\" id=\"disabledTextInput\" class=\"form-control\" placeholder=\"Disabled input\">\n                        </div>\n                        <div class=\"mb-3\">\n                          <label class=\"form-label\" for=\"disabledSelect\">Disabled select menu</label>\n                          <select id=\"disabledSelect\" class=\"form-control\">\n                            <option>Disabled select</option>\n                          </select>\n                        </div>\n                        <div class=\"form-check\">\n                          <label class=\"form-label\" class=\"form-check-label\">\n                            <input class=\"form-check-input\" type=\"checkbox\"> Can't check this\n                          </label>\n                        </div>\n                        <button type=\"submit\" class=\"btn btn-primary btn-color\">Submit</button>\n                      </fieldset>\n                    </form>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Validation</h6>\n                  <div class=\"mT-30\">\n                    <form class=\"container\" id=\"needs-validation\" novalidate>\n                      <div class=\"row\">\n                        <div class=\"col-md-6 mb-3\">\n                          <label class=\"form-label\" for=\"validationCustom01\">First name</label>\n                          <input type=\"text\" class=\"form-control\" id=\"validationCustom01\" placeholder=\"First name\" value=\"Mark\" required>\n                        </div>\n                        <div class=\"col-md-6 mb-3\">\n                          <label class=\"form-label\" for=\"validationCustom02\">Last name</label>\n                          <input type=\"text\" class=\"form-control\" id=\"validationCustom02\" placeholder=\"Last name\" value=\"Otto\" required>\n                        </div>\n                      </div>\n                      <div class=\"row\">\n                        <div class=\"col-md-6 mb-3\">\n                          <label class=\"form-label\" for=\"validationCustom03\">City</label>\n                          <input type=\"text\" class=\"form-control\" id=\"validationCustom03\" placeholder=\"City\" required>\n                          <div class=\"invalid-feedback\">\n                            Please provide a valid city.\n                          </div>\n                        </div>\n                        <div class=\"col-md-3 mb-3\">\n                          <label class=\"form-label\" for=\"validationCustom04\">State</label>\n                          <input type=\"text\" class=\"form-control\" id=\"validationCustom04\" placeholder=\"State\" required>\n                          <div class=\"invalid-feedback\">\n                            Please provide a valid state.\n                          </div>\n                        </div>\n                        <div class=\"col-md-3 mb-3\">\n                          <label class=\"form-label\" for=\"validationCustom05\">Zip</label>\n                          <input type=\"text\" class=\"form-control\" id=\"validationCustom05\" placeholder=\"Zip\" required>\n                          <div class=\"invalid-feedback\">\n                            Please provide a valid zip.\n                          </div>\n                        </div>\n                      </div>\n                      <button class=\"btn btn-primary btn-color\" type=\"submit\">Submit form</button>\n                    </form>\n                    <script>\n                      // Example starter JavaScript for disabling form submissions if there are invalid fields\n                      (function() {\n                        'use strict';\n\n                        window.addEventListener('load', function() {\n                          var form = document.getElementById('needs-validation');\n                          form.addEventListener('submit', function(event) {\n                            if (form.checkValidity() === false) {\n                              event.preventDefault();\n                              event.stopPropagation();\n                            }\n                            form.classList.add('was-validated');\n                          }, false);\n                        }, false);\n                      })();\n                    </script>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </main>\n\n        <!-- ### $App Screen Footer ### -->\n        <footer class=\"bdT ta-c p-30 lh-0 fsz-sm c-grey-600\">\n          <span>Copyright © 2026 Designed by <a href=\"https://colorlib.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" title=\"Colorlib\">Colorlib</a>. All rights reserved.</span>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "src/google-maps.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <title>Google Maps</title>\n    <style>\n      #loader {\n        transition: all 0.3s ease-in-out;\n        opacity: 1;\n        visibility: visible;\n        position: fixed;\n        height: 100vh;\n        width: 100%;\n        background: #fff;\n        z-index: 90000;\n      }\n\n      #loader.fadeOut {\n        opacity: 0;\n        visibility: hidden;\n      }\n\n\n\n      .spinner {\n        width: 40px;\n        height: 40px;\n        position: absolute;\n        top: calc(50% - 20px);\n        left: calc(50% - 20px);\n        background-color: #333;\n        border-radius: 100%;\n        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;\n        animation: sk-scaleout 1.0s infinite ease-in-out;\n      }\n\n      @-webkit-keyframes sk-scaleout {\n        0% { -webkit-transform: scale(0) }\n        100% {\n          -webkit-transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n\n      @keyframes sk-scaleout {\n        0% {\n          -webkit-transform: scale(0);\n          transform: scale(0);\n        } 100% {\n          -webkit-transform: scale(1.0);\n          transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n    </style>\n  </head>\n  <body class=\"app\">\n    <!-- @TOC -->\n    <!-- =================================================== -->\n    <!--\n      + @Page Loader\n      + @App Content\n          - #Left Sidebar\n              > $Sidebar Header\n              > $Sidebar Menu\n\n          - #Main\n              > $Topbar\n              > $App Screen Content\n    -->\n\n    <!-- @Page Loader -->\n    <!-- =================================================== -->\n    <div id='loader'>\n      <div class=\"spinner\"></div>\n    </div>\n\n    <script>\n      window.addEventListener('load', function load() {\n        const loader = document.getElementById('loader');\n        setTimeout(function() {\n          loader.classList.add('fadeOut');\n        }, 300);\n      });\n    </script>\n\n    <!-- @App Content -->\n    <!-- =================================================== -->\n    <div>\n      <!-- #Left Sidebar ==================== -->\n      <div class=\"sidebar\">\n        <div class=\"sidebar-inner\">\n          <!-- ### $Sidebar Header ### -->\n          <div class=\"sidebar-logo\">\n            <div class=\"peers ai-c fxw-nw\">\n              <div class=\"peer peer-greed\">\n                <a class=\"sidebar-link td-n\" href=\"index.html\">\n                  <div class=\"peers ai-c fxw-nw\">\n                    <div class=\"peer\">\n                      <div class=\"logo\">\n                        <img src=\"assets/static/images/logo.svg\" alt=\"\">\n                      </div>\n                    </div>\n                    <div class=\"peer peer-greed\">\n                      <h5 class=\"lh-1 mB-0 logo-text\">Adminator</h5>\n                    </div>\n                  </div>\n                </a>\n              </div>\n              <div class=\"peer\">\n                <div class=\"mobile-toggle sidebar-toggle\">\n                  <a href=\"\" class=\"td-n\">\n                    <i class=\"ti-arrow-circle-left\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- ### $Sidebar Menu ### -->\n          <ul class=\"sidebar-menu scrollable pos-r\">\n            <li class=\"nav-item mT-30\">\n              <a class=\"sidebar-link\" href=\"index.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-home\"></i>\n                </span>\n                <span class=\"title\">Dashboard</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"sidebar-link\" href=\"https://dashboardpack.com/?utm_source=adminator&utm_medium=sidebar&utm_campaign=go_pro\" target=\"_blank\" rel=\"noopener\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-purple-500 ti-crown\"></i>\n                </span>\n                <span class=\"title\">Go Pro <span class=\"badge bg-primary ms-2\">PRO</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"email.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-brown-500 ti-email\"></i>\n                </span>\n                <span class=\"title\">Email</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"compose.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-share\"></i>\n                </span>\n                <span class=\"title\">Compose</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"calendar.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-orange-500 ti-calendar\"></i>\n                </span>\n                <span class=\"title\">Calendar <span class=\"badge bg-danger ms-2\">HOT</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"chat.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-purple-500 ti-comment-alt\"></i>\n                </span>\n                <span class=\"title\">Chat</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"charts.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-indigo-500 ti-bar-chart\"></i>\n                </span>\n                <span class=\"title\">Charts <span class=\"badge bg-success ms-2\">NEW</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"forms.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-light-blue-500 ti-pencil\"></i>\n                </span>\n                <span class=\"title\">Forms</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"sidebar-link\" href=\"ui.html\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-pink-500 ti-palette\"></i>\n                  </span>\n                <span class=\"title\">UI Elements</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-orange-500 ti-layout-list-thumb\"></i>\n                </span>\n                <span class=\"title\">Tables</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"basic-table.html\">Basic Table</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"datatable.html\">Data Table <span class=\"badge bg-success ms-1\">NEW</span></a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-purple-500 ti-map\"></i>\n                  </span>\n                <span class=\"title\">Maps</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a href=\"google-maps.html\">Google Map</a>\n                </li>\n                <li>\n                  <a href=\"vector-maps.html\">Vector Map</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-red-500 ti-files\"></i>\n                  </span>\n                <span class=\"title\">Pages</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"blank.html\">Blank</a>\n                </li>                 \n                <li>\n                  <a class='sidebar-link' href=\"404.html\">404</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"500.html\">500</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signin.html\">Sign In</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signup.html\">Sign Up</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-teal-500 ti-view-list-alt\"></i>\n                </span>\n                <span class=\"title\">Multiple Levels</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                  </a>\n                </li>\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                    <span class=\"arrow\">\n                      <i class=\"ti-angle-right\"></i>\n                    </span>\n                  </a>\n                  <ul class=\"dropdown-menu\">\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                  </ul>\n                </li>\n              </ul>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <!-- #Main ============================ -->\n      <div class=\"page-container\">\n        <!-- ### $Topbar ### -->\n        <div class=\"header navbar\">\n          <div class=\"header-container\">\n            <ul class=\"nav-left\">\n              <li>\n                <a id='sidebar-toggle' class=\"sidebar-toggle\" href=\"javascript:void(0);\">\n                  <i class=\"ti-menu\"></i>\n                </a>\n              </li>\n              <li class=\"search-box\">\n                <a class=\"search-toggle no-pdd-right\" href=\"javascript:void(0);\">\n                  <i class=\"search-icon ti-search pdd-right-10\"></i>\n                  <i class=\"search-icon-close ti-close pdd-right-10\"></i>\n                </a>\n              </li>\n              <li class=\"search-input\">\n                <input class=\"form-control\" type=\"text\" placeholder=\"Search...\">\n              </li>\n            </ul>\n            <ul class=\"nav-right\">\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-red\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-bell\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-bell pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Notifications</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">John Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">post</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">5 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Moo Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">cover image</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">7 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Lee Doe</span>\n                              <span class=\"c-grey-600\">commented on your <span class=\"text-dark\">video</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">10 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Notifications <i class=\"ti-angle-right fsz-xs mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-blue\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-email\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-email pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Emails</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">John Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">5 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Moo Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">15 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Lee Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">25 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"email.html\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Email <i class=\"fs-xs ti-angle-right mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"dropdown\">\n                <a href=\"\" class=\"dropdown-toggle no-after peers fxw-nw ai-c lh-1\" data-bs-toggle=\"dropdown\">\n                  <div class=\"peer mR-10\">\n                    <img class=\"w-2r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/10.jpg\" alt=\"\">\n                  </div>\n                  <div class=\"peer\">\n                    <span class=\"fsz-sm c-grey-900\">John Doe</span>\n                  </div>\n                </a>\n                <ul class=\"dropdown-menu fsz-sm\">\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-settings mR-10\"></i>\n                      <span>Setting</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-user mR-10\"></i>\n                      <span>Profile</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"email.html\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-email mR-10\"></i>\n                      <span>Messages</span>\n                    </a>\n                  </li>\n                  <li role=\"separator\" class=\"divider\"></li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-power-off mR-10\"></i>\n                      <span>Logout</span>\n                    </a>\n                  </li>\n                </ul>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <!-- ### $App Screen Content ### -->\n        <main class='main-content bgc-grey-100'>\n          <div id='mainContent'>\n            <div class=\"container-fluid\">\n              <h4 class=\"c-grey-900 mT-10 mB-30\">Google Maps</h4>\n              <div class=\"row\">\n                <div class=\"col-md-12\">\n                  <div class=\"bgc-white bd bdrs-3 p-20 mB-20\">\n                    <h6 class=\"c-grey-900 mB-20\">Google Maps</h6>\n                    <div id=\"google-map\" style=\"padding-bottom: 75%;\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n          </div>\n        </main>\n\n        <!-- ### $App Screen Footer ### -->\n        <footer class=\"bdT ta-c p-30 lh-0 fsz-sm c-grey-600\">\n          <span>Copyright © 2026 Designed by <a href=\"https://colorlib.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" title=\"Colorlib\">Colorlib</a>. All rights reserved.</span>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "src/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <title>Dashboard</title>\n\n    <style>\n      #loader {\n        transition: all 0.3s ease-in-out;\n        opacity: 1;\n        visibility: visible;\n        position: fixed;\n        height: 100vh;\n        width: 100%;\n        background: #fff;\n        z-index: 90000;\n      }\n\n      #loader.fadeOut {\n        opacity: 0;\n        visibility: hidden;\n      }\n\n      .spinner {\n        width: 40px;\n        height: 40px;\n        position: absolute;\n        top: calc(50% - 20px);\n        left: calc(50% - 20px);\n        background-color: #333;\n        border-radius: 100%;\n        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;\n        animation: sk-scaleout 1.0s infinite ease-in-out;\n      }\n\n      @-webkit-keyframes sk-scaleout {\n        0% { -webkit-transform: scale(0) }\n        100% {\n          -webkit-transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n\n      @keyframes sk-scaleout {\n        0% {\n          -webkit-transform: scale(0);\n          transform: scale(0);\n        } 100% {\n          -webkit-transform: scale(1.0);\n          transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n    </style>\n  </head>\n  <body class=\"app\">\n    <!-- @TOC -->\n    <!-- =================================================== -->\n    <!--\n      + @Page Loader\n      + @App Content\n          - #Left Sidebar\n              > $Sidebar Header\n              > $Sidebar Menu\n\n          - #Main\n              > $Topbar\n              > $App Screen Content\n    -->\n\n    <!-- @Page Loader -->\n    <!-- =================================================== -->\n    <div id='loader'>\n      <div class=\"spinner\"></div>\n    </div>\n\n    <script>\n      window.addEventListener('load', function load() {\n        const loader = document.getElementById('loader');\n        setTimeout(function() {\n          loader.classList.add('fadeOut');\n        }, 300);\n      });\n    </script>\n\n    <!-- @App Content -->\n    <!-- =================================================== -->\n    <div>\n      <!-- #Left Sidebar ==================== -->\n      <div class=\"sidebar\">\n        <div class=\"sidebar-inner\">\n          <!-- ### $Sidebar Header ### -->\n          <div class=\"sidebar-logo\">\n            <div class=\"peers ai-c fxw-nw\">\n              <div class=\"peer peer-greed\">\n                <a class=\"sidebar-link td-n\" href=\"index.html\">\n                  <div class=\"peers ai-c fxw-nw\">\n                    <div class=\"peer\">\n                      <div class=\"logo\">\n                        <img src=\"assets/static/images/logo.svg\" alt=\"\">\n                      </div>\n                    </div>\n                    <div class=\"peer peer-greed\">\n                      <h5 class=\"lh-1 mB-0 logo-text\">Adminator</h5>\n                    </div>\n                  </div>\n                </a>\n              </div>\n              <div class=\"peer\">\n                <div class=\"mobile-toggle sidebar-toggle\">\n                  <a href=\"\" class=\"td-n\">\n                    <i class=\"ti-arrow-circle-left\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- ### $Sidebar Menu ### -->\n          <ul class=\"sidebar-menu scrollable pos-r\">\n            <li class=\"nav-item mT-30\">\n              <a class=\"sidebar-link\" href=\"index.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-home\"></i>\n                </span>\n                <span class=\"title\">Dashboard</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"sidebar-link\" href=\"https://dashboardpack.com/?utm_source=adminator&utm_medium=sidebar&utm_campaign=go_pro\" target=\"_blank\" rel=\"noopener\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-purple-500 ti-crown\"></i>\n                </span>\n                <span class=\"title\">Go Pro <span class=\"badge bg-primary ms-2\">PRO</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"email.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-brown-500 ti-email\"></i>\n                </span>\n                <span class=\"title\">Email</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"compose.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-share\"></i>\n                </span>\n                <span class=\"title\">Compose</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"calendar.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-orange-500 ti-calendar\"></i>\n                </span>\n                <span class=\"title\">Calendar <span class=\"badge bg-danger ms-2\">HOT</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"chat.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-purple-500 ti-comment-alt\"></i>\n                </span>\n                <span class=\"title\">Chat</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"charts.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-indigo-500 ti-bar-chart\"></i>\n                </span>\n                <span class=\"title\">Charts <span class=\"badge bg-success ms-2\">NEW</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"forms.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-light-blue-500 ti-pencil\"></i>\n                </span>\n                <span class=\"title\">Forms</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"sidebar-link\" href=\"ui.html\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-pink-500 ti-palette\"></i>\n                  </span>\n                <span class=\"title\">UI Elements</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-orange-500 ti-layout-list-thumb\"></i>\n                </span>\n                <span class=\"title\">Tables</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"basic-table.html\">Basic Table</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"datatable.html\">Data Table <span class=\"badge bg-success ms-1\">NEW</span></a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-purple-500 ti-map\"></i>\n                  </span>\n                <span class=\"title\">Maps</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a href=\"google-maps.html\">Google Map</a>\n                </li>\n                <li>\n                  <a href=\"vector-maps.html\">Vector Map</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-red-500 ti-files\"></i>\n                  </span>\n                <span class=\"title\">Pages</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"blank.html\">Blank</a>\n                </li>                 \n                <li>\n                  <a class='sidebar-link' href=\"404.html\">404</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"500.html\">500</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signin.html\">Sign In</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signup.html\">Sign Up</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-teal-500 ti-view-list-alt\"></i>\n                </span>\n                <span class=\"title\">Multiple Levels</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                  </a>\n                </li>\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                    <span class=\"arrow\">\n                      <i class=\"ti-angle-right\"></i>\n                    </span>\n                  </a>\n                  <ul class=\"dropdown-menu\">\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                  </ul>\n                </li>\n              </ul>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <!-- #Main ============================ -->\n      <div class=\"page-container\">\n        <!-- ### $Topbar ### -->\n        <div class=\"header navbar\">\n          <div class=\"header-container\">\n            <ul class=\"nav-left\">\n              <li>\n                <a id='sidebar-toggle' class=\"sidebar-toggle\" href=\"javascript:void(0);\">\n                  <i class=\"ti-menu\"></i>\n                </a>\n              </li>\n              <li class=\"search-box\">\n                <a class=\"search-toggle no-pdd-right\" href=\"javascript:void(0);\">\n                  <i class=\"search-icon ti-search pdd-right-10\"></i>\n                  <i class=\"search-icon-close ti-close pdd-right-10\"></i>\n                </a>\n              </li>\n              <li class=\"search-input\">\n                <input class=\"form-control\" type=\"text\" placeholder=\"Search...\">\n              </li>\n            </ul>\n            <ul class=\"nav-right\">\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-red\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" id=\"dropdownMenuButton1\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\n                  <i class=\"ti-bell\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton1\"> \n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-bell pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Notifications</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">John Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">post</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">5 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Moo Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">cover image</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">7 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Lee Doe</span>\n                              <span class=\"c-grey-600\">commented on your <span class=\"text-dark\">video</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">10 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Notifications <i class=\"ti-angle-right fsz-xs mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-blue\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-email\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-email pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Emails</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">John Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">5 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Moo Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">15 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Lee Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">25 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"email.html\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Email <i class=\"fs-xs ti-angle-right mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"dropdown\">\n                <a href=\"\" class=\"dropdown-toggle no-after peers fxw-nw ai-c lh-1\" data-bs-toggle=\"dropdown\">\n                  <div class=\"peer mR-10\">\n                    <img class=\"w-2r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/10.jpg\" alt=\"\">\n                  </div>\n                  <div class=\"peer\">\n                    <span class=\"fsz-sm c-grey-900\">John Doe</span>\n                  </div>\n                </a>\n                <ul class=\"dropdown-menu fsz-sm\">\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-settings mR-10\"></i>\n                      <span>Setting</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-user mR-10\"></i>\n                      <span>Profile</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"email.html\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-email mR-10\"></i>\n                      <span>Messages</span>\n                    </a>\n                  </li>\n                  <li role=\"separator\" class=\"divider\"></li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-power-off mR-10\"></i>\n                      <span>Logout</span>\n                    </a>\n                  </li>\n                </ul>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <!-- ### $App Screen Content ### -->\n        <main class='main-content bgc-grey-100'>\n          <div id='mainContent'>\n            <div class=\"row gap-20 masonry pos-r\">\n              <div class=\"masonry-sizer col-md-6\"></div>\n              <div class=\"masonry-item  w-100\">\n                <div class=\"row gap-20\">\n                  <!-- #Toatl Visits ==================== -->\n                  <div class='col-md-3'>\n                    <div class=\"layers bd bgc-white p-20\">\n                      <div class=\"layer w-100 mB-10\">\n                        <h6 class=\"lh-1\">Total Visits</h6>\n                      </div>\n                      <div class=\"layer w-100\">\n                        <div class=\"peers ai-sb fxw-nw\">\n                          <div class=\"peer peer-greed\">\n                            <span id=\"sparklinedash\"></span>\n                          </div>\n                          <div class=\"peer\">\n                            <span class=\"d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-green-50 c-green-500\">+10%</span>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n\n                  <!-- #Total Page Views ==================== -->\n                  <div class='col-md-3'>\n                    <div class=\"layers bd bgc-white p-20\">\n                      <div class=\"layer w-100 mB-10\">\n                        <h6 class=\"lh-1\">Total Page Views</h6>\n                      </div>\n                      <div class=\"layer w-100\">\n                        <div class=\"peers ai-sb fxw-nw\">\n                          <div class=\"peer peer-greed\">\n                            <span id=\"sparklinedash2\"></span>\n                          </div>\n                          <div class=\"peer\">\n                            <span class=\"d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-red-50 c-red-500\">-7%</span>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n\n                  <!-- #Unique Visitors ==================== -->\n                  <div class='col-md-3'>\n                    <div class=\"layers bd bgc-white p-20\">\n                      <div class=\"layer w-100 mB-10\">\n                        <h6 class=\"lh-1\">Unique Visitor</h6>\n                      </div>\n                      <div class=\"layer w-100\">\n                        <div class=\"peers ai-sb fxw-nw\">\n                          <div class=\"peer peer-greed\">\n                            <span id=\"sparklinedash3\"></span>\n                          </div>\n                          <div class=\"peer\">\n                            <span class=\"d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-purple-50 c-purple-500\">~12%</span>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n\n                  <!-- #Bounce Rate ==================== -->\n                  <div class='col-md-3'>\n                    <div class=\"layers bd bgc-white p-20\">\n                      <div class=\"layer w-100 mB-10\">\n                        <h6 class=\"lh-1\">Bounce Rate</h6>\n                      </div>\n                      <div class=\"layer w-100\">\n                        <div class=\"peers ai-sb fxw-nw\">\n                          <div class=\"peer peer-greed\">\n                            <span id=\"sparklinedash4\"></span>\n                          </div>\n                          <div class=\"peer\">\n                            <span class=\"d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-blue-50 c-blue-500\">33%</span>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-12\">\n                <!-- #Site Visits ==================== -->\n                <div class=\"bd bgc-white\">\n                  <div class=\"peers fxw-nw@lg+ ai-s\">\n                    <div class=\"peer peer-greed w-70p@lg+ w-100@lg- p-20\">\n                      <div class=\"layers\">\n                        <div class=\"layer w-100 mB-10\">\n                          <h6 class=\"lh-1\">Site Visits</h6>\n                        </div>\n                        <div class=\"layer w-100\">\n                          <div id=\"world-map-marker\"></div>\n                        </div>\n                      </div>\n                    </div>\n                    <div class=\"peer bdL p-20 w-30p@lg+ w-100p@lg-\">\n                      <div class=\"layers\">\n                        <div class=\"layer w-100\">\n                          <!-- Progress Bars -->\n                          <div class=\"layers\">\n                            <div class=\"layer w-100\">\n                              <h5 class=\"mB-5\">100k</h5>\n                              <small class=\"fw-600 c-grey-700\">Visitors From USA</small>\n                              <span class=\"pull-right c-grey-600 fsz-sm\">50%</span>\n                              <div class=\"progress mT-10\">\n                                <div class=\"progress-bar bgc-deep-purple-500\" role=\"progressbar\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:50%;\"> <span class=\"visually-hidden\">50% Complete</span></div>\n                              </div>\n                            </div>\n                            <div class=\"layer w-100 mT-15\">\n                              <h5 class=\"mB-5\">1M</h5>\n                              <small class=\"fw-600 c-grey-700\">Visitors From Europe</small>\n                              <span class=\"pull-right c-grey-600 fsz-sm\">80%</span>\n                              <div class=\"progress mT-10\">\n                                <div class=\"progress-bar bgc-green-500\" role=\"progressbar\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:80%;\"> <span class=\"visually-hidden\">80% Complete</span></div>\n                              </div>\n                            </div>\n                            <div class=\"layer w-100 mT-15\">\n                              <h5 class=\"mB-5\">450k</h5>\n                              <small class=\"fw-600 c-grey-700\">Visitors From Australia</small>\n                              <span class=\"pull-right c-grey-600 fsz-sm\">40%</span>\n                              <div class=\"progress mT-10\">\n                                <div class=\"progress-bar bgc-light-blue-500\" role=\"progressbar\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:40%;\"> <span class=\"visually-hidden\">40% Complete</span></div>\n                              </div>\n                            </div>\n                            <div class=\"layer w-100 mT-15\">\n                              <h5 class=\"mB-5\">1B</h5>\n                              <small class=\"fw-600 c-grey-700\">Visitors From India</small>\n                              <span class=\"pull-right c-grey-600 fsz-sm\">90%</span>\n                              <div class=\"progress mT-10\">\n                                <div class=\"progress-bar bgc-blue-grey-500\" role=\"progressbar\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:90%;\"> <span class=\"visually-hidden\">90% Complete</span></div>\n                              </div>\n                            </div>\n                          </div>\n\n                          <!-- Pie Charts -->\n                          <div class=\"peers pT-20 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10\">\n                            <div class=\"peer\">\n                              <div class=\"easy-pie-chart\" data-size='80' data-percent=\"75\" data-bar-color='#f44336'>\n                                <span></span>\n                              </div>\n                              <h6 class=\"fsz-sm\">New Users</h6>\n                            </div>\n                            <div class=\"peer\">\n                              <div class=\"easy-pie-chart\" data-size='80' data-percent=\"50\" data-bar-color='#2196f3'>\n                                <span></span>\n                              </div>\n                              <h6 class=\"fsz-sm\">New Purchases</h6>\n                            </div>\n                            <div class=\"peer\">\n                              <div class=\"easy-pie-chart\" data-size='80' data-percent=\"90\" data-bar-color='#ff9800'>\n                                <span></span>\n                              </div>\n                              <h6 class=\"fsz-sm\">Bounce Rate</h6>\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <!-- #Monthly Stats ==================== -->\n                <div class=\"bd bgc-white\">\n                  <div class=\"layers\">\n                    <div class=\"layer w-100 pX-20 pT-20\">\n                      <h6 class=\"lh-1\">Monthly Stats</h6>\n                    </div>\n                    <div class=\"layer w-100 p-20\">\n                      <canvas id=\"line-chart\" height=\"220\"></canvas>\n                    </div>\n                    <div class=\"layer bdT p-20 w-100\">\n                      <div class=\"peers ai-c jc-c gapX-20\">\n                        <div class=\"peer\">\n                          <span class=\"fsz-def fw-600 mR-10 c-grey-800\">54% <i class=\"fa fa-level-up c-green-500\"></i></span>\n                          <small class=\"c-grey-500 fw-600\">Sales Growth</small>\n                        </div>\n                        <div class=\"peer fw-600\">\n                          <span class=\"fsz-def fw-600 mR-10 c-grey-800\">$185K <i class=\"fa fa-level-up c-green-500\"></i></span>\n                          <small class=\"c-grey-500 fw-600\">Dec Sales</small>\n                        </div>\n                        <div class=\"peer fw-600\">\n                          <span class=\"fsz-def fw-600 mR-10 c-grey-800\">60% <i class=\"fa fa-level-up c-green-500\"></i></span>\n                          <small class=\"c-grey-500 fw-600\">Profit Growth</small>\n                        </div>\n                        <div class=\"peer fw-600\">\n                          <span class=\"fsz-def fw-600 mR-10 c-grey-800\">$72K <i class=\"fa fa-level-up c-green-500\"></i></span>\n                          <small class=\"c-grey-500 fw-600\">Dec Profit</small>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <!-- #Todo ==================== -->\n                <div class=\"bd bgc-white p-20\">\n                  <div class=\"layers\">\n                    <div class=\"layer w-100 mB-10\">\n                      <h6 class=\"lh-1\">Todo List</h6>\n                    </div>\n                    <div class=\"layer w-100\">\n                      <ul class=\"list-task list-group\" data-role=\"tasklist\">\n                        <li class=\"list-group-item bdw-0\" data-role=\"task\">\n                          <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                            <input type=\"checkbox\" id=\"inputCall1\" name=\"inputCheckboxesCall\" class=\"peer\">\n                            <label for=\"inputCall1\" class=\"form-label peers peer-greed js-sb ai-c\">\n                              <span class=\"peer peer-greed\">Call John for Dinner</span>\n                            </label>\n                          </div>\n                        </li>\n                        <li class=\"list-group-item bdw-0\" data-role=\"task\">\n                          <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                            <input type=\"checkbox\" id=\"inputCall2\" name=\"inputCheckboxesCall\" class=\"peer\">\n                            <label for=\"inputCall2\" class=\"form-label peers peer-greed js-sb ai-c\">\n                              <span class=\"peer peer-greed\">Book Boss Flight</span>\n                              <span class=\"peer\">\n                                <span class=\"badge rounded-pill fl-r bg-success lh-0 p-10\">2 Days</span>\n                              </span>\n                            </label>\n                          </div>\n                        </li>\n                        <li class=\"list-group-item bdw-0\" data-role=\"task\">\n                          <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                            <input type=\"checkbox\" id=\"inputCall3\" name=\"inputCheckboxesCall\" class=\"peer\">\n                            <label for=\"inputCall3\" class=\"form-label peers peer-greed js-sb ai-c\">\n                              <span class=\"peer peer-greed\">Hit the Gym</span>\n                              <span class=\"peer\">\n                                <span class=\"badge rounded-pill fl-r bg-danger lh-0 p-10\">3 Minutes</span>\n                              </span>\n                            </label>\n                          </div>\n                        </li>\n                        <li class=\"list-group-item bdw-0\" data-role=\"task\">\n                          <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                            <input type=\"checkbox\" id=\"inputCall4\" name=\"inputCheckboxesCall\" class=\"peer\">\n                            <label for=\"inputCall4\" class=\"form-label peers peer-greed js-sb ai-c\">\n                              <span class=\"peer peer-greed\">Give Purchase Report</span>\n                              <span class=\"peer\">\n                                <span class=\"badge rounded-pill fl-r bg-warning lh-0 p-10\">not important</span>\n                              </span>\n                            </label>\n                          </div>\n                        </li>\n                        <li class=\"list-group-item bdw-0\" data-role=\"task\">\n                          <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                            <input type=\"checkbox\" id=\"inputCall5\" name=\"inputCheckboxesCall\" class=\"peer\">\n                            <label for=\"inputCall5\" class=\"form-label peers peer-greed js-sb ai-c\">\n                              <span class=\"peer peer-greed\">Watch Game of Thrones Episode</span>\n                              <span class=\"peer\">\n                                <span class=\"badge rounded-pill fl-r bg-info lh-0 p-10\">Tomorrow</span>\n                              </span>\n                            </label>\n                          </div>\n                        </li>\n                        <li class=\"list-group-item bdw-0\" data-role=\"task\">\n                          <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                            <input type=\"checkbox\" id=\"inputCall6\" name=\"inputCheckboxesCall\" class=\"peer\">\n                            <label for=\"inputCall6\" class=\"form-label peers peer-greed js-sb ai-c\">\n                              <span class=\"peer peer-greed\">Give Purchase report</span>\n                              <span class=\"peer\">\n                                <span class=\"badge rounded-pill fl-r bg-success lh-0 p-10\">Done</span>\n                              </span>\n                            </label>\n                          </div>\n                        </li>\n                      </ul>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <!-- #Sales Report ==================== -->\n                <div class=\"bd bgc-white\">\n                  <div class=\"layers\">\n                    <div class=\"layer w-100 p-20\">\n                      <h6 class=\"lh-1\">Sales Report</h6>\n                    </div>\n                    <div class=\"layer w-100\">\n                      <div class=\"sales-report-header p-20\">\n                        <div class=\"peers ai-c jc-sb gap-40\">\n                          <div class=\"peer peer-greed\">\n                            <h5>November 2029</h5>\n                            <p class=\"mB-0\">Sales Report</p>\n                          </div>\n                          <div class=\"peer\">\n                            <h3 class=\"text-end\">$6,000</h3>\n                          </div>\n                        </div>\n                      </div>\n                      <div class=\"table-responsive p-20\">\n                        <table class=\"table\">\n                          <thead>\n                            <tr>\n                              <th class=\" bdwT-0\">Name</th>\n                              <th class=\" bdwT-0\">Status</th>\n                              <th class=\" bdwT-0\">Date</th>\n                              <th class=\" bdwT-0\">Price</th>\n                            </tr>\n                          </thead>\n                          <tbody>\n                            <tr>\n                              <td class=\"fw-600\">Item #1 Name</td>\n                              <td><span class=\"badge bgc-red-50 c-red-700 p-10 lh-0 tt-c rounded-pill\">Unavailable</span> </td>\n                              <td>Nov 18</td>\n                              <td><span class=\"text-success\">$12</span></td>\n                            </tr>\n                            <tr>\n                              <td class=\"fw-600\">Item #2 Name</td>\n                              <td><span class=\"badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c rounded-pill\">New</span></td>\n                              <td>Nov 19</td>\n                              <td><span class=\"text-info\">$34</span></td>\n                            </tr>\n                            <tr>\n                              <td class=\"fw-600\">Item #3 Name</td>\n                              <td><span class=\"badge bgc-pink-50 c-pink-700 p-10 lh-0 tt-c rounded-pill\">New</span></td>\n                              <td>Nov 20</td>\n                              <td><span class=\"text-danger\">-$45</span></td>\n                            </tr>\n                            <tr>\n                              <td class=\"fw-600\">Item #4 Name</td>\n                              <td><span class=\"badge bgc-green-50 c-green-700 p-10 lh-0 tt-c rounded-pill\">Unavailable</span></td>\n                              <td>Nov 21</td>\n                              <td><span class=\"text-success\">$65</span></td>\n                            </tr>\n                            <tr>\n                              <td class=\"fw-600\">Item #5 Name</td>\n                              <td><span class=\"badge bgc-red-50 c-red-700 p-10 lh-0 tt-c rounded-pill\">Used</span></td>\n                              <td>Nov 22</td>\n                              <td><span class=\"text-success\">$78</span></td>\n                            </tr>\n                            <tr>\n                              <td class=\"fw-600\">Item #6 Name</td>\n                              <td><span class=\"badge bgc-orange-50 c-orange-700 p-10 lh-0 tt-c rounded-pill\">Used</span> </td>\n                              <td>Nov 23</td>\n                              <td><span class=\"text-danger\">-$88</span></td>\n                            </tr>\n                            <tr>\n                              <td class=\"fw-600\">Item #7 Name</td>\n                              <td><span class=\"badge bgc-yellow-50 c-yellow-700 p-10 lh-0 tt-c rounded-pill\">Old</span></td>\n                              <td>Nov 22</td>\n                              <td><span class=\"text-success\">$56</span></td>\n                            </tr>\n                          </tbody>\n                        </table>\n                       </div>\n                    </div>\n                  </div>\n                  <div class=\"ta-c bdT w-100 p-20\">\n                    <a href=\"#\">Check all the sales</a>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <!-- #Weather ==================== -->\n                <div class=\"bd bgc-white p-20\">\n                  <div class=\"layers\">\n                    <!-- Widget Title -->\n                    <div class=\"layer w-100 mB-20\">\n                      <h6 class=\"lh-1\">Weather</h6>\n                    </div>\n\n                    <!-- Today Weather -->\n                    <div class=\"layer w-100\">\n                      <div class=\"peers ai-c jc-sb fxw-nw\">\n                        <div class=\"peer peer-greed\">\n                          <div class=\"layers\">\n                            <!-- Temprature -->\n                            <div class=\"layer w-100\">\n                              <div class=\"peers fxw-nw ai-c\">\n                                <div class=\"peer mR-20\">\n                                  <h3>32<sup>°F</sup></h3>\n                                </div>\n                                <div class=\"peer\">\n                                  <canvas class=\"sleet\" width=\"44\" height=\"44\"></canvas>\n                                </div>\n                              </div>\n                            </div>\n\n                            <!-- Condition -->\n                            <div class=\"layer w-100\">\n                              <span class=\"fw-600 c-grey-600\">Partly Clouds</span>\n                            </div>\n                          </div>\n                        </div>\n                        <div class=\"peer\">\n                          <div class=\"layers ai-fe\">\n                            <div class=\"layer\">\n                              <h5 class=\"mB-5\">Monday</h5>\n                            </div>\n                            <div class=\"layer\">\n                              <span class=\"fw-600 c-grey-600\">Nov, 01 2032</span>\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- Today Weather Extended -->\n                    <div class=\"layer w-100 mY-30\">\n                      <div class=\"layers bdB\">\n                        <div class=\"layer w-100 bdT pY-5\">\n                          <div class=\"peers ai-c jc-sb fxw-nw\">\n                            <div class=\"peer\">\n                              <span>Wind</span>\n                            </div>\n                            <div class=\"peer ta-r\">\n                              <span class=\"fw-600 c-grey-800\">10km/h</span>\n                            </div>\n                          </div>\n                        </div>\n                        <div class=\"layer w-100 bdT pY-5\">\n                          <div class=\"peers ai-c jc-sb fxw-nw\">\n                            <div class=\"peer\">\n                              <span>Sunrise</span>\n                            </div>\n                            <div class=\"peer ta-r\">\n                              <span class=\"fw-600 c-grey-800\">05:00 AM</span>\n                            </div>\n                          </div>\n                        </div>\n                        <div class=\"layer w-100 bdT pY-5\">\n                          <div class=\"peers ai-c jc-sb fxw-nw\">\n                            <div class=\"peer\">\n                              <span>Pressure</span>\n                            </div>\n                            <div class=\"peer ta-r\">\n                              <span class=\"fw-600 c-grey-800\">1B</span>\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- Week Forecast -->\n                    <div class=\"layer w-100\">\n                      <div class=\"peers peers-greed ai-fs ta-c\">\n                        <div class=\"peer\">\n                          <h6 class=\"mB-10\">MON</h6>\n                          <canvas class=\"sleet\" width=\"30\" height=\"30\"></canvas>\n                          <span class=\"d-b fw-600\">32<sup>°F</sup></span>\n                        </div>\n                        <div class=\"peer\">\n                          <h6 class=\"mB-10\">TUE</h6>\n                          <canvas class=\"clear-day\" width=\"30\" height=\"30\"></canvas>\n                          <span class=\"d-b fw-600\">30<sup>°F</sup></span>\n                        </div>\n                        <div class=\"peer\">\n                          <h6 class=\"mB-10\">WED</h6>\n                          <canvas class=\"partly-cloudy-day\" width=\"30\" height=\"30\"></canvas>\n                          <span class=\"d-b fw-600\">28<sup>°F</sup></span>\n                        </div>\n                        <div class=\"peer\">\n                          <h6 class=\"mB-10\">THR</h6>\n                          <canvas class=\"cloudy\" width=\"30\" height=\"30\"></canvas>\n                          <span class=\"d-b fw-600\">32<sup>°F</sup></span>\n                        </div>\n                        <div class=\"peer\">\n                          <h6 class=\"mB-10\">FRI</h6>\n                          <canvas class=\"snow\" width=\"30\" height=\"30\"></canvas>\n                          <span class=\"d-b fw-600\">24<sup>°F</sup></span>\n                        </div>\n                        <div class=\"peer\">\n                          <h6 class=\"mB-10\">SAT</h6>\n                          <canvas class=\"wind\" width=\"30\" height=\"30\"></canvas>\n                          <span class=\"d-b fw-600\">28<sup>°F</sup></span>\n                        </div>\n                        <div class=\"peer\">\n                          <h6 class=\"mB-10\">SUN</h6>\n                          <canvas class=\"sleet\" width=\"30\" height=\"30\"></canvas>\n                          <span class=\"d-b fw-600\">32<sup>°F</sup></span>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <!-- #Chat ==================== -->\n                <div class=\"bd bgc-white\">\n                  <div class=\"layers\">\n                    <div class=\"layer w-100 p-20\">\n                      <h6 class=\"lh-1\">Quick Chat</h6>\n                    </div>\n                    <div class=\"layer w-100\">\n                      <!-- Chat Box -->\n                      <div class=\"bgc-grey-200 p-20 gapY-15\">\n                        <!-- Chat Conversation -->\n                        <div class=\"peers fxw-nw\">\n                          <div class=\"peer mR-20\">\n                            <img class=\"w-2r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/11.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div class=\"layers ai-fs gapY-5\">\n                              <div class=\"layer\">\n                                <div class=\"peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2\">\n                                  <div class=\"peer mR-10\">\n                                    <small>10:00 AM</small>\n                                  </div>\n                                  <div class=\"peer-greed\">\n                                    <span>Lorem Ipsum is simply dummy text of</span>\n                                  </div>\n                                </div>\n                              </div>\n                              <div class=\"layer\">\n                                <div class=\"peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2\">\n                                  <div class=\"peer mR-10\">\n                                    <small>10:00 AM</small>\n                                  </div>\n                                  <div class=\"peer-greed\">\n                                    <span>the printing and typesetting industry.</span>\n                                  </div>\n                                </div>\n                              </div>\n                              <div class=\"layer\">\n                                <div class=\"peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2\">\n                                  <div class=\"peer mR-10\">\n                                    <small>10:00 AM</small>\n                                  </div>\n                                  <div class=\"peer-greed\">\n                                    <span>Lorem Ipsum has been the industry's</span>\n                                  </div>\n                                </div>\n                              </div>\n                            </div>\n                          </div>\n                        </div>\n\n                        <!-- Chat Conversation -->\n                        <div class=\"peers fxw-nw ai-fe\">\n                          <div class=\"peer ord-1 mL-20\">\n                            <img class=\"w-2r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/12.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed ord-0\">\n                            <div class=\"layers ai-fe gapY-10\">\n                              <div class=\"layer\">\n                                <div class=\"peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2\">\n                                  <div class=\"peer mL-10 ord-1\">\n                                    <small>10:00 AM</small>\n                                  </div>\n                                  <div class=\"peer-greed ord-0\">\n                                    <span>Heloo</span>\n                                  </div>\n                                </div>\n                              </div>\n                              <div class=\"layer\">\n                                <div class=\"peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2\">\n                                  <div class=\"peer mL-10 ord-1\">\n                                    <small>10:00 AM</small>\n                                  </div>\n                                  <div class=\"peer-greed ord-0\">\n                                    <span>??</span>\n                                  </div>\n                                </div>\n                              </div>\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                      <!-- Chat Send -->\n                      <div class=\"p-20 bdT bgc-white\">\n                        <div class=\"pos-r\">\n                          <input type=\"text\" class=\"form-control bdrs-10em m-0\" placeholder=\"Say something...\">\n                          <button type=\"button\" class=\"btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1\">\n                            <i class=\"fa fa-paper-plane-o\"></i>\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </main>\n\n        <!-- ### $App Screen Footer ### -->\n        <footer class=\"bdT ta-c p-30 lh-0 fsz-sm c-grey-600\">\n          <span>Copyright © 2026 Designed by <a href=\"https://colorlib.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" title=\"Colorlib\">Colorlib</a>. All rights reserved.</span>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "src/signin.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <title>Sign In</title>\n    <style>\n      #loader {\n        transition: all 0.3s ease-in-out;\n        opacity: 1;\n        visibility: visible;\n        position: fixed;\n        height: 100vh;\n        width: 100%;\n        background: #fff;\n        z-index: 90000;\n      }\n\n      #loader.fadeOut {\n        opacity: 0;\n        visibility: hidden;\n      }\n\n      .spinner {\n        width: 40px;\n        height: 40px;\n        position: absolute;\n        top: calc(50% - 20px);\n        left: calc(50% - 20px);\n        background-color: #333;\n        border-radius: 100%;\n        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;\n        animation: sk-scaleout 1.0s infinite ease-in-out;\n      }\n\n      @-webkit-keyframes sk-scaleout {\n        0% { -webkit-transform: scale(0) }\n        100% {\n          -webkit-transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n\n      @keyframes sk-scaleout {\n        0% {\n          -webkit-transform: scale(0);\n          transform: scale(0);\n        } 100% {\n          -webkit-transform: scale(1.0);\n          transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n    </style>\n  </head>\n  <body class=\"app\">\n    <div id='loader'>\n      <div class=\"spinner\"></div>\n    </div>\n\n    <script>\n      window.addEventListener('load', function load() {\n        const loader = document.getElementById('loader');\n        setTimeout(function() {\n          loader.classList.add('fadeOut');\n        }, 300);\n      });\n    </script>\n    <div class=\"peers ai-s fxw-nw h-100vh\">\n      <div class=\"d-n@sm- peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv\" style='background-image: url(\"assets/static/images/bg.jpg\")'>\n        <div class=\"pos-a centerXY\">\n          <div class=\"bgc-white bdrs-50p pos-r\" style='width: 120px; height: 120px;'>\n            <img class=\"pos-a centerXY logo-auth\" src=\"assets/static/images/logo.svg\" alt=\"\" style=\"max-width: 60px; max-height: 60px;\">\n          </div>\n        </div>\n      </div>\n      <div class=\"col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r\" style='min-width: 320px;'>\n        <h4 class=\"fw-300 c-grey-900 mB-40\">Login</h4>\n        <form>\n          <div class=\"mb-3\">\n            <label class=\"text-normal text-dark form-label\">Username</label>\n            <input type=\"email\" class=\"form-control\" placeholder=\"John Doe\">\n          </div>\n          <div class=\"mb-3\">\n            <label class=\"text-normal text-dark form-label\">Password</label>\n            <input type=\"password\" class=\"form-control\" placeholder=\"Password\">\n          </div>\n          <div class=\"\">\n            <div class=\"peers ai-c jc-sb fxw-nw\">\n              <div class=\"peer\">\n                <div class=\"checkbox checkbox-circle checkbox-info peers ai-c\">\n                  <input type=\"checkbox\" id=\"inputCall1\" name=\"inputCheckboxesCall\" class=\"peer\">\n                  <label for=\"inputCall1\" class=\" peers peer-greed js-sb ai-c form-label\">\n                    <span class=\"peer peer-greed\">Remember Me</span>\n                  </label>\n                </div>\n              </div>\n              <div class=\"peer\">\n                <button class=\"btn btn-primary btn-color\">Login</button>\n              </div>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "src/signup.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <title>Sign Up</title>\n    <style>\n      #loader {\n        transition: all 0.3s ease-in-out;\n        opacity: 1;\n        visibility: visible;\n        position: fixed;\n        height: 100vh;\n        width: 100%;\n        background: #fff;\n        z-index: 90000;\n      }\n\n      #loader.fadeOut {\n        opacity: 0;\n        visibility: hidden;\n      }\n\n      .spinner {\n        width: 40px;\n        height: 40px;\n        position: absolute;\n        top: calc(50% - 20px);\n        left: calc(50% - 20px);\n        background-color: #333;\n        border-radius: 100%;\n        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;\n        animation: sk-scaleout 1.0s infinite ease-in-out;\n      }\n\n      @-webkit-keyframes sk-scaleout {\n        0% { -webkit-transform: scale(0) }\n        100% {\n          -webkit-transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n\n      @keyframes sk-scaleout {\n        0% {\n          -webkit-transform: scale(0);\n          transform: scale(0);\n        } 100% {\n          -webkit-transform: scale(1.0);\n          transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n    </style>\n  </head>\n  <body class=\"app\">\n    <div id='loader'>\n      <div class=\"spinner\"></div>\n    </div>\n\n    <script>\n      window.addEventListener('load', function load() {\n        const loader = document.getElementById('loader');\n        setTimeout(function() {\n          loader.classList.add('fadeOut');\n        }, 300);\n      });\n    </script>\n    <div class=\"peers ai-s fxw-nw h-100vh\">\n      <div class=\"peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv\" style='background-image: url(\"assets/static/images/bg.jpg\")'>\n        <div class=\"pos-a centerXY\">\n          <div class=\"bgc-white bdrs-50p pos-r\" style='width: 120px; height: 120px;'>\n            <img class=\"pos-a centerXY logo-auth\" src=\"assets/static/images/logo.svg\" alt=\"\" style=\"max-width: 60px; max-height: 60px;\">\n          </div>\n        </div>\n      </div>\n      <div class=\"col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r\" style='min-width: 320px;'>\n        <h4 class=\"fw-300 c-grey-900 mB-40\">Register</h4>\n        <form>\n          <div class=\"mb-3\">\n            <label class=\"form-label\" class=\"text-normal text-dark\">Username</label>\n            <input type=\"text\" class=\"form-control\" Placeholder='John Doe'>\n          </div>\n          <div class=\"mb-3\">\n            <label class=\"form-label\" class=\"text-normal text-dark\">Email Address</label>\n            <input type=\"email\" class=\"form-control\" Placeholder='name@email.com'>\n          </div>\n          <div class=\"mb-3\">\n            <label class=\"form-label\" class=\"text-normal text-dark\">Password</label>\n            <input type=\"password\" class=\"form-control\" placeholder=\"Password\">\n          </div>\n          <div class=\"mb-3\">\n            <label class=\"form-label\" class=\"text-normal text-dark\">Confirm Password</label>\n            <input type=\"password\" class=\"form-control\" placeholder=\"Password\">\n          </div>\n          <div class=\"mb-3\">\n            <button class=\"btn btn-primary btn-color\">Register</button>\n          </div>\n        </form>\n      </div>\n    </div>\n\n  </body>\n</html>\n"
  },
  {
    "path": "src/ui.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <title>UI Elements</title>\n    <style>\n      #loader {\n        transition: all 0.3s ease-in-out;\n        opacity: 1;\n        visibility: visible;\n        position: fixed;\n        height: 100vh;\n        width: 100%;\n        background: #fff;\n        z-index: 90000;\n      }\n\n      #loader.fadeOut {\n        opacity: 0;\n        visibility: hidden;\n      }\n\n\n\n      .spinner {\n        width: 40px;\n        height: 40px;\n        position: absolute;\n        top: calc(50% - 20px);\n        left: calc(50% - 20px);\n        background-color: #333;\n        border-radius: 100%;\n        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;\n        animation: sk-scaleout 1.0s infinite ease-in-out;\n      }\n\n      @-webkit-keyframes sk-scaleout {\n        0% { -webkit-transform: scale(0) }\n        100% {\n          -webkit-transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n\n      @keyframes sk-scaleout {\n        0% {\n          -webkit-transform: scale(0);\n          transform: scale(0);\n        } 100% {\n          -webkit-transform: scale(1.0);\n          transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n    </style>\n  </head>\n  <body class=\"app\">\n    <!-- @TOC -->\n    <!-- =================================================== -->\n    <!--\n      + @Page Loader\n      + @App Content\n          - #Left Sidebar\n              > $Sidebar Header\n              > $Sidebar Menu\n\n          - #Main\n              > $Topbar\n              > $App Screen Content\n    -->\n\n    <!-- @Page Loader -->\n    <!-- =================================================== -->\n    <div id='loader'>\n      <div class=\"spinner\"></div>\n    </div>\n\n    <script>\n      window.addEventListener('load', function load() {\n        const loader = document.getElementById('loader');\n        setTimeout(function() {\n          loader.classList.add('fadeOut');\n        }, 300);\n      });\n    </script>\n\n    <!-- @App Content -->\n    <!-- =================================================== -->\n    <div>\n      <!-- #Left Sidebar ==================== -->\n      <div class=\"sidebar\">\n        <div class=\"sidebar-inner\">\n          <!-- ### $Sidebar Header ### -->\n          <div class=\"sidebar-logo\">\n            <div class=\"peers ai-c fxw-nw\">\n              <div class=\"peer peer-greed\">\n                <a class=\"sidebar-link td-n\" href=\"index.html\">\n                  <div class=\"peers ai-c fxw-nw\">\n                    <div class=\"peer\">\n                      <div class=\"logo\">\n                        <img src=\"assets/static/images/logo.svg\" alt=\"\">\n                      </div>\n                    </div>\n                    <div class=\"peer peer-greed\">\n                      <h5 class=\"lh-1 mB-0 logo-text\">Adminator</h5>\n                    </div>\n                  </div>\n                </a>\n              </div>\n              <div class=\"peer\">\n                <div class=\"mobile-toggle sidebar-toggle\">\n                  <a href=\"\" class=\"td-n\">\n                    <i class=\"ti-arrow-circle-left\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- ### $Sidebar Menu ### -->\n          <ul class=\"sidebar-menu scrollable pos-r\">\n            <li class=\"nav-item mT-30\">\n              <a class=\"sidebar-link\" href=\"index.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-home\"></i>\n                </span>\n                <span class=\"title\">Dashboard</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"sidebar-link\" href=\"https://dashboardpack.com/?utm_source=adminator&utm_medium=sidebar&utm_campaign=go_pro\" target=\"_blank\" rel=\"noopener\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-purple-500 ti-crown\"></i>\n                </span>\n                <span class=\"title\">Go Pro <span class=\"badge bg-primary ms-2\">PRO</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"email.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-brown-500 ti-email\"></i>\n                </span>\n                <span class=\"title\">Email</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"compose.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-share\"></i>\n                </span>\n                <span class=\"title\">Compose</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"calendar.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-orange-500 ti-calendar\"></i>\n                </span>\n                <span class=\"title\">Calendar <span class=\"badge bg-danger ms-2\">HOT</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"chat.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-purple-500 ti-comment-alt\"></i>\n                </span>\n                <span class=\"title\">Chat</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"charts.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-indigo-500 ti-bar-chart\"></i>\n                </span>\n                <span class=\"title\">Charts <span class=\"badge bg-success ms-2\">NEW</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"forms.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-light-blue-500 ti-pencil\"></i>\n                </span>\n                <span class=\"title\">Forms</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"sidebar-link\" href=\"ui.html\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-pink-500 ti-palette\"></i>\n                  </span>\n                <span class=\"title\">UI Elements</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-orange-500 ti-layout-list-thumb\"></i>\n                </span>\n                <span class=\"title\">Tables</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"basic-table.html\">Basic Table</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"datatable.html\">Data Table <span class=\"badge bg-success ms-1\">NEW</span></a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-purple-500 ti-map\"></i>\n                  </span>\n                <span class=\"title\">Maps</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a href=\"google-maps.html\">Google Map</a>\n                </li>\n                <li>\n                  <a href=\"vector-maps.html\">Vector Map</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-red-500 ti-files\"></i>\n                  </span>\n                <span class=\"title\">Pages</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"blank.html\">Blank</a>\n                </li>                 \n                <li>\n                  <a class='sidebar-link' href=\"404.html\">404</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"500.html\">500</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signin.html\">Sign In</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signup.html\">Sign Up</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-teal-500 ti-view-list-alt\"></i>\n                </span>\n                <span class=\"title\">Multiple Levels</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                  </a>\n                </li>\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                    <span class=\"arrow\">\n                      <i class=\"ti-angle-right\"></i>\n                    </span>\n                  </a>\n                  <ul class=\"dropdown-menu\">\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                  </ul>\n                </li>\n              </ul>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <!-- #Main ============================ -->\n      <div class=\"page-container\">\n        <!-- ### $Topbar ### -->\n        <div class=\"header navbar\">\n          <div class=\"header-container\">\n            <ul class=\"nav-left\">\n              <li>\n                <a id='sidebar-toggle' class=\"sidebar-toggle\" href=\"javascript:void(0);\">\n                  <i class=\"ti-menu\"></i>\n                </a>\n              </li>\n              <li class=\"search-box\">\n                <a class=\"search-toggle no-pdd-right\" href=\"javascript:void(0);\">\n                  <i class=\"search-icon ti-search pdd-right-10\"></i>\n                  <i class=\"search-icon-close ti-close pdd-right-10\"></i>\n                </a>\n              </li>\n              <li class=\"search-input\">\n                <input class=\"form-control\" type=\"text\" placeholder=\"Search...\">\n              </li>\n            </ul>\n            <ul class=\"nav-right\">\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-red\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-bell\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-bell pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Notifications</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">John Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">post</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">5 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Moo Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">cover image</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">7 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Lee Doe</span>\n                              <span class=\"c-grey-600\">commented on your <span class=\"text-dark\">video</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">10 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Notifications <i class=\"ti-angle-right fsz-xs mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-blue\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-email\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-email pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Emails</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">John Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">5 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Moo Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">15 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Lee Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">25 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"email.html\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Email <i class=\"fs-xs ti-angle-right mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"dropdown\">\n                <a href=\"\" class=\"dropdown-toggle no-after peers fxw-nw ai-c lh-1\" data-bs-toggle=\"dropdown\">\n                  <div class=\"peer mR-10\">\n                    <img class=\"w-2r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/10.jpg\" alt=\"\">\n                  </div>\n                  <div class=\"peer\">\n                    <span class=\"fsz-sm c-grey-900\">John Doe</span>\n                  </div>\n                </a>\n                <ul class=\"dropdown-menu fsz-sm\">\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-settings mR-10\"></i>\n                      <span>Setting</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-user mR-10\"></i>\n                      <span>Profile</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"email.html\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-email mR-10\"></i>\n                      <span>Messages</span>\n                    </a>\n                  </li>\n                  <li role=\"separator\" class=\"divider\"></li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-power-off mR-10\"></i>\n                      <span>Logout</span>\n                    </a>\n                  </li>\n                </ul>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <!-- ### $App Screen Content ### -->\n        <main class='main-content bgc-grey-100'>\n          <div id='mainContent'>\n            <div class=\"row gap-20 masonry pos-r\">\n              <h4 class=\"c-grey-900\">UI Elements</h4>\n              <div class=\"masonry-sizer col-md-6\"></div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Alerts</h6>\n                  <div class=\"mT-30\">\n                    <div class=\"alert alert-primary\" role=\"alert\">\n                      This is a primary alert—check it out!\n                    </div>\n                    <div class=\"alert alert-secondary\" role=\"alert\">\n                      This is a secondary alert—check it out!\n                    </div>\n                    <div class=\"alert alert-success\" role=\"alert\">\n                      This is a success alert—check it out!\n                    </div>\n                    <div class=\"alert alert-danger\" role=\"alert\">\n                      This is a danger alert—check it out!\n                    </div>\n                    <div class=\"alert alert-warning\" role=\"alert\">\n                      This is a warning alert—check it out!\n                    </div>\n                    <div class=\"alert alert-info\" role=\"alert\">\n                      This is a info alert—check it out!\n                    </div>\n                    <div class=\"alert alert-light\" role=\"alert\">\n                      This is a light alert—check it out!\n                    </div>\n                    <div class=\"alert alert-dark\" role=\"alert\">\n                      This is a dark alert—check it out!\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Buttons</h6>\n                  <div class=\"mT-30\">\n                    <div class=\"gap-10 peers\">\n                      <div class=\"peer\">\n                        <button type=\"button\" class=\"btn cur-p btn-primary btn-color\">Primary</button>\n                      </div>\n                      <div class=\"peer\">\n                        <button type=\"button\" class=\"btn cur-p btn-secondary btn-color\">Secondary</button>\n                      </div>\n                      <div class=\"peer\">\n                        <button type=\"button\" class=\"btn cur-p btn-success btn-color\">Success</button>\n                      </div>\n                      <div class=\"peer\">\n                        <button type=\"button\" class=\"btn cur-p btn-danger btn-color\">Danger</button>\n                      </div>\n                      <div class=\"peer\">\n                        <button type=\"button\" class=\"btn cur-p btn-warning\">Warning</button>\n                      </div>\n                      <div class=\"peer\">\n                        <button type=\"button\" class=\"btn cur-p btn-info btn-color\">Info</button>\n                      </div>\n                      <div class=\"peer\">\n                        <button type=\"button\" class=\"btn cur-p btn-light\">Light</button>\n                      </div>\n                      <div class=\"peer\">\n                        <button type=\"button\" class=\"btn cur-p btn-dark btn-color\">Dark</button>\n                      </div>\n                    </div>\n\n                    <div class=\"w-100 gap-10 peers mY-20\">\n                      <div class=\"peer\">\n                        <button type=\"button\" class=\"btn cur-p btn-outline-primary\">Primary</button>\n                      </div>\n                      <div class=\"peer\">\n                        <button type=\"button\" class=\"btn cur-p btn-outline-secondary\">Secondary</button>\n                      </div>\n                      <div class=\"peer\">\n                        <button type=\"button\" class=\"btn cur-p btn-outline-success\">Success</button>\n                      </div>\n                      <div class=\"peer\">\n                        <button type=\"button\" class=\"btn cur-p btn-outline-danger\">Danger</button>\n                      </div>\n                      <div class=\"peer\">\n                        <button type=\"button\" class=\"btn cur-p btn-outline-warning\">Warning</button>\n                      </div>\n                      <div class=\"peer\">\n                        <button type=\"button\" class=\"btn cur-p btn-outline-info\">Info</button>\n                      </div>\n                      <div class=\"peer\">\n                        <button type=\"button\" class=\"btn cur-p btn-outline-light\">Light</button>\n                      </div>\n                      <div class=\"peer\">\n                        <button type=\"button\" class=\"btn cur-p btn-outline-dark\">Dark</button>\n                      </div>\n                    </div>\n\n                    <div class=\"btn-toolbar\" role=\"toolbar\" aria-label=\"Toolbar with button groups\">\n                      <div class=\"btn-group me-2\" role=\"group\" aria-label=\"First group\">\n                        <button type=\"button\" class=\"btn btn-success btn-color\">1</button>\n                        <button type=\"button\" class=\"btn btn-success btn-color\">2</button>\n                        <button type=\"button\" class=\"btn btn-success btn-color\">3</button>\n                        <button type=\"button\" class=\"btn btn-success btn-color\">4</button>\n                      </div>\n                      <div class=\"btn-group me-2\" role=\"group\" aria-label=\"Second group\">\n                        <button type=\"button\" class=\"btn btn-success btn-color\">5</button>\n                        <button type=\"button\" class=\"btn btn-success btn-color\">6</button>\n                        <button type=\"button\" class=\"btn btn-success btn-color\">7</button>\n                      </div>\n                      <div class=\"btn-group\" role=\"group\" aria-label=\"Third group\">\n                        <button type=\"button\" class=\"btn btn-success btn-color\">8</button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Dropdowns</h6>\n                  <div class=\"mT-30\">\n                    <div class=\"dropdown\">\n                      <button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                        Dropdown button\n                      </button>\n                      <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton\">\n                        <a class=\"dropdown-item\" href=\"#\">Action</a>\n                        <a class=\"dropdown-item\" href=\"#\">Another action</a>\n                        <a class=\"dropdown-item\" href=\"#\">Something else here</a>\n                      </div>\n                    </div>\n\n                    <!-- Example split danger button -->\n                    <div class=\"btn-group mT-20\">\n                      <button type=\"button\" class=\"btn btn-danger btn-color\">Action</button>\n                      <button type=\"button\" class=\"btn btn-danger dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                        <span class=\"visually-hidden\">Toggle Dropdown</span>\n                      </button>\n                      <div class=\"dropdown-menu\">\n                        <a class=\"dropdown-item\" href=\"#\">Action</a>\n                        <a class=\"dropdown-item\" href=\"#\">Another action</a>\n                        <a class=\"dropdown-item\" href=\"#\">Something else here</a>\n                        <div class=\"dropdown-divider\"></div>\n                        <a class=\"dropdown-item\" href=\"#\">Separated link</a>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">List Group</h6>\n                  <div class=\"mT-30\">\n                    <div class=\"list-group\">\n                      <a href=\"#\" class=\"list-group-item list-group-item-action active\" aria-current=\"true\">\n                        The current link item\n                      </a>\n                      <a href=\"#\" class=\"list-group-item list-group-item-action\">A second link item</a>\n                      <a href=\"#\" class=\"list-group-item list-group-item-action\">A third link item</a>\n                      <a href=\"#\" class=\"list-group-item list-group-item-action\">A fourth link item</a>\n                      <a href=\"#\" class=\"list-group-item list-group-item-action disabled\" tabindex=\"-1\" aria-disabled=\"true\">A disabled link item</a>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Modal</h6>\n                  <div class=\"mT-30\">\n                  <!-- Button trigger modal -->\n                  <button type=\"button\" class=\"btn btn-primary btn-color\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModal\">\n                    Launch demo modal\n                  </button>\n\n                  <!-- Modal -->\n                  <div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\">\n                    <div class=\"modal-dialog\">\n                      <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                          <h5 class=\"modal-title\" id=\"exampleModalLabel\">Modal title</h5>\n                          <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n                        </div>\n                        <div class=\"modal-body\">\n                          ...\n                        </div>\n                        <div class=\"modal-footer\">\n                          <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\n                          <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Popover</h6>\n                  <div class=\"mT-30\">\n                    <button type=\"button\" class=\"btn btn-lg btn-danger btn-color\" data-bs-toggle=\"popover\" title=\"Popover title\" data-bs-content=\"And here's some amazing content. It's very engaging. Right?\">Click to toggle popover</button>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Progress</h6>\n                  <div class=\"mT-30\">\n                    <!-- Progress Bars -->\n                    <div class=\"layers\">\n                      <div class=\"layer w-100\">\n                        <h5 class=\"mB-5\">100k</h5>\n                        <small class=\"fw-600 c-grey-700\">Visitors From USA</small>\n                        <span class=\"pull-right c-grey-600 fsz-sm\">50%</span>\n                        <div class=\"progress mT-10\">\n                          <div class=\"progress-bar bgc-deep-purple-500\" role=\"progressbar\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:50%;\"> <span class=\"visually-hidden\">50% Complete</span></div>\n                        </div>\n                      </div>\n                      <div class=\"layer w-100 mT-15\">\n                        <h5 class=\"mB-5\">1M</h5>\n                        <small class=\"fw-600 c-grey-700\">Visitors From Europe</small>\n                        <span class=\"pull-right c-grey-600 fsz-sm\">80%</span>\n                        <div class=\"progress mT-10\">\n                          <div class=\"progress-bar bgc-green-500\" role=\"progressbar\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:80%;\"> <span class=\"visually-hidden\">80% Complete</span></div>\n                        </div>\n                      </div>\n                      <div class=\"layer w-100 mT-15\">\n                        <h5 class=\"mB-5\">450k</h5>\n                        <small class=\"fw-600 c-grey-700\">Visitors From Australia</small>\n                        <span class=\"pull-right c-grey-600 fsz-sm\">40%</span>\n                        <div class=\"progress mT-10\">\n                          <div class=\"progress-bar bgc-light-blue-500\" role=\"progressbar\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:40%;\"> <span class=\"visually-hidden\">40% Complete</span></div>\n                        </div>\n                      </div>\n                      <div class=\"layer w-100 mT-15\">\n                        <h5 class=\"mB-5\">1B</h5>\n                        <small class=\"fw-600 c-grey-700\">Visitors From India</small>\n                        <span class=\"pull-right c-grey-600 fsz-sm\">90%</span>\n                        <div class=\"progress mT-10\">\n                          <div class=\"progress-bar bgc-blue-grey-500\" role=\"progressbar\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:90%;\"> <span class=\"visually-hidden\">90% Complete</span></div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Tootips</h6>\n                  <div class=\"mT-30\">\n                    <button type=\"button\" class=\"btn btn-primary btn-color\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"Tooltip on top\">\n                      Tooltip on top\n                    </button>\n                    <button type=\"button\" class=\"btn btn-secondary btn-color\" data-bs-toggle=\"tooltip\" data-bs-placement=\"right\" title=\"Tooltip on right\">\n                      Tooltip on right\n                    </button>\n                    <button type=\"button\" class=\"btn btn-success btn-color\" data-bs-toggle=\"tooltip\" data-bs-placement=\"bottom\" title=\"Tooltip on bottom\">\n                      Tooltip on bottom\n                    </button>\n                    <button type=\"button\" class=\"btn btn-danger btn-color\" data-bs-toggle=\"tooltip\" data-bs-placement=\"left\" title=\"Tooltip on left\">\n                      Tooltip on left\n                    </button>\n                  </div>\n                </div>\n              </div>\n              \n              <!-- Additional Bootstrap 5 Components -->\n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Button Sizes</h6>\n                  <div class=\"mT-30\">\n                    <button type=\"button\" class=\"btn btn-primary btn-lg btn-color mR-10\">Large button</button>\n                    <button type=\"button\" class=\"btn btn-secondary btn-lg mR-10\">Large button</button>\n                    <br><br>\n                    <button type=\"button\" class=\"btn btn-primary btn-color mR-10\">Default button</button>\n                    <button type=\"button\" class=\"btn btn-secondary mR-10\">Default button</button>\n                    <br><br>\n                    <button type=\"button\" class=\"btn btn-primary btn-sm btn-color mR-10\">Small button</button>\n                    <button type=\"button\" class=\"btn btn-secondary btn-sm mR-10\">Small button</button>\n                  </div>\n                </div>\n              </div>\n              \n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Badges</h6>\n                  <div class=\"mT-30\">\n                    <h5>Example heading <span class=\"badge bg-primary\">New</span></h5>\n                    <h5>Example heading <span class=\"badge bg-secondary\">2</span></h5>\n                    <h5>Example heading <span class=\"badge bg-success\">Success</span></h5>\n                    <h5>Example heading <span class=\"badge bg-danger\">Danger</span></h5>\n                    <h5>Example heading <span class=\"badge bg-warning text-dark\">Warning</span></h5>\n                    <h5>Example heading <span class=\"badge bg-info\">Info</span></h5>\n                    <h5>Example heading <span class=\"badge bg-light text-dark\">Light</span></h5>\n                    <h5>Example heading <span class=\"badge bg-dark\">Dark</span></h5>\n                  </div>\n                </div>\n              </div>\n              \n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Accordion</h6>\n                  <div class=\"mT-30\">\n                    <div class=\"accordion\" id=\"accordionExample\">\n                      <div class=\"accordion-item\">\n                        <h2 class=\"accordion-header\" id=\"headingOne\">\n                          <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseOne\" aria-expanded=\"true\" aria-controls=\"collapseOne\">\n                            Accordion Item #1\n                          </button>\n                        </h2>\n                        <div id=\"collapseOne\" class=\"accordion-collapse collapse show\" aria-labelledby=\"headingOne\" data-bs-parent=\"#accordionExample\">\n                          <div class=\"accordion-body\">\n                            This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes.\n                          </div>\n                        </div>\n                      </div>\n                      <div class=\"accordion-item\">\n                        <h2 class=\"accordion-header\" id=\"headingTwo\">\n                          <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseTwo\" aria-expanded=\"false\" aria-controls=\"collapseTwo\">\n                            Accordion Item #2\n                          </button>\n                        </h2>\n                        <div id=\"collapseTwo\" class=\"accordion-collapse collapse\" aria-labelledby=\"headingTwo\" data-bs-parent=\"#accordionExample\">\n                          <div class=\"accordion-body\">\n                            This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes.\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              \n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Cards</h6>\n                  <div class=\"mT-30\">\n                    <div class=\"card\" style=\"width: 18rem;\">\n                      <div class=\"card-body\">\n                        <h5 class=\"card-title\">Card title</h5>\n                        <h6 class=\"card-subtitle mb-2 text-muted\">Card subtitle</h6>\n                        <p class=\"card-text\">Some quick example text to build on the card title and make up the bulk of the card's content.</p>\n                        <a href=\"#\" class=\"card-link\">Card link</a>\n                        <a href=\"#\" class=\"card-link\">Another link</a>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              \n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">List Groups</h6>\n                  <div class=\"mT-30\">\n                    <ul class=\"list-group\">\n                      <li class=\"list-group-item\">An item</li>\n                      <li class=\"list-group-item\">A second item</li>\n                      <li class=\"list-group-item\">A third item</li>\n                      <li class=\"list-group-item\">A fourth item</li>\n                      <li class=\"list-group-item\">And a fifth one</li>\n                    </ul>\n                    <br>\n                    <div class=\"list-group\">\n                      <a href=\"#\" class=\"list-group-item list-group-item-action active\">\n                        The current link item\n                      </a>\n                      <a href=\"#\" class=\"list-group-item list-group-item-action\">A second link item</a>\n                      <a href=\"#\" class=\"list-group-item list-group-item-action\">A third link item</a>\n                      <a href=\"#\" class=\"list-group-item list-group-item-action\">A fourth link item</a>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              \n              <div class=\"masonry-item col-md-6\">\n                <div class=\"bgc-white p-20 bd\">\n                  <h6 class=\"c-grey-900\">Spinners</h6>\n                  <div class=\"mT-30\">\n                    <div class=\"spinner-border text-primary\" role=\"status\">\n                      <span class=\"visually-hidden\">Loading...</span>\n                    </div>\n                    <div class=\"spinner-border text-secondary\" role=\"status\">\n                      <span class=\"visually-hidden\">Loading...</span>\n                    </div>\n                    <div class=\"spinner-border text-success\" role=\"status\">\n                      <span class=\"visually-hidden\">Loading...</span>\n                    </div>\n                    <div class=\"spinner-border text-danger\" role=\"status\">\n                      <span class=\"visually-hidden\">Loading...</span>\n                    </div>\n                    <div class=\"spinner-border text-warning\" role=\"status\">\n                      <span class=\"visually-hidden\">Loading...</span>\n                    </div>\n                    <div class=\"spinner-border text-info\" role=\"status\">\n                      <span class=\"visually-hidden\">Loading...</span>\n                    </div>\n                    <div class=\"spinner-border text-light\" role=\"status\">\n                      <span class=\"visually-hidden\">Loading...</span>\n                    </div>\n                    <div class=\"spinner-border text-dark\" role=\"status\">\n                      <span class=\"visually-hidden\">Loading...</span>\n                    </div>\n                    <br><br>\n                    <div class=\"spinner-grow text-primary\" role=\"status\">\n                      <span class=\"visually-hidden\">Loading...</span>\n                    </div>\n                    <div class=\"spinner-grow text-secondary\" role=\"status\">\n                      <span class=\"visually-hidden\">Loading...</span>\n                    </div>\n                    <div class=\"spinner-grow text-success\" role=\"status\">\n                      <span class=\"visually-hidden\">Loading...</span>\n                    </div>\n                    <div class=\"spinner-grow text-danger\" role=\"status\">\n                      <span class=\"visually-hidden\">Loading...</span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              \n            </div>\n          </div>\n        </main>\n\n        <!-- ### $App Screen Footer ### -->\n        <footer class=\"bdT ta-c p-30 lh-0 fsz-sm c-grey-600\">\n          <span>Copyright © 2026 Designed by <a href=\"https://colorlib.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" title=\"Colorlib\">Colorlib</a>. All rights reserved.</span>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "src/vector-maps.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <title>Vector Maps</title>\n    <style>\n      #loader {\n        transition: all 0.3s ease-in-out;\n        opacity: 1;\n        visibility: visible;\n        position: fixed;\n        height: 100vh;\n        width: 100%;\n        background: #fff;\n        z-index: 90000;\n      }\n\n      #loader.fadeOut {\n        opacity: 0;\n        visibility: hidden;\n      }\n\n\n\n      .spinner {\n        width: 40px;\n        height: 40px;\n        position: absolute;\n        top: calc(50% - 20px);\n        left: calc(50% - 20px);\n        background-color: #333;\n        border-radius: 100%;\n        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;\n        animation: sk-scaleout 1.0s infinite ease-in-out;\n      }\n\n      @-webkit-keyframes sk-scaleout {\n        0% { -webkit-transform: scale(0) }\n        100% {\n          -webkit-transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n\n      @keyframes sk-scaleout {\n        0% {\n          -webkit-transform: scale(0);\n          transform: scale(0);\n        } 100% {\n          -webkit-transform: scale(1.0);\n          transform: scale(1.0);\n          opacity: 0;\n        }\n      }\n    </style>\n  </head>\n  <body class=\"app\">\n    <!-- @TOC -->\n    <!-- =================================================== -->\n    <!--\n      + @Page Loader\n      + @App Content\n          - #Left Sidebar\n              > $Sidebar Header\n              > $Sidebar Menu\n\n          - #Main\n              > $Topbar\n              > $App Screen Content\n    -->\n\n    <!-- @Page Loader -->\n    <!-- =================================================== -->\n    <div id='loader'>\n      <div class=\"spinner\"></div>\n    </div>\n\n    <script>\n      window.addEventListener('load', function load() {\n        const loader = document.getElementById('loader');\n        setTimeout(function() {\n          loader.classList.add('fadeOut');\n        }, 300);\n      });\n    </script>\n\n    <!-- @App Content -->\n    <!-- =================================================== -->\n    <div>\n      <!-- #Left Sidebar ==================== -->\n      <div class=\"sidebar\">\n        <div class=\"sidebar-inner\">\n          <!-- ### $Sidebar Header ### -->\n          <div class=\"sidebar-logo\">\n            <div class=\"peers ai-c fxw-nw\">\n              <div class=\"peer peer-greed\">\n                <a class=\"sidebar-link td-n\" href=\"index.html\">\n                  <div class=\"peers ai-c fxw-nw\">\n                    <div class=\"peer\">\n                      <div class=\"logo\">\n                        <img src=\"assets/static/images/logo.svg\" alt=\"\">\n                      </div>\n                    </div>\n                    <div class=\"peer peer-greed\">\n                      <h5 class=\"lh-1 mB-0 logo-text\">Adminator</h5>\n                    </div>\n                  </div>\n                </a>\n              </div>\n              <div class=\"peer\">\n                <div class=\"mobile-toggle sidebar-toggle\">\n                  <a href=\"\" class=\"td-n\">\n                    <i class=\"ti-arrow-circle-left\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- ### $Sidebar Menu ### -->\n          <ul class=\"sidebar-menu scrollable pos-r\">\n            <li class=\"nav-item mT-30\">\n              <a class=\"sidebar-link\" href=\"index.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-home\"></i>\n                </span>\n                <span class=\"title\">Dashboard</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class=\"sidebar-link\" href=\"https://dashboardpack.com/?utm_source=adminator&utm_medium=sidebar&utm_campaign=go_pro\" target=\"_blank\" rel=\"noopener\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-purple-500 ti-crown\"></i>\n                </span>\n                <span class=\"title\">Go Pro <span class=\"badge bg-primary ms-2\">PRO</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"email.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-brown-500 ti-email\"></i>\n                </span>\n                <span class=\"title\">Email</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"compose.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-blue-500 ti-share\"></i>\n                </span>\n                <span class=\"title\">Compose</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"calendar.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-orange-500 ti-calendar\"></i>\n                </span>\n                <span class=\"title\">Calendar <span class=\"badge bg-danger ms-2\">HOT</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"chat.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-deep-purple-500 ti-comment-alt\"></i>\n                </span>\n                <span class=\"title\">Chat</span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"charts.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-indigo-500 ti-bar-chart\"></i>\n                </span>\n                <span class=\"title\">Charts <span class=\"badge bg-success ms-2\">NEW</span></span>\n              </a>\n            </li>\n            <li class=\"nav-item\">\n              <a class='sidebar-link' href=\"forms.html\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-light-blue-500 ti-pencil\"></i>\n                </span>\n                <span class=\"title\">Forms</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"sidebar-link\" href=\"ui.html\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-pink-500 ti-palette\"></i>\n                  </span>\n                <span class=\"title\">UI Elements</span>\n              </a>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-orange-500 ti-layout-list-thumb\"></i>\n                </span>\n                <span class=\"title\">Tables</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"basic-table.html\">Basic Table</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"datatable.html\">Data Table <span class=\"badge bg-success ms-1\">NEW</span></a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-purple-500 ti-map\"></i>\n                  </span>\n                <span class=\"title\">Maps</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a href=\"google-maps.html\">Google Map</a>\n                </li>\n                <li>\n                  <a href=\"vector-maps.html\">Vector Map</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                    <i class=\"c-red-500 ti-files\"></i>\n                  </span>\n                <span class=\"title\">Pages</span>\n                <span class=\"arrow\">\n                    <i class=\"ti-angle-right\"></i>\n                  </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li>\n                  <a class='sidebar-link' href=\"blank.html\">Blank</a>\n                </li>                 \n                <li>\n                  <a class='sidebar-link' href=\"404.html\">404</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"500.html\">500</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signin.html\">Sign In</a>\n                </li>\n                <li>\n                  <a class='sidebar-link' href=\"signup.html\">Sign Up</a>\n                </li>\n              </ul>\n            </li>\n            <li class=\"nav-item dropdown\">\n              <a class=\"dropdown-toggle\" href=\"javascript:void(0);\">\n                <span class=\"icon-holder\">\n                  <i class=\"c-teal-500 ti-view-list-alt\"></i>\n                </span>\n                <span class=\"title\">Multiple Levels</span>\n                <span class=\"arrow\">\n                  <i class=\"ti-angle-right\"></i>\n                </span>\n              </a>\n              <ul class=\"dropdown-menu\">\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                  </a>\n                </li>\n                <li class=\"nav-item dropdown\">\n                  <a href=\"javascript:void(0);\">\n                    <span>Menu Item</span>\n                    <span class=\"arrow\">\n                      <i class=\"ti-angle-right\"></i>\n                    </span>\n                  </a>\n                  <ul class=\"dropdown-menu\">\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                    <li>\n                      <a href=\"javascript:void(0);\">Menu Item</a>\n                    </li>\n                  </ul>\n                </li>\n              </ul>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <!-- #Main ============================ -->\n      <div class=\"page-container\">\n        <!-- ### $Topbar ### -->\n        <div class=\"header navbar\">\n          <div class=\"header-container\">\n            <ul class=\"nav-left\">\n              <li>\n                <a id='sidebar-toggle' class=\"sidebar-toggle\" href=\"javascript:void(0);\">\n                  <i class=\"ti-menu\"></i>\n                </a>\n              </li>\n              <li class=\"search-box\">\n                <a class=\"search-toggle no-pdd-right\" href=\"javascript:void(0);\">\n                  <i class=\"search-icon ti-search pdd-right-10\"></i>\n                  <i class=\"search-icon-close ti-close pdd-right-10\"></i>\n                </a>\n              </li>\n              <li class=\"search-input\">\n                <input class=\"form-control\" type=\"text\" placeholder=\"Search...\">\n              </li>\n            </ul>\n            <ul class=\"nav-right\">\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-red\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-bell\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-bell pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Notifications</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">John Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">post</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">5 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Moo Doe</span>\n                              <span class=\"c-grey-600\">liked your <span class=\"text-dark\">cover image</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">7 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <span>\n                              <span class=\"fw-500\">Lee Doe</span>\n                              <span class=\"c-grey-600\">commented on your <span class=\"text-dark\">video</span>\n                              </span>\n                            </span>\n                            <p class=\"m-0\">\n                              <small class=\"fsz-xs\">10 mins ago</small>\n                            </p>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Notifications <i class=\"ti-angle-right fsz-xs mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"notifications dropdown\">\n                <span class=\"counter bgc-blue\">3</span>\n                <a href=\"\" class=\"dropdown-toggle no-after\" data-bs-toggle=\"dropdown\">\n                  <i class=\"ti-email\"></i>\n                </a>\n\n                <ul class=\"dropdown-menu\">\n                  <li class=\"pX-20 pY-15 bdB\">\n                    <i class=\"ti-email pR-10\"></i>\n                    <span class=\"fsz-sm fw-600 c-grey-900\">Emails</span>\n                  </li>\n                  <li>\n                    <ul class=\"ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm\">\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/1.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">John Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">5 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/2.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Moo Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">15 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                      <li>\n                        <a href=\"\" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>\n                          <div class=\"peer mR-15\">\n                            <img class=\"w-3r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/3.jpg\" alt=\"\">\n                          </div>\n                          <div class=\"peer peer-greed\">\n                            <div>\n                              <div class=\"peers jc-sb fxw-nw mB-5\">\n                                <div class=\"peer\">\n                                  <p class=\"fw-500 mB-0\">Lee Doe</p>\n                                </div>\n                                <div class=\"peer\">\n                                  <small class=\"fsz-xs\">25 mins ago</small>\n                                </div>\n                              </div>\n                              <span class=\"c-grey-600 fsz-sm\">\n                                Want to create your own customized data generator for your app...\n                              </span>\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                    </ul>\n                  </li>\n                  <li class=\"pX-20 pY-15 ta-c bdT\">\n                    <span>\n                      <a href=\"email.html\" class=\"c-grey-600 cH-blue fsz-sm td-n\">View All Email <i class=\"fs-xs ti-angle-right mL-10\"></i></a>\n                    </span>\n                  </li>\n                </ul>\n              </li>\n              <li class=\"dropdown\">\n                <a href=\"\" class=\"dropdown-toggle no-after peers fxw-nw ai-c lh-1\" data-bs-toggle=\"dropdown\">\n                  <div class=\"peer mR-10\">\n                    <img class=\"w-2r bdrs-50p\" src=\"https://randomuser.me/api/portraits/men/10.jpg\" alt=\"\">\n                  </div>\n                  <div class=\"peer\">\n                    <span class=\"fsz-sm c-grey-900\">John Doe</span>\n                  </div>\n                </a>\n                <ul class=\"dropdown-menu fsz-sm\">\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-settings mR-10\"></i>\n                      <span>Setting</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-user mR-10\"></i>\n                      <span>Profile</span>\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"email.html\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-email mR-10\"></i>\n                      <span>Messages</span>\n                    </a>\n                  </li>\n                  <li role=\"separator\" class=\"divider\"></li>\n                  <li>\n                    <a href=\"\" class=\"d-b td-n pY-5 bgcH-grey-100 c-grey-700\">\n                      <i class=\"ti-power-off mR-10\"></i>\n                      <span>Logout</span>\n                    </a>\n                  </li>\n                </ul>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <!-- ### $App Screen Content ### -->\n        <main class='main-content bgc-grey-100'>\n          <div id='mainContent'>\n            <div class=\"container-fluid\">\n              <h4 class=\"c-grey-900 mT-10 mB-30\">Vector Maps</h4>\n              <div class=\"row\">\n                <div class=\"col-md-12\">\n                  <div class=\"bgc-white bd bdrs-3 p-20 mB-20\">\n                    <h6 class=\"c-grey-900 mB-20\">Interactive Vector Maps</h6>\n                    <div id=\"world-map-marker\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </main>\n\n        <!-- ### $App Screen Footer ### -->\n        <footer class=\"bdT ta-c p-30 lh-0 fsz-sm c-grey-600\">\n          <span>Copyright © 2026 Designed by <a href=\"https://colorlib.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" title=\"Colorlib\">Colorlib</a>. All rights reserved.</span>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "tests/setup.js",
    "content": "/**\n * Vitest Test Setup\n * Configures the test environment\n */\n\n// Set up DOM environment\nif (typeof document !== 'undefined') {\n  // Set default document structure\n  document.body.innerHTML = `\n    <div class=\"app\">\n      <div class=\"sidebar\"></div>\n      <div class=\"main-content\"></div>\n    </div>\n  `;\n}\n\n// Mock localStorage\nconst localStorageMock = (() => {\n  let store = {};\n  return {\n    getItem: (key) => store[key] || null,\n    setItem: (key, value) => {\n      store[key] = String(value);\n    },\n    removeItem: (key) => {\n      delete store[key];\n    },\n    clear: () => {\n      store = {};\n    },\n    get length() {\n      return Object.keys(store).length;\n    },\n    key: (index) => Object.keys(store)[index] || null\n  };\n})();\n\nObject.defineProperty(window, 'localStorage', {\n  value: localStorageMock\n});\n\n// Mock matchMedia\nObject.defineProperty(window, 'matchMedia', {\n  writable: true,\n  value: (query) => ({\n    matches: false,\n    media: query,\n    onchange: null,\n    addListener: () => {},\n    removeListener: () => {},\n    addEventListener: () => {},\n    removeEventListener: () => {},\n    dispatchEvent: () => {}\n  })\n});\n\n// Clear localStorage before each test\nbeforeEach(() => {\n  localStorage.clear();\n  document.documentElement.removeAttribute('data-theme');\n});\n"
  },
  {
    "path": "tests/utils/dom.test.js",
    "content": "/**\n * DOM Utilities Tests\n */\n\nimport { describe, it, expect, beforeEach, vi } from 'vitest';\nimport { DOM } from '../../src/assets/scripts/utils/dom.js';\n\ndescribe('DOM Utilities', () => {\n  beforeEach(() => {\n    document.body.innerHTML = `\n      <div class=\"container\">\n        <button id=\"btn\" class=\"btn primary\">Click me</button>\n        <ul class=\"list\">\n          <li class=\"item\">Item 1</li>\n          <li class=\"item\">Item 2</li>\n          <li class=\"item\">Item 3</li>\n        </ul>\n        <div class=\"panel\" style=\"display: block;\">Content</div>\n        <input type=\"text\" id=\"input\" data-id=\"123\" />\n      </div>\n    `;\n  });\n\n  describe('select()', () => {\n    it('selects a single element by selector', () => {\n      const btn = DOM.select('#btn');\n      expect(btn).not.toBeNull();\n      expect(btn.textContent).toBe('Click me');\n    });\n\n    it('returns null for non-existent elements', () => {\n      const el = DOM.select('.non-existent');\n      expect(el).toBeNull();\n    });\n\n    it('supports context parameter', () => {\n      const list = DOM.select('.list');\n      const item = DOM.select('.item', list);\n      expect(item.textContent).toBe('Item 1');\n    });\n  });\n\n  describe('selectAll()', () => {\n    it('selects all matching elements', () => {\n      const items = DOM.selectAll('.item');\n      expect(items).toHaveLength(3);\n    });\n\n    it('returns an array', () => {\n      const items = DOM.selectAll('.item');\n      expect(Array.isArray(items)).toBe(true);\n    });\n\n    it('returns empty array for no matches', () => {\n      const items = DOM.selectAll('.non-existent');\n      expect(items).toHaveLength(0);\n    });\n  });\n\n  describe('exists()', () => {\n    it('returns true for existing elements', () => {\n      expect(DOM.exists('#btn')).toBe(true);\n    });\n\n    it('returns false for non-existent elements', () => {\n      expect(DOM.exists('.non-existent')).toBe(false);\n    });\n  });\n\n  describe('on() / off()', () => {\n    it('adds event listener', () => {\n      const handler = vi.fn();\n      const btn = DOM.select('#btn');\n\n      DOM.on(btn, 'click', handler);\n      btn.click();\n\n      expect(handler).toHaveBeenCalledTimes(1);\n    });\n\n    it('supports selector string', () => {\n      const handler = vi.fn();\n\n      DOM.on('#btn', 'click', handler);\n      DOM.select('#btn').click();\n\n      expect(handler).toHaveBeenCalled();\n    });\n\n    it('removes event listener', () => {\n      const handler = vi.fn();\n      const btn = DOM.select('#btn');\n\n      DOM.on(btn, 'click', handler);\n      DOM.off(btn, 'click', handler);\n      btn.click();\n\n      expect(handler).not.toHaveBeenCalled();\n    });\n  });\n\n  describe('addClass() / removeClass() / toggleClass() / hasClass()', () => {\n    it('adds a class', () => {\n      const btn = DOM.select('#btn');\n      DOM.addClass(btn, 'active');\n      expect(btn.classList.contains('active')).toBe(true);\n    });\n\n    it('removes a class', () => {\n      const btn = DOM.select('#btn');\n      DOM.removeClass(btn, 'primary');\n      expect(btn.classList.contains('primary')).toBe(false);\n    });\n\n    it('toggles a class', () => {\n      const btn = DOM.select('#btn');\n\n      DOM.toggleClass(btn, 'active');\n      expect(btn.classList.contains('active')).toBe(true);\n\n      DOM.toggleClass(btn, 'active');\n      expect(btn.classList.contains('active')).toBe(false);\n    });\n\n    it('checks if element has class', () => {\n      expect(DOM.hasClass('#btn', 'primary')).toBe(true);\n      expect(DOM.hasClass('#btn', 'non-existent')).toBe(false);\n    });\n\n    it('supports selector strings', () => {\n      DOM.addClass('#btn', 'test-class');\n      expect(DOM.hasClass('#btn', 'test-class')).toBe(true);\n    });\n  });\n\n  describe('attr()', () => {\n    it('gets attribute value', () => {\n      const id = DOM.attr('#btn', 'id');\n      expect(id).toBe('btn');\n    });\n\n    it('sets attribute value', () => {\n      DOM.attr('#btn', 'title', 'My Button');\n      expect(DOM.select('#btn').getAttribute('title')).toBe('My Button');\n    });\n\n    it('returns null for non-existent element', () => {\n      expect(DOM.attr('.non-existent', 'id')).toBeNull();\n    });\n  });\n\n  describe('data()', () => {\n    it('gets data attribute value', () => {\n      const id = DOM.data('#input', 'id');\n      expect(id).toBe('123');\n    });\n\n    it('sets data attribute value', () => {\n      DOM.data('#input', 'value', '456');\n      expect(DOM.select('#input').getAttribute('data-value')).toBe('456');\n    });\n  });\n\n  describe('text() / html()', () => {\n    it('gets text content', () => {\n      expect(DOM.text('#btn')).toBe('Click me');\n    });\n\n    it('sets text content', () => {\n      DOM.text('#btn', 'New Text');\n      expect(DOM.select('#btn').textContent).toBe('New Text');\n    });\n\n    it('gets HTML content', () => {\n      const html = DOM.html('.container');\n      expect(html).toContain('<button');\n    });\n\n    it('sets HTML content', () => {\n      DOM.html('.panel', '<span>New</span>');\n      expect(DOM.select('.panel').innerHTML).toBe('<span>New</span>');\n    });\n  });\n\n  describe('hide() / show() / toggle()', () => {\n    it('hides an element', () => {\n      DOM.hide('.panel');\n      expect(DOM.select('.panel').style.display).toBe('none');\n    });\n\n    it('shows an element', () => {\n      DOM.hide('.panel');\n      DOM.show('.panel');\n      expect(DOM.select('.panel').style.display).toBe('block');\n    });\n\n    it('shows with custom display value', () => {\n      DOM.hide('.panel');\n      DOM.show('.panel', 'flex');\n      expect(DOM.select('.panel').style.display).toBe('flex');\n    });\n\n    it('toggles visibility', () => {\n      const panel = DOM.select('.panel');\n\n      DOM.toggle(panel);\n      expect(panel.style.display).toBe('none');\n\n      DOM.toggle(panel);\n      expect(panel.style.display).toBe('block');\n    });\n  });\n\n  describe('dimensions()', () => {\n    it('returns dimensions object', () => {\n      const dims = DOM.dimensions('#btn');\n      expect(dims).toHaveProperty('width');\n      expect(dims).toHaveProperty('height');\n      expect(dims).toHaveProperty('top');\n      expect(dims).toHaveProperty('left');\n    });\n\n    it('returns null for non-existent element', () => {\n      expect(DOM.dimensions('.non-existent')).toBeNull();\n    });\n  });\n\n  describe('ready()', () => {\n    it('executes callback immediately when DOM is ready', () => {\n      const callback = vi.fn();\n      DOM.ready(callback);\n      expect(callback).toHaveBeenCalled();\n    });\n  });\n\n  describe('create()', () => {\n    it('creates an element with tag', () => {\n      const el = DOM.create('div');\n      expect(el.tagName).toBe('DIV');\n    });\n\n    it('creates element with attributes', () => {\n      const el = DOM.create('button', { class: 'btn', type: 'submit' });\n      expect(el.className).toBe('btn');\n      expect(el.type).toBe('submit');\n    });\n\n    it('creates element with text children', () => {\n      const el = DOM.create('span', {}, ['Hello']);\n      expect(el.textContent).toBe('Hello');\n    });\n\n    it('creates element with element children', () => {\n      const child = DOM.create('span', {}, ['Child']);\n      const parent = DOM.create('div', {}, [child]);\n      expect(parent.firstChild).toBe(child);\n    });\n  });\n\n  describe('closest()', () => {\n    it('finds closest ancestor', () => {\n      const item = DOM.select('.item');\n      const list = DOM.closest(item, '.list');\n      expect(list).not.toBeNull();\n      expect(list.classList.contains('list')).toBe(true);\n    });\n\n    it('returns null when no ancestor matches', () => {\n      const item = DOM.select('.item');\n      expect(DOM.closest(item, '.non-existent')).toBeNull();\n    });\n  });\n});\n"
  },
  {
    "path": "tests/utils/logger.test.js",
    "content": "/**\n * Logger Utility Tests\n */\n\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';\nimport Logger from '../../src/assets/scripts/utils/logger.js';\n\ndescribe('Logger Utility', () => {\n  const originalEnv = process.env.NODE_ENV;\n  let consoleSpies;\n\n  beforeEach(() => {\n    consoleSpies = {\n      info: vi.spyOn(console, 'info').mockImplementation(() => {}),\n      warn: vi.spyOn(console, 'warn').mockImplementation(() => {}),\n      error: vi.spyOn(console, 'error').mockImplementation(() => {}),\n      debug: vi.spyOn(console, 'debug').mockImplementation(() => {}),\n      group: vi.spyOn(console, 'group').mockImplementation(() => {}),\n      groupEnd: vi.spyOn(console, 'groupEnd').mockImplementation(() => {}),\n      time: vi.spyOn(console, 'time').mockImplementation(() => {}),\n      timeEnd: vi.spyOn(console, 'timeEnd').mockImplementation(() => {}),\n      table: vi.spyOn(console, 'table').mockImplementation(() => {})\n    };\n  });\n\n  afterEach(() => {\n    process.env.NODE_ENV = originalEnv;\n    vi.restoreAllMocks();\n  });\n\n  describe('in development mode', () => {\n    beforeEach(() => {\n      process.env.NODE_ENV = 'development';\n    });\n\n    it('logs info messages', () => {\n      Logger.info('Test message', { data: 'test' });\n      expect(consoleSpies.info).toHaveBeenCalled();\n    });\n\n    it('logs warn messages', () => {\n      Logger.warn('Warning message');\n      expect(consoleSpies.warn).toHaveBeenCalled();\n    });\n\n    it('logs error messages', () => {\n      Logger.error('Error message', new Error('Test'));\n      expect(consoleSpies.error).toHaveBeenCalled();\n    });\n\n    it('logs debug messages', () => {\n      Logger.debug('Debug message');\n      expect(consoleSpies.debug).toHaveBeenCalled();\n    });\n\n    it('creates log groups', () => {\n      Logger.group('Test Group');\n      Logger.groupEnd();\n      expect(consoleSpies.group).toHaveBeenCalled();\n      expect(consoleSpies.groupEnd).toHaveBeenCalled();\n    });\n\n    it('logs timing', () => {\n      Logger.time('operation');\n      Logger.timeEnd('operation');\n      expect(consoleSpies.time).toHaveBeenCalled();\n      expect(consoleSpies.timeEnd).toHaveBeenCalled();\n    });\n\n    it('logs tables', () => {\n      Logger.table([{ a: 1 }, { a: 2 }]);\n      expect(consoleSpies.table).toHaveBeenCalled();\n    });\n\n    it('prefixes messages with [Adminator]', () => {\n      Logger.info('Test');\n      expect(consoleSpies.info).toHaveBeenCalledWith(\n        expect.stringContaining('[Adminator]'),\n        expect.anything()\n      );\n    });\n  });\n\n  describe('in production mode', () => {\n    beforeEach(() => {\n      process.env.NODE_ENV = 'production';\n      // Mock window.location for the isDev check\n      Object.defineProperty(window, 'location', {\n        value: { hostname: 'example.com' },\n        writable: true\n      });\n    });\n\n    it('does not log info messages', () => {\n      Logger.info('Test message');\n      expect(consoleSpies.info).not.toHaveBeenCalled();\n    });\n\n    it('does not log warn messages', () => {\n      Logger.warn('Warning message');\n      expect(consoleSpies.warn).not.toHaveBeenCalled();\n    });\n\n    it('does not log error messages', () => {\n      Logger.error('Error message');\n      expect(consoleSpies.error).not.toHaveBeenCalled();\n    });\n  });\n});\n"
  },
  {
    "path": "tests/utils/theme.test.js",
    "content": "/**\n * Theme Manager Tests\n */\n\nimport { describe, it, expect, beforeEach, vi } from 'vitest';\nimport Theme from '../../src/assets/scripts/utils/theme.js';\n\ndescribe('Theme Manager', () => {\n  beforeEach(() => {\n    localStorage.clear();\n    document.documentElement.removeAttribute('data-theme');\n  });\n\n  describe('current()', () => {\n    it('returns \"light\" by default when no theme is stored', () => {\n      expect(Theme.current()).toBe('light');\n    });\n\n    it('returns stored theme from localStorage', () => {\n      localStorage.setItem('adminator-theme', 'dark');\n      expect(Theme.current()).toBe('dark');\n    });\n\n    it('returns \"light\" for invalid stored values', () => {\n      localStorage.setItem('adminator-theme', 'invalid');\n      expect(Theme.current()).toBe('light');\n    });\n  });\n\n  describe('apply()', () => {\n    it('sets data-theme attribute on document', () => {\n      Theme.apply('dark');\n      expect(document.documentElement.getAttribute('data-theme')).toBe('dark');\n    });\n\n    it('stores theme in localStorage', () => {\n      Theme.apply('dark');\n      expect(localStorage.getItem('adminator-theme')).toBe('dark');\n    });\n\n    it('dispatches adminator:themeChanged event', () => {\n      const handler = vi.fn();\n      window.addEventListener('adminator:themeChanged', handler);\n\n      Theme.apply('dark');\n\n      expect(handler).toHaveBeenCalled();\n      expect(handler.mock.calls[0][0].detail.theme).toBe('dark');\n\n      window.removeEventListener('adminator:themeChanged', handler);\n    });\n\n    it('falls back to \"light\" for invalid theme values', () => {\n      Theme.apply('invalid');\n      expect(document.documentElement.getAttribute('data-theme')).toBe('light');\n    });\n\n    it('returns true on success', () => {\n      expect(Theme.apply('dark')).toBe(true);\n    });\n  });\n\n  describe('toggle()', () => {\n    it('toggles from light to dark', () => {\n      Theme.apply('light');\n      const result = Theme.toggle();\n      expect(result).toBe('dark');\n      expect(Theme.current()).toBe('dark');\n    });\n\n    it('toggles from dark to light', () => {\n      Theme.apply('dark');\n      const result = Theme.toggle();\n      expect(result).toBe('light');\n      expect(Theme.current()).toBe('light');\n    });\n  });\n\n  describe('init()', () => {\n    it('uses stored preference if available', () => {\n      localStorage.setItem('adminator-theme', 'dark');\n      Theme.init();\n      expect(document.documentElement.getAttribute('data-theme')).toBe('dark');\n    });\n\n    it('returns the applied theme', () => {\n      localStorage.setItem('adminator-theme', 'dark');\n      expect(Theme.init()).toBe('dark');\n    });\n  });\n\n  describe('isDark() / isLight()', () => {\n    it('isDark returns true when theme is dark', () => {\n      Theme.apply('dark');\n      expect(Theme.isDark()).toBe(true);\n      expect(Theme.isLight()).toBe(false);\n    });\n\n    it('isLight returns true when theme is light', () => {\n      Theme.apply('light');\n      expect(Theme.isLight()).toBe(true);\n      expect(Theme.isDark()).toBe(false);\n    });\n  });\n\n  describe('getChartColors()', () => {\n    it('returns dark colors when theme is dark', () => {\n      Theme.apply('dark');\n      const colors = Theme.getChartColors();\n      expect(colors.textColor).toBe('#FFFFFF');\n    });\n\n    it('returns light colors when theme is light', () => {\n      Theme.apply('light');\n      const colors = Theme.getChartColors();\n      expect(colors.textColor).toBe('#212529');\n    });\n  });\n});\n"
  },
  {
    "path": "vitest.config.js",
    "content": "import { defineConfig } from 'vitest/config';\n\nexport default defineConfig({\n  test: {\n    environment: 'jsdom',\n    globals: true,\n    include: ['tests/**/*.test.js'],\n    coverage: {\n      provider: 'v8',\n      reporter: ['text', 'html'],\n      include: ['src/assets/scripts/utils/**/*.js'],\n      exclude: ['node_modules', 'dist', 'tests'],\n    },\n    setupFiles: ['./tests/setup.js'],\n  },\n});\n"
  },
  {
    "path": "webpack/config.js",
    "content": "// ------------------\n// @Table of Contents\n// ------------------\n\n/**\n * + @Loading Dependencies\n * + @Entry Point Setup\n * + @Path Resolving\n * + @Exporting Module\n */\n\n\n// ---------------------\n// @Loading Dependencies\n// ---------------------\n\nconst\n  path = require('path'),\n  manifest = require('./manifest'),\n  devServer = require('./devServer'),\n  rules = require('./rules'),\n  plugins = require('./plugins');\n\nconst CssMinimizerPlugin = require(\"css-minimizer-webpack-plugin\");\nconst TerserPlugin = require(\"terser-webpack-plugin\");\n\n// ------------------\n// @Entry Point Setup\n// ------------------\n\nconst\n  entry = [\n    path.join(manifest.paths.src, 'assets', 'scripts', manifest.entries.js),\n  ];\n\n\n// ---------------\n// @Path Resolving\n// ---------------\n\nconst resolve = {\n  extensions: ['.tsx', '.ts', '.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],\n  modules: [\n    path.join(__dirname, '../node_modules'),\n    path.join(manifest.paths.src, ''),\n  ],\n  alias: {\n    '@': path.join(manifest.paths.src),\n    '@/components': path.join(manifest.paths.src, 'assets', 'scripts', 'components'),\n    '@/utils': path.join(manifest.paths.src, 'assets', 'scripts', 'utils'),\n    '@/constants': path.join(manifest.paths.src, 'assets', 'scripts', 'constants'),\n  },\n};\n\nconst optimization = {\n  minimize: manifest.MINIFY,\n  // Code splitting for better caching and smaller initial bundle\n  splitChunks: {\n    chunks: 'all',\n    maxInitialRequests: 25,\n    minSize: 20000,\n    cacheGroups: {\n      // Vendor chunks\n      chartjs: {\n        test: /[\\\\/]node_modules[\\\\/]chart\\.js[\\\\/]/,\n        name: 'vendor-chartjs',\n        priority: 30,\n      },\n      fullcalendar: {\n        test: /[\\\\/]node_modules[\\\\/]@fullcalendar[\\\\/]/,\n        name: 'vendor-fullcalendar',\n        priority: 30,\n      },\n      bootstrap: {\n        test: /[\\\\/]node_modules[\\\\/]bootstrap[\\\\/]/,\n        name: 'vendor-bootstrap',\n        priority: 20,\n      },\n      // Other node_modules\n      vendors: {\n        test: /[\\\\/]node_modules[\\\\/]/,\n        name: 'vendors',\n        priority: 10,\n        reuseExistingChunk: true,\n      },\n      // Common code shared between entry points\n      common: {\n        name: 'common',\n        minChunks: 2,\n        priority: 5,\n        reuseExistingChunk: true,\n      },\n    },\n  },\n  // Extract webpack runtime into separate chunk\n  runtimeChunk: 'single',\n};\n\nif (manifest.MINIFY) {\n  optimization.minimizer = [\n    new CssMinimizerPlugin(),\n    new TerserPlugin({\n      terserOptions: {\n        compress: {\n          drop_console: manifest.IS_PRODUCTION,\n          drop_debugger: manifest.IS_PRODUCTION,\n        },\n        output: {\n          comments: false,\n        },\n      },\n      extractComments: false,\n    }),\n  ];\n}\n\n// -----------------\n// @Exporting Module\n// -----------------\nmodule.exports = {\n  devtool: manifest.IS_PRODUCTION ? false : 'source-map',\n  context: path.join(manifest.paths.src, manifest.entries.js),\n  // watch: !manifest.IS_PRODUCTION,\n  entry,\n  mode: manifest.NODE_ENV,\n  // output: {\n  //   path: manifest.paths.build,\n  //   publicPath: '',\n  //   filename: manifest.outputFiles.bundle,\n  // },\n  module: {\n    rules,\n  },\n  optimization,\n  resolve,\n  plugins,\n  devServer,\n  // Suppress Bootstrap SASS deprecation warnings (modern syntax)\n  ignoreWarnings: [\n    /Deprecation Warning/,\n    /node_modules\\/bootstrap/,\n    /repetitive deprecation warnings omitted/,\n    /red\\(\\) is deprecated/,\n    /green\\(\\) is deprecated/,\n    /blue\\(\\) is deprecated/,\n    /Global built-in functions are deprecated/,\n  ],\n};\n"
  },
  {
    "path": "webpack/devServer.js",
    "content": "// ---------------------\n// @Loading Dependencies\n// ---------------------\n\nconst\n  manifest = require('./manifest');\n\n\n// ------------------\n// @DevServer Configs\n// ------------------\n\n/**\n * [1] : To enable local network testing\n */\n\nconst devServer = {\n  static: {\n    directory: manifest.IS_PRODUCTION ? manifest.paths.build : manifest.paths.src,\n    watch: true,\n  },\n  historyApiFallback: true,\n  port: manifest.IS_PRODUCTION ? 3001 : 4000,\n  compress: manifest.IS_PRODUCTION,\n  client: {\n    overlay: true,\n    progress: !manifest.IS_PRODUCTION,\n  },\n  hot: !manifest.IS_PRODUCTION,\n  host: '0.0.0.0',\n  allowedHosts: 'all', // [1]\n  devMiddleware: {\n    stats: {\n      assets: true,\n      children: false,\n      chunks: false,\n      hash: false,\n      modules: false,\n      publicPath: false,\n      timings: true,\n      version: false,\n      warnings: true,\n      colors: true,\n    },\n  },\n};\n\n\n// -----------------\n// @Exporting Module\n// -----------------\n\nmodule.exports = devServer;"
  },
  {
    "path": "webpack/manifest.js",
    "content": "// ------------------\n// @Table of Contents\n// ------------------\n\n/**\n * + @Loading Dependencies\n * + @Environment Holders\n * + @Utils\n * + @App Paths\n * + @Output Files Names\n * + @Entries Files Names\n * + @Exporting Module\n */\n\n\n// ---------------------\n// @Loading Dependencies\n// ---------------------\n\nconst path = require('path');\n\n\n// --------------------\n// @Environment Holders\n// --------------------\n\nconst\n  NODE_ENV       = process.env.NODE_ENV || 'development',\n  IS_DEVELOPMENT = NODE_ENV === 'development',\n  IS_PRODUCTION  = NODE_ENV === 'production',\n  MINIFY         = process.env.MINIFY === 'true';\n\n// ------\n// @Utils\n// ------\n\nconst\n  dir = src => path.join(__dirname, src);\n\n\n// ----------\n// @App Paths\n// ----------\n\nconst\n  paths = {\n    src   : dir('../src'),\n    build : dir('../dist'),\n  };\n\n\n// -------------------\n// @Output Files Names\n// -------------------\n\nconst\n  outputFiles = {\n    bundle : 'bundle.js',\n    vendor : 'vendor.js',\n    css    : 'style.css',\n  };\n\n\n// --------------------\n// @Entries Files Names\n// --------------------\n\nconst\n  entries = {\n    js   : 'index.js',\n  };\n\n\n// -----------------\n// @Exporting Module\n// -----------------\n\nmodule.exports = {\n  paths,\n  outputFiles,\n  entries,\n  NODE_ENV,\n  IS_DEVELOPMENT,\n  IS_PRODUCTION,\n  MINIFY,\n};\n"
  },
  {
    "path": "webpack/plugins/caseSensitivePlugin.js",
    "content": "const\n  CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');\n\nmodule.exports = new CaseSensitivePathsPlugin();\n"
  },
  {
    "path": "webpack/plugins/copyPlugin.js",
    "content": "const\n  path              = require('path'),\n  manifest          = require('../manifest'),\n  CopyWebpackPlugin = require('copy-webpack-plugin');\n\nmodule.exports = new CopyWebpackPlugin({\n  patterns: [\n    {\n      from : path.join(manifest.paths.src, 'assets/static'),\n      to   : path.join(manifest.paths.build, 'assets/static'),\n    },\n  ],\n});\n"
  },
  {
    "path": "webpack/plugins/dashboardPlugin.js",
    "content": "const\n  DashboardPlugin = require('webpack-dashboard/plugin');\n\nmodule.exports = new DashboardPlugin();\n"
  },
  {
    "path": "webpack/plugins/extractPlugin.js",
    "content": "const\n  manifest          = require('../manifest'),\n  ExtractTextPlugin = require('mini-css-extract-plugin');\n\nmodule.exports = new ExtractTextPlugin({\n  filename: manifest.outputFiles.css,\n  // allChunks: true,\n});\n"
  },
  {
    "path": "webpack/plugins/htmlPlugin.js",
    "content": "const\n  path              = require('path'),\n  manifest          = require('../manifest'),\n  HtmlWebpackPlugin = require('html-webpack-plugin');\n\nconst titles = {\n  'index': 'Dashboard',\n  'blank': 'Blank',\n  'buttons': 'Buttons',\n  'calendar': 'Calendar',\n  'charts': 'Charts',\n  'chat': 'Chat',\n  'compose': 'Compose',\n  'datatable': 'Datatable',\n  'email': 'Email',\n  'forms': 'Forms',\n  'google-maps': 'Google Maps',\n  'signin': 'Signin',\n  'signup': 'Signup',\n  'ui': 'UI',\n  'vector-maps': 'Vector Maps',\n  '404': '404',\n  '500': '500',\n  'basic-table': 'Basic Table',\n};\n\nlet minify = {\n  collapseWhitespace: false,\n  minifyCSS: false,\n  minifyJS: false,\n  removeComments: true,\n  useShortDoctype: false,\n};\n\nif (manifest.MINIFY) {\n  minify = {\n    collapseWhitespace: true,\n    minifyCSS: true,\n    minifyJS: true,\n    removeComments: true,\n    useShortDoctype: true,\n  };\n}\n\n\nmodule.exports = Object.keys(titles).map(title => {\n  return new HtmlWebpackPlugin({\n    template: path.join(manifest.paths.src, `${title}.html`),\n    path: manifest.paths.build,\n    filename: `${title}.html`,\n    inject: true,\n    minify,\n  });\n});\n"
  },
  {
    "path": "webpack/plugins/index.js",
    "content": "const manifest = require('../manifest');\nconst { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');\n\nconst plugins = [];\n\nplugins.push(\n  ...(require('./htmlPlugin')),\n  ...(require('./internal')),\n  require('./caseSensitivePlugin'),\n  require('./extractPlugin'),\n  require('./copyPlugin')\n);\n\nif (manifest.IS_DEVELOPMENT) {\n  plugins.push(require('./dashboardPlugin'));\n}\n\nif (manifest.IS_PRODUCTION) {\n  plugins.push(require('./copyPlugin'));\n}\n\n// Bundle analyzer - run with ANALYZE=true npm run build\nif (process.env.ANALYZE === 'true') {\n  plugins.push(new BundleAnalyzerPlugin({\n    analyzerMode: 'static',\n    reportFilename: 'bundle-report.html',\n    openAnalyzer: true,\n  }));\n}\n\nmodule.exports = plugins;\n"
  },
  {
    "path": "webpack/plugins/internal.js",
    "content": "// ------------------\n// @Table of Contents\n// ------------------\n\n/**\n * + @Loading Dependencies\n * + @Common Plugins\n * + @Merging Production Plugins\n * + @Merging Development Plugins\n * + @Exporting Module\n */\n\n\n// ---------------------\n// @Loading Dependencies\n// ---------------------\n\nconst\n  manifest = require('../manifest'),\n  webpack  = require('webpack');\n\n\n// ---------------\n// @Common Plugins\n// ---------------\n\nconst\n  plugins  = [];\n\nplugins.push(\n  // new webpack.DefinePlugin({\n  //   'process.env': {\n  //     NODE_ENV: JSON.stringify(manifest.NODE_ENV),\n  //   },\n  // }),\n\n\n  // new webpack.optimize.CommonsChunkPlugin({\n  //   name: 'vendor',\n  //   filename: manifest.outputFiles.vendor,\n  //   minChunks(module) {\n  //     const { context } = module;\n  //     return context && context.indexOf('node_modules') >= 0;\n  //   },\n  // }),\n\n  new webpack.ProvidePlugin({\n    $: 'jquery',\n    jQuery: 'jquery',\n    'window.jQuery': 'jquery',\n    // Popper: ['popper.js', 'default'],\n  })\n);\n\n\n// ---------------------------\n// @Merging Production Plugins\n// ---------------------------\n\n// if (manifest.IS_PRODUCTION) {\n//   plugins.push(\n//     new webpack.optimize.UglifyJsPlugin({\n//       compress: {\n//         comparisons   : true,\n//         conditionals  : true,\n//         dead_code     : true,\n//         drop_debugger : true,\n//         evaluate      : true,\n//         if_return     : true,\n//         join_vars     : true,\n//         screw_ie8     : true,\n//         sequences     : true,\n//         unused        : true,\n//         warnings      : false,\n//       },\n\n//       output: {\n//         comments: false,\n//       },\n//     })\n//   );\n// }\n\n\n// ----------------------------\n// @Merging Development Plugins\n// ----------------------------\n\nif (manifest.IS_DEVELOPMENT) {\n  plugins.push(\n    // new webpack.NoEmitOnErrorsPlugin(),\n    // new webpack.NamedModulesPlugin(),\n    new webpack.HotModuleReplacementPlugin()\n  );\n}\n\n\n// -----------------\n// @Exporting Module\n// -----------------\n\nmodule.exports = plugins;\n"
  },
  {
    "path": "webpack/rules/css.js",
    "content": "// ------------------\n// @Table of Contents\n// ------------------\n\n/**\n * + @Loading Dependencies\n * + @Common Loaders\n * + @Merging Production Loaders\n * + @Merging Development Loaders\n * + @Exporting Module\n */\n\n\n// ---------------------\n// @Loading Dependencies\n// ---------------------\n\nconst\n  manifest          = require('../manifest'),\n  ExtractTextPlugin = require('mini-css-extract-plugin');\n\n\n// ---------------\n// @Common Loaders\n// ---------------\n\nlet rule = {};\n\nconst loaders = [\n  {\n    loader: 'css-loader',\n    options: {\n      sourceMap : manifest.IS_DEVELOPMENT,\n      importLoaders: 1,\n    },\n  },\n];\n\n\n// ---------------------------\n// @Merging Production Loaders\n// ---------------------------\n\nif (manifest.IS_PRODUCTION) {\n  rule = {\n    test: /\\.css$/,\n    use: [{\n      loader: ExtractTextPlugin.loader,\n    }].concat(loaders),\n  };\n}\n\n\n// ----------------------------\n// @Merging Development Loaders\n// ----------------------------\n\nif (manifest.IS_DEVELOPMENT) {\n  rule = {\n    test: /\\.css$/,\n    use: [{\n      loader: 'style-loader',\n    }].concat(loaders),\n  };\n}\n\n\n// -----------------\n// @Exporting Module\n// -----------------\n\nmodule.exports = rule;\n"
  },
  {
    "path": "webpack/rules/fonts.js",
    "content": "module.exports = {\n  test: /\\.(eot|svg|ttf|woff|woff2)$/,\n  exclude : /(node_modules)/,\n  type: 'asset/resource',\n};"
  },
  {
    "path": "webpack/rules/images.js",
    "content": "module.exports = {\n  test    : /\\.(png|gif|jpg?g|svg)$/i,\n  exclude : /(node_modules)/,\n  type    : 'asset/resource',\n  generator: {\n    filename: 'assets/[name][ext]',\n  },\n};\n"
  },
  {
    "path": "webpack/rules/index.js",
    "content": "module.exports = [\n  require('./js'),\n  require('./images'),\n  require('./css'),\n  require('./sass'),\n  require('./fonts'),\n];\n"
  },
  {
    "path": "webpack/rules/js.js",
    "content": "module.exports = {\n  test    : /\\.(js|jsx)$/,\n  exclude : /(node_modules|build|dist\\/)/,\n  use     : ['babel-loader'],\n};\n"
  },
  {
    "path": "webpack/rules/sass.js",
    "content": "// ------------------\n// @Table of Contents\n// ------------------\n\n/**\n * + @Loading Dependencies\n * + @Common Loaders\n * + @Exporting Module\n */\n\n\n// ---------------------\n// @Loading Dependencies\n// ---------------------\n\nconst\n  manifest          = require('../manifest'),\n  path              = require('path'),\n  cssNext           = require('postcss-preset-env'),\n  ExtractTextPlugin = require('mini-css-extract-plugin');\n\n// ---------------\n// @Common Loaders\n// ---------------\n\nconst loaders = [\n  {\n    loader: 'css-loader',\n    options: {\n      sourceMap : manifest.IS_DEVELOPMENT,\n    },\n  },\n  {\n    loader: 'postcss-loader',\n    options: {\n      sourceMap: manifest.IS_DEVELOPMENT,\n      postcssOptions: {\n        plugins: [\n          [\n            cssNext(),\n          ],\n        ],\n      },\n    },\n  },\n  {\n    loader: 'sass-loader',\n    options: {\n      sourceMap: manifest.IS_DEVELOPMENT,\n      api: 'modern-compiler',\n      sassOptions: {\n        outputStyle: manifest.MINIFY ? 'compressed' : 'expanded',\n        includePaths: [\n          path.join('../../', 'node_modules'),\n          path.join(manifest.paths.src, 'assets', 'styles'),\n          path.join(manifest.paths.src, ''),\n        ],\n        quietDeps: true,\n        verbose: false,\n      },\n    },\n  },\n];\n\nif (manifest.IS_PRODUCTION) {\n  loaders.unshift(ExtractTextPlugin.loader);\n} else {\n  loaders.unshift({\n    loader: 'style-loader',\n  });\n}\n\nconst rule = {\n  test: /\\.scss$/,\n  use: loaders,\n};\n\n// -----------------\n// @Exporting Module\n// -----------------\n\nmodule.exports = rule;\n"
  },
  {
    "path": "webpack.config.js",
    "content": "const config = require('./webpack/config');\n\nmodule.exports = config;\n"
  }
]