/* Top bar (ui.md §2.6): white with a 1px border below, like the back office's header. Below 64em it spans
   the width with the menu toggle, the brand and the user menu; from 64em it sits
   in the content column (the brand moves to the top of the side navigation) and
   holds the user menu at the end. */

.sv-topbar {
  position: sticky;
  top: 0;
  z-index: var(--sv-z-topbar);
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-height: var(--sv-topbar-height);
  padding-inline: var(--sv-space-2) var(--sv-space-3);
  border-bottom: 1px solid var(--sv-color-border);
  background: var(--sv-color-topbar);
  color: var(--sv-color-on-topbar);
}
@media (min-width: 48em) {
  .sv-topbar { padding-inline-end: var(--sv-space-6); }
}
@media (min-width: 64em) {
  .sv-topbar { padding-inline-start: var(--sv-space-6); }
}
@media (min-width: 80em) {
  .sv-topbar { padding-inline: var(--sv-space-8); }
}

.sv-topbar__toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--sv-radius-md);
  background: transparent;
  color: inherit;
}
.sv-topbar__toggle:hover { background: var(--sv-color-topbar-hover); }
.sv-topbar__toggle .sv-icon { width: 1.5rem; height: 1.5rem; }
.sv-topbar__toggle .sv-topbar__toggle-close { display: none; }
.sv-topbar__toggle[aria-expanded="true"] .sv-topbar__toggle-open { display: none; }
.sv-topbar__toggle[aria-expanded="true"] .sv-topbar__toggle-close { display: inline-block; }
@media (min-width: 64em) {
  .sv-topbar__toggle { display: none; }
}

/* Brand: logo and app name (top bar below 64em, side navigation from 64em). */
.sv-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-width: 0;
  min-height: 2.75rem;
  padding-inline: var(--sv-space-1);
  border-radius: var(--sv-radius-md);
  color: var(--sv-color-text);
  font-size: var(--sv-text-md);
  font-weight: var(--sv-weight-medium);
  line-height: var(--sv-leading-normal);
  text-decoration: none;
  white-space: nowrap;
}
.sv-brand:hover { text-decoration: none; }
.sv-brand__logo {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
}
.sv-brand__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 64em) {
  .sv-topbar__brand { display: none; }
}

.sv-topbar__end {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  margin-inline-start: auto;
  min-width: 0;
}
.sv-topbar__end .sv-region { display: contents; }