From 242143d06e26b8210a06c8d2f3f32d3f3073efae Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Fri, 8 May 2026 08:38:52 +0200
Subject: [PATCH] feat(globals.css): debug-mode overlay CSS voor data-debug-id
 elementen

---
 app/globals.css | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/app/globals.css b/app/globals.css
index 9e6d7af..6c32368 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,3 +3,25 @@
 @plugin "@tailwindcss/typography";
 
 @import "./styles/theme.css";
+
+/* Debug-mode overlay (alleen actief wanneer body.debug-mode is gezet door dev-only toggle) */
+body.debug-mode [data-debug-id] {
+  outline: 2px dashed var(--info);
+  outline-offset: 1px;
+  position: relative;
+}
+body.debug-mode [data-debug-id]:hover::after {
+  content: attr(data-debug-label);
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: var(--info-container);
+  color: var(--info-container-foreground);
+  font-size: 10px;
+  line-height: 1.2;
+  padding: 2px 4px;
+  white-space: nowrap;
+  border-radius: 2px;
+  z-index: 9999;
+  pointer-events: none;
+}