/* Flinapp CMS V5.1.30 — true viewport-centered Admin pages */
:root{
  --fx-page-width:1180px;
  --fx-page-gutter:clamp(14px,2vw,28px);
}
html,body{width:100%;max-width:100%;overflow-x:hidden}

/* Desktop: sidebar is an overlay/fixed navigation. It must NOT consume a grid
   column, otherwise the page center is shifted to the right/left visually. */
@media(min-width:1101px){
  .shell{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }
  .sidebar{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
    z-index:10050!important;
  }
  .main{
    display:block!important;
    position:relative!important;
    grid-column:auto!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:24px var(--fx-page-gutter) 56px!important;
    box-sizing:border-box!important;
  }
  .main>.topbar,
  .main>.admin-section{
    display:block;
    width:min(var(--fx-page-width),calc(100vw - (var(--fx-page-gutter) * 2)))!important;
    max-width:var(--fx-page-width)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
  .main>.admin-section{
    padding-left:0!important;
    padding-right:0!important;
  }
}

/* Drawer/tablet/mobile: closing the menu always restores the exact same
   centered page geometry. */
@media(max-width:1100px){
  .shell{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  .main{
    position:relative!important;
    left:0!important;
    right:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:18px var(--fx-page-gutter) 48px!important;
    box-sizing:border-box!important;
  }
  .main>.topbar,
  .main>.admin-section{
    width:min(var(--fx-page-width),100%)!important;
    max-width:var(--fx-page-width)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
}
@media(max-width:700px){
  .main{padding-left:10px!important;padding-right:10px!important}
  .main>.topbar,.main>.admin-section{width:100%!important}
}

/* Never let an old menu state leave the page translated. */
body.sidebar-open .main,body.menu-open .main,body.nav-open .main,
body.mobile-menu-open .main,body.drawer-open .main,
.shell.sidebar-open .main,.main.menu-open,.main.sidebar-open{
  left:0!important;
  transform:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
@media(min-width:701px){
  body.sidebar-open .main>.topbar,body.sidebar-open .main>.admin-section,
  body.menu-open .main>.topbar,body.menu-open .main>.admin-section,
  body.nav-open .main>.topbar,body.nav-open .main>.admin-section,
  body.mobile-menu-open .main>.topbar,body.mobile-menu-open .main>.admin-section,
  body.drawer-open .main>.topbar,body.drawer-open .main>.admin-section{
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* All section roots fill the centered page, not the browser viewport. */
.admin-section>*,
#overview>*,#settings>*,#page-designer>*,#users>*,#packages>*,
#payments>*,#notifications>*,#builds>*,#addons>*,#cms-update>*,
#apk-builder-setup>*,#maintenance>*{
  max-width:100%!important;
  box-sizing:border-box!important;
}