Standardize z-index hierarchy for VideoJS overlays

Introduced a Z-INDEX-HIERARCHY.md documentation file and updated z-index values across overlay and control CSS files to enforce a consistent stacking order. Ensures tooltips are always on top, menus and chapters overlays are above informational overlays, and end screen overlays remain at the base of the overlay stack. This improves UI layering logic and user interaction reliability.

frontend-tools/video-js/src/components/controls/ButtonTooltips.css

@@ -26,7 +26,7 @@
         opacity 0.2s ease,
         visibility 0.2s ease,
         transform 0.2s ease;
-    z-index: 1000;
+    z-index: 20000;
     margin-bottom: 10px;
     font-family:
         -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",

frontend-tools/video-js/src/components/controls/CustomChaptersOverlay.css

@@ -14,6 +14,7 @@
     overflow: hidden;
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
     right: 10px;
+    z-index: 10000;
 }
 
 .chapter-head {

frontend-tools/video-js/src/components/controls/CustomSettingsMenu.css

@@ -37,7 +37,7 @@
     border-radius: 7px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
     display: none;
-    z-index: 9999;
+    z-index: 10000;
     font-size: 14px;
     overflow: auto;
 }

frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.css

@@ -10,7 +10,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    z-index: 4;
+    z-index: 200;
     padding: 20px;
     box-sizing: border-box;
     opacity: 0;

frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.css

@@ -4,7 +4,7 @@
     position: absolute !important;
     top: 10px !important;
     left: 10px !important;
-    z-index: 1000 !important;
+    z-index: 5000 !important;
     display: flex !important;
     align-items: center !important;
     gap: 10px !important;

frontend-tools/video-js/src/components/overlays/EndScreenOverlay.css

@@ -5,11 +5,11 @@
     top: 0;
     left: 0;
     right: 0;
-    bottom: 60px; /* Leave space for control bar */
-    background: #000000; /* Solid black background */
+    bottom: 60px;
+    background: #000000;
     display: none;
     z-index: 100;
-    overflow: hidden; /* Prevent content from overflowing */
+    overflow: hidden;
     box-sizing: border-box;
 }
 
@@ -353,9 +353,9 @@
     visibility: hidden !important;
 }
 
-/* Ensure end screen overlay covers everything with solid background */
+/* Ensure end screen overlay covers everything with solid background but stays below menus */
 .video-js.vjs-ended .vjs-end-screen-overlay {
     background: #000000 !important;
-    z-index: 99999 !important;
+    z-index: 100 !important;
     display: flex !important;
 }