From d03b2040963a743ef04b5dec1c86b5912eb184ea Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Wed, 4 Mar 2026 12:44:54 +0100
Subject: [PATCH] feat: Add theme-aware custom scrollbars

Thin 6px scrollbars using design tokens (--border, --muted-foreground)
so they blend properly in both light and dark mode. Uses standard
scrollbar-width/scrollbar-color plus WebKit pseudo-elements for
cross-browser coverage.
---
 apps/web/src/index.css | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index eb81ce1..71194f6 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -336,6 +336,38 @@ select:focus-visible {
   }
 }
 
+/* Custom scrollbars */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--border)) transparent;
+}
+
+*:hover {
+  scrollbar-color: hsl(var(--muted-foreground) / 0.35) transparent;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--border));
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: hsl(var(--muted-foreground) / 0.5);
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
 @layer base {
   * {
     @apply border-border;