Add business dashboard dark mode from Super Admin theme setting.

Login and in-app surfaces follow tenant themeMode, matching customer dark tokens, with themed switches and tighter card/table chrome.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/index.css

@@ -44,6 +44,16 @@
   --text-primary: #1e293b;
   --text-secondary: #64748b;
   --text-muted: #94a3b8;
+  --border-color: rgba(148, 163, 184, 0.35);
+  --surface: rgba(255, 255, 255, 0.82);
+  --card-media-bg: #ffffff;
+  --elevated-surface: rgba(255, 255, 255, 0.96);
+  --icon-bg: color-mix(in srgb, var(--primary) 14%, #ffffff);
+  --icon-bg-end: color-mix(in srgb, var(--primary) 8%, #f1f5f9);
+  --card-hover-lift: -4px;
+  --card-hover-shadow: 0 16px 48px rgba(var(--primary-rgb) / 0.14);
+  --card-hover-transition: transform 0.25s ease, box-shadow 0.25s ease;
+  --table-header-bg: rgba(255, 255, 255, 0.35);
   --sidebar-width: 260px;
   --radius: 16px;
   --radius-sm: 12px;
@@ -61,6 +71,57 @@
     sans-serif;
 }
 
+/*
+ * Dark mode: neutral dark gray backgrounds.
+ * Brand/theme color (--primary) is for accents only — not page/card backgrounds.
+ */
+html[data-theme='dark'] {
+  color-scheme: dark;
+
+  --bg-gradient-start: #2a2d34;
+  --bg-gradient-mid: #22252b;
+  --bg-gradient-end: #1a1d23;
+
+  --glass-bg: rgba(45, 49, 57, 0.9);
+  --header-bg: color-mix(in srgb, #2a2d34 92%, transparent);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
+  --modal-overlay-bg: rgba(0, 0, 0, 0.6);
+
+  --text-primary: #f1f5f9;
+  --text-secondary: #cbd5e1;
+  --text-muted: #94a3b8;
+  --border-color: rgba(255, 255, 255, 0.12);
+  --surface: rgba(55, 59, 68, 0.95);
+  --card-media-bg: #32363f;
+  --elevated-surface: #3a3e48;
+  --toast-bg: rgba(58, 62, 72, 0.96);
+  --toast-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
+
+  --card-hover-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
+
+  /* Table header: one step above the row, still dark */
+  --table-header-bg: rgba(255, 255, 255, 0.07);
+
+  /* Icon chip: dark gray tile, slight primary tint — not a light wash */
+  --icon-bg: color-mix(in srgb, var(--primary) 22%, #2f333c);
+  --icon-bg-end: color-mix(in srgb, var(--primary) 12%, #25282f);
+}
+
+html[data-theme='dark'] select {
+  background-color: var(--surface);
+  color: var(--text-primary);
+  border-color: var(--border-color);
+}
+
+html[data-theme='dark']
+  input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden']),
+html[data-theme='dark'] textarea {
+  background-color: var(--surface);
+  color: var(--text-primary);
+  border-color: var(--border-color);
+}
+
 html {
   min-height: 100%;
 }
@@ -91,6 +152,29 @@ body {
   overflow-x: hidden;
 }
 
+html[data-theme='dark'] body {
+  background: linear-gradient(
+    135deg,
+    var(--bg-gradient-start) 0%,
+    var(--bg-gradient-mid) 45%,
+    var(--bg-gradient-end) 100%
+  );
+  background-attachment: fixed;
+}
+
+/* Soft neutral aura — no theme-color wash on the page */
+html[data-theme='dark'] body::before {
+  content: '';
+  position: fixed;
+  inset: -30%;
+  z-index: -1;
+  pointer-events: none;
+  display: block;
+  background:
+    radial-gradient(ellipse 520px 520px at 72% 18%, rgba(255, 255, 255, 0.04), transparent 72%),
+    radial-gradient(ellipse 420px 420px at 22% 82%, rgba(255, 255, 255, 0.03), transparent 72%);
+}
+
 /* Portaled dialogs sit on body; blur the app behind them. */
 body:has([aria-modal='true']) #root {
   filter: blur(var(--modal-overlay-blur, 16px));
@@ -117,8 +201,8 @@ select {
   font-size: var(--field-font-size);
   line-height: 1.4;
   color: var(--text-primary);
-  background-color: rgba(255, 255, 255, 0.7);
-  border: 1px solid rgba(148, 163, 184, 0.35);
+  background-color: var(--surface);
+  border: 1px solid var(--border-color);
   border-radius: var(--radius-sm);
   min-height: var(--field-height);
   padding: var(--field-padding-y) var(--select-padding-end) var(--field-padding-y) var(--field-padding-x);