/* =========================================================================
   sh-topbar-tidy.css — Topbar entrümpeln
   -------------------------------------------------------------------------
   ADDITIV, lädt NACH sh-skin-topbar.css. Räumt die überladene .topbar-right
   auf: die nachträglich injizierten/redundanten Buttons (🧭 Mein Cockpit,
   👤 Mein Konto, Logout) wandern per sh-topbar-tidy.js in EIN Benutzer-Menü.
   Diese Datei stylt nur das Chip + Dropdown + Abstände. Dark-Bar-konform
   (#231c17), tokenfrei wo nötig, damit in Hell+Dark identisch lesbar.
   ========================================================================= */

/* Theme-Umschalt-Flash unterdrücken: während des Hell↔Dunkel-Wechsels (Klasse von
   sh-topbar-tidy.js für ~2 Frames gesetzt) ALLE Transitions/Animationen aussetzen,
   sonst animieren z. B. die Positionszeilen (.pte-row transition:background) sichtbar
   von hell→dunkel und wirken kurz wie weiße Striche/Bänder. */
html.sh-theme-switching, html.sh-theme-switching * {
  transition: none !important;
  animation: none !important;
}

/* Abstände der rechten Leiste vereinheitlichen + nichts mehr abschneiden:
   die Suche schrumpft, statt dass Buttons aus dem Bild laufen. */
#topbar .topbar-right { gap: 6px; flex-wrap: nowrap; }
#topbar .topbar-left { min-width: 0; }
#topbar .global-search-wrap { min-width: 0; }

/* Glocken etwas dichter gruppieren (zusammengehörig wirken) */
#topbar .topbar-right .notifications-wrap + .notifications-wrap { margin-left: -2px; }

/* ---- Farbkorrektur: helle Controls auf der dunklen Bar ------------------- */
/* Eine Shell-Regel (.sh-redesign .btn-ghost{background:var(--surface)}) malt die
   Glocken/KI HELL (cremefarben) auf die dunkle Topbar. #topbar .btn-ghost
   (id+class) schlägt sie auf Spezifität → transparent, damit nur das Icon zählt. */
#topbar .topbar-right .btn-ghost,
#topbar .topbar-right .notifications-btn {
  background: transparent;
}
#topbar .topbar-right .btn-ghost:hover,
#topbar .topbar-right .notifications-btn:hover {
  background: rgba(255, 255, 255, .10);
}
/* „Einfach|Erweitert"-Pille (sh-simplify) ist standardmäßig WEISS → auf der
   dunklen Bar als translucentes Dunkel führen; aktiv = Markenrot statt Lila. */
#topbar .sh-vmode {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
}
#topbar .sh-vmode__btn { color: rgba(255, 255, 255, .74); }
#topbar .sh-vmode__btn.is-active { background: var(--sh-brand, #E73D25); color: #fff; }
#topbar .sh-vmode__btn:not(.is-active):hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---- Benutzer-Chip (Trigger) -------------------------------------------- */
#topbar .sh-tbuser {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 6px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  color: #fff;
  height: 38px;
}
#topbar .sh-tbuser:hover { background: rgba(255, 255, 255, .08); }
#topbar .sh-tbuser.is-open { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); }
#topbar .sh-tbuser .user-box { text-align: right; line-height: 1.15; }
/* Avatar mit Initiale */
#topbar .sh-tbuser__avatar {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sh-brand, #E73D25);
  color: #fff; font-weight: 700; font-size: .82rem;
  text-transform: uppercase;
}
#topbar .sh-tbuser__caret { flex: 0 0 auto; opacity: .65; transition: transform .15s ease; }
#topbar .sh-tbuser.is-open .sh-tbuser__caret { transform: rotate(180deg); opacity: .9; }

/* ---- Dropdown ----------------------------------------------------------- */
#topbar .sh-tbuser__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  background: #2b221b;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
  padding: 6px;
  z-index: 1200;
}
#topbar .sh-tbuser__menu[hidden] { display: none; }
#topbar .sh-tbuser__theme { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .10); }
#topbar .sh-tbuser__foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .10); }
/* Theme-Umschalter zeigt den AKTUELLEN Modus rechts als dezenten Hinweis */
#topbar .sh-tbuser__theme .sh-tbtheme__state { margin-left: auto; font-size: .72rem; opacity: .6; }

/* Die verschobenen Buttons als volle Menü-Zeilen umstylen (waren .btn .btn-ghost) */
#topbar .sh-tbuser__menu .btn,
#topbar .sh-tbuser__menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  border: none !important;
  background: transparent !important;
  color: rgba(255, 255, 255, .92) !important;
  padding: 9px 10px;
  border-radius: 8px;
  font: inherit;
  font-size: .86rem;
  height: auto;
  cursor: pointer;
}
#topbar .sh-tbuser__menu .btn:hover,
#topbar .sh-tbuser__menu button:hover {
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
}
#topbar .sh-tbuser__foot #logoutBtn { color: #ffb4a6 !important; }
#topbar .sh-tbuser__foot #logoutBtn:hover { background: rgba(231, 61, 37, .18) !important; color: #fff !important; }

/* ---- Schmale Fenster: Name ausblenden, nur Avatar zeigen ---------------- */
@media (max-width: 1100px) {
  #topbar .sh-tbuser .user-box { display: none; }
}