/* The "..." action-menu primitive -- a borderless icon trigger plus a
   positioned menu, opened/closed by property-menu.js's press-select
   gesture (same module driving Status/Duration/Assignee) via
   data-property-menu-trigger. Reuses base.css's
   .dropdown-item/.dropdown-label/.dropdown-divider for menu contents,
   same as base.html's user menu. See GitHub issue #175 (component) and
   #207 (press-select gesture). */

.more-menu-wrapper {
  position: relative;
  flex-shrink: 0;
}

.more-btn {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-circle);
  cursor: pointer;
}

.more-btn:hover {
  background: var(--border);
  color: var(--text);
}

.more-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* position: fixed + explicit top/left set by positionFixedMenu (dropdown.js)
   at open time, computed from the trigger button's own bounding rect.
   property-menu.js promotes the open menu to the browser top layer (or a
   body portal on older browsers), which is what actually escapes ancestor
   stacking and overflow boundaries such as .properties-primary.
   See GitHub issue #207. */
.more-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-overlay);
  box-shadow: var(--shadow-overlay);
  min-width: 140px;
  z-index: 10;
  overflow: hidden;
  padding: 0.25rem 0;
}

/* For destructive menu items (Delete, Retire, ...) -- pairs with the
   shared .dropdown-item base from base.css. */
.dropdown-item--danger {
  color: var(--danger);
}

.dropdown-item--danger:hover,
.dropdown-item--danger.armed {
  background: var(--danger-tint);
}