[PLAY-1602] Lightbox kit - Nitro Bug (#4178)

**What does this PR do?** 

- Fix Daily Attendance History Lightbox image's missing close "x" button
when viewed on Safari mobile because the Nitro nav bar overlaps
visually.
- Bump z-index values for Lightbox.
- In Nitro: remove the wrapping div with a z-index which [changes the
stacking context](https://www.joshwcomeau.com/css/stacking-contexts/)

**Screenshots:** Screenshots to visualize your addition/change
<img width="428" alt="Screenshot 2025-01-28 at 8 02 02 AM"
src="https://github.com/user-attachments/assets/6cee8fe0-0c74-426f-8bb0-1257c1d8afb8"
/>

**How to test?** Steps to confirm the desired behavior:
1. Test /kits/lightbox/react
2. Ninja test Nitro lightboxes.

#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.

playbook/app/pb_kits/playbook/pb_lightbox/lightbox.scss

@@ -2,6 +2,7 @@
 @import "../tokens/screen_sizes";
 
 $slides-margin: $space-md;
+$lightbox-z-index-floor: $z_10 !default;
 
  .carousel {
 
@@ -13,7 +14,7 @@ $slides-margin: $space-md;
     top: 0;
     left: 0;
     right: 0;
-    z-index: 9999999;
+    z-index: $lightbox-z-index-floor + 99;
     align-items: center;
     transition: all .5s;
 
@@ -55,15 +56,15 @@ $slides-margin: $space-md;
   justify-content: space-between;
   flex-direction: column;
   background-color: black;
-  z-index: 1;
+  z-index: $lightbox-z-index-floor + 1;
   overflow: hidden;
 }
 
 .Slides {
   display: flex;
   height: calc(100% - 120px);
   width: 100%;
-  z-index: 1;
+  z-index: $lightbox-z-index-floor + 1;
 
   [class^="react-transform-wrapper"] {
     flex-shrink: 0;
@@ -87,7 +88,7 @@ $slides-margin: $space-md;
   .carousel-arrow-left {
     display: block;
     position: absolute;
-    z-index: 4;
+    z-index: $lightbox-z-index-floor + 4;
     top: 50%;
     @media only screen and (max-width: $screen-xs-max) {
       display: none;
@@ -97,7 +98,7 @@ $slides-margin: $space-md;
   .carousel-arrow-right {
     display: block;
     position: absolute;
-    z-index: 4;
+    z-index: $lightbox-z-index-floor + 4;
     top: 50%;
     right: 0;
     @media only screen and (max-width: $screen-xs-max) {
@@ -140,7 +141,7 @@ $slides-margin: $space-md;
   width: 100vw;
   padding: 3px;
   overflow: scroll;
-  z-index: 20;
+  z-index: $lightbox-z-index-floor + 20;
   &.centered {
     justify-content: center;
   }