/* Retter-Portal v1.3.63
   Header und Rollen-Badges für Tablet/Mobil ausbalanciert. */

/* Feuerwehr-Auswahl am Desktop bewusst kompakter halten. */
@media (min-width:761px){
  html body .topbar .topbar-desktop-shell{
    min-width:0!important;
  }
  html body .topbar .topbar-context{
    width:100%!important;
    min-width:0!important;
    max-width:430px!important;
    justify-self:start!important;
    overflow:visible!important;
  }
  html body .topbar .department-context-switch,
  html body .topbar .department-context-static,
  html body .topbar.has-department-switch .department-context-switch{
    width:100%!important;
    min-width:0!important;
    max-width:430px!important;
    flex:0 1 430px!important;
  }
  html body .topbar .department-context-switch select,
  html body .topbar .department-context-static strong{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  /* Rollenbezeichnungen dürfen sich nach ihrem Inhalt richten. */
  html body .topbar .topbar-role-badge{
    flex:0 0 auto!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
  }
  html body .topbar .topbar-account-info{
    grid-template-columns:max-content minmax(0,1fr)!important;
    min-width:0!important;
    overflow:visible!important;
  }
  html body .topbar .user-chip,
  html body .topbar .user-chip.has-role-badge{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  html body .topbar .topbar-logout,
  html body .topbar .topbar-logout .btn{
    flex:0 0 auto!important;
    visibility:visible!important;
    opacity:1!important;
  }
}

/* Kleine/mittlere Tablets mit sichtbarer Sidebar: Header auf zwei ruhige Zeilen verteilen.
   Dadurch bleibt Logout vollständig sichtbar und die Feuerwehr-Auswahl verdrängt nichts. */
@media (min-width:861px) and (max-width:1039px){
  html body .topbar .topbar-desktop-shell{
    display:grid!important;
    grid-template-columns:minmax(135px,auto) minmax(0,1fr)!important;
    grid-template-areas:
      "brand actions"
      "context context"!important;
    align-items:center!important;
    gap:8px 12px!important;
    width:100%!important;
    padding:8px 10px 10px!important;
    overflow:visible!important;
  }
  html body .topbar .topbar-title{
    grid-area:brand!important;
    min-width:0!important;
  }
  html body .topbar .topbar-actions{
    grid-area:actions!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    overflow:visible!important;
  }
  html body .topbar .topbar-context{
    grid-area:context!important;
    width:min(100%,390px)!important;
    max-width:390px!important;
  }
  html body .topbar .department-context-switch,
  html body .topbar .department-context-static,
  html body .topbar.has-department-switch .department-context-switch{
    max-width:390px!important;
  }
  html body .topbar .topbar-user-cluster{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    min-width:0!important;
    max-width:none!important;
    overflow:visible!important;
  }
  html body .topbar .topbar-account-info{
    display:grid!important;
    grid-template-columns:max-content minmax(56px,94px)!important;
    max-width:220px!important;
    gap:5px!important;
    overflow:visible!important;
  }
  html body .topbar .topbar-role-badge{
    min-height:27px!important;
    padding:4px 7px!important;
    font-size:.52rem!important;
  }
  html body .topbar .user-chip,
  html body .topbar .user-chip.has-role-badge{
    max-width:94px!important;
    font-size:.7rem!important;
  }
  html body .topbar .topbar-logout .btn{
    min-width:62px!important;
    padding-inline:8px!important;
  }
}

/* Normale Tablet-Landschaft kompakt in einer Zeile. */
@media (min-width:1040px) and (max-width:1180px){
  html body .topbar .topbar-desktop-shell{
    display:grid!important;
    grid-template-columns:minmax(135px,165px) minmax(260px,370px) minmax(360px,1fr)!important;
    grid-template-areas:"brand context actions"!important;
    align-items:center!important;
    gap:8px 10px!important;
    padding:8px 11px!important;
    overflow:visible!important;
  }
  html body .topbar .topbar-context,
  html body .topbar .department-context-switch,
  html body .topbar .department-context-static,
  html body .topbar.has-department-switch .department-context-switch{
    max-width:370px!important;
  }
  html body .topbar .topbar-actions,
  html body .topbar .topbar-user-cluster{
    overflow:visible!important;
  }
  html body .topbar .topbar-account-info{
    max-width:225px!important;
  }
  html body .topbar .topbar-role-badge{
    padding-inline:7px!important;
    font-size:.53rem!important;
  }
  html body .topbar .user-chip,
  html body .topbar .user-chip.has-role-badge{
    max-width:96px!important;
  }
}

/* Große Touch-Tablets/iPad Landscape: Feuerwehr kompakter, Account und Logout geschützt. */
@media (min-width:1181px) and (max-width:1366px) and (hover:none) and (pointer:coarse){
  html body .topbar .topbar-desktop-shell{
    grid-template-columns:minmax(125px,155px) minmax(280px,390px) minmax(390px,1fr)!important;
    overflow:visible!important;
  }
  html body .topbar .topbar-context,
  html body .topbar .department-context-switch,
  html body .topbar .department-context-static,
  html body .topbar.has-department-switch .department-context-switch{
    max-width:390px!important;
  }
  html body .topbar .topbar-actions,
  html body .topbar .topbar-user-cluster,
  html body .topbar .topbar-account-info{
    overflow:visible!important;
  }
  html body .topbar .topbar-account-info{
    max-width:250px!important;
  }
  html body .topbar .topbar-role-badge{
    padding:4px 8px!important;
    font-size:.54rem!important;
  }
  html body .topbar .user-chip,
  html body .topbar .user-chip.has-role-badge{
    max-width:108px!important;
  }
}

/* Smartphone: Betreiber, Support-Team und Administrator immer vollständig darstellen.
   Der Benutzername kürzt sich zuerst, nicht die Rolle. */
@media (max-width:760px){
  html body .topbar .rp-mobile-header__bottom,
  html body .app-shell .main > .topbar .rp-mobile-header__bottom{
    grid-template-columns:118px minmax(0,1fr)!important;
    gap:8px!important;
  }
  html body .topbar .rp-mobile-header__account,
  html body .app-shell .main > .topbar .rp-mobile-header__account{
    display:grid!important;
    grid-template-columns:max-content minmax(0,1fr)!important;
    gap:7px!important;
    min-width:0!important;
    padding-inline:7px!important;
    overflow:hidden!important;
  }
  html body .topbar .rp-mobile-header__account .topbar-role-badge,
  html body .app-shell .main > .topbar .rp-mobile-header__account .topbar-role-badge{
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    padding:0 8px!important;
    font-size:.56rem!important;
    letter-spacing:.055em!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
  }
  html body .topbar .rp-mobile-header__name{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}

@media (max-width:390px){
  html body .topbar .rp-mobile-header__bottom,
  html body .app-shell .main > .topbar .rp-mobile-header__bottom{
    grid-template-columns:108px minmax(0,1fr)!important;
    gap:6px!important;
  }
  html body .topbar .rp-mobile-header__theme,
  html body .app-shell .main > .topbar form.rp-mobile-header__theme{
    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
  }
  html body .topbar .rp-mobile-header__account,
  html body .app-shell .main > .topbar .rp-mobile-header__account{
    gap:5px!important;
    padding-inline:5px!important;
  }
  html body .topbar .rp-mobile-header__account .topbar-role-badge,
  html body .app-shell .main > .topbar .rp-mobile-header__account .topbar-role-badge{
    padding-inline:6px!important;
    font-size:.51rem!important;
    letter-spacing:.035em!important;
  }
  html body .topbar .rp-mobile-header__name{
    font-size:.72rem!important;
  }
}