/* Retter-Portal v1.3.76
   Tablet-Header bei eingeklappter Sidebar stabilisiert.
   Die ausgeklappte Tablet-Ansicht aus v1.3.75 bleibt unverändert. */

@media (min-width:1101px) and (max-width:1400px){
  html body.sidebar-collapsed .app-shell .main > .topbar{
    display:block!important;
    width:100%!important;
    height:72px!important;
    min-height:72px!important;
    max-height:72px!important;
    padding:0!important;
    overflow:hidden!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-desktop-shell{
    display:grid!important;
    grid-template-columns:190px minmax(280px,1fr) max-content!important;
    grid-template-areas:"brand context actions"!important;
    align-items:center!important;
    column-gap:12px!important;
    row-gap:0!important;
    width:100%!important;
    min-width:0!important;
    height:72px!important;
    min-height:72px!important;
    max-height:72px!important;
    margin:0!important;
    padding:10px 14px!important;
    overflow:hidden!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar.is-developer-organization .topbar-desktop-shell{
    grid-template-columns:310px minmax(240px,1fr) max-content!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-tablet-menu{
    display:none!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-title{
    grid-area:brand!important;
    position:static!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:42px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-product,
  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-eyebrow{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-eyebrow{
    color:var(--muted-2)!important;
    font-size:.65rem!important;
    line-height:1!important;
    font-weight:950!important;
    letter-spacing:.10em!important;
    text-transform:uppercase!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-eyebrow > span:first-child{
    display:inline!important;
    flex:0 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-version{
    display:inline-grid!important;
    place-items:center!important;
    flex:0 0 auto!important;
    min-width:54px!important;
    height:28px!important;
    min-height:28px!important;
    padding:0 8px!important;
    border:1px solid var(--line)!important;
    border-radius:999px!important;
    background:var(--surface)!important;
    color:var(--text)!important;
    box-shadow:var(--shadow-sm)!important;
    font-size:.61rem!important;
    line-height:1!important;
    font-weight:950!important;
    letter-spacing:.025em!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .dev-organization-chip{
    display:inline-grid!important;
    place-items:center!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
    max-width:none!important;
    height:28px!important;
    min-height:28px!important;
    margin:0!important;
    padding:0 9px!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
    font-size:.50rem!important;
    line-height:1!important;
    letter-spacing:.055em!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-context{
    grid-area:context!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:42px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!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{
    display:grid!important;
    grid-template-columns:66px minmax(0,1fr)!important;
    align-items:center!important;
    gap:6px!important;
    width:min(100%,420px)!important;
    min-width:0!important;
    max-width:420px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    margin:0!important;
    padding:4px 5px 4px 10px!important;
    border:1px solid var(--line)!important;
    border-radius:14px!important;
    background:var(--surface)!important;
    box-shadow:var(--shadow-sm)!important;
    overflow:hidden!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .department-context-switch > span,
  html body.sidebar-collapsed .app-shell .main > .topbar .department-context-static > span{
    position:static!important;
    display:block!important;
    width:auto!important;
    min-width:0!important;
    max-width:66px!important;
    margin:0!important;
    padding:0!important;
    color:var(--muted-2)!important;
    font-size:.52rem!important;
    line-height:1!important;
    font-weight:950!important;
    letter-spacing:.10em!important;
    text-transform:uppercase!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!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{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:32px!important;
    min-height:32px!important;
    margin:0!important;
    padding:0 28px 0 10px!important;
    border:0!important;
    border-radius:10px!important;
    background:var(--surface-2)!important;
    color:var(--text)!important;
    box-shadow:none!important;
    font-size:.78rem!important;
    line-height:32px!important;
    font-weight:900!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .department-context-static strong{
    padding-right:10px!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-actions{
    grid-area:actions!important;
    position:static!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    width:max-content!important;
    min-width:0!important;
    max-width:none!important;
    height:42px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:visible!important;
    white-space:nowrap!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .theme-switch{
    display:grid!important;
    grid-template-columns:24px 24px 40px!important;
    align-items:center!important;
    gap:1px!important;
    flex:0 0 95px!important;
    width:95px!important;
    min-width:95px!important;
    max-width:95px!important;
    height:36px!important;
    min-height:36px!important;
    margin:0!important;
    padding:3px!important;
    border:1px solid var(--line)!important;
    border-radius:999px!important;
    background:var(--surface)!important;
    box-shadow:var(--shadow-sm)!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .theme-switch .theme-dot{
    display:grid!important;
    place-items:center!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:28px!important;
    min-height:28px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:999px!important;
    font-size:.60rem!important;
    line-height:1!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:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!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{
    display:grid!important;
    grid-template-columns:max-content minmax(92px,150px)!important;
    align-items:center!important;
    gap:7px!important;
    width:auto!important;
    min-width:0!important;
    max-width:270px!important;
    min-height:36px!important;
    margin:0!important;
    padding:3px 7px!important;
    border:1px solid var(--line)!important;
    border-radius:14px!important;
    background:var(--surface)!important;
    box-shadow:var(--shadow-sm)!important;
    overflow:hidden!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-role-badge{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    min-height:28px!important;
    margin:0!important;
    padding:5px 9px!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
    font-size:.54rem!important;
    line-height:1!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;
    width:100%!important;
    min-width:0!important;
    max-width:150px!important;
    margin:0!important;
    padding:0 2px!important;
    border:0!important;
    background:transparent!important;
    color:var(--text)!important;
    font-size:.74rem!important;
    line-height:1.15!important;
    font-weight:850!important;
    text-align:left!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-logout,
  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-logout .btn{
    display:block!important;
    flex:0 0 auto!important;
    visibility:visible!important;
    opacity:1!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-logout .btn{
    min-width:76px!important;
    width:auto!important;
    height:36px!important;
    min-height:36px!important;
    margin:0!important;
    padding:0 12px!important;
    border-radius:12px!important;
    font-size:.72rem!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
}

/* Bei sehr schmaler Restbreite bleibt die Feuerwehr-Auswahl flexibel,
   ohne in Produktname oder Aktionen hineinzulaufen. */
@media (min-width:1101px) and (max-width:1220px){
  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-desktop-shell{
    grid-template-columns:184px minmax(230px,1fr) max-content!important;
    column-gap:9px!important;
    padding-inline:11px!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar.is-developer-organization .topbar-desktop-shell{
    grid-template-columns:286px minmax(205px,1fr) max-content!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{
    max-width:360px!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{
    grid-template-columns:max-content minmax(70px,112px)!important;
    max-width:232px!important;
  }

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