/* ══════════════════════════════════════════════════════════════════════
   Custom Hamburger Menu for Cassiopeia Sidebar
   ══════════════════════════════════════════════════════════════════════ */

/* Hamburger button */
.navbar-toggler {
  display: none;
  border: none;
  background: transparent;
  padding: 0.5rem;
  cursor: pointer;
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 1050;
}

/* Hamburger icon (three lines) */
.navbar-toggler-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
  background-image: url(\ data:image/svg+xml,%3csvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 30 30%3e%3cpath stroke=rgba(0, 131, 203, 1) stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d=M4 7h22M4 15h22M4 23h22/%3e%3c/svg%3e\);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

/* Show hamburger on mobile/tablet only */
@media (max-width: 991px) {
  .navbar-toggler {
    display: block;
  }
  
  /* Hide sidebar by default on mobile */
  .container-sidebar-left {
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: white;
    z-index: 1040;
    overflow-y: auto;
    transition: left 0.3s ease-in-out;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  }
  
  /* Show sidebar when toggled */
  .container-sidebar-left.show {
    left: 0;
  }
  
  /* Overlay when sidebar is open */
  body.sidebar-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1030;
  }
  
  /* Hamburger active state (X icon) */
  .navbar-toggler.active .navbar-toggler-icon {
    background-image: url(\data:image/svg+xml d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\");
 background-repeat: no-repeat;
 background-position: center;
 background-size: 100%;
}

/* Show hamburger on mobile/tablet only */
@media (max-width: 991px) {
 .navbar-toggler {
 display: block;
 }
 
 /* Hide sidebar by default on mobile */
 .container-sidebar-left {
 position: fixed;
 top: 0;
 left: -100%;
 width: 80%;
 max-width: 300px;
 height: 100vh;
 background: white;
 z-index: 1040;
 overflow-y: auto;
 transition: left 0.3s ease-in-out;
 box-shadow: 2px 0 10px rgba(0,0,0,0.1);
 }
 
 /* Show sidebar when toggled */
 .container-sidebar-left.show {
 left: 0;
 }
 
 /* Overlay when sidebar is open */
 body.sidebar-open::before {
 content: '';
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0, 0, 0, 0.5);
 z-index: 1030;
 }
 
 /* Hamburger active state (X icon) */
 .navbar-toggler.active .navbar-toggler-icon {
 background-image: url(\"data:image/svg+xml,%3csvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 30 30%3e%3cpath stroke=rgba(0, 131, 203, 1) stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d=M6 6l18 18M6 24L24 6/%3e%3c/svg%3e\);
  }
}

/* Desktop: hide hamburger, show sidebar normally */
@media (min-width: 992px) {
  .navbar-toggler {
    display: none !important;
  }
  
  .container-sidebar-left {
    position: static;
    width: auto;
    height: auto;
    box-shadow: none;
  }
}