From 4216de3435e416adf4b622d3682595df8b3c8fff Mon Sep 17 00:00:00 2001
From: CarterPerez-dev <cartertechsolution@gmail.com>
Date: Sat, 2 May 2026 05:33:12 -0400
Subject: [PATCH] feat(monitor/frontend): ethos-aligned base styles (zero
 rounding, density, tabular nums)

---
 .../frontend/index.html                       |  3 +-
 .../frontend/src/styles.scss                  | 35 ++++++++++++++++---
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/index.html b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/index.html
index ce1f11bb..1c9c7a4d 100644
--- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/index.html
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/index.html
@@ -22,8 +22,9 @@
     />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
     />
+    <meta name="color-scheme" content="dark" />
     <title>Monitor The Situation Dashboard</title>
     <meta
       name="description"
diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/styles.scss b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/styles.scss
index 4ac95fe0..2a4e998a 100644
--- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/styles.scss
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/styles.scss
@@ -11,19 +11,46 @@
 @use 'styles/tokens' as *;
 @use 'styles/fonts' as *;
 
+// Ethos-aligned base for the dashboard surface. Auth pages override
+// with their own per-module styles (template residue — left alone).
+html, body {
+  background: var(--bg);
+  color: var(--fg-1);
+  font-family: var(--font-sans);
+  font-size: var(--type-body);
+  line-height: var(--line-height-tight);
+  font-feature-settings: "tnum" 1, "ss01" 1;   // tabular numbers everywhere
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--fg-4);
+}
+::-webkit-scrollbar-track {
+  background: var(--bg);
+}
+
 #root {
   min-height: 100vh;
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
-  background: $bg-default;
+  background: var(--bg);
 }
 
 .app {
   flex: 1;
   display: flex;
   flex-direction: column;
-  background: $bg-default;
-  color: $text-default;
-  font-family: $font-sans;
+  background: var(--bg);
+  color: var(--fg-1);
+  font-family: var(--font-sans);
 }