fix(docs): standardize card wrapper across all docs pages

The docs pages were a 50/50 split: pages I added recently (customization,
deployment, getting-started, integrations, layout-blueprint, migration,
recipes, rtl, plugins-overview) used the standard
<div class="row"><div class="col-12"><div class="card"><div class="card-body">
wrapper, but the older docs pages (introduction, layout, color-mode,
browser-support, license, how-to-contribute, components/*, all
javascript/*) rendered their MDX directly inside .container-fluid with
no wrapper.

Two visible consequences:
- Half the pages had a white card background; the other half showed the
  body-tertiary backdrop through (no visual container at all)
- Half the pages had my .docs-page typography (h5 separators, styled
  tables, info callouts, pill inline code) and the other half didn't,
  because the prose styles are scoped under .card > .card-body

Wraps the MDX content (or hand-written content in color-mode.astro and
layout.astro) in the same row/col-12/card/card-body markup so every
docs page now renders against an identical white card with consistent
prose typography, table styling, code-block treatment, and callout
spacing.

FAQ keeps its custom design (it intentionally breaks the card pattern
to deliver a hero + chips + accordion layout).

13 pages mechanically wrapped via a Python regex over the
<Component /> placeholder + indent capture; layout.astro and
color-mode.astro hand-edited because they had additional non-MDX
content (a tips callout and a navbar demo respectively).

src/html/pages/docs/browser-support.astro

@@ -54,7 +54,15 @@ const page = "browser-support";
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <BrowserSupport />
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <BrowserSupport />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

src/html/pages/docs/color-mode.astro

@@ -161,7 +161,11 @@ const page = "color-mode";
               </div>
               <!-- Start column -->
               <div class="col-12">
-                <ColorMode />
+                <div class="card">
+                  <div class="card-body">
+                    <ColorMode />
+                  </div>
+                </div>
               </div>
             </div>
             <!--end::Row-->

src/html/pages/docs/components/main-header.astro

@@ -308,7 +308,15 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
             </nav>
             <!-- /.navbar -->
 
-            <MainHeader />
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <MainHeader />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

src/html/pages/docs/components/main-sidebar.astro

@@ -54,7 +54,15 @@ const page = "main-sidebar";
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <MainSidebar />
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <MainSidebar />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

src/html/pages/docs/how-to-contribute.astro

@@ -54,7 +54,15 @@ const page = "how-to-contribute";
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <HowToContribute />
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <HowToContribute />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

src/html/pages/docs/introduction.astro

@@ -54,7 +54,15 @@ const page = "introduction";
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <Introduction />
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <Introduction />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

src/html/pages/docs/javascript/accessibility.astro

@@ -54,7 +54,15 @@ const page = "accessibility";
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <AccessibilityDoc />
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <AccessibilityDoc />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

src/html/pages/docs/javascript/card-widget.astro

@@ -54,7 +54,15 @@ const page = "card-widget";
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <CardWidgetDoc />
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <CardWidgetDoc />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

src/html/pages/docs/javascript/direct-chat.astro

@@ -54,7 +54,15 @@ const page = "direct-chat";
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <DirectChatDoc />
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <DirectChatDoc />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

src/html/pages/docs/javascript/fullscreen.astro

@@ -54,7 +54,15 @@ const page = "fullscreen";
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <FullscreenDoc />
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <FullscreenDoc />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

src/html/pages/docs/javascript/layout.astro

@@ -54,7 +54,15 @@ const page = "layout";
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <LayoutDoc />
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <LayoutDoc />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

src/html/pages/docs/javascript/pushmenu.astro

@@ -54,7 +54,15 @@ const page = "pushmenu";
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <Pushmenu />
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <Pushmenu />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

src/html/pages/docs/javascript/treeview.astro

@@ -54,7 +54,15 @@ const page = "treeview";
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <Treeview />
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <Treeview />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

src/html/pages/docs/layout.astro

@@ -52,58 +52,58 @@ const page = "layout";
         <!--begin::App Content-->
         <div class="app-content">
           <div class="container-fluid">
-            <div class="callout callout-info mb-4">
-              <h5 class="fw-bold">Tips</h5>
-              <p>
-                The <a href="/starter.html" target="_blank" rel="noopener noreferrer"  class="callout-link">
-                  starter page
-                </a> is a good place to start building your app if you’d like to
-                start from scratch.
-              </p>
-            </div>
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <div class="callout callout-info mb-4">
+                      <h5 class="fw-bold">Tips</h5>
+                      <p>
+                        The <a href="https://github.com/ColorlibHQ/AdminLTE/tree/master/dist" target="_blank" rel="noopener noreferrer" class="callout-link">
+                          starter pages
+                        </a> are a good place to start building your app from scratch.
+                      </p>
+                    </div>
 
-            <p>The layout consists of five major parts:</p>
-            <ul>
-              <li>
-                Wrapper <code>.app-wrapper</code> . A div that wraps the whole site.
-              </li>
-              <li>
-                Main Header <code>.app-header</code> . Contains the logo and navbar.
-              </li>
-              <li>
-                Main Sidebar <code>.app-sidebar</code> . Contains the sidebar user
-                panel and menu.
-              </li>
-              <li>
-                Content <code>.app-main</code> . Contains the page header and content.
-              </li>
-              <li>
-                Main Footer <code>.app-footer</code> . Contains the footer.
-              </li>
-            </ul>
+                    <p>The layout consists of five major parts:</p>
+                    <ul>
+                      <li>
+                        Wrapper <code>.app-wrapper</code> &mdash; a div that wraps the whole site.
+                      </li>
+                      <li>
+                        Main Header <code>.app-header</code> &mdash; contains the logo and navbar.
+                      </li>
+                      <li>
+                        Main Sidebar <code>.app-sidebar</code> &mdash; contains the sidebar user panel and menu.
+                      </li>
+                      <li>
+                        Content <code>.app-main</code> &mdash; contains the page header and content.
+                      </li>
+                      <li>
+                        Main Footer <code>.app-footer</code> &mdash; contains the footer.
+                      </li>
+                    </ul>
 
-            <h4>Layout Options</h4>
-            <p>
-              AdminLTE v4 provides a set of options to apply to your main
-              layout. Each one of these classes can be added to the
-              <code>body</code> tag to get the desired goal.
-            </p>
-            <ul>
-              <li>
-                Fixed Sidebar: use the class <code>.layout-fixed</code> to get a
-                fixed sidebar.
-              </li>
-              <li>
-                Mini Sidebar on Toggle: use the class
-                <code>.sidebar-expand-* .sidebar-mini</code>
-                to have a collapsed sidebar upon loading.
-              </li>
-              <li>
-                Collapsed Sidebar: use the class
-                <code>.sidebar-expand-* .sidebar-mini .sidebar-collapse</code> to
-                have a collapsed sidebar upon loading.
-              </li>
-            </ul>
+                    <h4>Layout Options</h4>
+                    <p>
+                      AdminLTE v4 provides a set of options to apply to your main layout. Each one of these classes can be added to the
+                      <code>body</code> tag to get the desired goal.
+                    </p>
+                    <ul>
+                      <li>
+                        Fixed Sidebar: use the class <code>.layout-fixed</code> to get a fixed sidebar.
+                      </li>
+                      <li>
+                        Mini Sidebar on Toggle: use the class <code>.sidebar-expand-* .sidebar-mini</code> to have a collapsed sidebar upon loading.
+                      </li>
+                      <li>
+                        Collapsed Sidebar: use the class <code>.sidebar-expand-* .sidebar-mini .sidebar-collapse</code> to have a collapsed sidebar upon loading.
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!-- /.container-fluid -->
         </div>

src/html/pages/docs/license.astro

@@ -54,7 +54,15 @@ const page = "license";
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <License />
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <License />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>