/* The black bar, shared by the dashboard and the management view.
   js/turbine-common.js renders the markup; this dresses it. Any page that calls
   renderNavbar() must load this file and give .page a definition (max width + gutter). */
body { padding-top: 56px; }

/* The bar sets its own size. Left to inherit it followed each page's density --
   16px on the dashboard, 14px on /mgmt, because mgmt.css puts font-size: 14px on body --
   so the same bar read differently depending on where you were. rem is relative to the
   root, not to body, so this is 16px on both whatever a page does to itself. */
.wl-navbar { background: var(--wl-text); padding: 0; min-height: 52px; font-size: 1rem; }
.wl-navbar .page { display: flex; align-items: center; flex-wrap: wrap; min-height: 52px; }
.wl-navbar .nav-link { padding: 14px 14px; }
.wl-navbar .navbar-brand { padding: 12px 0; margin-right: 22px; font-size: 17px; }
/* the brand is quieter than the menus, as it was: it is a label, not a control */
.wl-navbar .navbar-brand { color: rgba(255, 255, 255, .55); }
.wl-navbar .nav-link { color: var(--wl-surface); }
.wl-navbar .nav-link:hover, .wl-navbar .nav-link:focus, .wl-navbar .navbar-brand:hover { color: var(--wl-surface); }
/* The two selectors on the left say what you are looking at; the links on the right
   take you somewhere else. The weight is what tells them apart, so it belongs to the
   bar and not to one page -- it used to sit in mgmt.css, which left the same selector
   bold on /mgmt and not bold on the dashboard. */
.wl-navbar #groups_container .nav-link,
.wl-navbar #windmills_container .nav-link { font-weight: 600; }
/* Bootstrap's own .navbar spaces the brand and the toggler apart with
   justify-content: space-between; the bar puts its flex container on .page instead and
   did not carry that over, so the button sat against the title. An auto margin is the
   narrower fix: space-between here would also push the collapsed menu around once it
   wraps onto the second line. Above lg the button is display: none and this does nothing. */
.wl-navbar .navbar-toggler { margin-left: auto; border-color: rgba(255, 255, 255, .3); }
.wl-navbar .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2); }
/* .page belongs to the page, and inside the bar it is a flex item of Bootstrap's
   .navbar. Two things follow. Its vertical padding (24px on /mgmt) would make the bar
   twice as tall. And a flex item is shrink-to-fit: mgmt.css declares only a max-width,
   so without width:100% the bar's contents huddle in the middle instead of spanning the
   same 880px as the cards underneath. */
.wl-navbar .page { width: 100%; padding-top: 0; padding-bottom: 0; }
.scrollable-menu { max-height: 400px; overflow-y: auto; }