style: progress bar tooltip, fix dark mode border color

- add Bootstrap tooltip on progress track explaining idle timer
- fix dark mode border to explicit #6f757c (was rgba computing to #525457)

services/jupyterhub/html_templates_enhanced/home.html

@@ -54,7 +54,9 @@
           <small class="text-muted ms-1">Loading session...</small>
         </div>
         <div id="session-timer-bar" class="d-none d-flex align-items-center gap-2">
-          <div class="progress flex-grow-1">
+          <div class="progress flex-grow-1"
+               title="Idle session timer - your server will be stopped automatically when this runs out"
+               data-bs-toggle="tooltip" data-bs-placement="top">
             <div id="session-progress-bar" class="progress-bar" role="progressbar"
                  style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
           </div>

services/jupyterhub/html_templates_enhanced/static/custom.css

@@ -1681,5 +1681,5 @@ textarea.form-control {
 /* Dark mode session timer */
 [data-bs-theme="dark"] #session-timer-bar .progress {
   background-color: rgba(255, 255, 255, 0.08);
-  border-color: rgba(255, 255, 255, 0.15);
+  border-color: #6f757c;
 }

services/jupyterhub/html_templates_enhanced/static/session-timer.js

@@ -283,6 +283,13 @@
     if ($row.length === 0) return;
 
     readCssColors();
+
+    // Bootstrap tooltip on progress track
+    var tooltipEl = $bar.find('.progress[data-bs-toggle="tooltip"]')[0];
+    if (tooltipEl && typeof bootstrap !== 'undefined') {
+      new bootstrap.Tooltip(tooltipEl);
+    }
+
     console.log('[SessionTimer] initializing for', username);
 
     // modal reset on open