/* ITAG - Mobile responsive common styles (burger + sidebar slide-in) */
/* Works for all 5 apps (lms/admin/formateur/directeur/b2b) */

.burger-btn {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--ui-text, #1f2937);
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-right: 8px;
}
.burger-btn:hover { background: rgba(0,0,0,.06); }

@media (max-width: 768px) {
  .burger-btn { display: inline-flex !important; }

  .sidebar,
  .sb {
    position: fixed !important;
    top: 0; left: 0;
    height: 100vh !important;
    z-index: 1000 !important;
    transform: translateX(-100%);
    transition: transform .25s ease;
    width: 280px !important;
    max-width: 85vw !important;
    overflow-y: auto;
    display: flex !important;
  }

  body.sidebar-open .sidebar,
  body.sidebar-open .sb {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0,0,0,.2);
  }

  body.sidebar-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 999;
  }

  .main-area, .main, .content-area {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
  }
}