feat(docs): real FAQ accordion + redirect at /docs/index.html

FAQ:
- Restructures faq.mdx to wrap each Q/A in a native <details>/<summary>
  element with class="faq-item". The previous version was just bold h6
  questions followed by paragraphs -- which read as a wall of text. Now
  each question is a click-to-expand row.
- Native HTML disclosure -- no JS required, keyboard-accessible by
  default (Enter/Space to toggle, focusable summary).
- Adds .faq-item styling to _docs.scss: rounded card-like items with
  a hover border-color shift, primary-tinted border + subtle shadow
  when open, chevron icon on the right that rotates 90deg on open,
  primary-color summary text when open. Open content padded under the
  summary with a hairline divider.

/docs/ landing:
- Astro with build.format="file" builds pages/docs/index.astro to
  dist/docs.html, NOT dist/docs/index.html -- which meant /docs/ and
  /docs/index.html returned 404/403 on prod. Updates the flatten-build
  npm script to move dist/docs.html -> dist/docs/index.html as the
  final step. Both URLs now serve the meta-refresh redirect to
  introduction.html.

Bundlewatch:
- Bumps CSS budgets +2KB (46->48 unminified, 42->44 minified) to
  accommodate the FAQ accordion + docs-prose typography upgrades.

.bundlewatch.config.json

@@ -2,19 +2,19 @@
   "files": [
     {
       "path": "./dist/css/adminlte.css",
-      "maxSize": "46 kB"
+      "maxSize": "48 kB"
     },
     {
       "path": "./dist/css/adminlte.min.css",
-      "maxSize": "42 kB"
+      "maxSize": "44 kB"
     },
     {
       "path": "./dist/css/adminlte.rtl.css",
-      "maxSize": "46 kB"
+      "maxSize": "48 kB"
     },
     {
       "path": "./dist/css/adminlte.rtl.min.css",
-      "maxSize": "42 kB"
+      "maxSize": "44 kB"
     },
     {
       "path": "./dist/js/adminlte.js",

package.json

@@ -29,7 +29,7 @@
     "docs-format": "prettier --write \"dist/**/*.html\"",
     "docs-serve": "npm run copy-assets && astro --config src/config/astro.config.mjs dev --open --port 3000",
     "copy-assets": "rimraf src/html/public && shx mkdir -p src/html/public && shx cp -r dist/css dist/js dist/assets src/html/public/",
-    "flatten-build": "shx cp -r dist/html/* dist/ && shx rm -rf dist/html && shx rm -rf dist/.astro",
+    "flatten-build": "shx cp -r dist/html/* dist/ && shx rm -rf dist/html && shx rm -rf dist/.astro && shx mkdir -p dist/docs && shx mv dist/docs.html dist/docs/index.html",
     "assets": "node src/config/assets.config.mjs",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint docs-lint lockfile-lint",
     "clean": "rimraf dist",

src/html/components/docs/faq.mdx

@@ -1,34 +1,53 @@
-A grab bag of questions we get asked most often. If yours isn't here, [open a Discussion](https://github.com/ColorlibHQ/AdminLTE/discussions) on GitHub.
+A grab bag of questions we get asked most often. Click any question to expand the answer. If yours isn't here, [open a Discussion](https://github.com/ColorlibHQ/AdminLTE/discussions) on GitHub.
 
 ##### Getting started
 
-###### What is AdminLTE, exactly?
+<details class="faq-item">
+<summary>What is AdminLTE, exactly?</summary>
 
 A free, MIT-licensed admin dashboard *template*. It's a set of HTML, CSS, and JavaScript files built on top of Bootstrap 5.3 — not a framework, not an npm component library. You drop it into your project, modify the markup to suit your app, and ship.
 
-###### Do I need a build step to use it?
+</details>
+
+<details class="faq-item">
+<summary>Do I need a build step to use it?</summary>
 
 No. The [Getting Started](getting-started.html) guide shows the CDN-only approach — copy four `<link>` tags and four `<script>` tags into your HTML and you're done. The npm-based workflow is there if you want to customise SCSS variables or tree-shake the JavaScript.
 
-###### Which Bootstrap version does v4 require?
+</details>
+
+<details class="faq-item">
+<summary>Which Bootstrap version does v4 require?</summary>
 
 Bootstrap 5.3.x. The current `package.json` pins 5.3.8 — older 5.3 minors should work but aren't tested. Bootstrap 5.0/5.1/5.2 will not work (the colour-mode and `data-bs-theme` system landed in 5.3).
 
-###### Can I use AdminLTE 4 with jQuery?
+</details>
+
+<details class="faq-item">
+<summary>Can I use AdminLTE 4 with jQuery?</summary>
 
 You don't *need* jQuery — AdminLTE 4's JavaScript is vanilla. If your existing app already uses jQuery, it'll coexist fine. But none of AdminLTE 4's own plugins call into jQuery, and there are no `$.fn.xxx()` plugin shims.
 
+</details>
+
 ##### Framework integrations
 
-###### Can AdminLTE be used with WordPress?
+<details class="faq-item">
+<summary>Can AdminLTE be used with WordPress?</summary>
 
 Yes — it's just HTML/CSS/JS. The typical path is to build a custom WordPress theme that wraps AdminLTE's markup around `wp_head()`, `wp_footer()`, and WordPress's loops. AdminLTE doesn't ship a WordPress-specific build; the work of porting nav-walker classes and authentication forms is yours.
 
-###### Laravel? Symfony? Yii? Django? Rails?
+</details>
+
+<details class="faq-item">
+<summary>Laravel? Symfony? Yii? Django? Rails?</summary>
 
 All workable. AdminLTE is a server-rendered template — copy the demo pages into your views/templates, replace static content with your framework's template variables, and wire up routes/auth as usual. Community Composer/Packagist packages exist for Laravel and Symfony, though they typically lag the upstream version — verify they ship v4 before you depend on them.
 
-###### React, Vue, Svelte, Angular?
+</details>
+
+<details class="faq-item">
+<summary>React, Vue, Svelte, Angular?</summary>
 
 Workable but less natural. AdminLTE's JavaScript plugins use DOM lifecycle hooks (`DOMContentLoaded`, MutationObserver patterns) which fight with framework reconciliation. If you're using a SPA framework, consider:
 
@@ -37,9 +56,12 @@ Workable but less natural. AdminLTE's JavaScript plugins use DOM lifecycle hooks
 
 We don't recommend wrapping AdminLTE's jQuery-era plugins in SPA framework components — it's a maintenance burden that outweighs the visual win.
 
+</details>
+
 ##### Customization
 
-###### How do I change the primary colour?
+<details class="faq-item">
+<summary>How do I change the primary colour?</summary>
 
 Override `--bs-primary` (and its RGB counterpart) on `:root`:
 
@@ -52,60 +74,101 @@ Override `--bs-primary` (and its RGB counterpart) on `:root`:
 
 For deeper control (sidebar width, breakpoints, spacing scale), see [Customization &amp; Theming](customization.html).
 
-###### How do I add a date picker / multi-select / rich text editor?
+</details>
+
+<details class="faq-item">
+<summary>How do I add a date picker / multi-select / rich text editor?</summary>
 
 AdminLTE deliberately doesn't bundle these — they'd bloat the framework. The [Recommended Integrations](integrations.html) page lists best-in-class third-party libraries (Flatpickr, Tom Select, Quill, etc.) with copy-paste install snippets.
 
-###### Can I use FontAwesome instead of Bootstrap Icons?
+</details>
+
+<details class="faq-item">
+<summary>Can I use FontAwesome instead of Bootstrap Icons?</summary>
 
 Yes. Bootstrap Icons is the default in the demos because it's MIT, ships with Bootstrap, and is SVG-based — but nothing in AdminLTE's CSS or JS requires it. Drop in FontAwesome's stylesheet and replace `<i class="bi bi-x">` with `<i class="fas fa-x">` throughout.
 
+</details>
+
 ##### Versions and updates
 
-###### How do I get notified of new versions?
+<details class="faq-item">
+<summary>How do I get notified of new versions?</summary>
 
 [Watch the GitHub repo](https://github.com/ColorlibHQ/AdminLTE) (Releases-only mode) or subscribe to the RSS feed at `https://github.com/ColorlibHQ/AdminLTE/releases.atom`.
 
-###### Where's the AdminLTE 3 documentation?
+</details>
+
+<details class="faq-item">
+<summary>Where's the AdminLTE 3 documentation?</summary>
 
 Still online at [adminlte.io/docs/3.2](https://adminlte.io/docs/3.2/) and earlier versions are linked there. The v3 branch on GitHub continues to receive critical bug fixes; new features land in v4 only.
 
-###### How do I upgrade from v3 to v4?
+</details>
+
+<details class="faq-item">
+<summary>How do I upgrade from v3 to v4?</summary>
 
 See the dedicated [Migration from v3](migration.html) guide. The short version: class names changed (`.wrapper` → `.app-wrapper`), `data-toggle` → `data-bs-toggle`, dark mode uses `data-bs-theme` instead of `.dark-mode`, and jQuery isn't required anymore.
 
+</details>
+
 ##### Licensing
 
-###### Is AdminLTE free for commercial use?
+<details class="faq-item">
+<summary>Is AdminLTE free for commercial use?</summary>
 
 Yes — MIT licensed. You can use it in commercial products, SaaS apps, client work, anything. The only requirement is preserving the copyright notice in the source files (`adminlte.css` / `adminlte.js`). You don't need to display attribution in the UI.
 
-###### Do I need to credit AdminLTE in my app?
+</details>
+
+<details class="faq-item">
+<summary>Do I need to credit AdminLTE in my app?</summary>
 
 No. The MIT license requires you to keep the licence notice in the source files you distribute — that's it. You don't have to mention AdminLTE in the rendered UI, your About page, or your README.
 
-###### Can I sell a product made with AdminLTE?
+</details>
+
+<details class="faq-item">
+<summary>Can I sell a product made with AdminLTE?</summary>
 
 Yes. The MIT license explicitly permits this. You can also resell modified versions of AdminLTE itself (theme marketplaces frequently do this) — just preserve the original copyright notice.
 
+</details>
+
 ##### Troubleshooting
 
-###### The sidebar doesn't collapse when I click the hamburger menu.
+<details class="faq-item">
+<summary>The sidebar doesn't collapse when I click the hamburger menu.</summary>
 
 Check that the PushMenu plugin is loaded. It's bundled into `adminlte.js` — make sure the script tag is on the page and *after* the markup it operates on. Also verify your hamburger button has `data-lte-toggle="sidebar"` (not `data-widget="pushmenu"`, which is the v3 attribute).
 
-###### Dark mode doesn't persist after refresh.
+</details>
+
+<details class="faq-item">
+<summary>Dark mode doesn't persist after refresh.</summary>
 
 The included [Color Mode](color-mode.html) toggle writes to `localStorage` under the key `lte-theme`. If you're using a different toggle implementation, make sure it both sets `document.documentElement.setAttribute('data-bs-theme', ...)` and writes to localStorage on change.
 
-###### Bootstrap modal closes when I press Escape, but the AdminLTE sidebar closes too.
+</details>
+
+<details class="faq-item">
+<summary>Bootstrap modal closes when I press Escape, but the AdminLTE sidebar closes too.</summary>
 
 Fixed in v4.0.0 (#5993). If you're still seeing this, you're on an older RC — update to the latest.
 
-###### My custom SCSS doesn't override AdminLTE's defaults.
+</details>
+
+<details class="faq-item">
+<summary>My custom SCSS doesn't override AdminLTE's defaults.</summary>
 
 Put your overrides *before* the `@import` of AdminLTE's SCSS. AdminLTE uses `!default` on its variables, which means the first declaration wins. See [Customization &amp; Theming](customization.html#scss-variables) for the import order.
 
-###### `npm install` fails with peer dependency errors.
+</details>
+
+<details class="faq-item">
+<summary>`npm install` fails with peer dependency errors.</summary>
 
 We use an npm `overrides` block in `package.json` to keep peers happy — make sure you're on npm 8.3+ which respects them. If you're on an older npm, install with `--legacy-peer-deps`.
+
+</details>

src/html/pages/docs/index.astro

@@ -0,0 +1,24 @@
+---
+// Redirect from /docs/ (or /docs/index.html) to the Installation page.
+//
+// Astro with build.format="file" builds this to dist/docs.html. The
+// `flatten-build` npm script moves it to dist/docs/index.html so the
+// redirect serves at /docs/ on the deployed site.
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>AdminLTE 4 — Documentation</title>
+    <meta name="robots" content="noindex,follow" />
+    <meta http-equiv="refresh" content="0; URL=./introduction.html" />
+    <link rel="canonical" href="./introduction.html" />
+  </head>
+  <body>
+    <p>
+      If the redirect does not work, please
+      <a href="./introduction.html">click here for the AdminLTE 4 documentation</a>.
+    </p>
+  </body>
+</html>

src/scss/_docs.scss

@@ -276,6 +276,118 @@
       line-height: 1.6;
       color: var(--#{$prefix}body-color);
     }
+
+    //
+    // FAQ / disclosure accordion — uses native <details>/<summary>.
+    // Add `.faq-item` to <details> to opt in.
+    //
+    details.faq-item {
+      margin-bottom: .5rem;
+      overflow: hidden;
+      background: var(--#{$prefix}body-bg);
+      border: 1px solid var(--#{$prefix}border-color);
+      @include border-radius($border-radius);
+      @include transition(border-color .15s ease, box-shadow .15s ease);
+
+      &:hover {
+        border-color: var(--#{$prefix}primary-border-subtle);
+      }
+
+      &[open] {
+        background: var(--#{$prefix}body-bg);
+        border-color: var(--#{$prefix}primary-border-subtle);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
+      }
+
+      summary {
+        position: relative;
+        padding: .9rem 3rem .9rem 1.1rem;
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--#{$prefix}emphasis-color);
+        list-style: none;
+        cursor: pointer;
+        user-select: none;
+        @include transition(color .15s ease);
+
+        // Hide the default disclosure triangle in Webkit/Blink
+        &::-webkit-details-marker {
+          display: none;
+        }
+
+        // Hide the marker in modern Firefox too
+        &::marker {
+          content: "";
+        }
+
+        &:hover {
+          color: var(--#{$prefix}primary);
+        }
+
+        // Right-side chevron, rotates on open
+        &::after {
+          position: absolute;
+          top: 50%;
+          right: 1.1rem;
+          display: inline-block;
+          width: .55rem;
+          height: .55rem;
+          margin-top: -.4rem;
+          content: "";
+          border-right: 2px solid currentcolor;
+          border-bottom: 2px solid currentcolor;
+          opacity: .55;
+          transform: rotate(45deg);
+          @include transition(transform .2s ease);
+        }
+      }
+
+      &[open] > summary {
+        color: var(--#{$prefix}primary);
+        border-bottom: 1px solid var(--#{$prefix}border-color);
+
+        &::after {
+          margin-top: -.15rem;
+          opacity: 1;
+          transform: rotate(-135deg);
+        }
+      }
+
+      // Content (everything after <summary>) gets the inner padding
+      > *:not(summary) {
+        padding-right: 1.1rem;
+        padding-left: 1.1rem;
+      }
+
+      > *:not(summary):first-of-type {
+        padding-top: 1rem;
+      }
+
+      > *:not(summary):last-child {
+        padding-bottom: 1rem;
+      }
+
+      // Tighten paragraphs/lists inside an FAQ answer
+      p,
+      ul,
+      ol {
+        margin-bottom: .65rem;
+      }
+
+      > *:last-child p:last-child,
+      > p:last-child,
+      > ul:last-child,
+      > ol:last-child {
+        margin-bottom: 0;
+      }
+
+      // Code blocks inside an FAQ answer get a less-distracting bg
+      pre.astro-code,
+      pre {
+        margin-right: 0;
+        margin-left: 0;
+      }
+    }
   }
 
   // Dark-mode tweak: blockquote info bg needs more contrast on dark