/* ---------------------------------------------------------------------------
 * circ_milan dashboard chrome.
 *
 * Hover and focus states cannot live in a Dash style dict, so the buttons carry
 * className="nav-btn" alongside their inline style and get their interactive
 * states here.
 * ------------------------------------------------------------------------- */

.nav-btn {
  font-family: inherit;
}

.nav-btn:hover {
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
  color: #1D4ED8 !important;
}

.nav-btn:active {
  transform: translateY(1px);
}

.nav-btn:focus-visible {
  outline: 2px solid #1E40AF;
  outline-offset: 2px;
}

/* The nav bar is sticky at top 0, so a fragment link would otherwise land its
 * heading underneath the bar. scroll-margin-top pushes the scroll stop down by
 * the bar's height plus a little breathing room. */
.anchor {
  scroll-margin-top: 90px;
}

/* Buttons rendered as <a> have no cursor by default. */
a.nav-btn {
  cursor: pointer;
}

/* Dash renders dropdown menus inside the panel. The sticky nav sits at
 * z-index 900, so give open menus a higher one and they stay clickable no
 * matter where the panel is on screen. */
.Select-menu-outer,
.VirtualizedSelectFocusedOption,
div[class*="MenuList"],
div[class*="menu"] {
  z-index: 1100 !important;
}