/*
============================================================
Club OS Studio
Datei: topbar.css
Zweck: Studio-Kopfzeile
Phase: 13.3 - Studio Shell
============================================================
*/

.studio-topbar {
  position: sticky;
  z-index: 900;
  top: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  min-height: var(--studio-topbar-height);

  padding: 0 32px;

  border-bottom: 1px solid var(--studio-border);

  background: rgba(9, 11, 20, 0.82);
  backdrop-filter: blur(18px);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-mobile-button {
  display: none;

  width: 42px;
  height: 42px;

  border: 1px solid var(--studio-border);
  border-radius: 11px;

  color: var(--studio-text);
  background: var(--studio-surface-soft);

  font-size: 1.2rem;
}

.topbar-title {
  margin: 0;

  font-size: 1rem;
  font-weight: 800;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 11px;
}

.topbar-user__avatar {
  display: grid;

  width: 40px;
  height: 40px;

  border-radius: 12px;

  color: white;
  background: linear-gradient(
    135deg,
    var(--studio-primary-dark),
    var(--studio-primary-light)
  );

  font-size: 0.82rem;
  font-weight: 850;

  place-items: center;
}

.topbar-user__info {
  min-width: 0;
}

.topbar-user__name,
.topbar-user__role {
  display: block;
}

.topbar-user__name {
  max-width: 220px;
  overflow: hidden;

  font-size: 0.85rem;
  font-weight: 750;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-user__role {
  color: var(--studio-text-muted);

  font-size: 0.7rem;
}

.topbar-logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 40px;

  padding: 8px 13px;

  border: 1px solid var(--studio-border);
  border-radius: 10px;

  color: var(--studio-text-muted);
  background: var(--studio-surface-soft);

  transition:
    color var(--studio-transition),
    background var(--studio-transition);
}

.topbar-logout-button:hover {
  color: white;
  background: var(--studio-surface-hover);
}