<!-- Z-index utilities -->
<div class="z-n1">z-index: -1</div>
<div class="z-0">z-index: 0</div>
<div class="z-1">z-index: 1</div>
<div class="z-2">z-index: 2</div>
<div class="z-3">z-index: 3</div>
<div class="z-4">z-index: 4</div>
<div class="z-5">z-index: 5</div>

<!-- Bootstrap component z-index defaults -->
<nav class="navbar fixed-top z-3">z-index: 1030</div>
<div class="modal-backdrop z-4">z-index: 1040</div>
<div class="modal z-5">z-index: 1050</div>
<div class="dropdown-menu z-6">z-index: 1060</div>
<div class="tooltip z-7">z-index: 1070</div>
<div class="popover z-8">z-index: 1080</div>
<div class="toast z-9">z-index: 1090</div>

<!-- Negative z-index -->
<div class="z-n1">Behind normal content</div>

<!-- Auto z-index -->
<div class="z-auto">z-index: auto (default)</div>

<!-- Inline usage -->
<span class="position-relative z-1">Inline with z-index</span>

<!-- With other positioning -->
<div class="position-absolute top-0 start-0 z-2">Absolute with z-index</div>
<div class="position-fixed top-0 z-3">Fixed with z-index</div>
<div class="position-sticky top-0 z-2">Sticky with z-index</div>

/* Bootstrap default z-index values */
$zindex-dropdown:          1000;
$zindex-sticky:            1020;
$zindex-fixed:             1030;
$zindex-modal-backdrop:    1040;
$zindex-modal:             1050;
$zindex-popover:           1070;
$zindex-tooltip:           1080;
$zindex-toast:             1090;

/* Custom utility z-index scale */
$zindex-levels: (
  n1: -1,
  0: 0,
  1: 1,
  2: 2,
  3: 3,
  4: 4,
  5: 5
);

/* Usage in SCSS */
.navbar {
  z-index: $zindex-fixed; /* 1030 */
}

.modal {
  z-index: $zindex-modal; /* 1050 */
}

.dropdown-menu {
  z-index: $zindex-dropdown; /* 1000 */
}

/* Override if needed */
.custom-modal {
  z-index: $zindex-modal + 10; /* 1060 */
}

/* Creating stacking context */
.stacking-context {
  position: relative;
  z-index: 0;
}

/* Nested z-index */
.parent {
  position: relative;
  z-index: 1;
}

.child {
  position: absolute;
  z-index: 10; /* Only competes with siblings, not outside parent */
}

<!-- Stacking context example -->
<!-- Parent creates stacking context -->
<div class="position-relative z-0">
  <!-- Stacking context created -->
  
  <!-- Child z-index only competes with siblings -->
  <div class="position-absolute z-1">z-index: 1</div>
  <div class="position-absolute z-2">z-index: 2 (wins)</div>
  
  <!-- Nested with high z-index -->
  <div class="position-relative">
    <div class="position-absolute z-10">
      <!-- Still within parent's stacking context -->
    </div>
  </div>
</div>

<!-- Outside the stacking context -->
<div class="position-absolute z-3">
  <!-- This competes with the parent, not the children -->
</div>

<!-- Creating stacking context without visual change -->
.isolate {
  position: relative;
  z-index: 0;
}

/* In SCSS */
.stacking-context {
  // Any of these creates stacking context
  position: relative;
  z-index: 0;
  // OR
  opacity: 0.99;
  // OR
  transform: translateZ(0);
  // OR
  filter: blur(0);
}

/* Practical isolation */
.modal-content {
  position: relative;
  z-index: 0; /* Creates stacking context */
}

.modal-header {
  position: relative;
  z-index: 1; /* Stays above modal body */
}

.modal-body {
  position: relative;
  z-index: 0; /* Default */
}

/* Fixing z-index issues */
.z-index-fix {
  // Isolate problematic elements
  position: relative;
  z-index: 0;
}

/* Nested dropdown fix */
.dropdown {
  position: relative; /* Creates stacking context */
}

.dropdown-menu {
  z-index: 1000; /* Within dropdown's context */
}

<!-- Responsive z-index -->
<div class="z-1 z-md-3 z-lg-5">
  <!-- 
    z-index: 1 on mobile
    z-index: 3 on tablet
    z-index: 5 on desktop
  -->
</div>

<div class="z-3 z-md-1">
  <!-- 
    Higher on mobile, lower on desktop
  -->
</div>

<div class="z-0 z-md-2 z-lg-0">
  <!-- 
    Default on mobile
    Higher on tablet
    Default on desktop
  -->
</div>

<!-- Mobile-only overlay -->
<div class="position-fixed top-0 start-0 vw-100 vh-100 bg-dark bg-opacity-50
            z-5 d-md-none">
  <!-- Only visible on mobile -->
</div>

<!-- Responsive navigation -->
<nav class="navbar fixed-top z-3 z-md-2">
  <!-- Higher on mobile, normal on desktop -->
</nav>

<!-- Responsive dropdown -->
<div class="dropdown">
  <button class="btn">Menu</button>
  <div class="dropdown-menu z-4 z-md-3">
    <!-- Higher on mobile -->
  </div>
</div>

<!-- Mobile drawer -->
<div class="position-fixed top-0 start-0 vh-100 bg-white shadow
            z-5 w-75 d-md-none">
  <!-- Mobile-only drawer -->
</div>

<!-- Responsive modals -->
<div class="modal z-5 z-md-4">
  <!-- Different z-index per breakpoint -->
</div>

<!-- Practical example: mobile-optimized UI -->
<div class="position-relative">
  <!-- Main content -->
  <div class="z-0">Content</div>
  
  <!-- Mobile menu button (always on top on mobile) -->
  <button class="btn btn-primary z-3 z-md-0 d-md-none">
    Menu
  </button>
  
  <!-- Desktop sidebar (normal stacking) -->
  <aside class="z-1 d-none d-md-block">Sidebar</aside>
</div>

/* Z-index only works on positioned elements */
.element {
  position: relative; /* or absolute/fixed/sticky */
  z-index: 1;
}

/* Create isolated stacking context */
.isolate {
  position: relative;
  z-index: 0;
  /* OR */
  opacity: 0.99;
  /* OR */
  transform: translateZ(0);
}

/* Z-index management system */

/* Base scale (for custom elements) */
:root {
  --z-index-dropdown: 10;
  --z-index-sticky: 20;
  --z-index-fixed: 30;
  --z-index-modal-backdrop: 40;
  --z-index-modal: 50;
  --z-index-popover: 60;
  --z-index-tooltip: 70;
  --z-index-toast: 80;
  --z-index-super: 100;
}

/* Usage */
.dropdown {
  z-index: var(--z-index-dropdown);
}

.modal {
  z-index: var(--z-index-modal);
}

/* Bootstrap override if needed */
.bootstrap-modal {
  z-index: 1050 !important; /* Bootstrap default */
}

/* Custom higher value */
.custom-super-modal {
  z-index: calc(var(--z-index-modal) + 100);
}

/* Debugging classes */
.debug-z-index {
  outline: 2px solid red;
  background: rgba(255, 0, 0, 0.1);
}

.debug-z-index::before {
  content: 'z-index: ' attr(data-z-index);
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  color: white;
  padding: 2px 4px;
  font-size: 10px;
  z-index: 9999;
}

/* Usage in HTML */
<div class="debug-z-index" data-z-index="1" style="z-index: 1;">
  Debug element
</div>

/* Z-index reset for specific contexts */
.reset-z-index {
  position: static !important;
  z-index: auto !important;
}

/* Print styles - remove z-index */
@media print {
  * {
    z-index: auto !important;
    position: static !important;
  }
}

/* Safe z-index increment function */
@function safe-z-index($base, $increment: 1) {
  @return $base + $increment;
}

/* Usage in SCSS */
.modal-backdrop {
  z-index: safe-z-index($zindex-modal, -10);
}

.modal {
  z-index: $zindex-modal;
}

.toast {
  z-index: safe-z-index($zindex-modal, 10);
}