Update app.py

app.py

@@ -177,7 +177,7 @@ button.secondary:hover {
     border-color: #b8c7d4 !important;
 }
 
-/* Tab styling */
+/* Tab styling & Fix for invisible unselected tabs */
 .tab-nav {
     gap: 8px !important;
     padding: 14px 22px 0 22px !important;
@@ -191,12 +191,17 @@ button.secondary:hover {
     font-weight: 700 !important;
     transition: all 0.2s ease !important;
 }
-.tab-nav button:hover {
+.tab-nav button span {
+    color: #41586b !important; /* Force text color on inner span */
+}
+.tab-nav button:hover, 
+.tab-nav button:hover span {
     background: #edf3f8 !important;
     color: #173954 !important;
     border-color: #bfd0dd !important;
 }
-.tab-nav button.selected {
+.tab-nav button.selected, 
+.tab-nav button.selected span {
     background: #173a59 !important;
     color: #ffffff !important;
     border-color: #173a59 !important;
@@ -229,32 +234,37 @@ button.secondary:hover {
 }
 
 /* Examples Visibility Fixes */
-.examples, 
-.examples *,
 .examples label,
-.examples .dataset-header {
-    color: #27272A !important;
-}
-.examples label {
+.examples label span,
+.examples .label-wrap,
+.examples .label-wrap span {
+    color: #000000 !important; /* Force Sample Business Scenarios label to be black */
     font-weight: 700 !important;
+    opacity: 1 !important;
 }
 
-/* Target Example Table Rows safely */
-.examples table tr td, 
-.examples table tr th {
-    color: #27272A !important;
+.examples button,
+.examples [role="button"],
+.examples .gallery-item {
+    color: #000000 !important;
 }
-.examples table tbody tr:hover, 
-.examples table tbody tr:hover td {
-    background: #E9EEF5 !important;
-    color: #27272A !important;
+
+/* Fix for dark hover states */
+.examples button:hover,
+.examples [role="button"]:hover,
+.examples .gallery-item:hover,
+.examples [aria-selected="true"],
+.examples .selected {
+    background: #eef4f8 !important;
+    color: #000000 !important;
+    border-color: #b8c7d4 !important;
 }
-.examples table tbody tr.selected, 
-.examples table tbody tr.selected td,
-.examples table tbody tr[aria-selected="true"],
-.examples table tbody tr[aria-selected="true"] td {
-    background: #DCE6F2 !important;
-    color: #27272A !important;
+
+.examples button:hover *,
+.examples [role="button"]:hover *,
+.examples .gallery-item:hover *,
+.examples [aria-selected="true"] * {
+    color: #000000 !important; /* Ensure text remains black on hover */
 }
 
 /* Keep hero text white no matter what */