/* ══════════════════════════════════════════════════════════════════════
   STAFF NAV — the /sysadmin topbar's own primary navigation
   ══════════════════════════════════════════════════════════════════════

   Split out because `.nt-topbar-sysadmin .nt-navlink` (notarium.css §21)
   used to recolour `.nt-navlink` — a class the CUSTOMER chrome also defines
   and styles (navbar.css) — by descendant selector. Two different products'
   navigation were coupled through one shared class name. Below is the staff
   bar's own vocabulary (`.nt-staffnav*`); it never touches `.nt-navlink` and
   nothing outside `.nt-topbar-sysadmin` should ever reach for these classes.

   `.nt-dropdown` and the `.nt-menu` family (notarium.css §19) ARE reused
   as-is — those are a generic overlay component, not customer chrome, so
   there is no coupling to cut there.

   LOAD ORDER: `stylesheet_link_tag :app` (app/views/shared/_head.html.erb)
   emits every app/assets/stylesheets/*.css file in ALPHABETICAL order.
   "sysadmin_nav" sorts after "notarium" (and after "navbar", "onboarding"),
   so this file loads LAST among them and wins any same-specificity tie
   against notarium.css or navbar.css. Deliberate, not incidental — but since
   every selector below is scoped to classes this file alone defines, no tie
   actually needs breaking; the ordering just has to not fight itself. */

.nt-staffnav {
  display: none;
  align-items: center;
  gap: 0.15rem;
  margin-left: var(--nt-space-2);
}

/* 48rem rather than the customer navbar's 64rem: grouping cut the bar from
   eleven links to at most five (Overblik + four dropdown triggers), and
   "Overblik / Drift / Data / Kunder / System" is short enough to fit a
   narrower viewport without wrapping or crowding the wordmark and the
   logout button either side of it. */
@media (min-width: 48rem) {
  .nt-staffnav { display: flex; }
}

.nt-staffnav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border: 0;
  border-radius: var(--nt-radius-sm);
  background: transparent;
  color: color-mix(in srgb, var(--nt-staff-bar-text) 68%, transparent);
  font-family: var(--nt-font-body);
  font-size: var(--nt-text-base);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--nt-duration-fast) var(--nt-ease), color var(--nt-duration-fast) var(--nt-ease);
}

.nt-staffnav-link:hover,
.nt-staffnav-link[aria-expanded="true"] {
  background: color-mix(in srgb, var(--nt-staff-bar-text) 12%, transparent);
  color: var(--nt-staff-bar-text);
}

/* Two different "this is where you are" signals share one look: a plain
   link's aria-current="page" (Overblik, or a group collapsed to one item),
   and a dropdown trigger's .is-active (a group containing the active page —
   the trigger itself has no href to be "current" about). */
.nt-staffnav-link[aria-current="page"],
.nt-staffnav-link.is-active {
  color: var(--nt-staff-bar-text);
  background: color-mix(in srgb, var(--nt-staff-bar-text) 14%, transparent);
  font-weight: 600;
}

.nt-staffnav-chevron { transition: transform var(--nt-duration) var(--nt-ease); flex: none; }
[aria-expanded="true"] > .nt-staffnav-chevron { transform: rotate(180deg); }