From bc7e9ad756e6dd0c444463a84420efd1fcd4c125 Mon Sep 17 00:00:00 2001
From: Millicool <milena.j.schneeberger@gmail.com>
Date: Fri, 6 Feb 2026 15:43:43 +0100
Subject: [PATCH] Add navbar styling

---
 ui.R | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/ui.R b/ui.R
index 68154b0..7f3b9d5 100644
--- a/ui.R
+++ b/ui.R
@@ -60,6 +60,52 @@ ui <- function() {
             border: 5px solid white !important;
             overflow: hidden !important;
           }
+          /* NAVSET CARD TABS (Modern & Fluid) */
+          /* Match the outer card to your existing 20px radius */
+          .card.bslib-card.bslib-navset {
+            border-radius: 20px !important;
+            border: none !important;
+          }
+          /* The Header area where tabs sit */
+          .card-header.bslib-nav-tabs-spacer {
+            background-color: transparent !important;
+            border-bottom: 1px solid #f0f0f0 !important;
+            padding: 10px 15px !important;
+          }
+          /* Force the card body to hide all overflow (Vertical and Horizontal) */
+          .card-body {
+            overflow: hidden !important;
+            display: flex;
+            flex-direction: column;
+          }
+          /* Ensure the plotly container doesn't create internal scrolling */
+          .js-plotly-plot, .plot-container {
+            overflow: hidden !important;
+          }
+          /* Target the specific plot ID to be extra safe */
+          #grph_top3 {
+            overflow: hidden !important;
+          }
+          /* Individual Tab Styling - Rounded and Clean */
+          .nav-tabs .nav-link {
+            border: none !important;
+            border-radius: 12px !important; /* Slightly smaller than card for nested look */
+            margin-right: 8px;
+            color: #495057 !important; /* Muted grey */
+            padding: 8px 18px !important;
+            font-weight: 500;
+            background-color: transparent;
+          }
+          /* Active Tab - No movement, just color change */
+          .nav-tabs .nav-link.active {
+            background-color: #f4f7f9 !important; /* Matches your body background */
+            color: #1a1a1a !important;
+            font-weight: 600;
+          }
+          /* Clean up the tab content area */
+          .tab-content {
+            padding: 15px !important;
+          }
           /* 3. ALLE CARDS (Diagramme & Container) */
           .card {
             border-radius: 20px !important;