@import url("./buttons.9779f836212c.css");
@import url("./forms.27a74c0eec6e.css");
@import url("./modals.6c099cb37edf.css");
@import url("./data-display.cffdea39d7c1.css");
@import url("./states.c61119ffdc26.css");
@import url("./selections.325f2d42e6ee.css");

.topbar {
  z-index: var(--z-topbar) !important;
  isolation: isolate;
}

.topbar .icon-btn,
.topbar .avatar-btn {
  min-width: var(--control-height);
  min-height: var(--control-height);
  border-radius: var(--radius-round);
}

.topbar .icon-btn svg,
.topbar .avatar-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 2;
}

.topbar .icon-btn:disabled,
.topbar .avatar-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.topbar .icon-btn.is-active,
.topbar .icon-btn[aria-expanded="true"] {
  border-color: var(--color-topbar-control-active-border);
  background: var(--color-topbar-control-active-bg);
  color: var(--color-topbar-control-active-text);
}

.topbar-menu-panel {
  z-index: var(--z-dropdown) !important;
}

.topbar-menu-panel:focus-within {
  outline: none;
}

/* Dark navigation keeps the hierarchy on dark surfaces. Active ancestors
   receive a restrained tint; only the current destination gets the stronger
   accent treatment. */
html[data-theme="dark"] #topbar-menu-panel.topbar-menu-panel {
  border-color: var(--color-border) !important;
  background: var(--color-surface) !important;
  color: var(--color-text);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42) !important;
  scrollbar-color: var(--color-border) transparent;
}

html[data-theme="dark"] #topbar-menu-panel .app-sidebar__search-input {
  border-color: var(--color-border);
  background: var(--color-page);
  color: var(--color-text);
  box-shadow: none;
}

html[data-theme="dark"] #topbar-menu-panel .app-sidebar__search-input::placeholder,
html[data-theme="dark"] #topbar-menu-panel .app-sidebar__search-icon {
  color: var(--color-text-secondary);
}

html[data-theme="dark"] #topbar-menu-panel .app-sidebar__search-input:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-focus) 20%, transparent);
}

html[data-theme="dark"] #topbar-menu-panel .app-sidebar__favorites {
  border-bottom-color: var(--color-border);
}

html[data-theme="dark"] #topbar-menu-panel .app-sidebar__favorites-toggle {
  border-color: var(--color-border);
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

html[data-theme="dark"] #topbar-menu-panel .app-sidebar__favorites-toggle:hover {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
  background: var(--color-secondary-hover);
}

html[data-theme="dark"] #topbar-menu-panel :is(.app-sidebar__favorites-title, .app-sidebar__favorites-empty) {
  color: var(--color-text-secondary);
}

html[data-theme="dark"] #topbar-menu-panel .menu-node__link {
  color: var(--color-text-secondary);
}

html[data-theme="dark"] #topbar-menu-panel .menu-node__link:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

html[data-theme="dark"] #topbar-menu-panel .menu-node--root-folder > .menu-node__row > .menu-node__link .menu-node__text,
html[data-theme="dark"] #topbar-menu-panel .menu-node--root-folder > .menu-node__row > .menu-node__link--static .menu-node__text {
  color: var(--color-primary-hover);
}

html[data-theme="dark"] #topbar-menu-panel .menu-node--sub-folder > .menu-node__row > .menu-node__link .menu-node__text,
html[data-theme="dark"] #topbar-menu-panel .menu-node--sub-folder > .menu-node__row > .menu-node__link--static .menu-node__text {
  color: var(--color-text);
}

html[data-theme="dark"] #topbar-menu-panel .menu-node--app > .menu-node__row > .menu-node__link .menu-node__text {
  color: var(--color-text-secondary);
}

html[data-theme="dark"] #topbar-menu-panel .menu-node.is-active-path > .menu-node__row > .menu-node__link,
html[data-theme="dark"] #topbar-menu-panel .menu-node__link.is-active-path {
  background: color-mix(in srgb, var(--color-primary) 11%, var(--color-surface));
  color: var(--color-text);
  box-shadow: none;
}

html[data-theme="dark"] #topbar-menu-panel .menu-node.is-current > .menu-node__row > .menu-node__link,
html[data-theme="dark"] #topbar-menu-panel .menu-node__link.is-current,
html[data-theme="dark"] #topbar-menu-panel .app-sidebar__favorite-link.is-current {
  background: color-mix(in srgb, var(--color-primary) 26%, var(--color-surface));
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

html[data-theme="dark"] #topbar-menu-panel .menu-node.is-current > .menu-node__row > .menu-node__link .menu-node__text,
html[data-theme="dark"] #topbar-menu-panel .menu-node__link.is-current .menu-node__text,
html[data-theme="dark"] #topbar-menu-panel .menu-node--app.is-active-path > .menu-node__row > .menu-node__link .menu-node__text,
html[data-theme="dark"] #topbar-menu-panel .menu-node--app > .menu-node__row > .menu-node__link.is-active-path .menu-node__text {
  color: var(--color-text);
}

html[data-theme="dark"] #topbar-menu-panel :is(.menu-node__toggle, .menu-node__app-dot, .app-sidebar__favorite-dot) {
  color: var(--color-disabled);
}

html[data-theme="dark"] #topbar-menu-panel .menu-node.is-active-path > .menu-node__row > .menu-node__toggle,
html[data-theme="dark"] #topbar-menu-panel .menu-node.is-current > .menu-node__row > .menu-node__link .menu-node__app-dot,
html[data-theme="dark"] #topbar-menu-panel .menu-node__link.is-current .menu-node__app-dot {
  color: var(--color-primary);
}

@media (max-width: 40rem) {
  .topbar {
    gap: var(--space-2);
    padding-inline: var(--space-3);
  }

  .topbar-actions { gap: var(--space-1); }

  .topbar .icon-btn,
  .topbar .avatar-btn {
    min-width: var(--control-height-touch);
    min-height: var(--control-height-touch);
  }

  .topbar-menu-panel {
    width: 100vw;
    max-width: 100vw;
  }
}