/* Retter-Portal v1.3.30
   Verhindert jede Überlagerung zwischen Sidebar und Hauptbereich.
   Sidebar und Main verwenden auf Desktop dieselbe feste Layout-Quelle. */

:root{
  --rp30-sidebar-expanded:286px;
  --rp30-sidebar-collapsed:88px;
}

@media(min-width:1101px){
  html body .app-shell{
    display:block!important;
    min-height:100vh!important;
    grid-template-columns:none!important;
  }

  html body .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    z-index:100!important;
    width:var(--rp30-sidebar-expanded)!important;
    min-width:var(--rp30-sidebar-expanded)!important;
    max-width:var(--rp30-sidebar-expanded)!important;
    height:100vh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    transform:none!important;
    transition:width .22s ease,min-width .22s ease,max-width .22s ease,padding .22s ease!important;
  }

  html body .main{
    position:relative!important;
    display:block!important;
    min-width:0!important;
    width:calc(100% - var(--rp30-sidebar-expanded))!important;
    max-width:none!important;
    margin:0 0 0 var(--rp30-sidebar-expanded)!important;
    padding:0!important;
    overflow:visible!important;
    transition:width .22s ease,margin-left .22s ease!important;
  }

  html body.sidebar-collapsed .sidebar{
    width:var(--rp30-sidebar-collapsed)!important;
    min-width:var(--rp30-sidebar-collapsed)!important;
    max-width:var(--rp30-sidebar-collapsed)!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  html body.sidebar-collapsed .main{
    width:calc(100% - var(--rp30-sidebar-collapsed))!important;
    margin-left:var(--rp30-sidebar-collapsed)!important;
  }

  html body .app-shell--navigation-disabled .main,
  html body.sidebar-collapsed .app-shell--navigation-disabled .main{
    width:100%!important;
    margin-left:0!important;
  }

  html body .topbar,
  html body .content,
  html body .v138-system-banners,
  html body .dev-impersonation-banner{
    max-width:100%!important;
    min-width:0!important;
  }

  html body .content{
    overflow-x:hidden!important;
  }

  html body.sidebar-collapsed .sidebar-brand-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    gap:8px!important;
  }

  html body.sidebar-collapsed .sidebar .brand{
    width:100%!important;
    min-width:0!important;
    justify-content:center!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  html body.sidebar-collapsed .sidebar-collapse-toggle{
    margin:0 auto!important;
  }

  html body.sidebar-collapsed .sidebar nav a.sidebar-nav-link{
    width:100%!important;
    max-width:100%!important;
    justify-content:center!important;
  }
}

@media(max-width:1100px){
  html body .app-shell{
    display:block!important;
    grid-template-columns:none!important;
  }

  html body .main,
  html body.sidebar-collapsed .main{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
  }

  html body.sidebar-collapsed .sidebar{
    width:min(91vw,318px)!important;
    min-width:min(91vw,318px)!important;
    max-width:min(91vw,318px)!important;
  }
}