From d658019007c21242153c1355cac0051a43bf854e Mon Sep 17 00:00:00 2001
From: Jonathan Miller <jmiller@mokoconsulting.tech>
Date: Sun, 12 Jul 2026 18:18:08 -0500
Subject: [PATCH] @ refactor(runbackup): move screen CSS into the Web Asset
 Manager

All full-screen backup CSS now loads through Joomla WAM instead of an
inline <style> block (and the redundant inline style="width:0"):

- New media/css/runbackup.css holds the whole stylesheet.
- Registered as asset com_mokosuitebackup.runbackup in joomla.asset.json.
- tmpl/runbackup/default.php loads it via
  getDocument()->getWebAssetManager()->useStyle(com_mokosuitebackup.runbackup),
  matching the existing com_mokosuitebackup.admin pattern.

The css folder already ships via the manifest <folder>css</folder>, so no
manifest change is needed.

Claude-Session: https://claude.ai/code/session_01WbGBN9VyRK61zczYWcCQ2i
@
---
 .../media/css/runbackup.css                   | 84 +++++++++++++++++++
 .../media/joomla.asset.json                   |  5 ++
 .../tmpl/runbackup/default.php                | 55 ++----------
 3 files changed, 94 insertions(+), 50 deletions(-)
 create mode 100644 source/packages/com_mokosuitebackup/media/css/runbackup.css

diff --git a/source/packages/com_mokosuitebackup/media/css/runbackup.css b/source/packages/com_mokosuitebackup/media/css/runbackup.css
new file mode 100644
index 00000000..f29dea3a
--- /dev/null
+++ b/source/packages/com_mokosuitebackup/media/css/runbackup.css
@@ -0,0 +1,84 @@
+/*
+ * @package     MokoSuiteBackup
+ * @subpackage  com_mokosuitebackup
+ * @copyright   Copyright (C) 2026 Moko Consulting. All rights reserved.
+ * @license     GNU General Public License version 3 or later; see LICENSE
+ *
+ * Full-screen backup progress screen (view=runbackup). Loaded via the Joomla
+ * Web Asset Manager (asset com_mokosuitebackup.runbackup).
+ */
+
+/* Full-screen backup runs on a black backdrop. */
+html,
+body {
+	background-color: #000 !important;
+}
+
+/* Colours are pulled from the Atum admin template's own CSS custom properties
+   so the screen matches whatever theme the site runs, with Bootstrap and then
+   a literal as progressive fallbacks. */
+.msb-runbackup {
+	--msb-accent: var(--template-link-color, var(--bs-link-color, #2a69b8));
+	--msb-accent2: var(--template-special-color, var(--msb-accent));
+	--msb-success: var(--template-success-color, var(--bs-success, #2f7d32));
+	--msb-danger: var(--template-danger-color, var(--bs-danger, #c52128));
+	--msb-track: var(--template-bg-light, var(--bs-gray-200, #edf0f5));
+
+	padding: 0 1rem;
+}
+
+/* overflow:hidden clips the full-bleed bar to the card's rounded corners. */
+.msb-runbackup .card {
+	overflow: hidden;
+}
+
+.msb-rb-progress {
+	height: 2.5rem;
+	background: var(--msb-track);
+	overflow: hidden;
+}
+
+.msb-rb-bar {
+	position: relative;
+	height: 100%;
+	width: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #fff;
+	font-weight: 600;
+	font-size: .95rem;
+	white-space: nowrap;
+	background-color: var(--msb-accent);
+	background-image: linear-gradient(90deg, var(--msb-accent), var(--msb-accent2));
+	transition: width .35s ease;
+}
+
+.msb-rb-bar.is-animated::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	background-image: linear-gradient(45deg, rgba(255, 255, 255, .18) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .18) 75%, transparent 75%, transparent);
+	background-size: 1rem 1rem;
+	animation: msb-rb-stripes 1s linear infinite;
+}
+
+.msb-rb-bar.is-success {
+	background-image: none;
+	background-color: var(--msb-success);
+}
+
+.msb-rb-bar.is-danger {
+	background-image: none;
+	background-color: var(--msb-danger);
+}
+
+@keyframes msb-rb-stripes {
+	from {
+		background-position: 1rem 0;
+	}
+
+	to {
+		background-position: 0 0;
+	}
+}
diff --git a/source/packages/com_mokosuitebackup/media/joomla.asset.json b/source/packages/com_mokosuitebackup/media/joomla.asset.json
index f967399c..12194cba 100644
--- a/source/packages/com_mokosuitebackup/media/joomla.asset.json
+++ b/source/packages/com_mokosuitebackup/media/joomla.asset.json
@@ -9,6 +9,11 @@
 			"name": "com_mokosuitebackup.admin",
 			"type": "style",
 			"uri": "com_mokosuitebackup/css/admin.css"
+		},
+		{
+			"name": "com_mokosuitebackup.runbackup",
+			"type": "style",
+			"uri": "com_mokosuitebackup/css/runbackup.css"
 		}
 	]
 }
diff --git a/source/packages/com_mokosuitebackup/tmpl/runbackup/default.php b/source/packages/com_mokosuitebackup/tmpl/runbackup/default.php
index d15582c5..0238f35f 100644
--- a/source/packages/com_mokosuitebackup/tmpl/runbackup/default.php
+++ b/source/packages/com_mokosuitebackup/tmpl/runbackup/default.php
@@ -88,56 +88,11 @@ $config = [
 		'leaveWarn'  => Text::_('COM_MOKOJOOMBACKUP_RUNBACKUP_LEAVE_WARNING'),
 	],
 ];
-?>
-<style>
-	/* Full-screen backup runs on a black backdrop. */
-	html, body { background-color: #000 !important; }
 
-	/* Colours are pulled from the Atum admin template's own CSS custom
-	   properties so the screen matches whatever theme the site runs, with
-	   Bootstrap and then a literal as progressive fallbacks. */
-	.msb-runbackup {
-		--msb-accent:  var(--template-link-color, var(--bs-link-color, #2a69b8));
-		--msb-accent2: var(--template-special-color, var(--msb-accent));
-		--msb-success: var(--template-success-color, var(--bs-success, #2f7d32));
-		--msb-danger:  var(--template-danger-color, var(--bs-danger, #c52128));
-		--msb-track:   var(--template-bg-light, var(--bs-gray-200, #edf0f5));
-		padding: 0 1rem;
-	}
-	/* overflow:hidden clips the full-bleed bar to the card's rounded corners. */
-	.msb-runbackup .card { overflow: hidden; }
-	.msb-rb-progress {
-		height: 2.5rem;
-		background: var(--msb-track);
-		overflow: hidden;
-	}
-	.msb-rb-bar {
-		height: 100%;
-		width: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: #fff;
-		font-weight: 600;
-		font-size: .95rem;
-		white-space: nowrap;
-		background-color: var(--msb-accent);
-		background-image: linear-gradient(90deg, var(--msb-accent), var(--msb-accent2));
-		transition: width .35s ease;
-	}
-	.msb-rb-bar.is-animated::after {
-		content: "";
-		position: absolute;
-		inset: 0;
-		background-image: linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%, transparent 75%, transparent);
-		background-size: 1rem 1rem;
-		animation: msb-rb-stripes 1s linear infinite;
-	}
-	.msb-rb-bar { position: relative; }
-	.msb-rb-bar.is-success { background-image: none; background-color: var(--msb-success); }
-	.msb-rb-bar.is-danger  { background-image: none; background-color: var(--msb-danger); }
-	@keyframes msb-rb-stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } }
-</style>
+// All screen CSS loads via the Joomla Web Asset Manager (media/joomla.asset.json),
+// not an inline <style> block.
+$this->getDocument()->getWebAssetManager()->useStyle('com_mokosuitebackup.runbackup');
+?>
 <div class="msb-runbackup">
 	<div class="card shadow-sm">
 		<div class="card-body p-4 pb-3">
@@ -168,7 +123,7 @@ $config = [
 
 		<!-- Full-bleed progress bar, edge-to-edge along the bottom of the card. -->
 		<div class="msb-rb-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
-			<div id="msb-rb-bar" class="msb-rb-bar is-animated" style="width:0;">0%</div>
+			<div id="msb-rb-bar" class="msb-rb-bar is-animated">0%</div>
 		</div>
 	</div>
 </div>