/* Keep the workspace header coherent when navigation and profile are wide. */
@media (min-width: 761px) {
  #app .shell .topbar {
    flex-wrap: nowrap;
  }
}

@media (min-width: 761px) and (max-width: 1190px) {
  #app .shell .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 138px 82px minmax(225px, 250px);
    grid-template-areas:
      "brand presence controls profile"
      "tabs tabs tabs search";
    align-items: center;
    gap: 10px 8px;
    padding: 12px 18px;
  }

  #app .topbar .brand { grid-area: brand; min-width: 0; }
  #app .topbar .presence-control { grid-area: presence; }
  #app .topbar .workspace-nav-controls { grid-area: controls; }
  #app .topbar .tabs {
    grid-area: tabs;
    order: initial;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
  }
  #app .topbar .header-search {
    grid-area: search;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
  }
  #app .topbar .user-menu {
    grid-area: profile;
    justify-self: end;
    min-width: 0;
    margin: 0;
  }
}

@media (min-width: 1191px) {
  #app .shell .topbar { flex-wrap: nowrap; }
  #app .topbar .brand { flex: 0 1 auto; }
  #app .topbar .tabs { flex: 1 1 220px; min-width: 220px; }
  #app .topbar .header-search { flex: 0 1 200px; min-width: 130px; }
  #app .topbar .user-menu { flex: 0 1 auto; min-width: 0; }
  #app .topbar .profile-button,
  #app .topbar .user-copy { min-width: 0; }
  #app .topbar .user-copy { max-width: 165px; }
  #app .topbar .user-copy b,
  #app .topbar .user-copy small {
    display: block;
    max-width: 165px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}