/* Retter-Portal v1.3.79
   Nur Tablet + eingeklappte Sidebar:
   Feuerwehr-Auswahl und Kontobereich exakt auf einer Mittelachse ausrichten,
   Rollen-Badge und Benutzername ohne unnötigen Leerraum darstellen. */

@media (min-width:1101px) and (max-width:1400px){
  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-desktop-shell{
    align-items:center!important;
  }

  /* Beim Einklappen darf die Feuerwehr-Auswahl nicht um wenige Pixel nach oben springen. */
  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-context{
    align-self:center!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .department-context-switch,
  html body.sidebar-collapsed .app-shell .main > .topbar .department-context-static,
  html body.sidebar-collapsed .app-shell .main > .topbar.has-department-switch .department-context-switch{
    align-self:center!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    padding:3px 5px 3px 10px!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .department-context-switch select,
  html body.sidebar-collapsed .app-shell .main > .topbar .department-context-static strong{
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    line-height:32px!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-actions,
  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-user-cluster{
    align-self:center!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-user-cluster{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    overflow:visible!important;
  }

  /* Der bisherige flexible Grid-Track erzeugte links im Benutzerfeld sichtbaren
     Leerraum. Rolle und Name erhalten jetzt zwei klare, kompakte Zonen. */
  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-account-info,
  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-account-info.has-role{
    display:grid!important;
    grid-template-columns:max-content 136px!important;
    align-items:center!important;
    justify-content:start!important;
    justify-items:start!important;
    gap:7px!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    margin:0!important;
    padding:4px 7px!important;
    overflow:hidden!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-account-info.name-only{
    display:flex!important;
    align-items:center!important;
    width:max-content!important;
    min-width:0!important;
    max-width:180px!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-role-badge{
    align-self:center!important;
    justify-self:start!important;
    flex:0 0 auto!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .user-chip,
  html body.sidebar-collapsed .app-shell .main > .topbar .user-chip.has-role-badge{
    display:block!important;
    align-self:center!important;
    justify-self:start!important;
    width:136px!important;
    min-width:136px!important;
    max-width:136px!important;
    padding:0!important;
    line-height:1.15!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-account-info.name-only .user-chip{
    width:auto!important;
    min-width:0!important;
    max-width:168px!important;
  }
}

/* Auf den schmaleren Tabletbreiten bleibt der Name ausreichend lesbar,
   ohne 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 112px!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:112px!important;
    min-width:112px!important;
    max-width:112px!important;
  }
}