/* assets/50_mobile_sidebar.css

   GETICK — Mobile sidebar behavior

*/



@media (max-width: 992px){



  /* Sidebar = overlay drawer */

  .sidebar{

    position: fixed;

    top: 0;

    bottom: 0;

    left: 0;



    width: min(86vw, 320px);

    padding: 78px 14px 24px 14px;



    transform: translateX(-110%);

    transition: transform .22s ease;



    z-index: 99990;

  }



  /* Content full width */

  .content{

    margin-left: 0 !important;

  }



  /* Topbar full width */

  .topbar{

    left: 0 !important;

  }



  /* OPEN state (your hamburger toggles .collapsed) */

  .app-shell.collapsed .sidebar{

    transform: translateX(0);

  }



  /* Keep hamburger above sidebar */

  .hamburger{

    z-index: 99999 !important;

  }



  /* Move hamburger when menu is open so it stays visible */

  .app-shell.collapsed .hamburger{

    left: calc(min(86vw, 320px) + 10px) !important;

  }



  /* Prevent body scroll when menu open */

  .app-shell.collapsed{

    overflow: hidden;

  }

}



/* ===== Extra compact sizing for phones ===== */

@media (max-width: 600px){



  /* Slightly smaller UI scale */

  :root{ --ui-scale: 0.78; }



  .nav-pills .nav-link{

    padding: 8px 10px !important;

    font-size: 13px !important;

  }



  .sidebar .nav-l2-link.nav-link{

    padding: 6px 10px 6px 18px !important;

    font-size: 12.5px !important;

  }



  .sidebar{

    padding: 70px 12px 18px 12px !important;

  }



  .topbar-title{ font-size: 18px !important; }

  .brand-logo{ font-size: 22px !important; }

}