/* My Family v2.5.0-r1 — desktop sidebar track/width synchronization hotfix.
   Loaded after app.css, v2423-responsive.css and v2424-desktop.css. */
@media (min-width:901px){
  html,body,#app{
    min-width:0!important;
    max-width:100%!important;
    overflow-x:clip!important;
  }

  body .app-shell,
  body .app-shell.sidebar-collapsed{
    display:grid!important;
    align-items:start!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  /* Expanded track and actual sidebar now use exactly the same width. */
  body .app-shell:not(.sidebar-collapsed){
    grid-template-columns:clamp(238px,15vw,282px) minmax(0,1fr)!important;
  }

  /* Collapsed track and actual sidebar also stay synchronized. */
  body .app-shell.sidebar-collapsed{
    grid-template-columns:92px minmax(0,1fr)!important;
  }

  body .app-shell>.sidebar,
  body .app-shell.sidebar-collapsed>.sidebar{
    grid-column:1!important;
    grid-row:1!important;
    box-sizing:border-box!important;
    position:sticky!important;
    inset:auto!important;
    top:0!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:100dvh!important;
    transform:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    z-index:20!important;
  }

  body .app-shell>.content,
  body .app-shell>.content.app-main,
  body .app-shell.sidebar-collapsed>.content,
  body .app-shell.sidebar-collapsed>.content.app-main{
    grid-column:2!important;
    grid-row:1!important;
    box-sizing:border-box!important;
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    z-index:1!important;
  }

  /* Long role labels/brand text must shrink inside the grid track, never widen it. */
  body .sidebar .sidebar-top,
  body .sidebar .brand,
  body .sidebar .wordmark,
  body .sidebar .side-menu,
  body .sidebar .side-menu button{
    min-width:0!important;
    max-width:100%!important;
  }
  body .sidebar .wordmark{
    overflow:hidden!important;
    text-overflow:ellipsis;
  }
}