/* Let the dashboard page tab bar wrap onto as many rows as needed
   instead of scrolling horizontally in a single row (#33383).

   The navbar stays position:fixed (removing that would make flexdashboard's
   default vertical_layout:fill -- which sizes #dashboard-container to a plain
   height:100% -- overflow past the viewport by however tall the header grew,
   since it no longer accounts for a variable, wrapped header height). Instead
   the header is left fixed but allowed to grow, and dashboard-tabs-wrap-fragment.html
   (included alongside this CSS -- see MarkdownPreprocessor#_getDashboardFooterFilePaths)
   measures its live rendered height and adjusts body's padding-top to match,
   on load and on resize. */
.navbar-inverse,
.navbar-collapse.collapse {
  height: auto;
  min-height: 35px;
}
.navbar-inverse ul.navbar-nav {
  white-space: normal;
  overflow: visible;
  height: auto;
}

/* #39712: a divider between the rows of a wrapped tab bar, in the colour of the navbar's own bottom border (the last
   row has that border already: the footer marks only the tabs above it). The active tab of an upper row gets it too, so
   it does not look joined to the row below. li is already position:relative (Bootstrap .nav > li). */
.navbar-inverse ul.navbar-nav > li.exp-wrap-tab-upper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: #d7d7d7;
  pointer-events: none;
}
/* the active tab is 35px tall in a 34px row (and pulled 1px down, below): its line stays on the row boundary */
.navbar-inverse ul.navbar-nav > li.active.exp-wrap-tab-upper::after {
  bottom: 1px;
}

/* #39712: the white active tab covers the navbar's bottom border (dashboard-preview-edit.css: it is 35px tall in a 34px
   row). A wrapped bar is as tall as its rows, so the border sits below the LAST row and the tab no longer reaches it:
   pull the tab 1px into it. */
body.exp-pe-mode-edit.exp-pe-enabled:not(.exp-page-tabs-side) .navbar-inverse ul.navbar-nav > li.active {
  margin-bottom: -1px;
}
