/* nxus_topnav.css — styling for the shared role-aware cross-screen bar
   (nxus_topnav.js). Scoped to .nxus-topnav so it never touches a page's own
   within-page .view-tabs. Reuses the dark design tokens with safe fallbacks so the
   bar looks identical whether or not the host page defines .view-tab styling. */

.view-tabs.nxus-topnav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  /* Take the leftover header width and scroll horizontally when the role has more
     screens than fit — never wrap into a second row (which collapsed the header for
     admin/supervisor/group lead). */
  flex: 1 1 0%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
}
.view-tabs.nxus-topnav::-webkit-scrollbar { display: none; }

.view-tabs.nxus-topnav .view-tab {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 6px;
  font-family: var(--font, 'Outfit', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-dim, #8b93a7);
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
  white-space: nowrap;
  user-select: none;
}

.view-tabs.nxus-topnav .view-tab:hover {
  color: var(--text-mid, #c4ccdb);
  background: var(--surface3, rgba(255, 255, 255, 0.06));
}

.view-tabs.nxus-topnav .view-tab.active {
  color: var(--blue, #4d8ef7);
  background: rgba(77, 142, 247, 0.1);
  border-color: rgba(77, 142, 247, 0.2);
  cursor: default;
}

/* Phones: the mobile hamburger (nxus_mobile_nav.js) takes over, so hide the bar —
   matches how nxus_mobile.css already hides bespoke .view-tabs. */
@media (max-width: 640px) {
  .view-tabs.nxus-topnav { display: none; }
}