/* ---------------------------------------------------------------------------
   mm-nav — the top bar every matrixmgmt.xyz dashboard shares.

   Canonical copy lives in workspace/shared/mm-nav/. It is duplicated into each
   project rather than imported, for the same reason _sso.js is: the dashboards
   deploy separately and share no package or build step. Edit here, then run
   shared/mm-nav/sync.sh to push it out.

   The class names are the staff portal's, which had the most developed bar of
   the five. Adopting its vocabulary rather than inventing a prefixed one means
   the portal's permission-sensitive nav needed no markup changes to join.

   The farm keeps its own inline copy inside farm-gateway/nav.js, because that
   bar is injected into third-party HTML on the way out and cannot load a
   stylesheet the normal way. Its palette is kept in step with this file.
--------------------------------------------------------------------------- */

.nav {
  background: linear-gradient(180deg, #181e26 0%, #161b22 100%);
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-height: 50px;
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #e6edf3;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 4px 14px rgba(1, 4, 9, .35);
  -webkit-font-smoothing: antialiased;
}

/* Items read as soft pills: a tinted background on hover and on the current
   tab, in place of the old 2px underline. Same items, same order. */
.nav a,
.nav button {
  color: #8b949e;
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.3;
  padding: 6px 10px;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.nav a:visited { color: #8b949e; }
.nav a:hover,
.nav button:hover { color: #e6edf3; background: rgba(177, 186, 196, .1); text-decoration: none; }
.nav a.active { color: #58a6ff; background: rgba(56, 139, 253, .14); font-weight: 600; }
.nav a:focus-visible,
.nav button:focus-visible { outline: 2px solid #388bfd; outline-offset: 1px; }

/* The brand doubles as the menu button for the dashboard switcher, so it opts
   out of the dimmed link colour every other item gets. */
.nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: -.01em;
  margin-right: 10px;
  padding: 6px 8px;
  white-space: nowrap;
  color: #e6edf3;
}
.nav a.brand { color: #e6edf3; }
.nav a.brand:visited { color: #e6edf3; }
.nav .brand .domain { color: #58a6ff; font-weight: 500; }
/* Reset fully: the staff portal has its own .caret (the shift-table expander)
   with padding and borders that otherwise leak in and wrap the arrow. */
.nav a.brand .caret {
  display: inline-block;
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  width: auto;
  color: #8b949e;
  font-size: .72rem;
  font-weight: 400;
  line-height: 1;
  transform: none;
  transition: color .15s, transform .15s;
}
.nav a.brand:hover .caret,
.nav a.brand[aria-expanded="true"] .caret { color: #58a6ff; }
.nav a.brand[aria-expanded="true"] .caret { transform: rotate(180deg); }

.nav .spacer { flex: 1; }
.nav .who {
  color: #8b949e;
  font-size: .8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 26ch;
  padding: 0 8px;
}
.nav form { display: inline; margin: 0; }

.navdrop { position: relative; display: inline-block; }
.dropmenu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  background: #1c2128;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 6px;
  min-width: 180px;
  z-index: 40;
  box-shadow: 0 12px 32px rgba(1, 4, 9, .65), 0 0 0 1px rgba(1, 4, 9, .4);
}
.nav .dropmenu a,
.dropmenu a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  white-space: nowrap;
  background: none;
}
.nav .dropmenu a:hover,
.dropmenu a:hover { background: rgba(177, 186, 196, .12); color: #e6edf3; }
.dropmenu a.active { background: rgba(56, 139, 253, .14); }
.dropmenu.sites { min-width: 200px; }
.dropmenu.sites a.current { color: #58a6ff; font-weight: 600; }
.dropmenu.sites .tick { float: right; margin-left: 12px; }
.dropmenu[hidden] { display: none; }

@media (max-width: 560px) {
  .nav { gap: 2px; padding: 7px 8px; }
  .nav a, .nav button { padding: 6px 8px; white-space: nowrap; }
  .nav .brand { margin-right: 4px; }
  .nav .who { display: none; }
}