/* Mobile sidebar toggle styles */

/* Mobile: Hide toggle button and backdrop by default on desktop */
@media (width >= 768px) {
  .sidebar-toggle-btn,
  .sidebar-backdrop {
    display: none !important;
  }
}

/* Mobile: Sidebar positioning and animation */
@media (width < 768px) {
  .mobile-sidebar {
    transform: translateX(-100%);
    top: 0;
    bottom: 0;
  }
  
  .sidebar-backdrop {
    display: none;
    top: 0;
  }
  
  .sidebar-toggle-btn {
    transition: left 0.3s ease-in-out, background-color 0.3s ease-in-out;
  }

  /* Icon visibility - show hamburger by default, hide X */
  .sidebar-toggle-btn .hamburger-icon {
    display: block;
  }
  
  .sidebar-toggle-btn .close-icon {
    display: none;
  }
  
  /* Show sidebar and backdrop when checkbox is checked */
  #mobile-sidebar-toggle:checked ~ .mobile-sidebar {
    transform: translateX(0);
  }
  
  #mobile-sidebar-toggle:checked ~ .sidebar-backdrop {
    display: block;
  }
  
  /* Move button to the right and change color when sidebar is open */
  #mobile-sidebar-toggle:checked ~ .sidebar-toggle-btn {
    left: 7rem; /* 4rem sidebar width + 1rem gap */
    background-color: #dc2626;
  }
  
  #mobile-sidebar-toggle:checked ~ .sidebar-toggle-btn:hover {
    background-color: #b91c1c;
  }

  /* Icon visibility when checked - hide hamburger, show X */
  #mobile-sidebar-toggle:checked ~ .sidebar-toggle-btn .hamburger-icon {
    display: none;
  }
  
  #mobile-sidebar-toggle:checked ~ .sidebar-toggle-btn .close-icon {
    display: block;
  }
}