Refine monitoring drilldown styling

Author: xoriin

CHANGELOG.md

@@ -41,6 +41,7 @@
 - **Unified near-duplicate UI colours onto the design-token palette** — 485 hard-coded colour values that were visually near-identical to an existing theme token now use the token, keeping light and dark mode consistent as the palette evolves. The changes are imperceptible by design and were verified against light/dark screenshot baselines of every workspace.
 
 ### Fixed
+- **Monitoring drilldown popup surface** — the device drilldown modal now uses the standard app surface colours again instead of the stronger blue-toned background.
 - **Monitoring/IPAM table formatting regression** — shared numeric-stability styling no longer turns Monitoring and IPAM table cells into pill-shaped inline elements, restoring normal table layout and dashboard card values.
 - **Monitoring status-dot motion** — Monitoring and port-check status dots now use a slower, softer pulse so live state remains visible without drawing as much attention.
 - **Device saves now confirm completion** — saving device edits now shows a success toast with the device name, so the details panel no longer feels like the Save action did nothing.

frontend/src/styles/monitoring.css

@@ -1680,7 +1680,7 @@ body.theme-dark .mon-checks-group-label { color: #4a7a96; }
   display: flex;
   flex-direction: column;
   border-radius: 16px;
-  background: var(--nm-shell-text);
+  background: var(--nm-bg-elevated);
   box-shadow: 0 32px 80px rgba(10, 18, 28, 0.30), 0 4px 20px rgba(10, 18, 28, 0.12);
   overflow: hidden;
 }
@@ -1837,17 +1837,17 @@ body.theme-dark .mon-checks-group-label { color: #4a7a96; }
 /* ── Dark theme overrides ───────────────────────────────────────────────────── */
 
 body.theme-dark .mon-hero {
-  background: var(--nm-border);
+  background: #121c27;
   box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55), 0 4px 20px rgba(0, 0, 0, 0.28);
 }
-body.theme-dark .mon-hero-header { background: #1e3047; border-bottom-color: var(--nm-border-strong); }
+body.theme-dark .mon-hero-header { background: #182635; border-bottom-color: var(--nm-border-strong); }
 body.theme-dark .mon-hero-name { color: #d8eaf5; }
 body.theme-dark .mon-hero-sub { color: var(--nm-text-faint); }
-body.theme-dark .mon-hero-stats { background: #192840; border-color: var(--nm-border-strong); }
+body.theme-dark .mon-hero-stats { background: #15212e; border-color: var(--nm-border-strong); }
 body.theme-dark .mon-hero-stat { border-color: var(--nm-border-strong); }
 body.theme-dark .mon-hero-stat-val { color: #d8eaf5; }
-body.theme-dark .mon-hero-section { background: #1e3047; border-color: var(--nm-border-strong); }
-body.theme-dark .mon-hero-section-title { color: #8ab4cc; background: #192840; border-color: var(--nm-border-strong); }
+body.theme-dark .mon-hero-section { background: #182635; border-color: var(--nm-border-strong); }
+body.theme-dark .mon-hero-section-title { color: #8ab4cc; background: #15212e; border-color: var(--nm-border-strong); }
 body.theme-dark .mon-hero-close { background: rgba(90, 122, 149, 0.18); color: #8ab4cc; }
 body.theme-dark .mon-hero-close:hover { background: rgba(90, 122, 149, 0.30); color: #c8dff0; }
 body.theme-dark .modal-close { background: rgba(90, 122, 149, 0.18); color: #8ab4cc; }