/* Topbar owns the right-side preference controls.
   Keep this file as the single control point for the top session/theme row. */
.app-topbar {
  --shell-topbar-row-bg: transparent;
  --shell-topbar-row-border: transparent;
  --shell-topbar-row-shadow: none;
  --shell-topbar-switcher-bg: transparent;
  --shell-topbar-switcher-border: transparent;

  box-sizing: border-box;
  max-width: var(--shell-page-max-width);
  width: 100%;
  margin: var(--shell-topbar-gutter, 18px) auto 0 0;
  padding-inline: var(--shell-page-gutter);
  border: 1px solid var(--shell-topbar-row-border) !important;
  background: var(--shell-topbar-row-bg) !important;
  box-shadow: var(--shell-topbar-row-shadow) !important;
}

.app-topbar-actions {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  gap: 10px;
}

.app-topbar .preference-switcher {
  border-radius: 0 !important;
  border-color: var(--shell-topbar-switcher-border) !important;
  background: var(--shell-topbar-switcher-bg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.app-topbar .preference-button {
  border-radius: 0 !important;
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

body.theme-shell .app-topbar {
  border-color: transparent !important;
  margin-right: auto;
}

body.theme-shell .app-topbar .preference-button.active {
  background: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
}

@media (max-width: 860px) {
  .app-topbar {
    width: 100%;
    max-width: 100%;
    margin: 12px auto 0 0;
    padding-inline: 18px;
  }
}