/* Retter-Portal v1.3.78
   Tablet mit eingeklappter Sidebar: Benutzername erhält eine feste, ausreichend
   breite Zone. Die bereits passende ausgeklappte Tablet-Ansicht bleibt unberührt. */

@media (min-width:1230px) and (max-width:1400px){
  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-user-cluster{
    flex:0 0 auto!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    overflow:visible!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-account-info,
  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-account-info.has-role{
    flex:0 0 auto!important;
    grid-template-columns:max-content minmax(132px,160px)!important;
    width:auto!important;
    min-width:0!important;
    max-width:292px!important;
    overflow:hidden!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .user-chip,
  html body.sidebar-collapsed .app-shell .main > .topbar .user-chip.has-role-badge{
    width:100%!important;
    min-width:132px!important;
    max-width:160px!important;
    padding-inline:2px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}

/* Auf etwas schmaleren Tablets bleibt der Name ebenfalls lesbar, ohne die
   Feuerwehr-Auswahl oder Logout zu verdrängen. */
@media (min-width:1101px) and (max-width:1229px){
  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-account-info,
  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-account-info.has-role{
    grid-template-columns:max-content minmax(104px,132px)!important;
    max-width:258px!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .user-chip,
  html body.sidebar-collapsed .app-shell .main > .topbar .user-chip.has-role-badge{
    min-width:104px!important;
    max-width:132px!important;
  }
}