/* ================================================
   OFF-CANVAS SIDEBAR: MOBILE + TABLET (VERTICAL LAYOUT)
   Uses ONLY existing JS behaviour:
   - Mobile (<=767px): body.vertical-sidebar-enable (original)
   - Tablet (768–1024px): html[data-sidebar-size] toggled by burger
   =================================================== */

/* ---------- MOBILE: <= 767px ---------- */
@media (max-width: 767.98px) {
  html[data-layout="vertical"] body .app-menu.navbar-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 80%;
    background-color: #020617; /* deep navy / dark mode feel */
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1040;
  }

  /* Open when original JS adds body.vertical-sidebar-enable */
  html[data-layout="vertical"] body.vertical-sidebar-enable .app-menu.navbar-menu {
    transform: translateX(0);
  }

  /* Overlay for mobile */
  html[data-layout="vertical"] body .vertical-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1035;
  }

  html[data-layout="vertical"] body.vertical-sidebar-enable .vertical-overlay {
    opacity: 1;
    visibility: visible;
  }
}

/* ---------- TABLET: 768px – 1024px ---------- */
/* Here original app.js toggles html[data-sidebar-size] between "" and "sm"
   on burger click. We hook into that:

   - html[data-sidebar-size="sm"]  => CLOSED (off canvas)
   - html[data-sidebar-size=""]    => OPEN (visible + overlay)
*/
@media (min-width: 768px) and (max-width: 1024.98px) {
  html[data-layout="vertical"] body .app-menu.navbar-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 80%;
    background-color: #020617;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1040;
  }

  /* When sidebar-size is empty string => treat as OPEN */
  html[data-layout="vertical"][data-sidebar-size=""] body .app-menu.navbar-menu {
    transform: translateX(0);
  }

  /* Overlay for tablet */
  html[data-layout="vertical"] body .vertical-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1035;
  }

  html[data-layout="vertical"][data-sidebar-size=""] body .vertical-overlay {
    opacity: 1;
    visibility: visible;
  }
}