From 3171bea91858558c38fa0ea0d4c72a62d4d175f2 Mon Sep 17 00:00:00 2001
From: Jonathan Miller <jmiller-moko@noreply.git.mokoconsulting.tech>
Date: Sat, 18 Apr 2026 13:50:34 -0500
Subject: [PATCH] Add dark overlay on offline page background for dark theme

Uses ::before pseudo-element with rgba(0,0,0,0.5) overlay
only on dark theme. Content stays above via z-index.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/media/css/offline.css | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/media/css/offline.css b/src/media/css/offline.css
index c3c767e..c1abd0a 100644
--- a/src/media/css/offline.css
+++ b/src/media/css/offline.css
@@ -25,6 +25,24 @@
 	background-size: cover;
 }
 
+/* Dark theme: overlay to darken the background */
+:root[data-bs-theme="dark"] .moko-offline-wrap {
+	position: relative;
+}
+
+:root[data-bs-theme="dark"] .moko-offline-wrap::before {
+	content: "";
+	position: absolute;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.5);
+	z-index: 0;
+}
+
+:root[data-bs-theme="dark"] .moko-offline-wrap > * {
+	position: relative;
+	z-index: 1;
+}
+
 /* === Centered Card Overlay === */
 .moko-offline-card {
 	width: 100%;