Update assets/custom.css via AI Editor

assets/custom.css

@@ -1,52 +1,65 @@
-/* Left column navbar light gray, left-aligned bold text, transparent buttons, no underlines */
-.dash-bootstrap .dbc-row > .dbc-col:first-child {
+/* Left panel background */
+.dash-bootstrap .dbc-col:first-child,
+.dash-bootstrap .dbc-col:nth-child(1),
+.dash-bootstrap .dbc-row > .col-3,
+.dash-bootstrap .dbc-row > [class*="col-3"] {
     background-color: #F5F5F5 !important;
-    min-height: 100vh;
-    word-break: break-word;
-    word-wrap: break-word;
-    text-align: left;
 }
-.dash-bootstrap .dbc-row > .dbc-col:first-child .navbar-btn {
-    display: block;
-    width: 100%;
-    background: transparent;
-    border: none;
-    outline: none;
-    text-align: left;
-    font-weight: bold;
-    color: #1C304A;
-    padding: 12px 18px;
-    margin: 0;
-    cursor: pointer;
+
+/* Left panel text: bold, left-aligned, no underline */
+.dash-bootstrap .dbc-col:first-child,
+.dash-bootstrap .dbc-col:nth-child(1),
+.dash-bootstrap .dbc-row > .col-3,
+.dash-bootstrap .dbc-row > [class*="col-3"] {
+    font-weight: bold !important;
+    text-align: left !important;
+}
+
+.dash-bootstrap .dbc-col:first-child a,
+.dash-bootstrap .dbc-col:nth-child(1) a,
+.dash-bootstrap .dbc-row > .col-3 a,
+.dash-bootstrap .dbc-row > [class*="col-3"] a {
     text-decoration: none !important;
-    box-shadow: none;
-    border-radius: 4px;
-    transition: background 0.2s, color 0.2s;
+    font-weight: bold !important;
+    color: inherit !important;
+    text-align: left !important;
 }
-.dash-bootstrap .dbc-row > .dbc-col:first-child .navbar-btn:hover,
-.dash-bootstrap .dbc-row > .dbc-col:first-child .navbar-btn:focus {
-    background-color: #DEF4F4;
-    color: #116F70;
+
+/* Remove underline from all left panel clickable items */
+.custom-button,
+.custom-button a {
     text-decoration: none !important;
+    font-weight: bold !important;
+    color: inherit !important;
+    background: transparent !important;
+    border: none !important;
+    text-align: left !important;
+    box-shadow: none !important;
+    width: 100% !important;
+    display: block !important;
+    cursor: pointer;
+    outline: none !important;
+    transition: background 0.2s;
 }
 
-/* Remove underline from all links in left navbar */
-.dash-bootstrap .dbc-row > .dbc-col:first-child a,
-.dash-bootstrap .dbc-row > .dbc-col:first-child a:visited,
-.dash-bootstrap .dbc-row > .dbc-col:first-child a:hover,
-.dash-bootstrap .dbc-row > .dbc-col:first-child a:active {
+/* Light color on hover for left panel clickable items */
+.custom-button:hover,
+.custom-button:focus,
+.custom-button:active {
+    background-color: #E0E0E0 !important;
+    color: inherit !important;
     text-decoration: none !important;
 }
 
-/* Right column white background */
-.dash-bootstrap .dbc-row > .dbc-col:last-child {
-    background-color: #FFFFFF !important;
-    min-height: 100vh;
-    word-break: break-word;
-    word-wrap: break-word;
+/* Remove underline from all links in left panel */
+.dash-bootstrap .dbc-col:first-child a,
+.dash-bootstrap .dbc-col:nth-child(1) a,
+.dash-bootstrap .dbc-row > .col-3 a,
+.dash-bootstrap .dbc-row > [class*="col-3"] a {
+    text-decoration: none !important;
 }
 
-/* Button colors */
+/* Button color rules */
 .btn-primary {
     background-color: #1C304A;
     border-color: #1C304A;
@@ -74,44 +87,11 @@
     color: #1C304A;
 }
 
-/* Word wrap for text boxes */
-input[type="text"], textarea, .dash-textarea, .dash-input {
-    word-break: break-word;
-    word-wrap: break-word;
-    white-space: pre-wrap;
-}
-
-/* Blinking triple dot progress indicator */
-.blinking-dot {
-    width: 16px;
-    height: 16px;
-    position: relative;
-    display: inline-block;
-}
-.blinking-dot::before, .blinking-dot::after, .blinking-dot {
-    content: '';
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: #1C304A;
-    position: absolute;
-    top: 5px;
-    animation: blink 1.4s infinite both;
-}
-.blinking-dot::before {
-    left: 0;
-    animation-delay: 0s;
-}
-.blinking-dot {
-    left: 5px;
-    animation-delay: 0.2s;
-}
-.blinking-dot::after {
-    left: 10px;
-    animation-delay: 0.4s;
-}
-@keyframes blink {
-    0%, 80%, 100% { opacity: 0.2; }
-    40% { opacity: 1; }
+/* Ensure word wrap for any text boxes */
+textarea,
+input[type="text"],
+input[type="search"] {
+    white-space: pre-wrap !important;
+    word-break: break-word !important;
+    overflow-wrap: break-word !important;
 }