feat: improve scrollbar styles and dark mode compatibility

webapp/src/styles.css

@@ -18,8 +18,6 @@
 .dialog-card,
 .card,
 .list-panel,
-.sidebar-block,
-.settings-subcard,
 .backup-operations-sidebar,
 .backup-destination-sidebar,
 .backup-detail-panel,
@@ -110,7 +108,6 @@
 :root[data-theme='dark'] .dialog-card,
 :root[data-theme='dark'] .card,
 :root[data-theme='dark'] .list-panel,
-:root[data-theme='dark'] .sidebar-block,
 :root[data-theme='dark'] .settings-subcard,
 :root[data-theme='dark'] .backup-operations-sidebar,
 :root[data-theme='dark'] .backup-destination-sidebar,
@@ -423,7 +420,6 @@ h4 {
 .dialog-card,
 .card,
 .list-panel,
-.sidebar-block,
 .settings-subcard,
 .backup-operations-sidebar,
 .backup-destination-sidebar,
@@ -659,6 +655,40 @@ h4 {
   padding: 14px;
 }
 
+.route-stage,
+.sidebar,
+.list-panel,
+.detail-col,
+.log-list,
+.card.log-detail-panel,
+.domain-rules-table,
+.route-stage-fixed {
+  scrollbar-gutter: stable;
+}
+
+.route-stage,
+.sidebar {
+  margin-right: -4px;
+  padding-right: 4px;
+}
+
+.list-panel,
+.detail-col {
+  margin-right: -4px;
+  padding-right: 12px;
+}
+
+.log-list,
+.domain-rules-table {
+  margin-right: -4px;
+  padding-right: calc(0.125rem + 4px);
+}
+
+.card.log-detail-panel {
+  margin-right: -4px;
+  padding-right: 18px;
+}
+
 .card h4,
 .settings-module h3,
 .section-head h3,
@@ -798,7 +828,6 @@ h4 {
 :root[data-theme='dark'] .dialog-card,
 :root[data-theme='dark'] .card,
 :root[data-theme='dark'] .list-panel,
-:root[data-theme='dark'] .sidebar-block,
 :root[data-theme='dark'] .settings-subcard,
 :root[data-theme='dark'] .backup-operations-sidebar,
 :root[data-theme='dark'] .backup-destination-sidebar,
@@ -894,6 +923,32 @@ h4 {
     gap: 8px;
   }
 
+  .route-stage,
+  .sidebar,
+  .list-panel,
+  .detail-col,
+  .log-list,
+  .card.log-detail-panel,
+  .domain-rules-table,
+  .route-stage-fixed {
+    margin-right: 0;
+    scrollbar-gutter: auto;
+  }
+
+  .route-stage,
+  .sidebar {
+    padding-right: 0;
+  }
+
+  .log-list,
+  .domain-rules-table {
+    padding-right: 0.125rem;
+  }
+
+  .card.log-detail-panel {
+    padding-right: 14px;
+  }
+
   .settings-modules-grid {
     grid-template-columns: minmax(0, 1fr);
   }

webapp/src/styles/base.css

@@ -36,9 +36,14 @@ body.dialog-open {
 }
 
 /* --- custom scrollbar --- */
+* {
+  scrollbar-color: color-mix(in srgb, var(--muted) 34%, transparent) transparent;
+  scrollbar-width: thin;
+}
+
 ::-webkit-scrollbar {
-  width: 6px;
+  width: 10px;
-  height: 6px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-track {
@@ -46,12 +51,16 @@ body.dialog-open {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--muted) 30%, transparent);
+  min-height: 44px;
+  border: 3px solid transparent;
   border-radius: 999px;
+  background: color-mix(in srgb, var(--muted) 30%, transparent);
+  background-clip: content-box;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: color-mix(in srgb, var(--muted) 50%, transparent);
+  background: color-mix(in srgb, var(--primary) 38%, var(--muted) 22%);
+  background-clip: content-box;
 }
 
 ::-webkit-scrollbar-corner {

webapp/src/styles/dark.css

@@ -151,11 +151,13 @@
 
 /* ── dark mode scrollbar ── */
 :root[data-theme='dark'] ::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--muted) 24%, transparent);
+  background: color-mix(in srgb, var(--muted) 30%, transparent);
+  background-clip: content-box;
 }
 
 :root[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
-  background: color-mix(in srgb, var(--muted) 44%, transparent);
+  background: color-mix(in srgb, var(--primary) 40%, var(--muted) 22%);
+  background-clip: content-box;
 }
 
 /* ── dark mode backdrop-filter ── */