/* The console's top navigation (`components.build_pages_navbar`) and the plain bar above plugin
   pages (`build_plugin_navbar`), the inline icons (`components.build_icon`) and the Terminal
   page's toolbar. Dark by default, like the rest of the console. */

/* Icons: an inline SVG used as a mask, painted in the text color, so no font is needed. */
.mrsm-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask: var(--mrsm-icon) center / contain no-repeat;
  mask: var(--mrsm-icon) center / contain no-repeat;
}
.mrsm-icon-refresh {
  --mrsm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.35-5.65'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E");
}
.mrsm-icon-fullscreen {
  --mrsm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'/%3E%3C/svg%3E");
}
.mrsm-icon-fullscreen-exit {
  --mrsm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v5H4M20 9h-5V4M15 20v-5h5M4 15h5v5'/%3E%3C/svg%3E");
}
.mrsm-icon-user {
  --mrsm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}
.mrsm-icon-plus {
  --mrsm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.mrsm-icon-terminal {
  --mrsm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17l6-5-6-5M12 19h8'/%3E%3C/svg%3E");
}
.mrsm-icon-check {
  --mrsm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.mrsm-icon-lock {
  --mrsm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
.mrsm-icon-trash {
  --mrsm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E");
}
.mrsm-icon-arrow-up {
  --mrsm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E");
}
.mrsm-icon-copy {
  --mrsm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3'/%3E%3C/svg%3E");
}
.mrsm-icon-folder {
  --mrsm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2.5h8.5A1.5 1.5 0 0 1 21 9v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z'/%3E%3C/svg%3E");
}
.mrsm-icon-folder-open {
  --mrsm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18.5V6.5A1.5 1.5 0 0 1 4.5 5H9l2 2.5h7A1.5 1.5 0 0 1 19.5 9v1.5'/%3E%3Cpath d='M3 18.5l2.6-7A1.5 1.5 0 0 1 7 10.5h13.2a1 1 0 0 1 .95 1.3l-2.3 7a1.5 1.5 0 0 1-1.42 1.2H4.5A1.5 1.5 0 0 1 3 18.5z'/%3E%3C/svg%3E");
}
.mrsm-icon-python {
  --mrsm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M11.9 2C8.6 2 8.8 3.4 8.8 3.4V6h3.2v.8H7.5S4 6.4 4 11.9s3.1 5.4 3.1 5.4H9v-2.6s-.1-3.1 3-3.1h5.2s2.9 0 2.9-2.8V4.9S20.5 2 11.9 2zM10.3 3.6a.95.95 0 1 1 0 1.9.95.95 0 0 1 0-1.9z'/%3E%3Cpath d='M12.1 22c3.3 0 3.1-1.4 3.1-1.4V18H12v-.8h4.5s3.5.4 3.5-5.1-3.1-5.4-3.1-5.4H15v2.6s.1 3.1-3 3.1H6.8s-2.9 0-2.9 2.8v3.9S3.5 22 12.1 22zm1.6-1.6a.95.95 0 1 1 0-1.9.95.95 0 0 1 0 1.9z'/%3E%3C/svg%3E");
}
.mrsm-icon-rust {
  --mrsm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Ccircle cx='12' cy='12' r='7.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 1.8v2.4M12 19.8v2.4M1.8 12h2.4M19.8 12h2.4M4.8 4.8l1.7 1.7M17.5 17.5l1.7 1.7M4.8 19.2l1.7-1.7M17.5 6.5l1.7-1.7' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M9.2 16.2V7.8h3.6a2.3 2.3 0 0 1 0 4.6H9.2M12.4 12.4l2.6 3.8' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.mrsm-icon-x {
  --mrsm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

/* The bar. */
.console-nav-root {
  z-index: 1030;
}
.console-nav.navbar {
  padding: 0;
  min-height: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.console-nav-container.container-fluid {
  padding-left: 12px;
  padding-right: 12px;
  flex-wrap: wrap;
}
.console-nav-brand.navbar-brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  margin-right: 12px;
}
.console-nav-logo {
  width: 36px;
  height: 36px;
}
.console-nav .navbar-toggler {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border-color: rgba(255, 255, 255, 0.2);
}
.console-nav .navbar-collapse {
  align-items: stretch;
}
.console-nav-links.navbar-nav {
  flex-wrap: nowrap;
}
.console-nav .console-nav-link.nav-link,
.console-nav .console-nav-link.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}
.console-nav .console-nav-link.nav-link:hover,
.console-nav .console-nav-link.nav-link:focus-visible,
.console-nav .console-nav-link.dropdown-toggle:hover {
  color: #fff;
}
.console-nav .console-nav-link.nav-link.active,
.console-nav .console-nav-link.dropdown-toggle.active {
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--bs-warning);
}
.console-nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.console-nav-instance .instance-select {
  margin-top: 0;
  min-width: 10rem;
  max-width: 16rem;
  min-height: 36px;
}
.console-nav-username {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.console-nav .dropdown-menu {
  min-width: 12rem;
}
.console-nav .dropdown-item {
  display: flex;
  align-items: center;
  min-height: 40px;
}
.console-nav .dropdown-item.active {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.console-nav-sign-out.btn-link {
  min-height: 44px;
  text-decoration: none;
}

/* Wide screens: one row, kept at the top while the page scrolls. */
@media (min-width: 1200px) {
  .console-nav-root {
    position: sticky;
    top: 0;
  }
  .console-nav-container.container-fluid {
    flex-wrap: nowrap;
  }
  .console-nav .navbar-collapse {
    min-height: 56px;
  }
  .console-nav-links.navbar-nav .console-nav-link.nav-link,
  .console-nav-links.navbar-nav .console-nav-link.dropdown-toggle,
  .console-nav-user-nav .console-nav-link.nav-link,
  .console-nav-user-nav .console-nav-link.dropdown-toggle {
    min-height: 56px;
  }
}

/* Narrow screens: the links stack behind the toggler, each a full-width 44px row. */
@media (max-width: 1199.98px) {
  /* Keep the brand and toggler in a fixed first row while Collapse animates below it. */
  .console-nav-container.container-fluid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .console-nav-brand.navbar-brand {
    min-height: 56px;
    grid-column: 1;
    grid-row: 1;
  }
  .console-nav .navbar-toggler {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin: 6px 0;
  }
  .console-nav .navbar-collapse {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    flex-basis: 100%;
  }
  .console-nav-links.navbar-nav {
    padding: 4px 0;
  }
  .console-nav .console-nav-link.nav-link.active,
  .console-nav .console-nav-link.dropdown-toggle.active {
    box-shadow: inset 3px 0 0 var(--bs-warning);
  }
  .console-nav-right {
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0 12px;
    margin-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .console-nav-instance .instance-select {
    max-width: none;
    width: 100%;
    min-height: 44px;
  }
  .console-nav-right .navbar-nav,
  .console-nav-right .nav-item {
    width: 100%;
  }
}

/* The Terminal page's toolbar: icon buttons, the fullscreen icon follows its column. */
#webterm-controls-div .btn {
  min-width: 36px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#webterm-fullscreen-button .webterm-icon-exit {
  display: none;
}
#content-col-right[data-fullscreen="1"] #webterm-fullscreen-button .webterm-icon-enter {
  display: none;
}
#content-col-right[data-fullscreen="1"] #webterm-fullscreen-button .webterm-icon-exit {
  display: inline-block;
}
#tokens-refresh-button,
#pipelines-refresh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
}