/* ServiceHub Redesign - Mobile Topbar-Fix (Breakpoint <=768px).
   Problem: die rechte Aktionsgruppe (Benachrichtigungen, KI, Mein Cockpit,
   Mein Konto, Logout) ist breiter als der Viewport -> sie laeuft ueber den Rand
   und quetscht den Hamburger zusammen. Hier rein optisch: Hamburger bleibt fix
   und klickbar, die Topbar sprengt die Seite nicht mehr, die rechte Gruppe wird
   kompakter und ist (falls noetig) intern horizontal scrollbar -> NICHTS wird
   versteckt, alle Buttons bleiben erreichbar + klickbar. Light + Dark neutral. */

@media (max-width: 768px) {
  /* Hamburger/linke Seite nie wegquetschen */
  #topbar.topbar .topbar-left {
    flex: 0 0 auto;
    min-width: auto;
  }

  /* Topbar darf die Seite nicht horizontal sprengen */
  #topbar.topbar {
    overflow: hidden;
    gap: 4px;
  }

  /* rechte Aktionsgruppe: schrumpfbar + intern scrollbar statt Ueberlauf */
  #topbar.topbar .topbar-right {
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-end;
  }
  #topbar.topbar .topbar-right::-webkit-scrollbar { display: none; }

  /* Buttons in der Topbar kompakter (verhindert das Wegquetschen) */
  #topbar.topbar .topbar-right > .btn {
    flex: 0 0 auto;
    padding: 7px 11px;
    font-size: 12.5px;
    white-space: nowrap;
  }
  #topbar.topbar .topbar-right .notifications-btn,
  #topbar.topbar .topbar-right .icon-btn {
    flex: 0 0 auto;
  }
}