docs: add Getting Started, Customization, RTL, and Migration pages

Closes major gaps in the v4 documentation surfaced during a doc audit
against the page catalog and the TypeScript source:

- **Getting Started** (docs/getting-started.html) -- a 10-minute path
  from zero to a working dashboard using CDN tags. Includes the
  minimum-viable layout markup, an explanation of the app-wrapper
  region classes, a card-widget example, and a "where to go next" map
  pointing at the rest of the docs.

- **Customization & Theming** (docs/customization.html) -- the SCSS
  variables, CSS custom properties, and import-order rules needed to
  retheme AdminLTE. Covers brand colours, sidebar width/breakpoint,
  custom branding, dark-mode-specific overrides, and the
  light-page-with-dark-sidebar pattern used in the demos.

- **RTL Support** (docs/rtl.html) -- documents the existing rtlcss-
  generated stylesheets (which had zero coverage in the docs despite
  shipping in every release). Includes how to enable RTL per-page or
  per-element, what flips automatically, what doesn't, and the
  /*rtl:ignore*/ control directive.

- **Migration from v3** (docs/migration.html) -- the class-rename and
  data-attribute-rename tables (wrapper -> app-wrapper,
  data-widget -> data-lte-toggle, .dark-mode -> data-bs-theme), the
  Bootstrap 4 -> 5 utility renames, jQuery removal, and a suggested
  migration order. Important for the existing v3 user base.

All four pages are wired into the DOCUMENTATIONS section of the
sidenav.

src/html/components/docs/customization.mdx

@@ -0,0 +1,172 @@
+AdminLTE inherits Bootstrap 5.3's CSS-custom-properties theming model and adds its own layer of SCSS variables on top. You can customize the look two ways:
+
+1. **CSS custom properties** — quick, no build step, works on prebuilt CSS.
+2. **SCSS variables** — slower (requires a build), but lets you change anything including grid breakpoints and sidebar width.
+
+##### Quick wins with CSS variables
+
+Bootstrap and AdminLTE expose dozens of CSS custom properties on `:root`. Override them in your own stylesheet to retheme without rebuilding:
+
+```css
+:root,
+[data-bs-theme="light"] {
+  --bs-primary: #6610f2;        /* swap Bootstrap's blue for purple */
+  --bs-primary-rgb: 102, 16, 242;
+  --bs-body-bg: #f3f4f6;
+}
+
+[data-bs-theme="dark"] {
+  --bs-body-bg: #14171c;        /* darker than Bootstrap's default */
+  --bs-body-color: #e9ecef;
+}
+```
+
+Components built on `var(--bs-primary)` (most of AdminLTE's chrome) pick this up automatically.
+
+###### Common variables worth knowing
+
+| Variable | Default | What it controls |
+|---|---|---|
+| `--bs-primary` | `#0d6efd` | Brand colour, used in active sidebar items, primary buttons |
+| `--bs-body-bg` | `#fff` (light) / `#212529` (dark) | Page background |
+| `--bs-body-color` | `#212529` | Default text colour |
+| `--bs-border-color` | `#dee2e6` | All hairline borders |
+| `--bs-border-radius` | `.375rem` | Default radius for cards, buttons, inputs |
+| `--bs-border-radius-lg` | `.5rem` | Larger radius, used for modals |
+| `--bs-font-sans-serif` | `system-ui, ...` | Default font stack |
+
+For the full list, see [Bootstrap CSS variables](https://getbootstrap.com/docs/5.3/customize/css-variables/).
+
+##### SCSS variables
+
+If you're building from source (cloned the repo or installed via npm + your own bundler), edit [`src/scss/_variables.scss`](https://github.com/ColorlibHQ/AdminLTE/blob/master/src/scss/_variables.scss) and recompile.
+
+The most-overridden variables, with their defaults:
+
+```scss
+// Sidebar
+$lte-sidebar-width:          250px;       // collapse to mini at ~70px
+$lte-sidebar-breakpoint:     lg;          // breakpoint at which sidebar starts off-canvas
+$lte-sidebar-padding-x:      .5rem;
+$lte-sidebar-padding-y:      .5rem;
+
+// Sidebar colours (light theme)
+$lte-sidebar-color:          $gray-800;
+$lte-sidebar-hover-bg:       rgba($black, .1);
+$lte-sidebar-active-color:   $black;
+$lte-sidebar-menu-active-bg: rgba($black, .1);
+
+// Header
+$lte-app-header-height:      $nav-link-height + ($lte-app-header-link-padding-y * 2);
+$lte-app-header-bottom-border-color: var(--#{$prefix}border-color);
+
+// Transitions
+$lte-transition-speed:       .3s;
+$lte-transition-fn:          ease-in-out;
+```
+
+Bootstrap's own variables (button colours, font sizes, spacing scale, breakpoints) live in [`src/scss/_bootstrap-variables.scss`](https://github.com/ColorlibHQ/AdminLTE/blob/master/src/scss/_bootstrap-variables.scss). All values use `!default`, so override them in your own SCSS file *before* the import:
+
+```scss
+// my-theme.scss
+
+// 1. Your overrides FIRST
+$primary:                #6610f2;
+$lte-sidebar-width:      280px;
+$border-radius:          .25rem;
+
+// 2. Then import AdminLTE (which imports Bootstrap)
+@import "node_modules/admin-lte/src/scss/adminlte";
+```
+
+##### Recompiling SCSS
+
+If you cloned the repo, the build pipeline is already wired:
+
+```bash
+npm install
+npm run css           # one-off build → dist/css/
+npm run watch-css-main  # rebuild on save during development
+```
+
+For a project that uses AdminLTE as a dependency, point your bundler at `node_modules/admin-lte/src/scss/adminlte.scss`. Examples:
+
+```js
+// Vite / Rollup / Webpack
+import "admin-lte/src/scss/adminlte.scss"
+```
+
+##### Custom sidebar branding
+
+The `.sidebar-brand` element accepts text, an image, or both. Markup:
+
+```html
+<div class="sidebar-brand">
+  <a href="/" class="brand-link">
+    <img src="/assets/logo.svg" alt="Logo" class="brand-image opacity-75 shadow" />
+    <span class="brand-text fw-light">My Dashboard</span>
+  </a>
+</div>
+```
+
+To swap the logo when the sidebar collapses to its mini state, AdminLTE provides a built-in pattern — see the [Logo Switch layout demo](../layout/logo-switch.html) for the markup.
+
+##### Dark mode customization
+
+AdminLTE follows Bootstrap 5.3's `data-bs-theme` attribute system. To customize dark-mode colours, scope your variables under `[data-bs-theme="dark"]`:
+
+```css
+[data-bs-theme="dark"] {
+  --bs-primary: #4dabf7;          /* lighter primary for dark backgrounds */
+  --lte-sidebar-color: #e9ecef;
+  --lte-sidebar-active-color: #fff;
+}
+```
+
+The [Color Mode](color-mode.html) page covers the toggle markup and JavaScript that switches the attribute.
+
+##### Custom sidebar colour scheme
+
+AdminLTE ships its sidebar styled for light mode, but the demos apply `data-bs-theme="dark"` on `.app-sidebar` to get the dark sidebar variant against a light page. You can mix and match:
+
+```html
+<!-- Light page, dark sidebar (the demo pattern) -->
+<body class="bg-body-tertiary">
+  <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
+    ...
+  </aside>
+</body>
+```
+
+```html
+<!-- Light page, light sidebar -->
+<body class="bg-body-tertiary">
+  <aside class="app-sidebar bg-body shadow border-end">
+    ...
+  </aside>
+</body>
+```
+
+##### Compact mode
+
+Add `.compact-mode` to `.app-wrapper` (or anywhere up the tree) to reduce padding throughout the layout — handy for data-dense dashboards. The dimensions for compact mode come from the `*-compact` variables in `_variables.scss`.
+
+```html
+<div class="app-wrapper compact-mode">
+  <!-- header, sidebar, main content with tighter spacing -->
+</div>
+```
+
+##### When to recompile vs. override at runtime
+
+| Customization | CSS variables | SCSS rebuild |
+|---|---|---|
+| Brand colours | ✅ | ✅ |
+| Body / text colours | ✅ | ✅ |
+| Border radius | ✅ | ✅ |
+| Sidebar width | ❌ (not a CSS var) | ✅ |
+| Breakpoint changes | ❌ | ✅ |
+| Spacing scale | ❌ | ✅ |
+| Font sizes | partial | ✅ (full control) |
+
+Use CSS variables for everything you can — it survives AdminLTE upgrades without merge conflicts. Reserve SCSS overrides for structural changes (sidebar width, breakpoints) that CSS variables don't cover.

src/html/components/docs/getting-started.mdx

@@ -0,0 +1,148 @@
+AdminLTE is an HTML template — there's no build step required to use it. This page gets you to a working dashboard in about ten minutes, without npm, without a build pipeline, without learning Astro.
+
+If you're integrating AdminLTE into a real project, the [Installation](introduction.html) page covers npm, Composer, and source-build workflows.
+
+##### 1. Grab the CDN snippets
+
+Copy these tags into the `<head>` of a new HTML file. They pull AdminLTE, Bootstrap 5.3, Popper, OverlayScrollbars, and Bootstrap Icons from jsDelivr — no install needed.
+
+```html
+<!-- AdminLTE 4 + Bootstrap 5.3 (CSS) -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-rc7/dist/css/adminlte.min.css" />
+```
+
+And these just before `</body>`:
+
+```html
+<!-- Bootstrap + Popper + AdminLTE (JS) -->
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-rc7/dist/js/adminlte.min.js"></script>
+```
+
+##### 2. The minimum viable layout
+
+This is the smallest AdminLTE page that still feels like AdminLTE — a header, a collapsible sidebar, and a main content area. Drop it between the CSS and JS tags above:
+
+```html
+<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <div class="app-wrapper">
+
+    <!-- Header -->
+    <nav class="app-header navbar navbar-expand bg-body">
+      <div class="container-fluid">
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
+              <i class="bi bi-list"></i>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+
+    <!-- Sidebar -->
+    <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
+      <div class="sidebar-brand">
+        <a href="#" class="brand-link">
+          <span class="brand-text fw-light">My Dashboard</span>
+        </a>
+      </div>
+      <div class="sidebar-wrapper">
+        <nav class="mt-2">
+          <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu">
+            <li class="nav-item">
+              <a href="#" class="nav-link active">
+                <i class="nav-icon bi bi-speedometer"></i>
+                <p>Dashboard</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link">
+                <i class="nav-icon bi bi-bar-chart"></i>
+                <p>Reports</p>
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </aside>
+
+    <!-- Main content -->
+    <main class="app-main">
+      <div class="app-content-header">
+        <div class="container-fluid">
+          <h3 class="mb-0">Hello, AdminLTE</h3>
+        </div>
+      </div>
+      <div class="app-content">
+        <div class="container-fluid">
+          <div class="card">
+            <div class="card-header"><h5 class="card-title">Welcome</h5></div>
+            <div class="card-body">
+              Edit this file to start building your dashboard.
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+  </div>
+</body>
+```
+
+Open it in a browser. The hamburger button at the top-left collapses the sidebar — that's AdminLTE's [PushMenu](javascript/pushmenu.html) plugin working out of the box, wired by `data-lte-toggle="sidebar"`.
+
+##### 3. What's actually happening
+
+The four classes that do the heavy lifting:
+
+| Class | What it does |
+|---|---|
+| `app-wrapper` | The CSS grid root — defines header / sidebar / main / footer regions |
+| `app-header` | Stuck to the top of the viewport when `layout-fixed` is on the body |
+| `app-sidebar` | Collapsible side rail. Add `sidebar-expand-lg` to body to control breakpoint |
+| `app-main` | Scrollable content region — everything else lives here |
+
+The [Layout](layout.html) page covers the full wrapper structure and the responsive options.
+
+##### 4. Add a working JavaScript widget
+
+AdminLTE ships seven JavaScript plugins. All of them are wired via `data-lte-*` attributes — no JavaScript code needed.
+
+Drop this in the content area to see the card-widget plugin in action (try the buttons in the card header):
+
+```html
+<div class="card">
+  <div class="card-header">
+    <h5 class="card-title">Collapsible card</h5>
+    <div class="card-tools">
+      <button type="button" class="btn btn-sm btn-tool" data-lte-toggle="card-collapse">
+        <i data-lte-icon="expand" class="bi bi-dash-lg"></i>
+        <i data-lte-icon="collapse" class="bi bi-plus-lg"></i>
+      </button>
+      <button type="button" class="btn btn-sm btn-tool" data-lte-toggle="card-remove">
+        <i class="bi bi-x-lg"></i>
+      </button>
+    </div>
+  </div>
+  <div class="card-body">
+    Click the minus icon to collapse; the X to remove.
+  </div>
+</div>
+```
+
+##### 5. Where to go next
+
+You now have a working AdminLTE page. From here:
+
+- **Make it pretty** → [Customization & Theming](customization.html) — change colors, fonts, and spacing via SCSS variables or CSS custom properties.
+- **Make it functional** → [JavaScript Plugins](javascript/layout.html) — full reference for all seven plugins.
+- **Make it dark** → [Color Mode](color-mode.html) — light/dark/auto toggle.
+- **Make it international** → [RTL Support](rtl.html) — right-to-left layouts for Arabic, Hebrew, Persian, etc.
+- **Add real widgets** → [Recommended Integrations](integrations.html) — date pickers, multi-selects, charts, rich text editors. AdminLTE keeps its dep tree lean; this page tells you which third-party libraries to drop in.
+
+If you're upgrading an existing AdminLTE 3 project, see the [Migration from v3](migration.html) guide for breaking changes.

src/html/components/docs/migration.mdx

@@ -0,0 +1,149 @@
+AdminLTE 4 is a ground-up rewrite. It targets Bootstrap 5.3, drops jQuery, ships as TypeScript-authored vanilla JS, and reorganises the CSS class structure. If you're upgrading an AdminLTE 3 project, the changes below are the ones most likely to bite.
+
+##### The high-level summary
+
+| | AdminLTE 3 | AdminLTE 4 |
+|---|---|---|
+| CSS framework | Bootstrap 4.6 | **Bootstrap 5.3** |
+| JavaScript | jQuery + vanilla | **Vanilla TypeScript only** |
+| Dark mode | Manual `.dark-mode` class | **`data-bs-theme` attribute (Bootstrap-native)** |
+| RTL | Separate `rtl.css` build | **Generated automatically via rtlcss** |
+| Browser support | IE 11 forks available | Modern evergreen browsers only |
+| Build tooling | Gulp | **Rollup + Sass + PostCSS** |
+| Icon library | FontAwesome | **Bootstrap Icons** (Lucide / Tabler Icons documented as alternatives) |
+
+If your project relies on jQuery or IE 11, stay on AdminLTE 3 — those constraints are not reversible in v4.
+
+##### Class renames
+
+The most common find-and-replace work:
+
+| AdminLTE 3 | AdminLTE 4 |
+|---|---|
+| `.wrapper` | `.app-wrapper` |
+| `.main-header` | `.app-header` |
+| `.main-sidebar` | `.app-sidebar` |
+| `.content-wrapper` | `.app-main` |
+| `.main-footer` | `.app-footer` |
+| `.content-header` | `.app-content-header` |
+| `.content` | `.app-content` |
+| `.brand-link` (inside `.main-sidebar`) | `.sidebar-brand > .brand-link` |
+| `data-widget="pushmenu"` | `data-lte-toggle="sidebar"` |
+| `data-widget="treeview"` | `data-lte-toggle="treeview"` (on the parent menu) |
+| `data-widget="card-widget"` | `data-lte-toggle="card-collapse"`, `card-remove`, `card-maximize` |
+| `data-widget="fullscreen"` | `data-lte-toggle="fullscreen"` |
+| `data-widget="control-sidebar"` | (removed — Bootstrap offcanvas replaces this) |
+| `.dark-mode` (on `<body>`) | `data-bs-theme="dark"` (on any element) |
+
+##### Bootstrap 4 → 5 utility renames
+
+These come from Bootstrap itself, not AdminLTE, but they affect every page:
+
+| Bootstrap 4 | Bootstrap 5 |
+|---|---|
+| `data-toggle` | `data-bs-toggle` |
+| `data-target` | `data-bs-target` |
+| `data-dismiss` | `data-bs-dismiss` |
+| `data-parent` | `data-bs-parent` |
+| `data-spy` | `data-bs-spy` |
+| `data-ride` | `data-bs-ride` |
+| `.ml-*`, `.mr-*` | `.ms-*`, `.me-*` |
+| `.pl-*`, `.pr-*` | `.ps-*`, `.pe-*` |
+| `.float-left`, `.float-right` | `.float-start`, `.float-end` |
+| `.text-left`, `.text-right` | `.text-start`, `.text-end` |
+| `.border-left`, `.border-right` | `.border-start`, `.border-end` |
+| `.rounded-left`, `.rounded-right` | `.rounded-start`, `.rounded-end` |
+| `.font-weight-*` | `.fw-*` |
+| `.font-italic` | `.fst-italic` |
+| `.text-monospace` | `.font-monospace` |
+
+A regex find-replace handles most of this in a few minutes. The migration tool [`bootstrap-5-migration`](https://github.com/dbtek/bootstrap-5-migration) automates the bulk.
+
+##### jQuery removal
+
+If your app code calls AdminLTE 3 plugins via jQuery (`$('.sidebar').PushMenu()`, etc.), those calls no longer work. Replacements:
+
+```js
+// AdminLTE 3
+$('.sidebar-toggle').on('click', function () {
+  $('body').toggleClass('sidebar-collapse')
+})
+```
+
+```js
+// AdminLTE 4 — the data-API does this for you
+// <a href="#" data-lte-toggle="sidebar">...</a>
+```
+
+If you need programmatic control, import the plugin class directly:
+
+```js
+import { PushMenu } from "admin-lte"
+
+new PushMenu(document.querySelector(".sidebar-toggle")).toggle()
+```
+
+All seven JS plugins (`Layout`, `CardWidget`, `Treeview`, `DirectChat`, `FullScreen`, `PushMenu`, plus `initAccessibility`) are exported from `admin-lte`.
+
+##### Dark mode
+
+AdminLTE 3 used a `.dark-mode` class toggled on the `<body>`. AdminLTE 4 uses Bootstrap 5.3's native `data-bs-theme="dark"` attribute, which can be applied at any level — `<html>`, `<body>`, or a single component.
+
+```html
+<!-- AdminLTE 3 -->
+<body class="dark-mode">
+
+<!-- AdminLTE 4 -->
+<html data-bs-theme="dark">
+```
+
+The included [Color Mode](color-mode.html) widget reads/writes this attribute and persists the user's choice in `localStorage`. See the [Color Mode](color-mode.html) docs page for the toggle implementation.
+
+##### CSS variables instead of `.bg-*` overrides
+
+AdminLTE 3 shipped a lot of one-off colour classes (`.bg-navy`, `.bg-purple`, `.bg-fuchsia`, etc.). In v4, prefer Bootstrap 5.3's CSS-variable model:
+
+```html
+<!-- AdminLTE 3 -->
+<div class="card bg-navy">…</div>
+
+<!-- AdminLTE 4 — use Bootstrap utilities + CSS variables -->
+<div class="card text-bg-primary">…</div>
+```
+
+For full retheming, override `--bs-primary` etc. on `:root`. See [Customization](customization.html).
+
+##### Icons
+
+AdminLTE 3 demos used FontAwesome 6 free. AdminLTE 4 standardises on [Bootstrap Icons](https://icons.getbootstrap.com/) — they're SVG, lighter, MIT-licensed, and ship with Bootstrap's ecosystem.
+
+```html
+<!-- AdminLTE 3 -->
+<i class="fas fa-home"></i>
+
+<!-- AdminLTE 4 -->
+<i class="bi bi-house"></i>
+```
+
+If you'd rather stick with FontAwesome (or use Lucide, Tabler Icons, Material Symbols, etc.), nothing in AdminLTE 4 forces Bootstrap Icons — load whichever icon font you prefer and replace the `<i>` classes. See [Recommended Integrations](integrations.html#icon-libraries) for the comparison table.
+
+##### Pages we haven't ported yet
+
+The v3 demo includes pages that haven't all been recreated for v4. The v4 release notes cover the current page catalog. If you depend on a specific v3 page that hasn't been ported, please [open an issue](https://github.com/ColorlibHQ/AdminLTE/issues) — community contributions for missing pages are very welcome.
+
+##### Suggested migration order
+
+For an existing AdminLTE 3 project:
+
+1. **Branch first.** This is not a small change — keep `master` on v3 until v4 is stable.
+2. **Update CSS class names** with a find-replace pass using the table above. Most layouts compile but look broken until step 3.
+3. **Update `data-toggle` → `data-bs-toggle`** etc. across all your templates.
+4. **Replace `.dark-mode` toggle code** with `data-bs-theme` attribute writes.
+5. **Audit jQuery calls.** Either remove them (use the data API) or import plugin classes directly.
+6. **Test responsive breakpoints** — Bootstrap 5 added `xxl`. If you use breakpoint-specific utilities, double-check the new scale.
+7. **Re-test print views** — AdminLTE 4 fixed a print-layout issue (#5996); if you had custom print CSS, verify it still works.
+
+##### Help and discussion
+
+- Migration questions: [GitHub Discussions](https://github.com/ColorlibHQ/AdminLTE/discussions)
+- Found something we missed? [Open an issue](https://github.com/ColorlibHQ/AdminLTE/issues) tagged `migration`.

src/html/components/docs/rtl.mdx

@@ -0,0 +1,92 @@
+AdminLTE ships an RTL (right-to-left) stylesheet alongside the standard LTR one, generated from the same source via [`rtlcss`](https://rtlcss.com/). Use it for Arabic, Hebrew, Persian, Urdu, and any other right-to-left scripts.
+
+##### The pre-built RTL stylesheet
+
+Every release publishes RTL variants of every CSS file:
+
+```text
+dist/css/adminlte.css           ← LTR (default)
+dist/css/adminlte.rtl.css       ← RTL
+dist/css/adminlte.min.css
+dist/css/adminlte.rtl.min.css
+```
+
+To switch a page to RTL, swap the stylesheet and set `dir="rtl"` on the `<html>` element:
+
+```html
+<html lang="ar" dir="rtl">
+  <head>
+    <link rel="stylesheet" href="dist/css/adminlte.rtl.min.css" />
+  </head>
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <!-- ...same markup as LTR -->
+  </body>
+</html>
+```
+
+That's it — the sidebar now docks to the right, scroll bars flip, padding/margin utilities mirror, and Bootstrap Icons stay LTR-safe (most icons aren't directional). For a live example, see [`layout/layout-rtl.html`](../layout/layout-rtl.html).
+
+##### Bootstrap's `dir="rtl"` attribute
+
+Setting `dir="rtl"` triggers Bootstrap 5.3's logical property pathway as well — `.ms-*` becomes right-margin instead of left, `.float-start` floats right, etc. You don't need separate Bootstrap classes for RTL; the same utility names work in both directions.
+
+##### When you have a mixed-language UI
+
+If your app shows RTL content on an otherwise-LTR page (eg. an Arabic text block inside an English admin panel), you can scope `dir="rtl"` to a single element:
+
+```html
+<body>
+  <!-- LTR app shell -->
+  <main dir="rtl" lang="ar">
+    <!-- this block only is RTL -->
+  </main>
+</body>
+```
+
+Bootstrap and AdminLTE handle nested direction switches correctly — the inner element's direction is what counts.
+
+##### Building RTL yourself
+
+If you're building AdminLTE from source and you've modified the SCSS, regenerate the RTL CSS:
+
+```bash
+npm run css-compile     # builds LTR
+npm run css-prefix      # adds autoprefixer
+npm run css-rtl         # generates *.rtl.css from the LTR output
+npm run css-minify
+```
+
+The full pipeline is wired into `npm run css`, so most of the time you just run that.
+
+The conversion is handled by [`postcss`](https://postcss.org/) running [`rtlcss`](https://rtlcss.com/) — both are already in devDependencies. If you need to opt-out a specific rule from the LTR-to-RTL flip, use rtlcss control directives in your SCSS:
+
+```scss
+.brand-link {
+  /*rtl:ignore*/
+  margin-left: .5rem;   // stays left-margin in both LTR and RTL
+}
+```
+
+##### What flips automatically
+
+| Direction-aware property | Behaviour in RTL |
+|---|---|
+| `margin-left` / `padding-left` | Swapped to right |
+| `left`, `right` positioning | Swapped |
+| `text-align: left` / `right` | Swapped |
+| Bootstrap `.ms-*`, `.me-*`, `.float-start`, `.float-end` | Mirror via Bootstrap's logical properties |
+| `transform: translateX()` | Sign inverted |
+| Sidebar position | Docks to the right |
+| Dropdown menu open direction | Flips automatically (Bootstrap handles this) |
+
+##### What doesn't flip
+
+- Bootstrap Icons (SVG glyphs) — most icons are direction-neutral; arrows that *do* indicate direction (`bi-arrow-right`, `bi-chevron-right`, etc.) need to be manually swapped to their `-left` siblings.
+- Inline images, charts, and third-party widgets — their internal layout doesn't react to `dir`. Check each integration (ApexCharts, FullCalendar, Tabulator) for an RTL option.
+- Numbers — digits stay LTR even in RTL contexts (this is standard Unicode bidi behaviour, not a bug).
+
+##### Common gotchas
+
+- **The `.min.css` minified RTL build is `.rtl.min.css`, not `.min.rtl.css`.** Filename order matters; the build script emits the former.
+- **Don't mix LTR and RTL stylesheets on the same page** — pick one. If you need a mixed-direction app, use `dir="rtl"` on the relevant subtree, not a separate stylesheet.
+- **Icon mirroring**: when you swap an icon for RTL, also update its `aria-label` if it indicates direction (eg. "Next page" should still say "Next page" — only the glyph rotates).

src/html/pages/docs/customization.astro

@@ -0,0 +1,60 @@
+---
+import Head from "@components/_head.astro"
+import Footer from "@components/dashboard/_footer.astro"
+import Topbar from "@components/dashboard/_topbar.astro"
+import Customization from "@components/docs/customization.mdx"
+import Sidenav from "@components/dashboard/_sidenav.astro"
+import Scripts from "@components/_scripts.astro"
+
+const title = "Customization & Theming | AdminLTE 4"
+const path = "../../../dist"
+const mainPage = "docs"
+const page = "customization";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <main class="app-main">
+        <div class="app-content-header">
+          <div class="container-fluid">
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Customization &amp; Theming</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Customization
+                  </li>
+                </ol>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="app-content">
+          <div class="container-fluid">
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <Customization />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+    <Scripts path={path} />
+  </body>
+</html>

src/html/pages/docs/getting-started.astro

@@ -0,0 +1,60 @@
+---
+import Head from "@components/_head.astro"
+import Footer from "@components/dashboard/_footer.astro"
+import Topbar from "@components/dashboard/_topbar.astro"
+import GettingStarted from "@components/docs/getting-started.mdx"
+import Sidenav from "@components/dashboard/_sidenav.astro"
+import Scripts from "@components/_scripts.astro"
+
+const title = "Getting Started | AdminLTE 4"
+const path = "../../../dist"
+const mainPage = "docs"
+const page = "getting-started";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <main class="app-main">
+        <div class="app-content-header">
+          <div class="container-fluid">
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Getting Started</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Getting Started
+                  </li>
+                </ol>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="app-content">
+          <div class="container-fluid">
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <GettingStarted />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+    <Scripts path={path} />
+  </body>
+</html>

src/html/pages/docs/migration.astro

@@ -0,0 +1,60 @@
+---
+import Head from "@components/_head.astro"
+import Footer from "@components/dashboard/_footer.astro"
+import Topbar from "@components/dashboard/_topbar.astro"
+import Migration from "@components/docs/migration.mdx"
+import Sidenav from "@components/dashboard/_sidenav.astro"
+import Scripts from "@components/_scripts.astro"
+
+const title = "Migration from v3 | AdminLTE 4"
+const path = "../../../dist"
+const mainPage = "docs"
+const page = "migration";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <main class="app-main">
+        <div class="app-content-header">
+          <div class="container-fluid">
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Migration from v3</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Migration
+                  </li>
+                </ol>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="app-content">
+          <div class="container-fluid">
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <Migration />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+    <Scripts path={path} />
+  </body>
+</html>

src/html/pages/docs/rtl.astro

@@ -0,0 +1,58 @@
+---
+import Head from "@components/_head.astro"
+import Footer from "@components/dashboard/_footer.astro"
+import Topbar from "@components/dashboard/_topbar.astro"
+import Rtl from "@components/docs/rtl.mdx"
+import Sidenav from "@components/dashboard/_sidenav.astro"
+import Scripts from "@components/_scripts.astro"
+
+const title = "RTL Support | AdminLTE 4"
+const path = "../../../dist"
+const mainPage = "docs"
+const page = "rtl";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <main class="app-main">
+        <div class="app-content-header">
+          <div class="container-fluid">
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">RTL Support</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">RTL</li>
+                </ol>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="app-content">
+          <div class="container-fluid">
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <Rtl />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+    <Scripts path={path} />
+  </body>
+</html>